Improve Data Available in the IFrame Player for Web Tracking Purposes

[tomasfn87]

I have developed a Google Tag Manager tracking solution for the Spotify embed player. It follows the main Google Tag Manager Native YouTube tag aspects and allows marketing professional to set up marketing campaigns that has the interaction with the Spotify embedded content as their goal.

-

It supports the events: playback_started, playback_paused, playback_resumed, progress (with configurable list of percentage values when the progress tracking should fire) and complete.

-

https://community.spotify.com/t5/Spotify-for-Developers/Spotify-iFrame-tracking-via-GTM-Any-code/m-p...

All the code I have developed and also the implementation details are described in my posts in the topic above.

-

But, unlike the YouTube IFrame API, we don't have access to the details of the audio content that is being played - we can detect each track in an album or playlist only by its duration (it changes when a song changes inside a playlist), and I'm sure users would love to have all the information at hand (album name, artist name, track name, show name, episode name). We can't get the details from the IFrame HTML since it's in an IFrame (it's impossible to track IFrame with different hostname/domain since it's basically a spotify.com page opened inside a HTML tag).

-

Even without these information the tag works pretty nice, it's a great add-on for the embed player users. The results can be seen by simply opening the Developer Tools (F12 in Google Chrome) and tying dataLayer.

-

The tag is implemented and working fine in my URL Parsing project : https://tomasfn87.github.io/url-parser. Just submit a https://open.spotify.com/<type>/<id> URL ou a Spotify URI (i.e. spotify:playlist:<id> or spotify:artist:<id>) and check the dataLayer.