diff --git a/packages/atlas/src/hooks/useSegmentAnalytics.ts b/packages/atlas/src/hooks/useSegmentAnalytics.ts index ca7b92e8b8..806ecef789 100644 --- a/packages/atlas/src/hooks/useSegmentAnalytics.ts +++ b/packages/atlas/src/hooks/useSegmentAnalytics.ts @@ -26,6 +26,16 @@ type AllNftFilters = { sortBy?: string } +type YppOptInParams = { + handle?: string + email?: string + category?: string + subscribersCount?: string + referrerId?: string + utmSource?: string + utmCampaign?: string +} + type playbackEventType = 'playbackStarted' | 'playbackPaused' | 'playbackResumed' | 'playbackCompleted' export const useSegmentAnalytics = () => { @@ -48,14 +58,7 @@ export const useSegmentAnalytics = () => { ) const trackYppOptIn = useCallback( - ( - handle = 'no data', - email = 'no data', - category = 'no data', - subscribersCount: string, - referrerId = 'no data', - utmSource = 'no data' - ) => { + ({ handle, email, category, subscribersCount, referrerId, utmSource, utmCampaign }: YppOptInParams) => { analytics.track('YPP Sign Up Completed', { handle, email, @@ -63,6 +66,7 @@ export const useSegmentAnalytics = () => { subscribersCount, referrerId, utmSource, + utmCampaign, }) }, [analytics] @@ -195,8 +199,12 @@ export const useSegmentAnalytics = () => { ) const trackYppSignInButtonClick = useCallback( - (referrer: string | null | undefined, utmSource: string | null | undefined) => { - analytics.track('YPP Landing Sign In w Google Clicked', { referrer, utmSource }) + ( + referrer: string | null | undefined, + utmSource: string | null | undefined, + utmCampaign: string | null | undefined + ) => { + analytics.track('YPP Landing Sign In w Google Clicked', { referrer, utmSource, utmCampaign }) }, [analytics] ) diff --git a/packages/atlas/src/providers/ypp/ypp.store.ts b/packages/atlas/src/providers/ypp/ypp.store.ts index ff67c185b3..c4a01b01b4 100644 --- a/packages/atlas/src/providers/ypp/ypp.store.ts +++ b/packages/atlas/src/providers/ypp/ypp.store.ts @@ -10,6 +10,7 @@ type YppStoreState = { */ ytStateParam: string | null utmSource: string | null + utmCampaign: string | null yppModalOpenName: YppModalStep shouldContinueYppFlowAfterLogin: boolean shouldContinueYppFlowAfterCreatingChannel: boolean @@ -24,6 +25,7 @@ type YppStoreActions = { */ setYtStateParam: (authState: string | null) => void setUtmSource: (utmSource: string | null) => void + setUtmCampaign: (utmCampaign: string | null) => void setYppModalOpenName: (modal: YppModalStep) => void setShouldContinueYppFlowAfterLogin: (shouldContinueYppFlow: boolean) => void setShouldContinueYppFlowAfterCreatingChannel: (shouldContinueYppFlow: boolean) => void @@ -37,6 +39,7 @@ export const useYppStore = createStore( selectedChannelId: null, ytStateParam: null, utmSource: null, + utmCampaign: null, yppModalOpenName: null, shouldContinueYppFlowAfterLogin: false, shouldContinueYppFlowAfterCreatingChannel: false, @@ -63,6 +66,11 @@ export const useYppStore = createStore( state.utmSource = utmSource }) }, + setUtmCampaign: (utmCampaign) => { + set((state) => { + state.utmCampaign = utmCampaign + }) + }, setYppModalOpenName: (modal) => { set((state) => { state.yppModalOpenName = modal diff --git a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx index 33189374fd..b7869055f4 100644 --- a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx +++ b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx @@ -98,7 +98,8 @@ export const YppAuthorizationModal: FC = ({ unSynced referrerId, ytResponseData, utmSource, - actions: { setYtResponseData, setUtmSource }, + utmCampaign, + actions: { setYtResponseData, setUtmSource, setUtmCampaign }, } = useYppStore((store) => store, shallow) const setReferrerId = useYppStore((store) => store.actions.setReferrerId) const setShouldContinueYppFlowAfterLogin = useYppStore((store) => store.actions.setShouldContinueYppFlowAfterLogin) @@ -155,7 +156,10 @@ export const YppAuthorizationModal: FC = ({ unSynced if (searchParams.get('utm_source')) { setUtmSource(searchParams.get('utm_source')) } - }, [searchParams, setUtmSource]) + if (searchParams.get('utm_campaign')) { + setUtmCampaign(searchParams.get('utm_campaign')) + } + }, [searchParams, setUtmCampaign, setUtmSource]) useEffect(() => { contentRef.current?.scrollTo({ top: 0 }) @@ -289,14 +293,15 @@ export const YppAuthorizationModal: FC = ({ unSynced await refetchYppSyncedChannels() identifyUser(ytResponseData?.email) - trackYppOptIn( - ytResponseData?.channelHandle, - ytResponseData?.email, - data.videoCategoryId ? displayCategoriesLookup[data.videoCategoryId]?.name : undefined, - channelCreationResponse.data.channel.subscribersCount, - data.referrerChannelId, - utmSource || undefined - ) + trackYppOptIn({ + handle: ytResponseData?.channelHandle, + email: ytResponseData?.email, + category: data.videoCategoryId ? displayCategoriesLookup[data.videoCategoryId]?.name : undefined, + subscribersCount: channelCreationResponse.data.channel.subscribersCount, + referrerId: data.referrerChannelId, + utmSource: utmSource || undefined, + utmCampaign: utmCampaign || undefined, + }) setReferrerId(null) setYtResponseData(null) diff --git a/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx b/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx index e8e0cafd22..99ab8b840c 100644 --- a/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx +++ b/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx @@ -49,7 +49,11 @@ export const YppLandingView: FC = () => { const shouldContinueYppFlowAfterCreatingChannel = useYppStore( (store) => store.shouldContinueYppFlowAfterCreatingChannel ) - const [referrer, utmSource] = [searchParams.get('referrerId'), searchParams.get('utm_source')] + const [referrer, utmSource, utmCampaign] = [ + searchParams.get('referrerId'), + searchParams.get('utm_source'), + searchParams.get('utm_campaign'), + ] const { unsyncedChannels, isLoading, currentChannel } = useGetYppSyncedChannels() const isYppSigned = !!currentChannel @@ -79,7 +83,7 @@ export const YppLandingView: FC = () => { } if (!yppModalOpenName) { - trackYppSignInButtonClick(referrer, utmSource) + trackYppSignInButtonClick(referrer, utmSource, utmCampaign) setYppModalOpen('ypp-requirements') return } @@ -92,6 +96,7 @@ export const YppLandingView: FC = () => { trackYppSignInButtonClick, referrer, utmSource, + utmCampaign, setYppModalOpen, ])