Initial segment analytics

WRadoslaw · May 2, 2024 · 1123450 · 1123450
1 parent 56d6450
commit 1123450
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 11 deletions.
diff --git a/packages/atlas/src/components/_ypp/ReferralLinkButton/ReferralLinkButton.tsx b/packages/atlas/src/components/_ypp/ReferralLinkButton/ReferralLinkButton.tsx
@@ -4,7 +4,7 @@ import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { useUser } from '@/providers/user/user.hooks'
 import { StyledCopyButton } from '@/views/studio/YppDashboard/tabs/YppDashboardTabs.styles'
 
-export const ReferralLinkButton = (props: Omit<ButtonProps, 'to' | 'onClick'>) => {
+export const ReferralLinkButton = (props: { onClick?: () => void } & Omit<ButtonProps, 'to'>) => {
   const { trackReferralLinkGenerated } = useSegmentAnalytics()
   const { channelId } = useUser()
   const smMatch = useMediaMatch('sm')
@@ -15,7 +15,7 @@ export const ReferralLinkButton = (props: Omit<ButtonProps, 'to' | 'onClick'>) =
       fullWidth={!smMatch}
       textToCopy={`${window.location.origin}/ypp?referrerId=${channelId}`}
       copySuccessText="Referral link copied!"
-      onClick={() => trackReferralLinkGenerated(channelId)}
+      onClick={props.onClick ? props.onClick : () => trackReferralLinkGenerated(channelId)}
     >
       Copy referral link
     </StyledCopyButton>

diff --git a/packages/atlas/src/hooks/useSegmentAnalytics.ts b/packages/atlas/src/hooks/useSegmentAnalytics.ts
@@ -516,6 +516,86 @@ export const useSegmentAnalytics = () => {
     [analytics]
   )
 
+  const trackRewardsReferralLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Backlink Generated', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackRewardsOriginalCreatorsLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Original appl', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackRewardsBrandingLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Branding appl', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackJoinDiscordLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Join Discord clicked', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackTwitterPostLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Post on X clicked', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackShareNftLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Share NFT clicked', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackShareTokenLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Share Token clicked', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackAmbassadorLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Ambassador appl', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
   const runNextQueueEvent = useCallback(async () => {
     const queueEvent = playbackEventsQueue.current.shift()
     if (!queueEvent) {
@@ -598,5 +678,13 @@ export const useSegmentAnalytics = () => {
     trackYppOptIn,
     trackYppReqsNotMet,
     trackYppSignInButtonClick,
+    trackAmbassadorLinkClicked,
+    trackJoinDiscordLinkClicked,
+    trackRewardsOriginalCreatorsLinkClicked,
+    trackShareTokenLinkClicked,
+    trackShareNftLinkClicked,
+    trackTwitterPostLinkClicked,
+    trackRewardsBrandingLinkClicked,
+    trackRewardsReferralLinkClicked,
   }
 }
diff --git a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx
@@ -25,6 +25,7 @@ import { YppDashboardTier } from '@/components/_ypp/YppDashboardTier'
 import { atlasConfig } from '@/config'
 import { absoluteRoutes } from '@/config/routes'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { useYppAuthorizeHandler } from '@/hooks/useYppAuthorizeHandler'
 import { useUser } from '@/providers/user/user.hooks'
 import { cVar, sizes, transitions } from '@/styles'
@@ -97,6 +98,16 @@ const benefitsMetadata = {
 
 export const YppDashboardMainTab: FC = () => {
   const { channelId } = useUser()
+  const {
+    trackAmbassadorLinkClicked,
+    trackRewardsReferralLinkClicked,
+    trackRewardsBrandingLinkClicked,
+    trackRewardsOriginalCreatorsLinkClicked,
+    trackTwitterPostLinkClicked,
+    trackShareNftLinkClicked,
+    trackJoinDiscordLinkClicked,
+    trackShareTokenLinkClicked,
+  } = useSegmentAnalytics()
   const navigate = useNavigate()
   const _handleYppSignUpClick = useYppAuthorizeHandler()
   const { unsyncedChannels, currentChannel } = useGetYppSyncedChannels()
@@ -294,7 +305,11 @@ export const YppDashboardMainTab: FC = () => {
                 <TextButton to="xd">Learn more</TextButton>
               </Text>
             }
-            actionNode={<ReferralLinkButton />}
+            actionNode={
+              <ReferralLinkButton
+                onClick={() => trackRewardsReferralLinkClicked(channelId ?? '', currentChannel?.yppStatus ?? '')}
+              />
+            }
           />
         </BenefitsContainer>
 
@@ -311,7 +326,14 @@ export const YppDashboardMainTab: FC = () => {
                 <TextButton to={benefitsMetadata.discordCommunity.tooltipLink}>Learn more</TextButton>
               </Text>
             }
-            actionNode={<Button to={benefitsMetadata.discordCommunity.actionLink}>Join Discord</Button>}
+            actionNode={
+              <Button
+                onClick={() => trackJoinDiscordLinkClicked(channelId ?? '', currentChannel?.yppStatus ?? '')}
+                to={benefitsMetadata.discordCommunity.actionLink}
+              >
+                Join Discord
+              </Button>
+            }
           />
           <BenefitCard
             title={benefitsMetadata.twitterPost.title}
@@ -324,7 +346,14 @@ export const YppDashboardMainTab: FC = () => {
                 <TextButton to={benefitsMetadata.twitterPost.tooltipLink}>Learn more</TextButton>
               </Text>
             }
-            actionNode={<Button to={benefitsMetadata.twitterPost.actionLink}>Post on X</Button>}
+            actionNode={
+              <Button
+                onClick={() => trackTwitterPostLinkClicked(channelId ?? '', currentChannel?.yppStatus ?? '')}
+                to={benefitsMetadata.twitterPost.actionLink}
+              >
+                Post on X
+              </Button>
+            }
           />
           <BenefitCard
             title={benefitsMetadata.roundTableEvents.title}
@@ -337,7 +366,14 @@ export const YppDashboardMainTab: FC = () => {
                 <TextButton to={benefitsMetadata.roundTableEvents.tooltipLink}>Learn more</TextButton>
               </Text>
             }
-            actionNode={<Button to={benefitsMetadata.roundTableEvents.actionLink}>Learn more</Button>}
+            actionNode={
+              <Button
+                onClick={() => trackRewardsReferralLinkClicked(channelId ?? '', currentChannel?.yppStatus ?? '')}
+                to={benefitsMetadata.roundTableEvents.actionLink}
+              >
+                Learn more
+              </Button>
+            }
           />
         </BenefitsContainer>
 
@@ -354,7 +390,13 @@ export const YppDashboardMainTab: FC = () => {
               </Text>
             }
             actionNode={
-              <Button disabled={!isSilverOrAbove} to={benefitsMetadata.originalCreatorsContent.actionLink}>
+              <Button
+                onClick={() =>
+                  trackRewardsOriginalCreatorsLinkClicked(channelId ?? '', currentChannel?.yppStatus ?? '')
+                }
+                disabled={!isSilverOrAbove}
+                to={benefitsMetadata.originalCreatorsContent.actionLink}
+              >
                 Sign up
               </Button>
             }
@@ -371,7 +413,11 @@ export const YppDashboardMainTab: FC = () => {
               </Text>
             }
             actionNode={
-              <Button disabled={!isSilverOrAbove} to={benefitsMetadata.branding.actionLink}>
+              <Button
+                onClick={() => trackRewardsBrandingLinkClicked(channelId ?? '', currentChannel?.yppStatus ?? '')}
+                disabled={!isSilverOrAbove}
+                to={benefitsMetadata.branding.actionLink}
+              >
                 Sign up
               </Button>
             }
@@ -399,7 +445,11 @@ export const YppDashboardMainTab: FC = () => {
               </Text>
             }
             actionNode={
-              <Button disabled={!isSilverOrAbove} to={absoluteRoutes.viewer.channel(channelId ?? '', { tab: 'NFTs' })}>
+              <Button
+                onClick={() => trackShareNftLinkClicked(channelId ?? '', currentChannel?.yppStatus ?? '')}
+                disabled={!isSilverOrAbove}
+                to={absoluteRoutes.viewer.channel(channelId ?? '', { tab: 'NFTs' })}
+              >
                 Share NFTs
               </Button>
             }
@@ -424,7 +474,11 @@ export const YppDashboardMainTab: FC = () => {
               </Text>
             }
             actionNode={
-              <Button disabled={!isSilverOrAbove} to={absoluteRoutes.viewer.channel(channelId ?? '', { tab: 'Token' })}>
+              <Button
+                onClick={() => trackShareTokenLinkClicked(channelId ?? '', currentChannel?.yppStatus ?? '')}
+                disabled={!isSilverOrAbove}
+                to={absoluteRoutes.viewer.channel(channelId ?? '', { tab: 'Token' })}
+              >
                 Share token
               </Button>
             }
@@ -441,7 +495,11 @@ export const YppDashboardMainTab: FC = () => {
               </Text>
             }
             actionNode={
-              <Button disabled={!isSilverOrAbove} to={benefitsMetadata.ambassadorProgram.actionLink}>
+              <Button
+                onClick={() => trackAmbassadorLinkClicked(channelId ?? '', currentChannel?.yppStatus ?? '')}
+                disabled={!isSilverOrAbove}
+                to={benefitsMetadata.ambassadorProgram.actionLink}
+              >
                 Apply
               </Button>
             }