feat(client): create sign_in and user_data GA events (#54074)

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({

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'
+        });
+      }}
     >
       <span className='login-btn-icon'>
         <FontAwesomeIcon icon={faRightToBracket} />

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;

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 =>

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')}
         </a>