Add analytics for waitlist link

AudiusProject · Oct 24, 2023 · edbc357 · edbc357
1 parent 917feb8
commit edbc357
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/packages/common/src/models/Analytics.ts b/packages/common/src/models/Analytics.ts
@@ -159,6 +159,7 @@ export enum Name {
   TRACK_UPLOAD_FOLLOW_GATED = 'Track Upload: Follow Gated',
   TRACK_UPLOAD_TIP_GATED = 'Track Upload: Tip Gated',
   TRACK_UPLOAD_USDC_GATED = 'Track Upload: USDC Gated',
+  TRACK_UPLOAD_CLICK_USDC_WAITLIST_LINK = 'Track Upload: Clicked USDC Waitlist Link',
 
   // Gated Track Listen
   LISTEN_GATED = 'Listen: Gated',
@@ -858,6 +859,10 @@ type TrackUploadUSDCGated = {
   kind: 'tracks'
 }
 
+type TrackUploadClickUSDCWaitListLink = {
+  eventName: Name.TRACK_UPLOAD_CLICK_USDC_WAITLIST_LINK
+}
+
 // Unlocked Gated Tracks
 type CollectibleGatedTrackUnlocked = {
   eventName: Name.COLLECTIBLE_GATED_TRACK_UNLOCKED
@@ -1826,6 +1831,7 @@ export type AllTrackingEvents =
   | TrackUploadFollowGated
   | TrackUploadTipGated
   | TrackUploadUSDCGated
+  | TrackUploadClickUSDCWaitListLink
   | TrackUploadSuccess
   | TrackUploadFailure
   | TrackUploadRejected

diff --git a/...reens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/PremiumRadioField.tsx b/...reens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/PremiumRadioField.tsx
@@ -1,12 +1,14 @@
 import { useCallback, useEffect } from 'react'
 
+import { Name } from '@audius/common'
 import { Dimensions, View } from 'react-native'
 
 import IconCart from 'app/assets/images/iconCart.svg'
 import IconStars from 'app/assets/images/iconStars.svg'
 import { Link, Tag, Text } from 'app/components/core'
 import { HelpCallout } from 'app/components/help-callout/HelpCallout'
 import { useSetTrackAvailabilityFields } from 'app/hooks/useSetTrackAvailabilityFields'
+import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 import { useColor } from 'app/utils/theme'
 
@@ -77,6 +79,10 @@ export const PremiumRadioField = (props: PremiumRadioFieldProps) => {
   const { set: setTrackAvailabilityFields } = useSetTrackAvailabilityFields()
   const styles = useStyles()
 
+  const handlePressWaitListLink = useCallback(() => {
+    track(make({ eventName: Name.TRACK_UPLOAD_CLICK_USDC_WAITLIST_LINK }))
+  }, [])
+
   const secondary = useColor('secondary')
   const neutral = useColor('neutral')
   const neutralLight4 = useColor('neutralLight4')
@@ -109,12 +115,12 @@ export const PremiumRadioField = (props: PremiumRadioFieldProps) => {
     return (
       <View style={styles.waitlist}>
         <Text>{messages.waitlist}</Text>
-        <Link url={WAITLIST_TYPEFORM}>
+        <Link url={WAITLIST_TYPEFORM} onPress={handlePressWaitListLink}>
           <Text style={styles.link}>{messages.join}</Text>
         </Link>
       </View>
     )
-  }, [styles.link, styles.waitlist])
+  }, [styles.link, styles.waitlist, handlePressWaitListLink])
 
   return (
     <View style={styles.root}>

diff --git a/...pages/upload-page/fields/availability/usdc-purchase-gated/UsdcPurchaseGatedRadioField.tsx b/...pages/upload-page/fields/availability/usdc-purchase-gated/UsdcPurchaseGatedRadioField.tsx
@@ -1,5 +1,8 @@
+import { useCallback } from 'react'
+
 import {
   FeatureFlags,
+  Name,
   PremiumConditions,
   TrackAvailabilityType,
   isPremiumContentCollectibleGated,
@@ -11,6 +14,7 @@ import { IconCart, IconStars } from '@audius/stems'
 import { ExternalLink } from 'components/link'
 import { ModalRadioItem } from 'components/modal-radio/ModalRadioItem'
 import { useFlag } from 'hooks/useRemoteConfig'
+import { make, track } from 'services/analytics'
 
 import { UsdcPurchaseFields } from './UsdcPurchaseFields'
 import styles from './UsdcPurchaseGatedRadioField.module.css'
@@ -40,6 +44,10 @@ export const UsdcPurchaseGatedRadioField = (
   const { isRemix, isUpload, initialPremiumConditions, isInitiallyUnlisted } =
     props
 
+  const handleClickWaitListLink = useCallback(() => {
+    track(make({ eventName: Name.TRACK_UPLOAD_CLICK_USDC_WAITLIST_LINK }))
+  }, [])
+
   const { isEnabled: isUsdcUploadEnabled } = useFlag(
     FeatureFlags.USDC_PURCHASES_UPLOAD
   )
@@ -66,6 +74,7 @@ export const UsdcPurchaseGatedRadioField = (
     <div className={styles.helpContent}>
       <div>{messages.waitlist}</div>
       <ExternalLink
+        onClick={handleClickWaitListLink}
         className={styles.link}
         to={WAITLIST_TYPEFORM}
         target='_blank'