diff --git a/.changeset/playlist-play-analytics.md b/.changeset/playlist-play-analytics.md new file mode 100644 index 00000000000..5f1ab269d00 --- /dev/null +++ b/.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 diff --git a/packages/common/src/models/Analytics.ts b/packages/common/src/models/Analytics.ts index 0417d3d168e..5588bc3b1e2 100644 --- a/packages/common/src/models/Analytics.ts +++ b/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 diff --git a/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx b/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx index b0aac055bb0..4f5bb3159aa 100644 --- a/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx +++ b/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx @@ -177,6 +177,30 @@ const recordPlay = (id: Maybe, play = true) => { ) } +const recordPlaylistPlay = ({ + collectionId, + isAlbum, + trackCount, + isPreview +}: { + collectionId: Maybe + 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 ] ) diff --git a/packages/web/src/components/track/desktop/CollectionTile.tsx b/packages/web/src/components/track/desktop/CollectionTile.tsx index 3893a637867..9a3fecade63 100644 --- a/packages/web/src/components/track/desktop/CollectionTile.tsx +++ b/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 ] ) diff --git a/packages/web/src/components/track/mobile/CollectionTile.tsx b/packages/web/src/components/track/mobile/CollectionTile.tsx index 097a9dd514b..2cbf7a16542 100644 --- a/packages/web/src/components/track/mobile/CollectionTile.tsx +++ b/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 ]) diff --git a/packages/web/src/pages/collection-page/useCollectionPage.ts b/packages/web/src/pages/collection-page/useCollectionPage.ts index f6554830234..5c1e1994a92 100644 --- a/packages/web/src/pages/collection-page/useCollectionPage.ts +++ b/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 ] )