diff --git a/package.json b/package.json index 31388500..8cefcde5 100644 --- a/package.json +++ b/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", diff --git a/src/components/groupImpactComponents/GroupGoalNotification.js b/src/components/groupImpactComponents/GroupGoalNotification.js index e76c27bf..4365bbb0 100644 --- a/src/components/groupImpactComponents/GroupGoalNotification.js +++ b/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 (
@@ -104,7 +120,10 @@ const GroupGoalNotification = ({
) : ( - ) diff --git a/src/components/groupImpactComponents/GroupImpactSidebar.js b/src/components/groupImpactComponents/GroupImpactSidebar.js index 283034a3..b50502f1 100644 --- a/src/components/groupImpactComponents/GroupImpactSidebar.js +++ b/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) diff --git a/src/components/groupImpactComponents/__tests__/GroupGoalNotification.test.js b/src/components/groupImpactComponents/__tests__/GroupGoalNotification.test.js index f0fefb96..1eea9280 100644 --- a/src/components/groupImpactComponents/__tests__/GroupGoalNotification.test.js +++ b/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() 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, + }) }) }) diff --git a/src/components/groupImpactComponents/__tests__/GroupImpactSidebar.test.js b/src/components/groupImpactComponents/__tests__/GroupImpactSidebar.test.js index 507d42f6..b5498375 100644 --- a/src/components/groupImpactComponents/__tests__/GroupImpactSidebar.test.js +++ b/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,6 +114,9 @@ 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', { @@ -120,6 +124,9 @@ describe.skip('GroupImpactSidebar component', () => { }) expect(wrapper.find(Slide).prop('in')).toEqual(true) + expect(gtag).toHaveBeenCalledWith('event', 'group_impact_sidebar', { + interaction: 'close', + }) expect(mockProps.openHandler).toHaveBeenCalledTimes(2) }) diff --git a/yarn.lock b/yarn.lock index 47ab9181..e51a0053 100644 --- a/yarn.lock +++ b/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"