Add explore analytics

packages/common/src/models/Analytics.ts

@@ -308,6 +308,10 @@ export enum Name {
   SEARCH_RESULT_SELECT = 'Search: Result Select',
   SEARCH_TAB_CLICK = 'Search: Tab Click',
 
+  // Explore
+  EXPLORE_SECTION_VIEW = 'Explore: Section View',
+  EXPLORE_SECTION_CLICK = 'Explore: Section Click',
+
   // Errors
   ERROR_PAGE = 'Error Page',
   NOT_FOUND_PAGE = 'Not Found Page',
@@ -1555,6 +1559,42 @@ type SearchResultSelect = {
   kind: 'track' | 'profile' | 'playlist' | 'album'
 }
 
+// Explore
+export type ExploreSectionName =
+  | 'Recommended Tracks'
+  | 'Artist Coin Tracks'
+  | 'Recently Played'
+  | 'Quick Search'
+  | 'Featured Playlists'
+  | 'Featured Remix Contests'
+  | 'Underground Trending Tracks'
+  | 'Artist Spotlight'
+  | 'Label Spotlight'
+  | 'Active Discussions'
+  | 'Downloads Available'
+  | 'Mood Grid'
+  | 'Trending Playlists'
+  | 'Most Shared'
+  | 'Best Selling'
+  | 'Recent Premium Tracks'
+  | 'Feeling Lucky'
+  | 'Recent Searches'
+
+type ExploreSectionView = {
+  eventName: Name.EXPLORE_SECTION_VIEW
+  section: ExploreSectionName
+  source: 'web' | 'mobile'
+}
+
+type ExploreSectionClick = {
+  eventName: Name.EXPLORE_SECTION_CLICK
+  section: ExploreSectionName
+  source: 'web' | 'mobile'
+  id?: ID
+  kind?: 'track' | 'profile' | 'playlist' | 'album' | 'mood' | 'preset'
+  link?: string
+}
+
 type ListenGated = {
   eventName: Name.LISTEN_GATED
   trackId: string
@@ -3130,6 +3170,8 @@ export type AllTrackingEvents =
   | SearchTag
   | SearchMoreResults
   | SearchResultSelect
+  | ExploreSectionView
+  | ExploreSectionClick
   | ListenGated
   | ErrorPage
   | NotFoundPage

packages/mobile/src/screens/explore-screen/components/FeaturedArtistCoinTracks.tsx

@@ -4,13 +4,14 @@ import { useExploreContent } from '@audius/common/api'
 import { exploreMessages as messages } from '@audius/common/messages'
 import { QueueSource } from '@audius/common/store'
 
-import { useDeferredElement } from '../../../hooks/useDeferredElement'
+import { useExploreSectionTracking } from '../hooks/useExploreSectionTracking'
 
 import { ExploreSection } from './ExploreSection'
 import { TrackTileCarousel } from './TrackTileCarousel'
 
 export const FeaturedArtistCoinTracks = () => {
-  const { InViewWrapper, inView } = useDeferredElement()
+  const { InViewWrapper, inView } =
+    useExploreSectionTracking('Artist Coin Tracks')
   const { data, isPending } = useExploreContent({ enabled: inView })
 
   return (

packages/mobile/src/screens/explore-screen/components/FeaturedPlaylists.tsx

@@ -6,13 +6,14 @@ import { exploreMessages as messages } from '@audius/common/messages'
 import { useTheme } from '@audius/harmony-native'
 import { CollectionList } from 'app/components/collection-list'
 
-import { useDeferredElement } from '../../../hooks/useDeferredElement'
+import { useExploreSectionTracking } from '../hooks/useExploreSectionTracking'
 
 import { ExploreSection } from './ExploreSection'
 
 export const FeaturedPlaylists = () => {
   const { spacing } = useTheme()
-  const { InViewWrapper, inView } = useDeferredElement()
+  const { InViewWrapper, inView } =
+    useExploreSectionTracking('Featured Playlists')
 
   const { data: exploreContent } = useExploreContent({ enabled: inView })
   const { data: playlists } = useCollections(

packages/mobile/src/screens/explore-screen/components/ForYouTracks.tsx

@@ -5,13 +5,14 @@ import { exploreMessages as messages } from '@audius/common/messages'
 import { QueueSource } from '@audius/common/store'
 import { full } from '@audius/sdk'
 
-import { useDeferredElement } from 'app/hooks/useDeferredElement'
+import { useExploreSectionTracking } from '../hooks/useExploreSectionTracking'
 
 import { ExploreSection } from './ExploreSection'
 import { TrackTileCarousel } from './TrackTileCarousel'
 
 export const ForYouTracks = () => {
-  const { inView, InViewWrapper } = useDeferredElement()
+  const { inView, InViewWrapper } =
+    useExploreSectionTracking('Recommended Tracks')
   const { data: recommendedTracks, isPending } = useRecommendedTracks(
     { pageSize: 10, timeRange: full.GetRecommendedTracksTimeEnum.Week },
     { enabled: inView }

packages/mobile/src/screens/explore-screen/components/MoodsGrid.tsx

@@ -1,7 +1,9 @@
 import React, { useMemo, useCallback } from 'react'
 
 import { labelByCategory } from '@audius/common/api'
+import { useAnalytics } from '@audius/common/hooks'
 import { exploreMessages as messages } from '@audius/common/messages'
+import { Name } from '@audius/common/models'
 import type { Mood } from '@audius/sdk'
 import { MOODS } from 'pages/search-page/moods'
 import type { MoodInfo } from 'pages/search-page/types'
@@ -14,6 +16,7 @@ import {
   useSearchCategory,
   useSearchFilters
 } from '../../search-screen/searchState.tsx'
+import { useExploreSectionTracking } from '../hooks/useExploreSectionTracking'
 
 import { ExploreSection } from './ExploreSection.tsx'
 
@@ -22,9 +25,11 @@ interface MoodsGridProps {
 }
 
 export const MoodsGrid = ({ isLoading: externalLoading }: MoodsGridProps) => {
+  const { InViewWrapper } = useExploreSectionTracking('Mood Grid')
   const { spacing } = useTheme()
   const [category, setCategory] = useSearchCategory()
   const [, setFilters] = useSearchFilters()
+  const { trackEvent } = useAnalytics()
 
   const moodEntries = useMemo(
     () => Object.entries(MOODS) as [string, MoodInfo][],
@@ -33,50 +38,59 @@ export const MoodsGrid = ({ isLoading: externalLoading }: MoodsGridProps) => {
 
   const handleMoodPress = useCallback(
     (moodLabel: Mood) => {
+      trackEvent({
+        eventName: Name.EXPLORE_SECTION_CLICK,
+        section: 'Mood Grid',
+        source: 'mobile',
+        kind: 'mood',
+        link: moodLabel
+      })
       if (category === 'all') {
         setCategory('tracks')
       }
       setFilters({ mood: moodLabel })
     },
-    [setFilters, setCategory, category]
+    [setFilters, setCategory, category, trackEvent]
   )
 
   if (externalLoading) {
     return null
   }
   return (
-    <ExploreSection
-      title={messages.exploreByMood(labelByCategory[category])}
-      centered
-    >
-      <Flex wrap='wrap' direction='row' justifyContent='center' gap='s'>
-        {moodEntries.sort().map(([_, moodInfo]) => (
-          <Paper
-            direction='row'
-            key={moodInfo.label}
-            pv='l'
-            ph='xl'
-            gap='s'
-            borderRadius='m'
-            border='default'
-            backgroundColor='white'
-            onPress={() => {
-              handleMoodPress(moodInfo.label)
-            }}
-          >
-            <Image
-              source={moodMap[moodInfo.label]}
-              style={{
-                height: spacing.unit5,
-                width: spacing.unit5
+    <InViewWrapper>
+      <ExploreSection
+        title={messages.exploreByMood(labelByCategory[category])}
+        centered
+      >
+        <Flex wrap='wrap' direction='row' justifyContent='center' gap='s'>
+          {moodEntries.sort().map(([_, moodInfo]) => (
+            <Paper
+              direction='row'
+              key={moodInfo.label}
+              pv='l'
+              ph='xl'
+              gap='s'
+              borderRadius='m'
+              border='default'
+              backgroundColor='white'
+              onPress={() => {
+                handleMoodPress(moodInfo.label)
               }}
-            />
-            <Text variant='title' size='s'>
-              {moodInfo.label}
-            </Text>
-          </Paper>
-        ))}
-      </Flex>
-    </ExploreSection>
+            >
+              <Image
+                source={moodMap[moodInfo.label]}
+                style={{
+                  height: spacing.unit5,
+                  width: spacing.unit5
+                }}
+              />
+              <Text variant='title' size='s'>
+                {moodInfo.label}
+              </Text>
+            </Paper>
+          ))}
+        </Flex>
+      </ExploreSection>
+    </InViewWrapper>
   )
 }

packages/mobile/src/screens/explore-screen/components/QuickSearchGrid.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useMemo } from 'react'
 
+import { useAnalytics } from '@audius/common/hooks'
 import { exploreMessages as messages } from '@audius/common/messages'
+import { Name } from '@audius/common/models'
 import {
   QUICK_SEARCH_PRESETS,
   type QuickSearchPreset
@@ -15,6 +17,7 @@ import {
   useSearchCategory,
   useSearchFilters
 } from '../../search-screen/searchState.tsx'
+import { useExploreSectionTracking } from '../hooks/useExploreSectionTracking'
 
 import { ExploreSection } from './ExploreSection.tsx'
 
@@ -102,11 +105,20 @@ const QuickSearchPresetButton = ({
 }
 
 export const QuickSearchGrid = () => {
+  const { InViewWrapper } = useExploreSectionTracking('Quick Search')
   const [, setCategory] = useSearchCategory()
   const [, setFilters] = useSearchFilters()
+  const { trackEvent } = useAnalytics()
 
   const handlePressPreset = useCallback(
     (preset: QuickSearchPreset) => {
+      trackEvent({
+        eventName: Name.EXPLORE_SECTION_CLICK,
+        section: 'Quick Search',
+        source: 'mobile',
+        kind: 'preset',
+        link: `${preset.genre || ''}-${preset.mood || ''}-${preset.key || ''}`
+      })
       // TODO: Support tabs
       setCategory('tracks')
       setFilters({
@@ -117,22 +129,24 @@ export const QuickSearchGrid = () => {
         key: preset.key
       })
     },
-    [setCategory, setFilters]
+    [setCategory, setFilters, trackEvent]
   )
 
   return (
-    <ExploreSection title={messages.quickSearch} centered>
-      <Flex wrap='wrap' direction='row' justifyContent='center' gap='s'>
-        {QUICK_SEARCH_PRESETS.map((preset, idx) => (
-          <QuickSearchPresetButton
-            key={idx}
-            preset={preset}
-            onPress={() => {
-              handlePressPreset(preset)
-            }}
-          />
-        ))}
-      </Flex>
-    </ExploreSection>
+    <InViewWrapper>
+      <ExploreSection title={messages.quickSearch} centered>
+        <Flex wrap='wrap' direction='row' justifyContent='center' gap='s'>
+          {QUICK_SEARCH_PRESETS.map((preset, idx) => (
+            <QuickSearchPresetButton
+              key={idx}
+              preset={preset}
+              onPress={() => {
+                handlePressPreset(preset)
+              }}
+            />
+          ))}
+        </Flex>
+      </ExploreSection>
+    </InViewWrapper>
   )
 }

packages/mobile/src/screens/explore-screen/components/RecentlyPlayed.tsx

@@ -5,13 +5,14 @@ import { exploreMessages as messages } from '@audius/common/messages'
 
 import { useTheme } from '@audius/harmony-native'
 import { TrackCardList } from 'app/components/track-card-list'
-import { useDeferredElement } from 'app/hooks/useDeferredElement'
+
+import { useExploreSectionTracking } from '../hooks/useExploreSectionTracking'
 
 import { ExploreSection } from './ExploreSection'
 
 export const RecentlyPlayedTracks = () => {
   const { spacing } = useTheme()
-  const { InViewWrapper, inView } = useDeferredElement()
+  const { InViewWrapper, inView } = useExploreSectionTracking('Recently Played')
   const { data: recentlyPlayedTracks } = useRecentlyPlayedTracks(
     { pageSize: 10 },
     { enabled: inView }

packages/mobile/src/screens/explore-screen/hooks/useExploreSectionTracking.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react'
+
+import { useAnalytics } from '@audius/common/hooks'
+import type { ExploreSectionName } from '@audius/common/models'
+import { Name } from '@audius/common/models'
+
+import { useDeferredElement } from 'app/hooks/useDeferredElement'
+
+/**
+ * Hook to track explore section impressions when they come into view on mobile
+ */
+export const useExploreSectionTracking = (sectionName: ExploreSectionName) => {
+  const { inView, InViewWrapper } = useDeferredElement()
+  const { trackEvent } = useAnalytics()
+
+  useEffect(() => {
+    if (inView) {
+      trackEvent({
+        eventName: Name.EXPLORE_SECTION_VIEW,
+        section: sectionName,
+        source: 'mobile'
+      })
+    }
+  }, [inView, sectionName, trackEvent])
+
+  return { inView, InViewWrapper }
+}

packages/web/src/pages/search-explore-page/components/desktop/ActiveDiscussionsSection.tsx

@@ -3,10 +3,10 @@ import { exploreMessages as messages } from '@audius/common/messages'
 
 import { Carousel } from './Carousel'
 import { TilePairs, TileSkeletons } from './TileHelpers'
-import { useDeferredElement } from './useDeferredElement'
+import { useExploreSectionTracking } from './useExploreSectionTracking'
 
 export const ActiveDiscussionsSection = () => {
-  const { ref, inView } = useDeferredElement()
+  const { ref, inView } = useExploreSectionTracking('Active Discussions')
 
   const { data, isLoading, isError, isSuccess } = useRecentlyCommentedTracks(
     { pageSize: 10 },

packages/web/src/pages/search-explore-page/components/desktop/ArtistCoinTracksSection.tsx

@@ -3,10 +3,10 @@ import { exploreMessages as messages } from '@audius/common/messages'
 
 import { Carousel } from './Carousel'
 import { TilePairs, TileSkeletons } from './TileHelpers'
-import { useDeferredElement } from './useDeferredElement'
+import { useExploreSectionTracking } from './useExploreSectionTracking'
 
 export const ArtistCoinTracksSection = () => {
-  const { ref, inView } = useDeferredElement()
+  const { ref, inView } = useExploreSectionTracking('Artist Coin Tracks')
 
   const { data, isLoading, isError, isSuccess } = useExploreContent({
     enabled: inView

packages/web/src/pages/search-explore-page/components/desktop/ArtistSpotlightSection.tsx

@@ -5,10 +5,10 @@ import { UserCard, UserCardSkeleton } from 'components/user-card'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 import { Carousel } from './Carousel'
-import { useDeferredElement } from './useDeferredElement'
+import { useExploreSectionTracking } from './useExploreSectionTracking'
 
 export const ArtistSpotlightSection = () => {
-  const { ref, inView } = useDeferredElement()
+  const { ref, inView } = useExploreSectionTracking('Artist Spotlight')
   const { data, isLoading, isError, isSuccess } = useExploreContent({
     enabled: inView
   })