Included utm_campaign in segment tracking (#4561)

Co-authored-by: Artem <Artem Slugin>
Joystream · Aug 2, 2023 · 9754167 · 9754167
1 parent 608c09f
commit 9754167
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 22 deletions.
diff --git 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,21 +58,15 @@ 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,
         category,
         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
@@ -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<YppStoreState, YppStoreActions>(
       selectedChannelId: null,
       ytStateParam: null,
       utmSource: null,
+      utmCampaign: null,
       yppModalOpenName: null,
       shouldContinueYppFlowAfterLogin: false,
       shouldContinueYppFlowAfterCreatingChannel: false,
@@ -63,6 +66,11 @@ export const useYppStore = createStore<YppStoreState, YppStoreActions>(
           state.utmSource = utmSource
         })
       },
+      setUtmCampaign: (utmCampaign) => {
+        set((state) => {
+          state.utmCampaign = utmCampaign
+        })
+      },
       setYppModalOpenName: (modal) => {
         set((state) => {
           state.yppModalOpenName = modal

diff --git a/...ges/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx b/...ges/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx
@@ -98,7 +98,8 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ 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<YppAuthorizationModalProps> = ({ 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<YppAuthorizationModalProps> = ({ 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
@@ -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,
   ])