diff --git a/client/src/analytics/call-ga.ts b/client/src/analytics/call-ga.ts index 58c0238809a..c885e03fc2a 100644 --- a/client/src/analytics/call-ga.ts +++ b/client/src/analytics/call-ga.ts @@ -74,6 +74,15 @@ interface ChallengeFailedEvent { challenge_files: ChallengeFiles; } +interface UserData { + event: 'user_data'; + user_id: string; +} + +interface SignIn { + event: 'sign_in'; +} + export type GAevent = | DonationViewEvent | DonationEvent @@ -81,7 +90,9 @@ export type GAevent = | RenderTimeEvent | PageViewEvent | ExperimentViewEvent - | ChallengeFailedEvent; + | ChallengeFailedEvent + | UserData + | SignIn; export default function callGA(payload: GAevent) { TagManager.dataLayer({ diff --git a/client/src/components/Header/components/login.tsx b/client/src/components/Header/components/login.tsx index 1d21af2e30f..9e8bfb0bf62 100644 --- a/client/src/components/Header/components/login.tsx +++ b/client/src/components/Header/components/login.tsx @@ -7,6 +7,7 @@ import { createSelector } from 'reselect'; import envData from '../../../../config/env.json'; import { isSignedInSelector } from '../../../redux/selectors'; +import callGA from '../../../analytics/call-ga'; const { apiLocation, homeLocation } = envData; @@ -36,6 +37,11 @@ const Login = ({ data-test-label={dataTestLabel} data-playwright-test-label='header-sign-in-button' href={href} + onClick={() => { + callGA({ + event: 'sign_in' + }); + }} > diff --git a/client/src/components/growth-book/growth-book-redux-connector.tsx b/client/src/components/growth-book/growth-book-redux-connector.tsx index a7a078cd77d..7c7aabe1c7c 100644 --- a/client/src/components/growth-book/growth-book-redux-connector.tsx +++ b/client/src/components/growth-book/growth-book-redux-connector.tsx @@ -5,16 +5,29 @@ import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { isSignedInSelector, - showMultipleProgressModalsSelector + showMultipleProgressModalsSelector, + userIdSelector, + userFetchStateSelector } from '../../redux/selectors'; import { setShowMultipleProgressModals } from '../../redux/actions'; +import { UserFetchState } from '../../redux/prop-types'; +import callGA from '../../analytics/call-ga'; const mapStateToProps = createSelector( isSignedInSelector, showMultipleProgressModalsSelector, - (isSignedIn, showMultipleProgressModals: boolean) => ({ + userIdSelector, + userFetchStateSelector, + ( + isSignedIn: boolean, + showMultipleProgressModals: boolean, + userId: string, + userFetchState: UserFetchState + ) => ({ isSignedIn, - showMultipleProgressModals + showMultipleProgressModals, + userId, + userFetchState }) ); @@ -33,8 +46,20 @@ const GrowthBookReduxConnector = ({ children, isSignedIn, showMultipleProgressModals, - setShowMultipleProgressModals + userId, + setShowMultipleProgressModals, + userFetchState }: GrowthBookReduxConnector) => { + // Send user id to GA + useEffect(() => { + if (userFetchState.complete && isSignedIn) { + callGA({ + event: 'user_data', + user_id: userId + }); + } + }, [userFetchState, userId, isSignedIn]); + const displayProgressModalMultipleTimes = useFeature( 'display_progress_modal_multiple_times' ).on; diff --git a/client/src/redux/selectors.js b/client/src/redux/selectors.js index 406a738571b..cd4f6745081 100644 --- a/client/src/redux/selectors.js +++ b/client/src/redux/selectors.js @@ -5,6 +5,7 @@ export const savedChallengesSelector = state => userSelector(state).savedChallenges || []; export const completedChallengesSelector = state => userSelector(state).completedChallenges || []; +export const userIdSelector = state => userSelector(state).id; export const partiallyCompletedChallengesSelector = state => userSelector(state).partiallyCompletedChallenges || []; export const currentChallengeIdSelector = state => diff --git a/client/src/templates/Challenges/classic/lower-jaw.tsx b/client/src/templates/Challenges/classic/lower-jaw.tsx index dac2bc2d1f0..58ce7923c9e 100644 --- a/client/src/templates/Challenges/classic/lower-jaw.tsx +++ b/client/src/templates/Challenges/classic/lower-jaw.tsx @@ -20,6 +20,7 @@ import { challengeMetaSelector, completedPercentageSelector } from '../redux/selectors'; +import callGA from '../../../analytics/call-ga'; interface LowerJawPanelProps extends ShareProps { resetButtonText: string; @@ -298,6 +299,11 @@ const LowerJaw = ({ data-cy='sign-in-button' href={`${apiLocation}/signin`} className='btn-cta btn btn-block' + onClick={() => { + callGA({ + event: 'sign_in' + }); + }} > {t('learn.sign-in-save')}