[C-4681] [C-4680] Add analytics for search v2

packages/common/src/api/search.ts

@@ -2,7 +2,7 @@ import { Mood } from '@audius/sdk'
 import { isEmpty } from 'lodash'
 
 import { createApi } from '~/audius-query'
-import { UserTrackMetadata } from '~/models'
+import { Name, SearchSource, UserTrackMetadata } from '~/models'
 import { ID } from '~/models/Identifiers'
 import { FeatureFlags } from '~/services'
 import { SearchKind } from '~/store'
@@ -28,6 +28,7 @@ type getSearchArgs = {
   category?: SearchCategory
   limit?: number
   offset?: number
+  source?: SearchSource
 } & SearchFilters
 
 const getMinMaxFromBpm = (bpm?: string) => {
@@ -48,10 +49,17 @@ const searchApi = createApi({
     getSearchResults: {
       fetch: async (
         args: getSearchArgs,
-        { apiClient, audiusBackend, getFeatureEnabled }
+        { apiClient, audiusBackend, getFeatureEnabled, analytics }
       ) => {
-        const { category, currentUserId, query, limit, offset, ...filters } =
-          args
+        const {
+          category,
+          currentUserId,
+          query,
+          limit,
+          offset,
+          source = 'search results page',
+          ...filters
+        } = args
 
         const isUSDCEnabled = await getFeatureEnabled(
           FeatureFlags.USDC_PURCHASES
@@ -70,7 +78,7 @@ const searchApi = createApi({
         const [bpmMin, bpmMax] = getMinMaxFromBpm(filters.bpm)
 
         const searchTags = async () => {
-          return await audiusBackend.searchTags({
+          const searchParams = {
             userTagCount: 1,
             kind,
             query: query.toLowerCase().slice(1),
@@ -80,11 +88,25 @@ const searchApi = createApi({
             bpmMin,
             bpmMax,
             key: formatMusicalKey(filters.key)
-          })
+          }
+
+          // Fire analytics only for the first page of results
+          if (offset === 0) {
+            analytics.track(
+              analytics.make({
+                eventName: Name.SEARCH_SEARCH,
+                term: query,
+                source,
+                ...searchParams
+              })
+            )
+          }
+
+          return await audiusBackend.searchTags(searchParams)
         }
 
         const search = async () => {
-          return await apiClient.getSearchFull({
+          const searchParams = {
             kind,
             currentUserId,
             query,
@@ -95,7 +117,19 @@ const searchApi = createApi({
             bpmMin,
             bpmMax,
             key: formatMusicalKey(filters.key)
-          })
+          }
+          // Fire analytics only for the first page of results
+          if (offset === 0) {
+            analytics.track(
+              analytics.make({
+                eventName: Name.SEARCH_SEARCH,
+                term: query,
+                source,
+                ...searchParams
+              })
+            )
+          }
+          return await apiClient.getSearchFull(searchParams)
         }
 
         const results = query?.[0] === '#' ? await searchTags() : await search()

packages/common/src/audius-query/AudiusQueryContext.ts

@@ -12,7 +12,11 @@ import {
   RemoteConfigInstance
 } from '~/services/index'
 
-import { ReportToSentryArgs } from '../models'
+import {
+  AllTrackingEvents,
+  AnalyticsEvent,
+  ReportToSentryArgs
+} from '../models'
 
 export type AudiusQueryContextType = {
   apiClient: AudiusAPIClient
@@ -27,6 +31,22 @@ export type AudiusQueryContextType = {
     flag: FeatureFlags,
     fallbackFlag?: FeatureFlags
   ) => Promise<boolean> | boolean
+  analytics: {
+    init: (isMobile: boolean) => Promise<void>
+    track: (event: AnalyticsEvent, callback?: () => void) => Promise<void>
+    identify: (
+      handle: string,
+      traits?: Record<string, unknown>,
+      options?: Record<string, unknown>,
+      callback?: () => void
+    ) => Promise<void>
+    make: <T extends AllTrackingEvents>(
+      event: T
+    ) => {
+      eventName: string
+      properties: any
+    }
+  }
 }
 
 export const AudiusQueryContext = createContext<AudiusQueryContextType>(
@@ -72,6 +92,9 @@ export function* getAudiusQueryContext(): Generator<
     >('remoteConfigInstance'),
     reportToSentry: yield* getContext<AudiusQueryContextType['reportToSentry']>(
       'reportToSentry'
+    ),
+    analytics: yield* getContext<AudiusQueryContextType['analytics']>(
+      'analytics'
     )
   }
 }

packages/common/src/models/Analytics.ts

@@ -221,6 +221,8 @@ export enum Name {
 
   // Track Edits
   TRACK_EDIT_ACCESS_CHANGED = 'Track Edit: Access Changed',
+  TRACK_EDIT_BPM_CHANGED = 'Track Edit: BPM Changed',
+  TRACK_EDIT_MUSICAL_KEY_CHANGED = 'Track Edit: Musical Key Changed',
 
   // Collection Edits
   COLLECTION_EDIT_ACCESS_CHANGED = 'Collection Edit: Access Changed',
@@ -1167,6 +1169,20 @@ type TrackEditAccessChanged = {
   to: TrackAccessType
 }
 
+type TrackEditBpmChanged = {
+  eventName: Name.TRACK_EDIT_BPM_CHANGED
+  id: number
+  from: number
+  to: number
+}
+
+type TrackEditMusicalKeyChanged = {
+  eventName: Name.TRACK_EDIT_MUSICAL_KEY_CHANGED
+  id: number
+  from: string
+  to: string
+}
+
 // Collection Edits
 type CollectionEditAccessChanged = {
   eventName: Name.COLLECTION_EDIT_ACCESS_CHANGED
@@ -1444,33 +1460,40 @@ type ModalClosed = {
   name: string
 }
 
+export type SearchSource =
+  | 'autocomplete'
+  | 'search results page'
+  | 'more results page'
+
 // Search
 type SearchTerm = {
   eventName: Name.SEARCH_SEARCH
   term: string
-  source: 'autocomplete' | 'search results page' | 'more results page'
+  source: SearchSource
 }
 
 type SearchTag = {
   eventName: Name.SEARCH_TAG_SEARCH
   tag: string
-  source: 'autocomplete' | 'search results page' | 'more results page'
+  source: SearchSource
 }
 
 type SearchMoreResults = {
   eventName: Name.SEARCH_MORE_RESULTS
   term: string
-  source: 'autocomplete' | 'search results page' | 'more results page'
+  source: SearchSource
 }
 
 type SearchResultSelect = {
   eventName: Name.SEARCH_RESULT_SELECT
   term: string
-  source: 'autocomplete' | 'search results page' | 'more results page'
+  source: SearchSource
   id: ID
   kind: 'track' | 'profile' | 'playlist' | 'album'
 }
 
+// This event is no longer fired with search v2
+// Use page views instead
 type SearchTabClick = {
   eventName: Name.SEARCH_TAB_CLICK
   term: string
@@ -2515,6 +2538,8 @@ export type AllTrackingEvents =
   | TrackDownloadSuccessfulDownloadSingle
   | TrackDownloadFailedDownloadSingle
   | TrackEditAccessChanged
+  | TrackEditBpmChanged
+  | TrackEditMusicalKeyChanged
   | CollectionEditAccessChanged
   | CollectionEdit
   | TrackUploadSuccess

packages/mobile/src/app/AudiusQueryProvider.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react'
 import { AudiusQueryContext } from '@audius/common/audius-query'
 
 import { env } from 'app/env'
+import * as analytics from 'app/services/analytics'
 import { apiClient } from 'app/services/audius-api-client'
 import { audiusBackendInstance } from 'app/services/audius-backend-instance'
 import {
@@ -26,7 +27,8 @@ export const audiusQueryContext = {
   env,
   fetch,
   remoteConfigInstance,
-  getFeatureEnabled
+  getFeatureEnabled,
+  analytics
 }
 
 export const AudiusQueryProvider = (props: AudiusQueryProviderProps) => {

packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react'
 
-import { Kind, Status } from '@audius/common/models'
+import { Kind, Name, Status } from '@audius/common/models'
 import {
   searchActions,
   type SearchItem as SearchItemType
@@ -11,10 +11,11 @@ import { useDispatch } from 'react-redux'
 
 import { Box, Divider, Flex, Text } from '@audius/harmony-native'
 import { SectionList } from 'app/components/core'
+import { make, track as record } from 'app/services/analytics'
 
 import { NoResultsTile } from '../NoResultsTile'
 import { SearchItem, SearchItemSkeleton } from '../SearchItem'
-import { useGetSearchResults } from '../searchState'
+import { useGetSearchResults, useSearchQuery } from '../searchState'
 
 const { addItem: addRecentSearch } = searchActions
 
@@ -38,13 +39,28 @@ export const SearchSectionHeader = (props: SearchSectionHeaderProps) => {
 const AllResultsItem = ({
   item
 }: {
-  item: SearchItemType & { status?: Status }
+  item: SearchItemType & { status?: Status; isAlbum?: boolean }
 }) => {
   const dispatch = useDispatch()
+  const [query] = useSearchQuery()
 
   const handlePress = useCallback(() => {
     dispatch(addRecentSearch({ searchItem: item }))
-  }, [item, dispatch])
+
+    record(
+      make({
+        eventName: Name.SEARCH_RESULT_SELECT,
+        term: query,
+        source: 'search results page',
+        id: item.id,
+        kind: {
+          [Kind.COLLECTIONS]: item.isAlbum ? 'album' : 'playlist',
+          [Kind.TRACKS]: 'track',
+          [Kind.USERS]: 'profile'
+        }[item.kind]
+      })
+    )
+  }, [item, dispatch, query])
 
   return item.status === Status.LOADING ? (
     <Box ph='m'>
@@ -115,14 +131,16 @@ export const AllResults = () => {
               title: 'playlists',
               data: data.playlists.map(({ playlist_id }) => ({
                 id: playlist_id,
-                kind: Kind.COLLECTIONS
+                kind: Kind.COLLECTIONS,
+                isAlbum: false
               }))
             },
             {
               title: 'albums',
               data: data.albums.map(({ playlist_id }) => ({
                 id: playlist_id,
-                kind: Kind.COLLECTIONS
+                kind: Kind.COLLECTIONS,
+                isAlbum: true
               }))
             }
           ].filter((section) => section.data.length > 0)

packages/mobile/src/screens/search-screen-v2/search-results/PlaylistResults.tsx

@@ -1,23 +1,56 @@
-import { Kind, Status } from '@audius/common/models'
+import { useCallback } from 'react'
+
+import type { ID } from '@audius/common/models'
+import { Kind, Name, Status } from '@audius/common/models'
 import { searchActions } from '@audius/common/store'
 import { useDispatch } from 'react-redux'
 
 import { Flex, useTheme } from '@audius/harmony-native'
 import { CollectionList } from 'app/components/collection-list/CollectionList'
+import { make, track as record } from 'app/services/analytics'
 
 import { NoResultsTile } from '../NoResultsTile'
 import { SearchCatalogTile } from '../SearchCatalogTile'
-import { useGetSearchResults, useIsEmptySearch } from '../searchState'
+import {
+  useGetSearchResults,
+  useIsEmptySearch,
+  useSearchQuery
+} from '../searchState'
 
 const { addItem: addRecentSearch } = searchActions
 
 export const PlaylistResults = () => {
   const dispatch = useDispatch()
   const { spacing } = useTheme()
   const { data, status } = useGetSearchResults('playlists')
+  const [query] = useSearchQuery()
   const isEmptySearch = useIsEmptySearch()
   const hasNoResults = (!data || data.length === 0) && status === Status.SUCCESS
 
+  const handlePress = useCallback(
+    (id: ID) => {
+      dispatch(
+        addRecentSearch({
+          searchItem: {
+            kind: Kind.COLLECTIONS,
+            id
+          }
+        })
+      )
+
+      record(
+        make({
+          eventName: Name.SEARCH_RESULT_SELECT,
+          term: query,
+          source: 'search results page',
+          id,
+          kind: 'playlist'
+        })
+      )
+    },
+    [dispatch, query]
+  )
+
   if (isEmptySearch) return <SearchCatalogTile />
 
   return (
@@ -33,16 +66,7 @@ export const PlaylistResults = () => {
           keyboardShouldPersistTaps='handled'
           isLoading={status === Status.LOADING}
           collection={data as any[]}
-          onCollectionPress={(id) => {
-            dispatch(
-              addRecentSearch({
-                searchItem: {
-                  kind: Kind.COLLECTIONS,
-                  id
-                }
-              })
-            )
-          }}
+          onCollectionPress={handlePress}
         />
       )}
     </Flex>