Add playlist play event tracking across mobile and web

.changeset/playlist-play-analytics.md

@@ -0,0 +1,7 @@
+---
+"@audius/common": patch
+"@audius/mobile": patch
+"@audius/web": patch
+---
+
+Add a dedicated Playlist: Play amplitude event that fires when a user starts playback of a playlist or album from the collection page or from a collection tile on web and mobile

packages/common/src/models/Analytics.ts

@@ -288,6 +288,7 @@ export enum Name {
   // Playback
   PLAYBACK_PLAY = 'Playback: Play',
   PLAYBACK_PAUSE = 'Playback: Pause',
+  PLAYLIST_PLAY = 'Playlist: Play',
   // Playback performance metrics
   BUFFERING_TIME = 'Buffering Time',
 
@@ -1481,6 +1482,15 @@ type PlaybackPause = {
   source: PlaybackSource
 }
 
+type PlaylistPlay = {
+  eventName: Name.PLAYLIST_PLAY
+  id: string
+  source: PlaybackSource
+  isAlbum?: boolean
+  trackCount?: number
+  isPreview?: boolean
+}
+
 type BufferingTime = {
   eventName: Name.BUFFERING_TIME
   duration: number
@@ -3185,6 +3195,7 @@ export type AllTrackingEvents =
   | TrackPagePlayMore
   | PlaybackPlay
   | PlaybackPause
+  | PlaylistPlay
   | BufferingTime
   | Follow
   | Unfollow

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

@@ -177,6 +177,30 @@ const recordPlay = (id: Maybe<number>, play = true) => {
   )
 }
 
+const recordPlaylistPlay = ({
+  collectionId,
+  isAlbum,
+  trackCount,
+  isPreview
+}: {
+  collectionId: Maybe<number>
+  isAlbum: boolean
+  trackCount: number
+  isPreview?: boolean
+}) => {
+  if (collectionId == null) return
+  track(
+    make({
+      eventName: Name.PLAYLIST_PLAY,
+      id: String(collectionId),
+      source: PlaybackSource.PLAYLIST_PAGE,
+      isAlbum,
+      trackCount,
+      isPreview
+    })
+  )
+}
+
 export const CollectionScreenDetailsTile = ({
   description,
   collectionId,
@@ -314,10 +338,22 @@ export const CollectionScreenDetailsTile = ({
       } else if (!isPlaying && isQueued) {
         dispatch(tracksActions.play())
         recordPlay(playingTrackId)
+        recordPlaylistPlay({
+          collectionId: numericCollectionId,
+          isAlbum: !!isAlbum,
+          trackCount,
+          isPreview
+        })
       } else if (trackCount > 0 && firstTrack) {
         dispatch(queueActions.clear({}))
         dispatch(tracksActions.play(firstTrack.uid, { isPreview }))
         recordPlay(firstTrack.id)
+        recordPlaylistPlay({
+          collectionId: numericCollectionId,
+          isAlbum: !!isAlbum,
+          trackCount,
+          isPreview
+        })
       }
     },
     [
@@ -327,7 +363,9 @@ export const CollectionScreenDetailsTile = ({
       trackCount,
       firstTrack,
       dispatch,
-      playingTrackId
+      playingTrackId,
+      numericCollectionId,
+      isAlbum
     ]
   )
 

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

@@ -247,6 +247,14 @@ export const CollectionTile = ({
                 source: PlaybackSource.PLAYLIST_TILE_TRACK
               })
             )
+            record(
+              make(Name.PLAYLIST_PLAY, {
+                id: `${id}`,
+                source: PlaybackSource.PLAYLIST_TILE_TRACK,
+                isAlbum: !!isAlbum,
+                trackCount
+              })
+            )
           }
         } else {
           const trackUid = tracks[0] ? tracks[0].uid : null
@@ -260,6 +268,14 @@ export const CollectionTile = ({
                 source: PlaybackSource.PLAYLIST_TILE_TRACK
               })
             )
+            record(
+              make(Name.PLAYLIST_PLAY, {
+                id: `${id}`,
+                source: PlaybackSource.PLAYLIST_TILE_TRACK,
+                isAlbum: !!isAlbum,
+                trackCount
+              })
+            )
           }
         }
       } else {
@@ -283,6 +299,9 @@ export const CollectionTile = ({
       playingUid,
       playingTrackId,
       isUploading,
+      id,
+      isAlbum,
+      trackCount,
       record
     ]
   )

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

@@ -425,6 +425,14 @@ export const CollectionTile = ({
             source
           })
         )
+        record(
+          make(Name.PLAYLIST_PLAY, {
+            id: `${collection.playlist_id}`,
+            source,
+            isAlbum: !!collection.is_album,
+            trackCount: collection.track_count
+          })
+        )
       } else {
         const trackUid = tracks[0] ? tracks[0].uid : null
         const trackId = tracks[0] ? tracks[0].track_id : null
@@ -436,6 +444,14 @@ export const CollectionTile = ({
             source
           })
         )
+        record(
+          make(Name.PLAYLIST_PLAY, {
+            id: `${collection.playlist_id}`,
+            source,
+            isAlbum: !!collection.is_album,
+            trackCount: collection.track_count
+          })
+        )
       }
     } else {
       pauseTrack()
@@ -456,6 +472,9 @@ export const CollectionTile = ({
     playingUid,
     playingTrackId,
     uploading,
+    collection.playlist_id,
+    collection.is_album,
+    collection.track_count,
     record
   ])
 

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

@@ -548,6 +548,17 @@ export const useCollectionPage = (
             source: PlaybackSource.PLAYLIST_PAGE
           })
         )
+        if (playlistId) {
+          dispatch(
+            make(Name.PLAYLIST_PLAY, {
+              id: `${playlistId}`,
+              source: PlaybackSource.PLAYLIST_PAGE,
+              isAlbum: !!collection?.is_album,
+              trackCount,
+              isPreview: shouldPreview
+            })
+          )
+        }
       } else if (tracks.entries.length > 0) {
         dispatch(playerActions.stop({}))
         dispatch(
@@ -562,6 +573,17 @@ export const useCollectionPage = (
             source: PlaybackSource.PLAYLIST_PAGE
           })
         )
+        if (playlistId) {
+          dispatch(
+            make(Name.PLAYLIST_PLAY, {
+              id: `${playlistId}`,
+              source: PlaybackSource.PLAYLIST_PAGE,
+              isAlbum: !!collection?.is_album,
+              trackCount,
+              isPreview: shouldPreview
+            })
+          )
+        }
       }
     },
     [
@@ -572,6 +594,8 @@ export const useCollectionPage = (
       accountUserId,
       tracks.entries,
       getPlayingId,
+      playlistId,
+      trackCount,
       dispatch
     ]
   )