diff --git a/client/landing/stepper/declarative-flow/internals/hooks/use-flow-analytics/index.tsx b/client/landing/stepper/declarative-flow/internals/hooks/use-flow-analytics/index.tsx index f73538803ab8c7..834b6825a9b9c7 100644 --- a/client/landing/stepper/declarative-flow/internals/hooks/use-flow-analytics/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/hooks/use-flow-analytics/index.tsx @@ -7,7 +7,10 @@ export const DURATION = 20 * 60 * 1000; // 20 min interface Params { flow: string | null; variant?: string; - step: string; + step: string | null; +} +interface Options { + enabled: boolean; } interface SessionKeys { @@ -56,7 +59,7 @@ const startSession = ( keys: SessionKeys, extra: Record< string, any > ) => { * Same flow with same parameters will be tracked only once whitin the DURATION time * returns void */ -export const useFlowAnalytics = ( params: Params ) => { +export const useFlowAnalytics = ( params: Params, options: Options = { enabled: true } ) => { const [ search ] = useSearchParams(); const { flow, step, variant } = params; const ref = search.get( 'ref' ); @@ -85,8 +88,8 @@ export const useFlowAnalytics = ( params: Params ) => { ); useEffect( () => { - if ( ! flowStarted && flow ) { + if ( ! flowStarted && flow && step && options.enabled ) { startSession( sessionKeys, extraTrackingParams ); } - }, [ extraTrackingParams, flow, flowStarted, sessionKeys ] ); + }, [ extraTrackingParams, flow, flowStarted, sessionKeys, step, options.enabled ] ); }; diff --git a/client/landing/stepper/declarative-flow/internals/hooks/use-flow-analytics/test/index.tsx b/client/landing/stepper/declarative-flow/internals/hooks/use-flow-analytics/test/index.tsx index 95581dab97ba6d..92b9764b9fffb7 100644 --- a/client/landing/stepper/declarative-flow/internals/hooks/use-flow-analytics/test/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/hooks/use-flow-analytics/test/index.tsx @@ -14,10 +14,13 @@ describe( 'useFlowAnalytics', () => { ( { initialEntries } ) => ( { children } ) => { children }; - const render = ( options = { initialEntries: [ '/setup/flow' ] } ) => { - const Wrapper = buildWrapper( options ); + const render = ( + renderOptions = { initialEntries: [ '/setup/flow' ] }, + hookOptions: Parameters< typeof useFlowAnalytics >[ 1 ] = { enabled: true } + ) => { + const Wrapper = buildWrapper( renderOptions ); return renderHook( - () => useFlowAnalytics( { flow: 'flow', step: 'step', variant: 'variant' } ), + () => useFlowAnalytics( { flow: 'flow', step: 'step', variant: 'variant' }, hookOptions ), { wrapper: Wrapper } ); }; @@ -75,6 +78,12 @@ describe( 'useFlowAnalytics', () => { expect( recordFlowStart ).toHaveBeenCalledTimes( 1 ); } ); + it( 'doesn`t track the flow when the hook is disabled', () => { + render( { initialEntries: [ '/setup/flow' ] }, { enabled: false } ); + + expect( recordFlowStart ).not.toHaveBeenCalled(); + } ); + it( 'tracks the same flow after 20 min', () => { render(); jest.advanceTimersByTime( DURATION + 100 ); diff --git a/client/landing/stepper/declarative-flow/internals/index.tsx b/client/landing/stepper/declarative-flow/internals/index.tsx index c79de6b0fd3e7a..13706537d78daf 100644 --- a/client/landing/stepper/declarative-flow/internals/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/index.tsx @@ -75,10 +75,14 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => { const currentStepRoute = params.step || ''; const isLoggedIn = useSelector( isUserLoggedIn ); const { lang = null } = useParams(); + const isValidStep = params.step != null && stepPaths.includes( params.step ); // Start tracking performance for this step. useStartStepperPerformanceTracking( params.flow || '', currentStepRoute ); - useFlowAnalytics( { flow: params.flow, step: currentStepRoute, variant: flow.variantSlug } ); + useFlowAnalytics( + { flow: params.flow, step: params.step, variant: flow.variantSlug }, + { enabled: isValidStep } + ); const { __ } = useI18n(); useSaveQueryParams();