[CRO] NikitK/CRO-380/tracking issues for partners signup (#6363)

* fix: tracking issues

* feat: ask before leave the page

* chore: remove unecessary returnValue

* fix: improve of tracking

* refactor: move tracking fn to utils, prevent tracking system bugs

* fix: stepper bug

* chore: remove console log

* fix: update tracking system with new requirements

gatsby-browser.js

@@ -105,7 +105,6 @@ export const onClientEntry = () => {
         device_language: navigator?.language || ' ',
         device_type: isMobile ? 'mobile' : 'desktop',
     })
-    Analytics?.identifyEvent()
     //datadog
     const dd_options = {
         clientToken: process.env.GATSBY_DATADOG_CLIENT_TOKEN,

src/pages/signup-affiliates/components/_signup-form.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import affiliate_validation from '../validations/_affilaite_validation'
 import AffiliateInput from '../utils/_affiliate-input'
 import { SignUpFormProps } from '../_types'
+import { trackEvent } from '../utils/_utils'
 import { localize, Localize } from 'components/localization'
 import { Container } from 'components/containers'
 import { Button } from 'components/form'
@@ -88,6 +89,7 @@ export const SignUpWrapper = styled(Container)`
         padding: 0;
     }
 `
+const email = localize('_t_Email_t_')
 let language = getLanguage()
 language = language !== 'en' ? '/' + language : ''
 
@@ -97,7 +99,6 @@ const AffiliateSignupForm = ({
     setShowWizard,
 }: SignUpFormProps) => {
     const [email_error_msg, setEmailErrorMsg] = useState('')
-    const email = localize('_t_Email_t_')
 
     const handleStateChange = useCallback(
         ({ e, field }: { e?: React.ChangeEvent<HTMLInputElement>; field: string }) => {
@@ -172,6 +173,7 @@ const AffiliateSignupForm = ({
                     secondary
                     onClick={() => {
                         window.scrollTo(0, 0)
+                        trackEvent({ action: 'open_wizard', email: affiliate_account.email })
                         setShowWizard(true)
                     }}
                     disabled={!(affiliate_account.email && !email_error_msg)}

src/pages/signup-affiliates/components/_signup-status.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import affiliate_validation from '../validations/_affilaite_validation'
 import AffiliateInput from '../utils/_affiliate-input'
 import { SignUpStatusProps } from '../_types'
-import trackEvent from '../utils/_tracking'
+import { trackEvent } from '../utils/_utils'
 import Image from 'features/components/atoms/image'
 import { localize, Localize } from 'components/localization'
 import { useIsRtl } from 'components/hooks/use-isrtl'
@@ -140,7 +140,6 @@ const AffiliateSignupStatus = ({
     }, [])
 
     const handleTryAgain = useCallback(() => {
-        trackEvent({ action: 'try_submit' })
         setSignupStatus('loading')
         onSubmit()
     }, [signup_status])

src/pages/signup-affiliates/components/_wizard.tsx

@@ -7,7 +7,6 @@ import {
     AccountType,
 } from '../_lazy-loading'
 import { AffiliateAccountTypes, WizardProps } from '../_types'
-import trackEvent from '../utils/_tracking'
 import WizardComponent from './wizard-component'
 import { useResidenceList } from 'features/hooks/use-residence-list'
 
@@ -26,11 +25,6 @@ const Wizard = ({
 
     const is_individual = affiliate_account?.account_type == 1
 
-    useEffect(() => {
-        show_wizard && trackEvent({ action: 'open_wizard' })
-        return () => trackEvent({ action: 'close_wizard' })
-    }, [show_wizard])
-
     useEffect(() => {
         if (is_individual) {
             setAffiliateAccount((prev) => ({

src/pages/signup-affiliates/components/wizard-component/wizard-footer.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import Button from 'components/form/button'
 import { Localize } from 'components/localization'
 import { WizardComponentTypes } from 'pages/signup-affiliates/_types'
-import trackEvent from 'pages/signup-affiliates/utils/_tracking'
+import { trackEvent } from 'pages/signup-affiliates/utils/_utils'
 import device from 'themes/device'
 
 const StyledFooter = styled.div`
@@ -64,15 +64,15 @@ const WizardFooter = ({
                     step_num: step,
                     step_codename: getCodeName(step),
                 })
-                step > 1 && setStep(step - 1)
+                step > 1 && setStep((prev) => prev - 1)
             }
             if (button_type === ButtonType.Next) {
                 trackEvent({
                     action: 'step_passed',
                     step_num: step,
                     step_codename: getCodeName(step),
                 })
-                step < max_step && setStep(step + 1)
+                step < max_step && setStep((prev) => prev + 1)
             }
         },
         [max_step, setStep, step],

src/pages/signup-affiliates/index.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
-import trackEvent from './utils/_tracking'
-import { Submit } from './utils/_utils'
+import { Submit, trackEvent } from './utils/_utils'
 import { AffiliateAccountTypes, SignUpStatusTypes } from './_types'
 import { AffiliateSignupForm, AffiliateSignupStatus, Wizard } from './_lazy-loading'
 import { isBrowser } from 'common/utility'
@@ -25,6 +24,10 @@ const ParentWrapper = styled.div`
     background-image: url(${Map});
     background-repeat: no-repeat;
     background-position: bottom;
+
+    @media ${device.tabletL} {
+        background-image: unset;
+    }
 `
 const StyledContainer = styled(Container)`
     display: flex;
@@ -86,7 +89,13 @@ const AffiliateSignup = () => {
 
     useEffect(() => {
         trackEvent({ action: 'open' })
-        return () => trackEvent({ action: 'close' })
+        const handleBeforeUnload = (event) => {
+            event.preventDefault()
+            trackEvent({ action: 'close' })
+            trackEvent({ action: 'close_wizard' })
+        }
+        window.addEventListener('beforeunload', handleBeforeUnload)
+        return () => window.removeEventListener('beforeunload', handleBeforeUnload)
     }, [])
 
     useEffect(() => {
@@ -104,8 +113,16 @@ const AffiliateSignup = () => {
 
     useEffect(() => {
         const partner_signup_error_message = affiliate_api_error?.error.message
-
-        if (partner_signup_error_message == 'Username not available') {
+        if (affiliate_api_data) {
+            trackEvent({
+                action: 'success_popup_opened',
+                user_choice:
+                    JSON.stringify(affiliate_api_error?.echo_req) ||
+                    'success, but without echo_req',
+                success_source: partner_signup_error_message ? 'failed_popup' : 'last_step',
+            })
+            setSignupStatus('success')
+        } else if (partner_signup_error_message == 'Username not available') {
             trackEvent({ action: 'partners_signup_error', partner_signup_error_message })
             setSignupStatus(partner_signup_error_message)
         } else if (
@@ -117,15 +134,7 @@ const AffiliateSignup = () => {
             setSignupStatus('Your website is not a valid entry')
         } else if (partner_signup_error_message)
             trackEvent({ action: 'other_error', partner_signup_error_message })
-
-        if (affiliate_api_data) {
-            trackEvent({
-                action: 'success_popup_opened',
-                user_choice: JSON.stringify(affiliate_api_error?.echo_req),
-            })
-            setSignupStatus('success')
-        }
-    }, [affiliate_api_data, affiliate_api_error, affiliateSend])
+    }, [affiliate_api_data, affiliate_api_error])
 
     useEffect(() => {
         setAffiliateAccount({

src/pages/signup-affiliates/utils/_utils.tsx

@@ -1,4 +1,4 @@
-import { Analytics } from '@deriv/analytics'
+import { Analytics, TEvents } from '@deriv/analytics'
 import { SubmitTypes } from '../_types'
 
 export const customSlugify = (text: string): string => {
@@ -69,3 +69,24 @@ export const Submit = ({
             }),
         })
 }
+
+export const trackEvent = ({
+    action,
+    email,
+    partner_signup_error_message,
+    user_choice,
+    success_source,
+    step_num,
+    step_codename,
+}: TEvents['ce_partner_account_signup_form']) => {
+    Analytics?.trackEvent('ce_partner_account_signup_form', {
+        action,
+        form_name: 'ce_partner_account_signup_form',
+        ...(email && { email }),
+        ...(user_choice && { user_choice }),
+        ...(success_source && { success_source }),
+        ...(step_num && { step_num }),
+        ...(step_codename && { step_codename }),
+        ...(partner_signup_error_message && { partner_signup_error_message }),
+    })
+}