Add analytics trigger for create new channel button on ypp landing page

ikprk · May 17, 2024 · 251d824 · 251d824
1 parent 3f047ee
commit 251d824
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/packages/atlas/src/hooks/useSegmentAnalytics.ts b/packages/atlas/src/hooks/useSegmentAnalytics.ts
@@ -256,6 +256,12 @@ export const useSegmentAnalytics = () => {
     })
   }, [analytics, getUTMParams])
 
+  const trackRewardsCreateChannelButtonClick = useCallback(() => {
+    analytics.track('YPP Landing Create Channel Clicked', {
+      ...getUTMParams(),
+    })
+  }, [analytics, getUTMParams])
+
   const trackNFTCarouselNext = useCallback(
     (slideId: string, nftId?: string) => {
       analytics.track('Featured NFT carousel next slide', {
@@ -696,5 +702,6 @@ export const useSegmentAnalytics = () => {
     trackRewardsBrandingLinkClicked,
     trackRewardsReferralLinkClicked,
     trackRoundtableEventsClicked,
+    trackRewardsCreateChannelButtonClick,
   }
 }
diff --git a/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx b/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx
@@ -11,6 +11,7 @@ import { Text } from '@/components/Text'
 import { Button, TextButton } from '@/components/_buttons/Button'
 import { atlasConfig } from '@/config'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { useAuthStore } from '@/providers/auth/auth.store'
 import { useUser } from '@/providers/user/user.hooks'
 import { useYppStore } from '@/providers/ypp/ypp.store'
@@ -49,6 +50,7 @@ const earningsOptions = [
 export const CreatorOpportunities = ({ onSignUpClick }: { onSignUpClick: () => void }) => {
   const setIsYppChannelFlow = useYppStore((state) => state.actions.setIsYppChannelFlow)
   const setAuthModalOpenName = useAuthStore((state) => state.actions.setAuthModalOpenName)
+  const { trackRewardsCreateChannelButtonClick } = useSegmentAnalytics()
   const { memberChannels, isLoggedIn } = useUser()
   const xsMatch = useMediaMatch('xs')
   const mdMatch = useMediaMatch('md')
@@ -120,6 +122,7 @@ export const CreatorOpportunities = ({ onSignUpClick }: { onSignUpClick: () => v
               {!memberChannels?.length ? (
                 <Button
                   onClick={() => {
+                    trackRewardsCreateChannelButtonClick()
                     setIsYppChannelFlow(true)
                     setAuthModalOpenName(isLoggedIn ? 'createChannel' : 'signUp')
                   }}

diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppFooter.tsx b/packages/atlas/src/views/global/YppLandingView/sections/YppFooter.tsx
@@ -9,6 +9,7 @@ import { CallToActionButton, CallToActionWrapper } from '@/components/_buttons/C
 import { atlasConfig } from '@/config'
 import { YppWidgetIcons } from '@/config/configSchema'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { useAuthStore } from '@/providers/auth/auth.store'
 import { useUser } from '@/providers/user/user.hooks'
 import { useYppStore } from '@/providers/ypp/ypp.store'
@@ -33,6 +34,7 @@ export const YppFooter: FC<YppFooterSectionProps> = ({ onSignUpClick }) => {
   const smMatch = useMediaMatch('sm')
   const setIsYppChannelFlow = useYppStore((state) => state.actions.setIsYppChannelFlow)
   const setAuthModalOpenName = useAuthStore((state) => state.actions.setAuthModalOpenName)
+  const { trackRewardsCreateChannelButtonClick } = useSegmentAnalytics()
   const { memberChannels, isLoggedIn } = useUser()
   return (
     <>
@@ -67,6 +69,7 @@ export const YppFooter: FC<YppFooterSectionProps> = ({ onSignUpClick }) => {
                 {!memberChannels?.length ? (
                   <Button
                     onClick={() => {
+                      trackRewardsCreateChannelButtonClick()
                       setIsYppChannelFlow(true)
                       setAuthModalOpenName(isLoggedIn ? 'createChannel' : 'signUp')
                     }}

diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx
@@ -16,6 +16,7 @@ import { PaidChannelCard } from '@/components/_channel/ChannelCard'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { atlasConfig } from '@/config'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { useAuthStore } from '@/providers/auth/auth.store'
 import { useUser } from '@/providers/user/user.hooks'
 import { useYppStore } from '@/providers/ypp/ypp.store'
@@ -59,7 +60,7 @@ export const YppHero: FC<YppHeroProps> = ({ onSignUpClick, yppAtlasStatus, onVie
   const setIsYppChannelFlow = useYppStore((state) => state.actions.setIsYppChannelFlow)
   const setAuthModalOpenName = useAuthStore((state) => state.actions.setAuthModalOpenName)
   const { memberChannels, isLoggedIn } = useUser()
-
+  const { trackRewardsCreateChannelButtonClick } = useSegmentAnalytics()
   const { channels, loading } = useMostPaidChannels()
   const items = !loading
     ? channels?.map((channel) => <PaidChannelCard key={channel.id} channel={channel} />)
@@ -141,6 +142,7 @@ export const YppHero: FC<YppHeroProps> = ({ onSignUpClick, yppAtlasStatus, onVie
                         {!memberChannels?.length ? (
                           <Button
                             onClick={() => {
+                              trackRewardsCreateChannelButtonClick()
                               setIsYppChannelFlow(true)
                               setAuthModalOpenName(isLoggedIn ? 'createChannel' : 'signUp')
                             }}