feat: added app name identifier in segment events (#1277)

* feat: added app name identifier in registration call

* feat: added utils for tracking events

* refactor: mapped login events

* refactor: mapped forgot password events

* refactor: mapped reset password events

* refactor: mapped register events

* fix: fixed unit tests

* refactor: mapped progressive prifiling events

* fix: fixed unit tests

* refactor: added app name in logistration events

* refactor: resolved PR reviews and fixed tests

Author: abdullahwaheed

src/data/constants.js

@@ -37,3 +37,4 @@ export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+
 // things like auto-enrollment upon login and registration.
 export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta'];
 export const REDIRECT = 'redirect';
+export const APP_NAME = 'authn_mfe';

src/data/segment/utils.js

@@ -0,0 +1,37 @@
+/* eslint-disable import/prefer-default-export */
+import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+import { APP_NAME } from '../constants';
+
+export const LINK_TIMEOUT = 300;
+
+/**
+ * Creates an event tracker function that sends a tracking event with the given name and options.
+ *
+ * @param {string} name - The name of the event to be tracked.
+ * @param {object} [options={}] - Additional options to be included with the event.
+ * @returns {function} - A function that, when called, sends the tracking event.
+ */
+export const createEventTracker = (name, options = {}) => () => sendTrackEvent(
+  name,
+  { ...options, app_name: APP_NAME },
+);
+
+/**
+ * Creates an event tracker function that sends a tracking event with the given name and options.
+ *
+ * @param {string} name - The name of the event to be tracked.
+ * @param {object} [options={}] - Additional options to be included with the event.
+ * @returns {function} - A function that, when called, sends the tracking event.
+ */
+export const createPageEventTracker = (name, options = null) => () => sendPageEvent(
+  name,
+  options,
+  { app_name: APP_NAME },
+);
+
+export const createLinkTracker = (tracker, href) => (e) => {
+  e.preventDefault();
+  tracker();
+  return setTimeout(() => { window.location.href = href; }, LINK_TIMEOUT);
+};

src/forgot-password/ForgotPasswordPage.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
-import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form,
@@ -25,6 +24,10 @@ import BaseContainer from '../base-container';
 import { FormGroup } from '../common-components';
 import { DEFAULT_STATE, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';
 import { updatePathWithQueryParams, windowScrollTo } from '../data/utils';
+import {
+  trackForgotPasswordPageEvent,
+  trackForgotPasswordPageViewed,
+} from '../tracking/trackers/forgotpassword';
 
 const ForgotPasswordPage = (props) => {
   const platformName = getConfig().SITE_NAME;
@@ -41,8 +44,8 @@ const ForgotPasswordPage = (props) => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    sendPageEvent('login_and_registration', 'forgot-password');
-    sendTrackEvent('edx.bi.password_reset_form.viewed', { category: 'user-engagement' });
+    trackForgotPasswordPageEvent();
+    trackForgotPasswordPageViewed();
   }, []);
 
   useEffect(() => {

src/login/LoginPage.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { connect } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
-import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form, StatefulButton,
@@ -43,6 +42,9 @@ import {
   updatePathWithQueryParams,
 } from '../data/utils';
 import ResetPasswordSuccess from '../reset-password/ResetPasswordSuccess';
+import {
+  trackForgotPasswordLinkClick, trackLoginPageViewed, trackLoginSuccess,
+} from '../tracking/trackers/login';
 
 const LoginPage = (props) => {
   const {
@@ -78,9 +80,15 @@ const LoginPage = (props) => {
   const tpaHint = getTpaHint();
 
   useEffect(() => {
-    sendPageEvent('login_and_registration', 'login');
+    trackLoginPageViewed();
   }, []);
 
+  useEffect(() => {
+    if (loginResult.success) {
+      trackLoginSuccess();
+    }
+  }, [loginResult]);
+
   useEffect(() => {
     const payload = { ...queryParams };
     if (tpaHint) {
@@ -170,9 +178,6 @@ const LoginPage = (props) => {
     const { name } = event.target;
     setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
   };
-  const trackForgotPasswordLinkClick = () => {
-    sendTrackEvent('edx.bi.password-reset_form.toggled', { category: 'user-engagement' });
-  };
 
   const { provider, skipHintedLogin } = getTpaProvider(tpaHint, providers, secondaryProviders);
 

src/login/tests/LoginPage.test.jsx

@@ -11,7 +11,9 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
-import { COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE } from '../../data/constants';
+import {
+  APP_NAME, COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE,
+} from '../../data/constants';
 import { backupLoginFormBegin, dismissPasswordResetBanner, loginRequest } from '../data/actions';
 import { INTERNAL_SERVER_ERROR } from '../data/constants';
 import LoginPage from '../LoginPage';
@@ -751,7 +753,7 @@ describe('LoginPage', () => {
 
   it('should send page event when login page is rendered', () => {
     render(reduxWrapper(<IntlLoginPage {...props} />));
-    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login');
+    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login', { app_name: APP_NAME });
   });
 
   it('tests that form is in invalid state when it is submitted', () => {
@@ -784,7 +786,7 @@ describe('LoginPage', () => {
       { selector: '#forgot-password' },
     ));
 
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.password-reset_form.toggled', { category: 'user-engagement' });
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.password-reset_form.toggled', { category: 'user-engagement', app_name: APP_NAME });
   });
 
   it('should backup the login form state when shouldBackupState is true', () => {

src/logistration/Logistration.jsx

@@ -20,7 +20,7 @@ import {
   tpaProvidersSelector,
 } from '../common-components/data/selectors';
 import messages from '../common-components/messages';
-import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
+import { APP_NAME, LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
 import {
   getTpaHint, getTpaProvider, updatePathWithQueryParams,
 } from '../data/utils';
@@ -56,11 +56,11 @@ const Logistration = (props) => {
   }, [navigate, disablePublicAccountCreation]);
 
   const handleInstitutionLogin = (e) => {
-    sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
+    sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement', app_name: APP_NAME });
     if (typeof e === 'string') {
-      sendPageEvent('login_and_registration', e === '/login' ? 'login' : 'register');
+      sendPageEvent('login_and_registration', e === '/login' ? 'login' : 'register', { app_name: APP_NAME });
     } else {
-      sendPageEvent('login_and_registration', e.target.dataset.eventName);
+      sendPageEvent('login_and_registration', e.target.dataset.eventName, { app_name: APP_NAME });
     }
 
     setInstitutionLogin(!institutionLogin);
@@ -70,7 +70,7 @@ const Logistration = (props) => {
     if (tabKey === currentTab) {
       return;
     }
-    sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement' });
+    sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement', app_name: APP_NAME });
     props.clearThirdPartyAuthContextErrorMessage();
     if (tabKey === LOGIN_PAGE) {
       props.backupRegistrationForm();

src/logistration/Logistration.test.jsx

@@ -11,6 +11,7 @@ import configureStore from 'redux-mock-store';
 import Logistration from './Logistration';
 import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions';
 import {
+  APP_NAME,
   COMPLETE_STATE, LOGIN_PAGE, REGISTER_PAGE,
 } from '../data/constants';
 import { backupLoginForm } from '../login/data/actions';
@@ -229,8 +230,8 @@ describe('Logistration', () => {
     render(reduxWrapper(<IntlLogistration {...props} />));
     fireEvent.click(screen.getByText('Institution/campus credentials'));
 
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
-    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'institution_login');
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement', app_name: APP_NAME });
+    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'institution_login', { app_name: APP_NAME });
 
     mergeConfig({
       DISABLE_ENTERPRISE_LOGIN: '',

src/progressive-profiling/ProgressiveProfiling.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 
 import { getConfig, snakeCaseObject } from '@edx/frontend-platform';
-import { identifyAuthenticatedUser, sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { identifyAuthenticatedUser } from '@edx/frontend-platform/analytics';
 import {
   AxiosJwtAuthService,
   configure as configureAuth,
@@ -39,6 +39,13 @@ import {
 import isOneTrustFunctionalCookieEnabled from '../data/oneTrust';
 import { getAllPossibleQueryParams, isHostAvailableInQueryParams } from '../data/utils';
 import { FormFieldRenderer } from '../field-renderer';
+import {
+  trackDisablePostRegistrationRecommendations,
+  trackProgressiveProfilingPageViewed,
+  trackProgressiveProfilingSkipLinkClick,
+  trackProgressiveProfilingSubmitClick,
+  trackProgressiveProfilingSupportLinkCLick,
+} from '../tracking/trackers/progressive-profiling';
 
 const ProgressiveProfiling = (props) => {
   const { formatMessage } = useIntl();
@@ -98,14 +105,13 @@ const ProgressiveProfiling = (props) => {
   useEffect(() => {
     if (authenticatedUser?.userId) {
       identifyAuthenticatedUser(authenticatedUser.userId);
-      sendPageEvent('login_and_registration', 'welcome');
+      trackProgressiveProfilingPageViewed();
     }
   }, [authenticatedUser]);
 
   useEffect(() => {
     if (!enablePostRegistrationRecommendations) {
-      sendTrackEvent(
-        'edx.bi.user.recommendations.not.enabled',
+      trackDisablePostRegistrationRecommendations(
         { functionalCookiesConsent, page: 'authn_recommendations' },
       );
       return;
@@ -149,29 +155,23 @@ const ProgressiveProfiling = (props) => {
       });
     }
     props.saveUserProfile(authenticatedUser.username, snakeCaseObject(payload));
-
-    sendTrackEvent(
-      'edx.bi.welcome.page.submit.clicked',
-      {
-        isGenderSelected: !!values.gender,
-        isYearOfBirthSelected: !!values.year_of_birth,
-        isLevelOfEducationSelected: !!values.level_of_education,
-        isWorkExperienceSelected: !!values.work_experience,
-        host: queryParams?.host || '',
-      },
-    );
+    const eventProperties = {
+      isGenderSelected: !!values.gender,
+      isYearOfBirthSelected: !!values.year_of_birth,
+      isLevelOfEducationSelected: !!values.level_of_education,
+      isWorkExperienceSelected: !!values.work_experience,
+      host: queryParams?.host || '',
+    };
+    trackProgressiveProfilingSubmitClick(eventProperties);
   };
 
   const handleSkip = (e) => {
     e.preventDefault();
     window.history.replaceState(location.state, null, '');
     setShowModal(true);
-    sendTrackEvent(
-      'edx.bi.welcome.page.skip.link.clicked',
-      {
-        host: queryParams?.host || '',
-      },
-    );
+    trackProgressiveProfilingSkipLinkClick({
+      host: queryParams?.host || '',
+    });
   };
 
   const onChangeHandler = (e) => {
@@ -242,7 +242,7 @@ const ProgressiveProfiling = (props) => {
                     destination={getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK}
                     target="_blank"
                     showLaunchIcon={false}
-                    onClick={() => (sendTrackEvent('edx.bi.welcome.page.support.link.clicked'))}
+                    onClick={() => (trackProgressiveProfilingSupportLinkCLick())}
                   >
                     {formatMessage(messages['optional.fields.information.link'])}
                   </Hyperlink>

src/progressive-profiling/tests/ProgressiveProfiling.test.jsx

@@ -12,6 +12,7 @@ import { MemoryRouter, mockNavigate, useLocation } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
 import {
+  APP_NAME,
   AUTHN_PROGRESSIVE_PROFILING,
   COMPLETE_STATE, DEFAULT_REDIRECT_URL,
   EMBEDDED,
@@ -143,8 +144,9 @@ describe('ProgressiveProfilingTests', () => {
     const modalContentContainer = document.getElementsByClassName('.pgn__modal-content-container');
 
     expect(modalContentContainer).toBeTruthy();
+    const payload = { host: '', app_name: APP_NAME };
 
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host: '' });
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', payload);
   });
 
   // ******** test event functionality ********
@@ -165,7 +167,7 @@ describe('ProgressiveProfilingTests', () => {
     const supportLink = screen.getByRole('link', { name: /learn more about how we use this information/i });
     fireEvent.click(supportLink);
 
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.support.link.clicked');
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.support.link.clicked', { app_name: APP_NAME });
   });
 
   it('should set empty host property value for non-embedded experience', () => {
@@ -175,6 +177,7 @@ describe('ProgressiveProfilingTests', () => {
       isLevelOfEducationSelected: false,
       isWorkExperienceSelected: false,
       host: '',
+      app_name: APP_NAME,
     };
     delete window.location;
     window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) };
@@ -316,7 +319,7 @@ describe('ProgressiveProfilingTests', () => {
       const skipLinkButton = screen.getByText('Skip for now');
       fireEvent.click(skipLinkButton);
 
-      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host });
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host, app_name: APP_NAME });
     });
 
     it('should show spinner while fetching the optional fields', () => {
@@ -349,6 +352,7 @@ describe('ProgressiveProfilingTests', () => {
         isLevelOfEducationSelected: false,
         isWorkExperienceSelected: false,
         host: 'http://example.com',
+        app_name: APP_NAME,
       };
       delete window.location;
       window.location = {

src/register/RegistrationPage.jsx

@@ -4,7 +4,6 @@ import React, {
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
-import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Form, Spinner, StatefulButton } from '@openedx/paragon';
 import classNames from 'classnames';
@@ -44,11 +43,12 @@ import { getThirdPartyAuthContext as getRegistrationDataFromBackend } from '../c
 import EnterpriseSSO from '../common-components/EnterpriseSSO';
 import ThirdPartyAuth from '../common-components/ThirdPartyAuth';
 import {
-  COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
+  APP_NAME, COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
 } from '../data/constants';
 import {
   getAllPossibleQueryParams, getTpaHint, getTpaProvider, isHostAvailableInQueryParams, setCookie,
 } from '../data/utils';
+import { trackRegistrationPageViewed, trackRegistrationSuccess } from '../tracking/trackers/register';
 
 /**
  * Main Registration Page component
@@ -138,7 +138,7 @@ const RegistrationPage = (props) => {
 
   useEffect(() => {
     if (!formStartTime) {
-      sendPageEvent('login_and_registration', 'register');
+      trackRegistrationPageViewed();
       const payload = { ...queryParams, is_register_page: true };
       if (tpaHint) {
         payload.tpa_hint = tpaHint;
@@ -183,7 +183,7 @@ const RegistrationPage = (props) => {
   useEffect(() => {
     if (registrationResult.success) {
       // This event is used by GTM
-      sendTrackEvent('edx.bi.user.account.registered.client', {});
+      trackRegistrationSuccess();
 
       // This is used by the "User Retention Rate Event" on GTM
       setCookie(getConfig().USER_RETENTION_COOKIE_NAME, true);
@@ -222,7 +222,7 @@ const RegistrationPage = (props) => {
 
   const registerUser = () => {
     const totalRegistrationTime = (Date.now() - formStartTime) / 1000;
-    let payload = { ...formFields };
+    let payload = { ...formFields, app_name: APP_NAME };
 
     if (currentProvider) {
       delete payload.password;