Spotify iFrame tracking via GTM. Any code?

[wop9825]

Hello Team,

I was trying to track Spotify embed on my website via gtm, I tried searching a lot on Google but didn't find any solution. Can you help me with a code to track Spotify's iframe on a website with GTM?

Thank you in advance

Tanuj

[Prague]

Howldy wop9825,

Sure! Here is a step-by-step guide to track Spotify embed on your website via GTM:

• First, you need to create a new Tag in your Google Tag Manager account. Go to Tags > New > Tag, and select "Custom HTML" as the Tag type.

• Copy and paste the following code snippet into the HTML field:

<script>
// Listen for the Spotify player to load
window.addEventListener('message', function(event) {
  if (event.origin === 'https://open.spotify.com') {
    // Spotify player is ready, send an event to Google Tag Manager
    dataLayer.push({
      event: 'spotifyReady',
      spotifyUri: event.data.uri
    });
  }
}, false);
</script>

• Save the Tag and give it a descriptive name like "Spotify Embed Tracker".

• Next, you need to create a new Trigger that fires when the Spotify player is ready. Go to Triggers > New > Trigger, and select "Custom Event" as the Trigger type.

• In the "Event name" field, enter "spotifyReady".

• Save the Trigger and give it a descriptive name like "Spotify Embed Ready".

• Finally, you need to associate the new Tag and Trigger with your Spotify embed. To do this, go to your website and find the code for your Spotify embed.

• Add the following code snippet to your Spotify embed code, replacing "YOUR-GTM-CONTAINER-ID" with the ID of your Google Tag Manager container:

<iframe src="https://open.spotify.com/embed/track/3qN5qMTKyEEmiTZD38CmPA" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<script>
// Send a message to the Spotify player to let it know our domain
var spotifyPlayer = document.querySelector('iframe[src^="https://open.spotify.com"]');
spotifyPlayer.contentWindow.postMessage({
  type: 'listeningOn',
  domain: window.location.hostname,
  gtmId: 'YOUR-GTM-CONTAINER-ID'
}, 'https://open.spotify.com');
</script>

• Save the changes to your Spotify embed code and publish your website.

Now, whenever a user loads your website and interacts with the Spotify embed, an event will be sent to your Google Tag Manager account with the Spotify URI of the track that was played. You can use this information to create custom reports and track user behavior on your website.

I'll be barking up the wrong tree without updates on your situation!

-Prague the Dog

[dasgelbevomei]

Hi Prague the Dog,

thanks for sharing. Unfortunately, it seems not to work for me. I try to track play on a podcast show, but there are no events coming up, when clicking the play button. Any ideas how to fix?

Cheers

[dasgelbevomei]

Hi,

shouldn't the listener tag be triggered by "All Pages" instead of only when the "spotifyReady" event comes up? Otherwise, the "spotifyReady" event would never come up, or I'm mistaken?

When I integrate the tag on "All pages" and click on the play button, the event "spotifyReady" comes up every second.

Perhaps you described this step incorrectly in your tutorial?

Anyway, thank you very much for your effort!

Cheers

[KloutedKnight]

Did this ever start working for you? 

Are you able to track events properly?

[dasgelbevomei]

No, not really as discribed in the tutorial. But with the tag been triggered by "All Pages“ it seems to work for what I want to archive. When I strictly stick with the tutorial an event would never come up for me.

[LeonBarton]

This worked for me when I changed the trigger type, but I had to change the tag trigger to fire on "All Initialization Events" to get it to work.

[JoannaReyes]

I have the same problem that you? How did you fix it? Because if chenge the triggered by "All Pages“ i still with the same problem, the event "spotifyReady" comes up every second