Add collectionId to PLAYBACK_PLAY analytics events

.changeset/playlist-play-collection-id.md

@@ -0,0 +1,7 @@
+---
+"@audius/common": patch
+"@audius/mobile": patch
+"@audius/web": patch
+---
+
+Add collectionId to PLAYBACK_PLAY analytics events when a track is played from a playlist or album context

packages/common/src/models/Analytics.ts

@@ -1476,6 +1476,7 @@ type PlaybackPlay = {
   id?: string
   isPreview?: boolean
   source: PlaybackSource
+  collectionId?: string
 }
 type PlaybackPause = {
   eventName: Name.PLAYBACK_PAUSE

packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx

@@ -167,12 +167,19 @@ type CollectionScreenDetailsTileProps = {
   | 'contentType'
 >
 
-const recordPlay = (id: Maybe<number>, play = true) => {
+const recordPlay = (
+  id: Maybe<number>,
+  play = true,
+  collectionId?: Maybe<number>
+) => {
   track(
     make({
       eventName: play ? Name.PLAYBACK_PLAY : Name.PLAYBACK_PAUSE,
       id: String(id),
-      source: PlaybackSource.PLAYLIST_PAGE
+      source: PlaybackSource.PLAYLIST_PAGE,
+      ...(play && collectionId != null
+        ? { collectionId: String(collectionId) }
+        : {})
     })
   )
 }
@@ -337,7 +344,7 @@ export const CollectionScreenDetailsTile = ({
         recordPlay(playingTrackId, false)
       } else if (!isPlaying && isQueued) {
         dispatch(tracksActions.play())
-        recordPlay(playingTrackId)
+        recordPlay(playingTrackId, true, numericCollectionId)
         recordPlaylistPlay({
           collectionId: numericCollectionId,
           isAlbum: !!isAlbum,
@@ -347,7 +354,7 @@ export const CollectionScreenDetailsTile = ({
       } else if (trackCount > 0 && firstTrack) {
         dispatch(queueActions.clear({}))
         dispatch(tracksActions.play(firstTrack.uid, { isPreview }))
-        recordPlay(firstTrack.id)
+        recordPlay(firstTrack.id, true, numericCollectionId)
         recordPlaylistPlay({
           collectionId: numericCollectionId,
           isAlbum: !!isAlbum,
@@ -582,13 +589,13 @@ const CollectionTrackList = ({
         recordPlay(id, false)
       } else if (playingUid !== uid) {
         dispatch(tracksActions.play(uid))
-        recordPlay(id)
+        recordPlay(id, true, numericCollectionId)
       } else {
         dispatch(tracksActions.play())
-        recordPlay(id)
+        recordPlay(id, true, numericCollectionId)
       }
     },
-    [dispatch, isPlaying, playingUid]
+    [dispatch, isPlaying, playingUid, numericCollectionId]
   )
   return (
     <TrackList

packages/web/src/common/store/queue/sagas.ts

@@ -51,7 +51,8 @@ const {
   getShuffle,
   getSource,
   getUid,
-  getUndershot
+  getUndershot,
+  getCollectionId
 } = queueSelectors
 
 const { getProfileUserHandle } = profilePageSelectors
@@ -417,9 +418,11 @@ function* watchNext() {
               playerBehavior
             })
           )
+          const collId = yield* select(getCollectionId)
           const event = make(Name.PLAYBACK_PLAY, {
             id: `${id}`,
-            source: PlaybackSource.PASSIVE
+            source: PlaybackSource.PASSIVE,
+            ...(collId ? { collectionId: collId } : {})
           })
           yield* put(event)
         }
@@ -507,9 +510,11 @@ function* watchPrevious() {
               playerBehavior
             })
           )
+          const collId = yield* select(getCollectionId)
           const event = make(Name.PLAYBACK_PLAY, {
             id: `${id}`,
-            source: PlaybackSource.PASSIVE
+            source: PlaybackSource.PASSIVE,
+            ...(collId ? { collectionId: collId } : {})
           })
           yield* put(event)
         } else {

packages/web/src/components/track/desktop/CollectionTile.tsx

@@ -244,7 +244,8 @@ export const CollectionTile = ({
             record(
               make(Name.PLAYBACK_PLAY, {
                 id: `${playingTrackId}`,
-                source: PlaybackSource.PLAYLIST_TILE_TRACK
+                source: PlaybackSource.PLAYLIST_TILE_TRACK,
+                collectionId: `${id}`
               })
             )
             record(
@@ -265,7 +266,8 @@ export const CollectionTile = ({
             record(
               make(Name.PLAYBACK_PLAY, {
                 id: `${trackId}`,
-                source: PlaybackSource.PLAYLIST_TILE_TRACK
+                source: PlaybackSource.PLAYLIST_TILE_TRACK,
+                collectionId: `${id}`
               })
             )
             record(

packages/web/src/components/track/mobile/CollectionTile.tsx

@@ -422,7 +422,8 @@ export const CollectionTile = ({
         record(
           make(Name.PLAYBACK_PLAY, {
             id: `${playingTrackId}`,
-            source
+            source,
+            collectionId: `${collection.playlist_id}`
           })
         )
         record(
@@ -441,7 +442,8 @@ export const CollectionTile = ({
         record(
           make(Name.PLAYBACK_PLAY, {
             id: `${trackId}`,
-            source
+            source,
+            collectionId: `${collection.playlist_id}`
           })
         )
         record(

packages/web/src/pages/collection-page/useCollectionPage.ts

@@ -444,20 +444,22 @@ export const useCollectionPage = (
         dispatch(
           make(Name.PLAYBACK_PLAY, {
             id: `${trackRecord.track_id}`,
-            source: PlaybackSource.PLAYLIST_TRACK
+            source: PlaybackSource.PLAYLIST_TRACK,
+            ...(playlistId ? { collectionId: `${playlistId}` } : {})
           })
         )
       } else {
         dispatch(tracksActions.play())
         dispatch(
           make(Name.PLAYBACK_PLAY, {
             id: `${trackRecord.track_id}`,
-            source: PlaybackSource.PLAYLIST_TRACK
+            source: PlaybackSource.PLAYLIST_TRACK,
+            ...(playlistId ? { collectionId: `${playlistId}` } : {})
           })
         )
       }
     },
-    [playing, getPlayingUid, dispatch]
+    [playing, getPlayingUid, dispatch, playlistId]
   )
 
   const onClickRepostTrack = useCallback(
@@ -545,7 +547,8 @@ export const useCollectionPage = (
           make(Name.PLAYBACK_PLAY, {
             id: `${playingId}`,
             isPreview: shouldPreview,
-            source: PlaybackSource.PLAYLIST_PAGE
+            source: PlaybackSource.PLAYLIST_PAGE,
+            ...(playlistId ? { collectionId: `${playlistId}` } : {})
           })
         )
         if (playlistId) {
@@ -570,7 +573,8 @@ export const useCollectionPage = (
           make(Name.PLAYBACK_PLAY, {
             id: `${tracks.entries[0].track_id}`,
             isPreview: shouldPreview,
-            source: PlaybackSource.PLAYLIST_PAGE
+            source: PlaybackSource.PLAYLIST_PAGE,
+            ...(playlistId ? { collectionId: `${playlistId}` } : {})
           })
         )
         if (playlistId) {