Skip to content

Commit

Permalink
Stepper Tracking: Remove checks that prevent step start tracking (#96742
Browse files Browse the repository at this point in the history 
)

* No more checks

* record - is_reentering_step_after_signup_complete and completed step/flow name

also on step complete

cleanup

* Fix unit tests

---------

Co-authored-by: Christos <chriskmnds@gmail.com>
  • Loading branch information
@escapemanuele @chriskmnds
escapemanuele and chriskmnds authored Nov 27, 2024
1 parent 09ae239 commit 9ae61cd
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 35 deletions.
58 changes: 35 additions & 23 deletions .../declarative-flow/internals/components/step-route/hooks/use-step-route-tracking/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,45 +80,57 @@ export const useStepRouteTracking = ( { flow, stepSlug, skipStepRender }: Props

const signupCompleteFlowName = getSignupCompleteFlowNameAndClear();
const signupCompleteStepName = getSignupCompleteStepNameAndClear();

const isReEnteringStep =
const isReEnteringStepAfterSignupComplete =
signupCompleteFlowName === flowName && signupCompleteStepName === stepSlug;

if ( ! isReEnteringStep ) {
recordStepStart( flowName, kebabCase( stepSlug ), {
const reenteringStepAfterSignupCompleteProps = {
...( isReEnteringStepAfterSignupComplete && {
is_reentering_step_after_signup_complete: true,
} ),
...( signupCompleteFlowName && { signup_complete_flow_name: signupCompleteFlowName } ),
...( signupCompleteStepName && { signup_complete_step_name: signupCompleteStepName } ),
};

recordStepStart( flowName, kebabCase( stepSlug ), {
intent,
is_in_hosting_flow: isAnyHostingFlow( flowName ),
...( design && { assembler_source: getAssemblerSource( design ) } ),
...( flowVariantSlug && { flow_variant: flowVariantSlug } ),
...( skipStepRender && { skip_step_render: skipStepRender } ),
...reenteringStepAfterSignupCompleteProps,
...signupStepStartProps,
} );

// Apply the props to record in the exit/step-complete event. We only record this if start event gets recorded.
stepCompleteEventPropsRef.current = {
flow: flowName,
step: stepSlug,
optionalProps: {
intent,
...( skipStepRender && { skip_step_render: skipStepRender } ),
...reenteringStepAfterSignupCompleteProps,
},
};

const stepOldSlug = getStepOldSlug( stepSlug );
if ( stepOldSlug ) {
recordStepStart( flowName, kebabCase( stepOldSlug ), {
intent,
is_in_hosting_flow: isAnyHostingFlow( flowName ),
...( design && { assembler_source: getAssemblerSource( design ) } ),
...( flowVariantSlug && { flow_variant: flowVariantSlug } ),
...( skipStepRender && { skip_step_render: skipStepRender } ),
...reenteringStepAfterSignupCompleteProps,
...signupStepStartProps,
} );

// Apply the props to record in the exit/step-complete event. We only record this if start event gets recorded.
stepCompleteEventPropsRef.current = {
flow: flowName,
step: stepSlug,
optionalProps: { intent, ...( skipStepRender && { skip_step_render: skipStepRender } ) },
};

const stepOldSlug = getStepOldSlug( stepSlug );
if ( stepOldSlug ) {
recordStepStart( flowName, kebabCase( stepOldSlug ), {
intent,
is_in_hosting_flow: isAnyHostingFlow( flowName ),
...( design && { assembler_source: getAssemblerSource( design ) } ),
...( flowVariantSlug && { flow_variant: flowVariantSlug } ),
...( skipStepRender && { skip_step_render: skipStepRender } ),
...signupStepStartProps,
} );
}
}

// Also record page view for data and analytics
const pageTitle = `Setup > ${ flowName } > ${ stepSlug }`;
const params = {
flow: flowName,
...( skipStepRender && { skip_step_render: skipStepRender } ),
...reenteringStepAfterSignupCompleteProps,
};
recordPageView( pathname, pageTitle, params );

Expand Down
35 changes: 23 additions & 12 deletions client/landing/stepper/declarative-flow/internals/components/step-route/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,13 +170,20 @@ describe( 'StepRoute', () => {
} );
} );

it( 'skips tracking when the step is re-entered', () => {
it( 'records recordStepStart with additional props when the step is re-entered', () => {
( getSignupCompleteFlowNameAndClear as jest.Mock ).mockReturnValue( 'some-flow' );
( getSignupCompleteStepNameAndClear as jest.Mock ).mockReturnValue( 'some-step-slug' );

render( { step: regularStep } );

expect( recordStepStart ).not.toHaveBeenCalled();
expect( recordStepStart ).toHaveBeenCalledWith( 'some-flow', 'some-step-slug', {
is_reentering_step_after_signup_complete: true,
signup_complete_flow_name: 'some-flow',
signup_complete_step_name: 'some-step-slug',
intent: 'build',
assembler_source: 'premium',
is_in_hosting_flow: false,
} );
} );

it( 'records step-complete when the step is unmounted and step-start was previously recorded', () => {
Expand All @@ -191,20 +198,12 @@ describe( 'StepRoute', () => {
flow: 'some-flow',
optionalProps: {
intent: 'build',
signup_complete_flow_name: 'some-other-flow',
signup_complete_step_name: 'some-other-step-slug',
},
} );
} );

it( 'skips recording step-complete when the step is unmounted and step-start was not recorded', () => {
( getSignupCompleteFlowNameAndClear as jest.Mock ).mockReturnValue( 'some-flow' );
( getSignupCompleteStepNameAndClear as jest.Mock ).mockReturnValue( 'some-step-slug' );
const { unmount } = render( { step: regularStep } );

expect( recordStepStart ).not.toHaveBeenCalled();
unmount();
expect( recordStepComplete ).not.toHaveBeenCalled();
} );

it( 'records skip_step_render on start, complete and page view when the login is required and the user is not logged in', async () => {
( isUserLoggedIn as jest.Mock ).mockReturnValue( false );
( getSignupCompleteFlowNameAndClear as jest.Mock ).mockReturnValue( 'some-other-flow' );
Expand All @@ -217,10 +216,14 @@ describe( 'StepRoute', () => {
assembler_source: 'premium',
is_in_hosting_flow: false,
skip_step_render: true,
signup_complete_flow_name: 'some-other-flow',
signup_complete_step_name: 'some-other-step-slug',
} );
expect( recordPageView ).toHaveBeenCalledWith( '/', 'Setup > some-flow > some-step-slug', {
flow: 'some-flow',
skip_step_render: true,
signup_complete_flow_name: 'some-other-flow',
signup_complete_step_name: 'some-other-step-slug',
} );

unmount();
Expand All @@ -231,6 +234,8 @@ describe( 'StepRoute', () => {
optionalProps: {
intent: 'build',
skip_step_render: true,
signup_complete_flow_name: 'some-other-flow',
signup_complete_step_name: 'some-other-step-slug',
},
} );
} );
Expand All @@ -245,10 +250,14 @@ describe( 'StepRoute', () => {
assembler_source: 'premium',
is_in_hosting_flow: false,
skip_step_render: true,
signup_complete_flow_name: 'some-other-flow',
signup_complete_step_name: 'some-other-step-slug',
} );
expect( recordPageView ).toHaveBeenCalledWith( '/', 'Setup > some-flow > some-step-slug', {
flow: 'some-flow',
skip_step_render: true,
signup_complete_flow_name: 'some-other-flow',
signup_complete_step_name: 'some-other-step-slug',
} );

unmount();
Expand All @@ -259,6 +268,8 @@ describe( 'StepRoute', () => {
optionalProps: {
intent: 'build',
skip_step_render: true,
signup_complete_flow_name: 'some-other-flow',
signup_complete_step_name: 'some-other-step-slug',
},
} );
} );
Expand Down

0 comments on commit 9ae61cd

Please sign in to comment.