[PAY-1695] DMs: Entrypoint Analytics (#3862)

Author: rickyrombo

apps/audius-client/packages/common/src/models/Analytics.ts

@@ -347,7 +347,8 @@ export enum Name {
   MESSAGE_UNFURL_TRACK = 'Message Unfurl: Track',
   MESSAGE_UNFURL_PLAYLIST = 'Message Unfurl: Playlist',
   TIP_UNLOCKED_CHAT = 'Unlocked Chat: Tip',
-  CHAT_REPORT_USER = 'Report User: Chat'
+  CHAT_REPORT_USER = 'Report User: Chat',
+  CHAT_ENTRY_POINT = 'Chat Entry Point'
 }
 
 type PageView = {
@@ -1647,6 +1648,11 @@ type ChatReportUser = {
   reportedUserId: ID
 }
 
+type ChatEntryPoint = {
+  eventName: Name.CHAT_ENTRY_POINT
+  source: 'banner' | 'navmenu' | 'share' | 'profile'
+}
+
 export type BaseAnalyticsEvent = { type: typeof ANALYTICS_TRACK_EVENT }
 
 export type AllTrackingEvents =
@@ -1871,3 +1877,4 @@ export type AllTrackingEvents =
   | DeveloperAppCreateError
   | DeveloperAppDeleteSuccess
   | DeveloperAppDeleteError
+  | ChatEntryPoint

apps/audius-client/packages/mobile/src/components/share-drawer/ShareDrawer.tsx

@@ -4,6 +4,7 @@ import {
   accountSelectors,
   collectionsSocialActions,
   FeatureFlags,
+  Name,
   shareModalUISelectors,
   shareSoundToTiktokModalActions,
   tracksSocialActions,
@@ -25,6 +26,7 @@ import { useNavigation } from 'app/hooks/useNavigation'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { useToast } from 'app/hooks/useToast'
 import type { AppTabScreenParamList } from 'app/screens/app-screen'
+import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
 
@@ -109,6 +111,7 @@ export const ShareDrawer = () => {
     navigation.navigate('ChatUserList', {
       presetMessage: getContentUrl(content)
     })
+    track(make({ eventName: Name.CHAT_ENTRY_POINT, source: 'share' }))
   }, [content, navigation])
 
   const handleShareToTwitter = useCallback(async () => {

apps/audius-client/packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/LeftNavDrawer.tsx

@@ -4,7 +4,8 @@ import {
   StringKeys,
   accountSelectors,
   useAccountHasClaimableRewards,
-  chatSelectors
+  chatSelectors,
+  Name
 } from '@audius/common'
 import type { DrawerContentComponentProps } from '@react-navigation/drawer'
 import { DrawerContentScrollView } from '@react-navigation/drawer'
@@ -18,6 +19,7 @@ import IconSettings from 'app/assets/images/iconSettings.svg'
 import IconUpload from 'app/assets/images/iconUpload.svg'
 import IconUser from 'app/assets/images/iconUser.svg'
 import { useFeatureFlag, useRemoteVar } from 'app/hooks/useRemoteConfig'
+import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 
@@ -88,6 +90,9 @@ const WrappedLeftNavDrawer = () => {
           label={'Messages'}
           to='ChatList'
           params={{}}
+          onPress={() => {
+            track(make({ eventName: Name.CHAT_ENTRY_POINT, source: 'navmenu' }))
+          }}
         >
           {hasUnreadMessages ? (
             <View style={styles.notificationBubble} />

apps/audius-client/packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/LeftNavLink.tsx

@@ -44,6 +44,7 @@ type LeftNavLinkProps<Screen extends keyof AppTabScreenParamList> = {
   label: string
   labelProps?: TextProps
   children?: ReactNode
+  onPress?: () => void
 }
 
 export const LeftNavLink = <Screen extends keyof AppTabScreenParamList>(
@@ -56,7 +57,8 @@ export const LeftNavLink = <Screen extends keyof AppTabScreenParamList>(
     params,
     label,
     labelProps,
-    children
+    children,
+    onPress
   } = props
   const styles = useStyles()
   const { neutral } = useThemeColors()
@@ -67,7 +69,8 @@ export const LeftNavLink = <Screen extends keyof AppTabScreenParamList>(
     // @ts-expect-error navigation not smart enough here
     navigation.navigate(to, { fromAppDrawer: true, ...params })
     drawerHelpers.closeDrawer()
-  }, [navigation, to, params, drawerHelpers])
+    onPress?.()
+  }, [navigation, to, params, drawerHelpers, onPress])
 
   return (
     <TouchableOpacity style={styles.accountListItem} onPress={handlePress}>

apps/audius-client/packages/mobile/src/screens/profile-screen/MessageButton.tsx

@@ -1,11 +1,12 @@
 import { useCallback } from 'react'
 
 import type { User } from '@audius/common'
-import { chatActions } from '@audius/common'
+import { Name, chatActions } from '@audius/common'
 import { useDispatch } from 'react-redux'
 
 import IconMessage from 'app/assets/images/iconMessage.svg'
 import { Button } from 'app/components/core'
+import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 
 const { createChat } = chatActions
@@ -36,6 +37,7 @@ export const MessageButton = (props: MessageButtonProps) => {
 
   const handlePress = useCallback(() => {
     dispatch(createChat({ userIds: [user_id] }))
+    track(make({ eventName: Name.CHAT_ENTRY_POINT, source: 'profile' }))
   }, [dispatch, user_id])
 
   return (

apps/audius-client/packages/web/src/components/banner/DirectMessagesBanner.tsx

@@ -1,10 +1,11 @@
 import { useCallback, useState } from 'react'
 
-import { Client, accountSelectors } from '@audius/common'
+import { Client, Name, accountSelectors } from '@audius/common'
 import { push as pushRoute } from 'connected-react-router'
 import { useDispatch } from 'react-redux'
 
 import { useSelector } from 'common/hooks/useSelector'
+import { make } from 'common/store/analytics/actions'
 import { getClient } from 'utils/clientUtil'
 import { CHATS_PAGE } from 'utils/route'
 
@@ -43,6 +44,7 @@ export const DirectMessagesBanner = () => {
   }, [])
 
   const handleAccept = useCallback(() => {
+    dispatch(make(Name.CHAT_ENTRY_POINT, { source: 'banner' }))
     dispatch(pushRoute(CHATS_PAGE))
     handleClose()
   }, [dispatch, handleClose])

apps/audius-client/packages/web/src/components/nav/desktop/NavPopupMenu.tsx

@@ -2,7 +2,8 @@ import {
   removeNullable,
   accountSelectors,
   FeatureFlags,
-  chatSelectors
+  chatSelectors,
+  Name
 } from '@audius/common'
 import {
   IconCrown,
@@ -14,8 +15,10 @@ import {
   PopupPosition
 } from '@audius/stems'
 import cn from 'classnames'
+import { useDispatch } from 'react-redux'
 
 import { ReactComponent as IconKebabHorizontal } from 'assets/img/iconKebabHorizontalAlt.svg'
+import { make } from 'common/store/analytics/actions'
 import { Icon } from 'components/Icon'
 import { NotificationDot } from 'components/notification-dot'
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
@@ -44,6 +47,7 @@ const useAccountHasTracks = () => {
 }
 
 const NavPopupMenu = () => {
+  const dispatch = useDispatch()
   const navigate = useNavigateToPage()
   const hasTracks = useAccountHasTracks()
   const hasUnreadMessages = useSelector(chatSelectors.getHasUnreadMessages)
@@ -62,7 +66,10 @@ const NavPopupMenu = () => {
     isChatEnabled
       ? {
           text: messagesItemText,
-          onClick: () => navigate(CHATS_PAGE),
+          onClick: () => {
+            navigate(CHATS_PAGE)
+            dispatch(make(Name.CHAT_ENTRY_POINT, { source: 'navmenu' }))
+          },
           icon: <IconMessage />,
           iconClassName: styles.menuItemIcon
         }

apps/audius-client/packages/web/src/components/share-modal/ShareModal.tsx

@@ -65,6 +65,7 @@ export const ShareModal = () => {
         onCancelAction: setVisibility({ modal: 'Share', visible: true })
       })
     )
+    dispatch(make(Name.CHAT_ENTRY_POINT, { source: 'share' }))
   }, [dispatch, onClose, content])
 
   const handleShareToTwitter = useCallback(async () => {

apps/audius-client/packages/web/src/pages/profile-page/ProfilePageProvider.tsx

@@ -1210,6 +1210,7 @@ function mapDispatchToProps(dispatch: Dispatch, props: RouteComponentProps) {
     },
     onMessage: (userId: ID) => {
       dispatch(createChat({ userIds: [userId] }))
+      dispatch(make(Name.CHAT_ENTRY_POINT, { source: 'profile' }))
     },
     onBlock: (userId: ID) => {
       dispatch(blockUser({ userId }))