From 2e1c515f652d253f8a1428958053ef042b1184af Mon Sep 17 00:00:00 2001 From: vykes-mac Date: Wed, 8 Jan 2025 13:31:19 -0500 Subject: [PATCH 1/3] record goals for every step in the calypso_signup_step_start event --- .../hooks/use-step-route-tracking/index.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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 bfe23f6f18844a..97f67fab2a3dda 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 @@ -1,9 +1,12 @@ //* This hook is used to track the step route in the declarative flow. +import { OnboardSelect } from '@automattic/data-stores'; import { isAnyHostingFlow } from '@automattic/onboarding'; +import { useSelect } from '@wordpress/data'; 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 { useGoalsFirstExperiment } from 'calypso/landing/stepper/declarative-flow/helpers/use-goals-first-experiment'; import { getAssemblerSource } from 'calypso/landing/stepper/declarative-flow/internals/analytics/record-design'; import recordStepComplete, { type RecordStepCompleteProps, @@ -12,6 +15,7 @@ import recordStepStart from 'calypso/landing/stepper/declarative-flow/internals/ 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 { ONBOARD_STORE } from 'calypso/landing/stepper/stores'; 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'; @@ -57,6 +61,12 @@ export const useStepRouteTracking = ( { flow, stepSlug, skipStepRender }: Props const signupStepStartProps = useSnakeCasedKeys( { input: flow.useTracksEventProps?.()?.[ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ], } ); + const isGoalsAtFrontExperiment = useGoalsFirstExperiment()[ 1 ]; + + const goals = useSelect( + ( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getGoals(), + [] + ); /** * Cleanup effect to record step-complete event when `StepRoute` unmounts. @@ -94,6 +104,8 @@ export const useStepRouteTracking = ( { flow, stepSlug, skipStepRender }: Props recordStepStart( flowName, kebabCase( stepSlug ), { intent, is_in_hosting_flow: isAnyHostingFlow( flowName ), + is_goals_first: isGoalsAtFrontExperiment.toString(), + ...( goals.length && { goals: goals.join( ',' ) } ), ...( design && { assembler_source: getAssemblerSource( design ) } ), ...( flowVariantSlug && { flow_variant: flowVariantSlug } ), ...( skipStepRender && { skip_step_render: skipStepRender } ), From 0ac60e5741d973cb7cb24ff14c1333d3795bc471 Mon Sep 17 00:00:00 2001 From: vykes-mac Date: Wed, 8 Jan 2025 15:23:52 -0500 Subject: [PATCH 2/3] record is_goals_first only when available --- .../step-route/hooks/use-step-route-tracking/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 97f67fab2a3dda..31a23c18a8acf0 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 @@ -104,7 +104,7 @@ export const useStepRouteTracking = ( { flow, stepSlug, skipStepRender }: Props recordStepStart( flowName, kebabCase( stepSlug ), { intent, is_in_hosting_flow: isAnyHostingFlow( flowName ), - is_goals_first: isGoalsAtFrontExperiment.toString(), + ...( isGoalsAtFrontExperiment && { is_goals_first: isGoalsAtFrontExperiment.toString() } ), ...( goals.length && { goals: goals.join( ',' ) } ), ...( design && { assembler_source: getAssemblerSource( design ) } ), ...( flowVariantSlug && { flow_variant: flowVariantSlug } ), @@ -129,6 +129,8 @@ export const useStepRouteTracking = ( { flow, stepSlug, skipStepRender }: Props recordStepStart( flowName, kebabCase( stepOldSlug ), { intent, is_in_hosting_flow: isAnyHostingFlow( flowName ), + ...( isGoalsAtFrontExperiment && { is_goals_first: isGoalsAtFrontExperiment.toString() } ), + ...( goals.length && { goals: goals.join( ',' ) } ), ...( design && { assembler_source: getAssemblerSource( design ) } ), ...( flowVariantSlug && { flow_variant: flowVariantSlug } ), ...( skipStepRender && { skip_step_render: skipStepRender } ), From 8f1f17316f2e777073f8c7d555c8f69b3b467fb4 Mon Sep 17 00:00:00 2001 From: vykes-mac Date: Wed, 8 Jan 2025 17:15:32 -0500 Subject: [PATCH 3/3] include goals and expirement flag in the onboarding steps --- .../hooks/use-step-route-tracking/index.tsx | 14 -------------- .../landing/stepper/declarative-flow/onboarding.ts | 13 ++++++++++++- 2 files changed, 12 insertions(+), 15 deletions(-) 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 31a23c18a8acf0..bfe23f6f18844a 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 @@ -1,12 +1,9 @@ //* This hook is used to track the step route in the declarative flow. -import { OnboardSelect } from '@automattic/data-stores'; import { isAnyHostingFlow } from '@automattic/onboarding'; -import { useSelect } from '@wordpress/data'; 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 { useGoalsFirstExperiment } from 'calypso/landing/stepper/declarative-flow/helpers/use-goals-first-experiment'; import { getAssemblerSource } from 'calypso/landing/stepper/declarative-flow/internals/analytics/record-design'; import recordStepComplete, { type RecordStepCompleteProps, @@ -15,7 +12,6 @@ import recordStepStart from 'calypso/landing/stepper/declarative-flow/internals/ 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 { ONBOARD_STORE } from 'calypso/landing/stepper/stores'; 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'; @@ -61,12 +57,6 @@ export const useStepRouteTracking = ( { flow, stepSlug, skipStepRender }: Props const signupStepStartProps = useSnakeCasedKeys( { input: flow.useTracksEventProps?.()?.[ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ], } ); - const isGoalsAtFrontExperiment = useGoalsFirstExperiment()[ 1 ]; - - const goals = useSelect( - ( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getGoals(), - [] - ); /** * Cleanup effect to record step-complete event when `StepRoute` unmounts. @@ -104,8 +94,6 @@ export const useStepRouteTracking = ( { flow, stepSlug, skipStepRender }: Props recordStepStart( flowName, kebabCase( stepSlug ), { intent, is_in_hosting_flow: isAnyHostingFlow( flowName ), - ...( isGoalsAtFrontExperiment && { is_goals_first: isGoalsAtFrontExperiment.toString() } ), - ...( goals.length && { goals: goals.join( ',' ) } ), ...( design && { assembler_source: getAssemblerSource( design ) } ), ...( flowVariantSlug && { flow_variant: flowVariantSlug } ), ...( skipStepRender && { skip_step_render: skipStepRender } ), @@ -129,8 +117,6 @@ export const useStepRouteTracking = ( { flow, stepSlug, skipStepRender }: Props recordStepStart( flowName, kebabCase( stepOldSlug ), { intent, is_in_hosting_flow: isAnyHostingFlow( flowName ), - ...( isGoalsAtFrontExperiment && { is_goals_first: isGoalsAtFrontExperiment.toString() } ), - ...( goals.length && { goals: goals.join( ',' ) } ), ...( design && { assembler_source: getAssemblerSource( design ) } ), ...( flowVariantSlug && { flow_variant: flowVariantSlug } ), ...( skipStepRender && { skip_step_render: skipStepRender } ), diff --git a/client/landing/stepper/declarative-flow/onboarding.ts b/client/landing/stepper/declarative-flow/onboarding.ts index 435025137b48d2..c03bb939a7318d 100644 --- a/client/landing/stepper/declarative-flow/onboarding.ts +++ b/client/landing/stepper/declarative-flow/onboarding.ts @@ -18,6 +18,7 @@ import { isUserLoggedIn } from 'calypso/state/current-user/selectors'; import { setSelectedSiteId } from 'calypso/state/ui/actions'; import { STEPPER_TRACKS_EVENT_SIGNUP_START, + STEPPER_TRACKS_EVENT_SIGNUP_STEP_START, STEPPER_TRACKS_EVENT_STEP_NAV_SUBMIT, } from '../constants'; import { useFlowLocale } from '../hooks/use-flow-locale'; @@ -51,6 +52,10 @@ const onboarding: Flow = { useTracksEventProps() { const isGoalsAtFrontExperiment = useGoalsFirstExperiment()[ 1 ]; const userIsLoggedIn = useSelector( isUserLoggedIn ); + const goals = useSelect( + ( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getGoals(), + [] + ); return useMemo( () => ( { @@ -59,8 +64,14 @@ const onboarding: Flow = { ...( isGoalsAtFrontExperiment && { step: 'goals' } ), is_logged_out: ( ! userIsLoggedIn ).toString(), }, + [ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ]: { + ...( isGoalsAtFrontExperiment && { + is_goals_first: isGoalsAtFrontExperiment.toString(), + } ), + ...( goals.length && { goals: goals.join( ',' ) } ), + }, } ), - [ isGoalsAtFrontExperiment, userIsLoggedIn ] + [ isGoalsAtFrontExperiment, userIsLoggedIn, goals ] ); }, useSteps() {