diff --git a/client/landing/stepper/constants.ts b/client/landing/stepper/constants.ts index 8a732d4eb39c82..d79f161c521cca 100644 --- a/client/landing/stepper/constants.ts +++ b/client/landing/stepper/constants.ts @@ -27,6 +27,7 @@ export const STEPPER_TRACKS_EVENT_STEP_NAV_GO_TO = 'calypso_signup_step_nav_go_t export const STEPPER_TRACKS_EVENT_STEP_NAV_EXIT_FLOW = 'calypso_signup_step_nav_exit_flow'; export const STEPPER_TRACKS_EVENT_STEP_COMPLETE = 'calypso_signup_actions_complete_step'; export const STEPPER_TRACKS_EVENT_SIGNUP_START = 'calypso_signup_start'; +export const STEPPER_TRACKS_EVENT_SIGNUP_STEP_START = 'calypso_signup_step_start'; export const STEPPER_TRACKS_EVENTS_STEP_NAV = < const >[ STEPPER_TRACKS_EVENT_STEP_NAV_SUBMIT, @@ -40,4 +41,5 @@ export const STEPPER_TRACKS_EVENTS = < const >[ ...STEPPER_TRACKS_EVENTS_STEP_NAV, STEPPER_TRACKS_EVENT_STEP_COMPLETE, STEPPER_TRACKS_EVENT_SIGNUP_START, + STEPPER_TRACKS_EVENT_SIGNUP_STEP_START, ]; diff --git a/client/landing/stepper/declarative-flow/internals/analytics/record-step-start.ts b/client/landing/stepper/declarative-flow/internals/analytics/record-step-start.ts index 47194a2dae186a..7a5ef30c929bca 100644 --- a/client/landing/stepper/declarative-flow/internals/analytics/record-step-start.ts +++ b/client/landing/stepper/declarative-flow/internals/analytics/record-step-start.ts @@ -1,4 +1,5 @@ import { resolveDeviceTypeByViewPort } from '@automattic/viewport'; +import { STEPPER_TRACKS_EVENT_SIGNUP_STEP_START } from 'calypso/landing/stepper/constants'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; const recordStepStart = ( @@ -6,7 +7,7 @@ const recordStepStart = ( step: string, optionalProps?: { [ key: string ]: unknown } ) => { - recordTracksEvent( 'calypso_signup_step_start', { + recordTracksEvent( STEPPER_TRACKS_EVENT_SIGNUP_STEP_START, { flow, step, device: resolveDeviceTypeByViewPort(), diff --git a/client/landing/stepper/declarative-flow/internals/components/step-route/hooks/use-step-route-tracking/index.tsx b/client/landing/stepper/declarative-flow/internals/components/step-route/hooks/use-step-route-tracking/index.tsx index de6df5e2fd78e5..404af6ddab2ed1 100644 --- a/client/landing/stepper/declarative-flow/internals/components/step-route/hooks/use-step-route-tracking/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/components/step-route/hooks/use-step-route-tracking/index.tsx @@ -2,6 +2,7 @@ import { isAnyHostingFlow } from '@automattic/onboarding'; import { useEffect, useRef } from '@wordpress/element'; +import { STEPPER_TRACKS_EVENT_SIGNUP_STEP_START } from 'calypso/landing/stepper/constants'; import { getStepOldSlug } from 'calypso/landing/stepper/declarative-flow/helpers/get-step-old-slug'; import { getAssemblerSource } from 'calypso/landing/stepper/declarative-flow/internals/analytics/record-design'; import recordStepComplete, { @@ -12,6 +13,7 @@ import { useIntent } from 'calypso/landing/stepper/hooks/use-intent'; import { useSelectedDesign } from 'calypso/landing/stepper/hooks/use-selected-design'; import { useSiteData } from 'calypso/landing/stepper/hooks/use-site-data'; import kebabCase from 'calypso/landing/stepper/utils/kebabCase'; +import useSnakeCasedKeys from 'calypso/landing/stepper/utils/use-snake-cased-keys'; import { recordPageView } from 'calypso/lib/analytics/page-view'; import { getSignupCompleteFlowNameAndClear, @@ -19,6 +21,7 @@ import { } from 'calypso/signup/storageUtils'; import { useSelector } from 'calypso/state'; import { isRequestingSite } from 'calypso/state/sites/selectors'; +import type { Flow } from 'calypso/landing/stepper/declarative-flow/internals/types'; /** * We wait for the site to be fetched before tracking the step route when a site ID/slug are defined in the params. @@ -35,26 +38,25 @@ const useHasRequestedSelectedSite = () => { }; interface Props { - flowName: string; + flow: Flow; stepSlug: string; - flowVariantSlug?: string; skipStepRender?: boolean; } /** * Hook to track the step route in the declarative flow. */ -export const useStepRouteTracking = ( { - flowName, - stepSlug, - flowVariantSlug, - skipStepRender, -}: Props ) => { +export const useStepRouteTracking = ( { flow, stepSlug, skipStepRender }: Props ) => { const intent = useIntent(); const design = useSelectedDesign(); const hasRequestedSelectedSite = useHasRequestedSelectedSite(); const stepCompleteEventPropsRef = useRef< RecordStepCompleteProps | null >( null ); const pathname = window.location.pathname; + const flowVariantSlug = flow.variantSlug; + const flowName = flow.name; + const signupStepStartProps = useSnakeCasedKeys( { + input: flow.useTracksEventProps?.()?.[ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ], + } ); /** * Cleanup effect to record step-complete event when `StepRoute` unmounts. @@ -89,6 +91,7 @@ export const useStepRouteTracking = ( { ...( design && { assembler_source: getAssemblerSource( design ) } ), ...( flowVariantSlug && { flow_variant: flowVariantSlug } ), ...( skipStepRender && { skip_step_render: skipStepRender } ), + ...signupStepStartProps, } ); // Apply the props to record in the exit/step-complete event. We only record this if start event gets recorded. @@ -99,7 +102,6 @@ export const useStepRouteTracking = ( { }; const stepOldSlug = getStepOldSlug( stepSlug ); - if ( stepOldSlug ) { recordStepStart( flowName, kebabCase( stepOldSlug ), { intent, @@ -107,6 +109,7 @@ export const useStepRouteTracking = ( { ...( design && { assembler_source: getAssemblerSource( design ) } ), ...( flowVariantSlug && { flow_variant: flowVariantSlug } ), ...( skipStepRender && { skip_step_render: skipStepRender } ), + ...signupStepStartProps, } ); } } diff --git a/client/landing/stepper/declarative-flow/internals/components/step-route/index.tsx b/client/landing/stepper/declarative-flow/internals/components/step-route/index.tsx index 38f8302d9b651c..c4280906c226ce 100644 --- a/client/landing/stepper/declarative-flow/internals/components/step-route/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/components/step-route/index.tsx @@ -29,9 +29,8 @@ const StepRoute = ( { step, flow, showWooLogo, renderStep, navigate }: StepRoute const useBuiltItInAuth = flow.__experimentalUseBuiltinAuth; useStepRouteTracking( { - flowName: flow.name, + flow, stepSlug: step.slug, - flowVariantSlug: flow.variantSlug, skipStepRender: shouldSkipRender, } );