Merge pull request #432 from gladly-team/jtan/tfac-1015

Adding Google Analytics Tracking to GroupImpact Components

package.json

@@ -44,6 +44,7 @@
     "dotenv-extended": "^2.9.0",
     "firebase": "^8.2.2",
     "firebase-admin": "^9.4.2",
+    "ga-gtag": "^1.1.7",
     "lodash": "^4.17.21",
     "mdi-material-ui": "^5.11.0",
     "moment": "^2.29.4",

src/components/groupImpactComponents/GroupGoalNotification.js

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button'
 import PropTypes from 'prop-types'
 import { Typography } from '@material-ui/core'
 import { ArrowForwardIos } from '@material-ui/icons'
 import { GROUP_IMPACT_SIDEBAR_STATE } from 'src/utils/constants'
+import gtag from 'ga-gtag'
 import Notification from '../Notification'
 
 const useStyles = makeStyles((theme) => ({
@@ -63,12 +64,27 @@ const GroupGoalNotification = ({
   impactTitle,
 }) => {
   const classes = useStyles()
-  const onDetailsHandler = () => {
+  const onDetailsHandler = useCallback(() => {
+    gtag('event', 'group_impact_notification', {
+      interaction: 'details',
+      mode,
+    })
     onDetails()
-  }
-  const onNextGoalHandler = () => {
+  }, [mode, onDetails])
+  const onNextGoalHandler = useCallback(() => {
+    gtag('event', 'group_impact_notification', {
+      interaction: 'next_goal',
+      mode,
+    })
     onNextGoal()
-  }
+  }, [mode, onNextGoal])
+  const onGoalStartedHandler = useCallback(() => {
+    gtag('event', 'group_impact_notification', {
+      interaction: 'goal_started',
+      mode,
+    })
+    onGoalStarted()
+  }, [mode, onGoalStarted])
 
   return (
     <div className={classes.wrapper}>
@@ -104,7 +120,10 @@ const GroupGoalNotification = ({
               </Button>
             </div>
           ) : (
-            <Button onClick={onGoalStarted} className={classes.startedButton}>
+            <Button
+              onClick={onGoalStartedHandler}
+              className={classes.startedButton}
+            >
               <ArrowForwardIos />
             </Button>
           )

src/components/groupImpactComponents/GroupImpactSidebar.js

@@ -17,6 +17,7 @@ import Link from 'src/components/Link'
 import { aboutURL } from 'src/utils/urls'
 import clsx from 'clsx'
 import { GROUP_IMPACT_SIDEBAR_STATE } from 'src/utils/constants'
+import gtag from 'ga-gtag'
 import VerticalLinearProgress from '../VerticalLinearProgress'
 
 const useStyles = makeStyles((theme) => ({
@@ -183,12 +184,24 @@ const GroupImpactSidebar = ({
   }, [groupImpactSidebarState, lastGroupImpactMetric])
 
   const toggleOpen = (e) => {
+    if (isOpen) {
+      gtag('event', 'group_impact_sidebar', {
+        interaction: 'close',
+      })
+    } else {
+      gtag('event', 'group_impact_sidebar', {
+        interaction: 'open',
+      })
+    }
     setIsOpen((prev) => !prev)
     openHandler()
     e.stopPropagation()
   }
 
   const onClickNextGoalButton = (e) => {
+    gtag('event', 'group_impact_sidebar', {
+      interaction: 'next_goal',
+    })
     setDisplaySidebarText(false)
     setTimeout(() => {
       setDisplayingOldGoal(false)

src/components/groupImpactComponents/__tests__/GroupGoalNotification.test.js

@@ -2,8 +2,11 @@ import React from 'react'
 import { mount, shallow } from 'enzyme'
 import { Button, Typography } from '@material-ui/core'
 import { GROUP_IMPACT_SIDEBAR_STATE } from 'src/utils/constants'
+import gtag from 'ga-gtag'
 import Notification from '../../Notification'
 
+jest.mock('ga-gtag')
+
 const getMockProps = () => ({
   mode: GROUP_IMPACT_SIDEBAR_STATE.COMPLETED,
   open: true,
@@ -54,25 +57,32 @@ describe('GroupGoalNotification component', () => {
     )
   })
 
-  it('displays correct buttons and calls correct handlers in completed mode', () => {
+  it('displays correct buttons and calls correct handlers and tracking in completed mode', () => {
     const GroupGoalNotification =
       require('src/components/groupImpactComponents/GroupGoalNotification').default
     const mockProps = getMockProps()
     const wrapper = mount(<GroupGoalNotification {...mockProps} />)
     const detailsButton = wrapper.find(Button).at(0)
     expect(detailsButton.text()).toEqual('Details')
-
     detailsButton.simulate('click')
     expect(mockProps.onDetails).toHaveBeenCalled()
+    expect(gtag).toHaveBeenCalledWith('event', 'group_impact_notification', {
+      interaction: 'details',
+      mode: GROUP_IMPACT_SIDEBAR_STATE.COMPLETED,
+    })
 
     const nextGoalButton = wrapper.find(Button).at(1)
     expect(nextGoalButton.text()).toEqual('Next Goal')
 
     nextGoalButton.simulate('click')
     expect(mockProps.onNextGoal).toHaveBeenCalled()
+    expect(gtag).toHaveBeenCalledWith('event', 'group_impact_notification', {
+      interaction: 'next_goal',
+      mode: GROUP_IMPACT_SIDEBAR_STATE.COMPLETED,
+    })
   })
 
-  it('displays correct button and calls correct handlers in started mode', () => {
+  it('displays correct button and calls correct handlers and tracking in started mode', () => {
     const GroupGoalNotification =
       require('src/components/groupImpactComponents/GroupGoalNotification').default
     const mockProps = {
@@ -84,5 +94,9 @@ describe('GroupGoalNotification component', () => {
 
     expandButton.simulate('click')
     expect(mockProps.onGoalStarted).toHaveBeenCalled()
+    expect(gtag).toHaveBeenCalledWith('event', 'group_impact_notification', {
+      interaction: 'goal_started',
+      mode: GROUP_IMPACT_SIDEBAR_STATE.NEW,
+    })
   })
 })

src/components/groupImpactComponents/__tests__/GroupImpactSidebar.test.js

@@ -5,6 +5,7 @@ import VerticalLinearProgress from 'src/components/VerticalLinearProgress'
 import Box from '@material-ui/core/Box'
 import Slide from '@material-ui/core/Slide'
 import Fade from '@material-ui/core/Fade'
+import gtag from 'ga-gtag'
 
 const getMockProps = () => ({
   groupImpactSidebarState: 'badge-text',
@@ -113,13 +114,19 @@ describe.skip('GroupImpactSidebar component', () => {
     wrapper.update()
 
     expect(wrapper.find(Slide).prop('in')).toEqual(false)
+    expect(gtag).toHaveBeenCalledWith('event', 'group_impact_sidebar', {
+      interaction: 'open',
+    })
 
     const box = wrapper.find(Box).first()
     box.first().simulate('click', {
       stopPropagation: () => {},
     })
 
     expect(wrapper.find(Slide).prop('in')).toEqual(true)
+    expect(gtag).toHaveBeenCalledWith('event', 'group_impact_sidebar', {
+      interaction: 'close',
+    })
     expect(mockProps.openHandler).toHaveBeenCalledTimes(2)
   })
 

yarn.lock

@@ -8790,6 +8790,11 @@ functions-have-names@^1.2.2:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+ga-gtag@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/ga-gtag/-/ga-gtag-1.1.7.tgz#dfaeb77fda9ade34a7b8eb906c0cde8c96f79fb5"
+  integrity sha512-fT/D87hhuNIAmEB2z9mxz88gMFYc1olpX/fETHidZ51sYJ4y6OFch8HZ0DoNWPGFw1BCHB0fqt68dUWvd8kM1Q==
+
 gauge@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-3.0.2.tgz#03bf4441c044383908bcfa0656ad91803259b395"