From 331c0a3889792176ec870e2b73e570e8dc18335d Mon Sep 17 00:00:00 2001 From: NikitK-deriv <103182473+NikitK-deriv@users.noreply.github.com> Date: Thu, 11 Jan 2024 14:43:57 +0300 Subject: [PATCH] [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 | 1 - .../components/_signup-form.tsx | 4 +- .../components/_signup-status.tsx | 3 +- .../signup-affiliates/components/_wizard.tsx | 6 --- .../wizard-component/wizard-footer.tsx | 6 +-- src/pages/signup-affiliates/index.tsx | 37 ++++++++++++------- .../signup-affiliates/utils/_tracking.ts | 19 ---------- src/pages/signup-affiliates/utils/_utils.tsx | 23 +++++++++++- 8 files changed, 52 insertions(+), 47 deletions(-) delete mode 100644 src/pages/signup-affiliates/utils/_tracking.ts diff --git a/gatsby-browser.js b/gatsby-browser.js index 7ff89b5ab1e..ade2704fc22 100644 --- a/gatsby-browser.js +++ b/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, diff --git a/src/pages/signup-affiliates/components/_signup-form.tsx b/src/pages/signup-affiliates/components/_signup-form.tsx index 8b765c08f96..6877d24f5ab 100644 --- a/src/pages/signup-affiliates/components/_signup-form.tsx +++ b/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; 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)} diff --git a/src/pages/signup-affiliates/components/_signup-status.tsx b/src/pages/signup-affiliates/components/_signup-status.tsx index 39a0f8c5e4e..9f193ad23fb 100644 --- a/src/pages/signup-affiliates/components/_signup-status.tsx +++ b/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]) diff --git a/src/pages/signup-affiliates/components/_wizard.tsx b/src/pages/signup-affiliates/components/_wizard.tsx index 91325bf09c7..0b5f7cbdb63 100644 --- a/src/pages/signup-affiliates/components/_wizard.tsx +++ b/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) => ({ diff --git a/src/pages/signup-affiliates/components/wizard-component/wizard-footer.tsx b/src/pages/signup-affiliates/components/wizard-component/wizard-footer.tsx index bc16403d8ed..6d46d718351 100644 --- a/src/pages/signup-affiliates/components/wizard-component/wizard-footer.tsx +++ b/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,7 +64,7 @@ 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({ @@ -72,7 +72,7 @@ const WizardFooter = ({ step_num: step, step_codename: getCodeName(step), }) - step < max_step && setStep(step + 1) + step < max_step && setStep((prev) => prev + 1) } }, [max_step, setStep, step], diff --git a/src/pages/signup-affiliates/index.tsx b/src/pages/signup-affiliates/index.tsx index be9bbc89422..25dbd6f2700 100644 --- a/src/pages/signup-affiliates/index.tsx +++ b/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({ diff --git a/src/pages/signup-affiliates/utils/_tracking.ts b/src/pages/signup-affiliates/utils/_tracking.ts deleted file mode 100644 index f93b86c1c71..00000000000 --- a/src/pages/signup-affiliates/utils/_tracking.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Analytics, TEvents } from '@deriv/analytics' - -const trackEvent = ({ - action, - partner_signup_error_message, - user_choice, - step_num, - step_codename, -}: TEvents['ce_partner_account_signup_form']) => { - Analytics?.trackEvent('ce_partner_account_signup_form', { - action, - partner_signup_error_message, - user_choice, - step_num, - step_codename, - form_name: 'ce_partner_account_signup_form', - }) -} -export default trackEvent diff --git a/src/pages/signup-affiliates/utils/_utils.tsx b/src/pages/signup-affiliates/utils/_utils.tsx index dc6d497cabd..5d1e516f2ba 100644 --- a/src/pages/signup-affiliates/utils/_utils.tsx +++ b/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 }), + }) +}