feat: add multi step registration eventing (#1226)

* feat: implement multi step registration experiment

* feat: add multi step registration eventing

src/common-components/SocialAuthProviders.jsx

@@ -9,14 +9,24 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import { CONTROL, MULTI_STEP_REGISTRATION_EXP_VARIATION } from '../register/data/optimizelyExperiment/helper';
+import { trackMultiStepRegistrationSSOBtnClicked } from '../register/data/optimizelyExperiment/track';
 
 const SocialAuthProviders = (props) => {
   const { formatMessage } = useIntl();
-  const { referrer, socialAuthProviders } = props;
+  const {
+    referrer,
+    socialAuthProviders,
+    multiStepRegistrationExpVariation,
+  } = props;
 
   function handleSubmit(e) {
     e.preventDefault();
 
+    if (multiStepRegistrationExpVariation === CONTROL
+        || multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION) {
+      trackMultiStepRegistrationSSOBtnClicked(multiStepRegistrationExpVariation);
+    }
     const url = e.currentTarget.dataset.providerUrl;
     window.location.href = getConfig().LMS_BASE_URL + url;
   }
@@ -60,6 +70,7 @@ const SocialAuthProviders = (props) => {
 SocialAuthProviders.defaultProps = {
   referrer: LOGIN_PAGE,
   socialAuthProviders: [],
+  multiStepRegistrationExpVariation: '',
 };
 
 SocialAuthProviders.propTypes = {
@@ -73,6 +84,7 @@ SocialAuthProviders.propTypes = {
     registerUrl: PropTypes.string,
     skipRegistrationForm: PropTypes.bool,
   })),
+  multiStepRegistrationExpVariation: PropTypes.string,
 };
 
 export default SocialAuthProviders;

src/common-components/ThirdPartyAuth.jsx

@@ -32,6 +32,7 @@ const ThirdPartyAuth = (props) => {
     handleInstitutionLogin,
     thirdPartyAuthApiStatus,
     isLoginPage,
+    multiStepRegistrationExpVariation,
   } = props;
   const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
   const isSocialAuthActive = !!providers.length && !currentProvider;
@@ -79,6 +80,7 @@ const ThirdPartyAuth = (props) => {
               <SocialAuthProviders
                 socialAuthProviders={providers}
                 referrer={isLoginPage ? LOGIN_PAGE : REGISTER_PAGE}
+                multiStepRegistrationExpVariation={multiStepRegistrationExpVariation}
               />
             </div>
           )}
@@ -94,6 +96,7 @@ ThirdPartyAuth.defaultProps = {
   secondaryProviders: [],
   thirdPartyAuthApiStatus: PENDING_STATE,
   isLoginPage: false,
+  multiStepRegistrationExpVariation: '',
 };
 
 ThirdPartyAuth.propTypes = {
@@ -121,6 +124,7 @@ ThirdPartyAuth.propTypes = {
   ),
   thirdPartyAuthApiStatus: PropTypes.string,
   isLoginPage: PropTypes.bool,
+  multiStepRegistrationExpVariation: PropTypes.string,
 };
 
 export default ThirdPartyAuth;

src/register/data/optimizelyExperiment/track.js

@@ -0,0 +1,56 @@
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+export const eventNames = {
+  multiStepRegistrationStep1Viewed: 'edx.bi.user.multistepregistration.step1.viewed',
+  multiStepRegistrationStep2Viewed: 'edx.bi.user.multistepregistration.step2.viewed',
+  multiStepRegistrationStep3Viewed: 'edx.bi.user.multistepregistration.step3.viewed',
+  multiStepRegistrationStep1SubmitBtnClicked: 'edx.bi.user.registration.step1.submit.click',
+  multiStepRegistrationStep2SubmitBtnClicked: 'edx.bi.user.registration.step2.submit.click',
+  multiStepRegistrationStep3SubmitBtnClicked: 'edx.bi.user.registration.step3.submit.click',
+  multiStepRegistrationFormSubmitBtnClicked: 'edx.bi.user.registration.form.submit.click',
+  multiStepRegistrationSSOBtnClicked: 'edx.bi.user.registration.sso.btn.click',
+};
+
+export const trackMultiStepRegistrationStep1Viewed = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep1Viewed, {
+    variation: expVariation,
+  });
+};
+
+export const trackMultiStepRegistrationStep2Viewed = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep2Viewed, {
+    variation: expVariation,
+  });
+};
+
+export const trackMultiStepRegistrationStep3Viewed = () => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep3Viewed, {});
+};
+
+export const trackMultiStepRegistrationStep1SubmitBtnClicked = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep1SubmitBtnClicked, {
+    variation: expVariation,
+  });
+};
+
+export const trackMultiStepRegistrationStep2SubmitBtnClicked = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep2SubmitBtnClicked, {
+    variation: expVariation,
+  });
+};
+
+export const trackMultiStepRegistrationStep3SubmitBtnClicked = () => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep3SubmitBtnClicked, {});
+};
+
+export const trackMultiStepRegistrationFormSubmitBtnClicked = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationFormSubmitBtnClicked, {
+    variation: expVariation,
+  });
+};
+
+export const trackMultiStepRegistrationSSOBtnClicked = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationSSOBtnClicked, {
+    variation: expVariation,
+  });
+};

src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx

@@ -5,6 +5,7 @@ import {
   getMultiStepRegistrationExperimentVariation,
   NOT_INITIALIZED,
 } from './helper';
+import { trackMultiStepRegistrationStep1Viewed } from './track';
 import { COMPLETE_STATE } from '../../../data/constants';
 
 /**
@@ -30,6 +31,7 @@ const useMultiStepRegistrationExperimentVariation = (
       const expVariation = getMultiStepRegistrationExperimentVariation();
       if (expVariation) {
         setVariation(expVariation);
+        trackMultiStepRegistrationStep1Viewed(expVariation);
       } else {
         // This is to handle the case when user dont get variation for some reason, the register page
         // shows unlimited spinner.