topic Spotify iFrame tracking via GTM. Any code? in Spotify for Developers

Spotify iFrame tracking via GTM. Any code?

wop9825 — Thu, 27 Apr 2023 10:27:28 GMT

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

Re: Spotify iFrame tracking via GTM. Any code?

Prague — Sun, 30 Apr 2023 04:19:11 GMT

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:

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:

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

Re: Spotify iFrame tracking via GTM. Any code?

dasgelbevomei — Tue, 15 Aug 2023 12:28:32 GMT

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

Re: Spotify iFrame tracking via GTM. Any code?

dasgelbevomei — Tue, 15 Aug 2023 13:41:17 GMT

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

Re: Spotify iFrame tracking via GTM. Any code?

KloutedKnight — Mon, 23 Oct 2023 00:21:27 GMT

Did this ever start working for you?

Are you able to track events properly?

Re: Spotify iFrame tracking via GTM. Any code?

dasgelbevomei — Mon, 23 Oct 2023 08:09:23 GMT

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.

Re: Spotify iFrame tracking via GTM. Any code?

LeonBarton — Thu, 28 Dec 2023 16:20:32 GMT

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.

Re: Spotify iFrame tracking via GTM. Any code?

JoannaReyes — Tue, 15 Oct 2024 08:32:17 GMT

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

Re: Spotify iFrame tracking via GTM. Any code?

tomasfn87 — Thu, 08 May 2025 18:52:34 GMT

Version 0.0.1:

So what I'm doing right now is

1. I printed 'event' to the console to see its parameters and found out the URI is not at 'event.data.uri' but at 'event.data.payload.playingURI';

2. I created a JS variable name 'spotifyLastURI';

2.1. This variable is then used to detect whether the URI has changed or was empty, so the dataLayer event will trigger only when the URI is different, because (as folks commented above) it kept triggering non-stop, and the problem was that it also wasn't bringing the valuable information (spotify's URI) for me.

Re: Spotify iFrame tracking via GTM. Any code?

tomasfn87 — Sun, 04 May 2025 11:04:35 GMT

And now my 'spotifyReady' event actually brings something useful:

{ event: "spotifyReady", gtm.uniqueEventId: 45, spotifyUri: "spotify:album:2hLNxoJZ5kZoBEX0XGBRNu" }

Re: Spotify iFrame tracking via GTM. Any code?

tomasfn87 — Sun, 04 May 2025 11:09:28 GMT

The next step was to add a new DLV (dataLayer variable) in Google Tag Manager named 'spotifyUri' and used it as a parameter in a GA4 tag.

And I'm now able to register which Spotify's content was loaded dinamically in my website, which is a good working point. I'd love to actually register which Artist, Song, Album, Playlist or Episode was loaded since it's possible that content may be removed in the future and I'll never know what it actually was because I won't be able to visit the link. But it solves most people's problems, I guess!

Re: Spotify iFrame tracking via GTM. Any code?

tomasfn87 — Thu, 08 May 2025 14:17:18 GMT

It works very nice. And you can monitor via GA4's Realtime report.

Events' card (GA4 Realtime):

GTM - GA4 tag for Spotify Content:

Re: Spotify iFrame tracking via GTM. Any code?

tomasfn87 — Sun, 04 May 2025 11:16:42 GMT

I updated some outdated references and added a variable to allow the dataLayer event to be triggered only once for each new content loaded into the player.

Re: Spotify iFrame tracking via GTM. Any code?

tomasfn87 — Sat, 25 Oct 2025 13:17:08 GMT

Version 0.0.2:

For a more robust implementation and to be able to detect multiple events as the content is played:

- audio_playback_started;

- audio_playback_paused;

- audio_playback_resumed;

- audio_complete;

- audio_progress (with configurable detection values' array i.e. [25, 50, 75]);

Parameters:

- audio_content;

- audio_content_type;

- audio_current_time;

- audio_duration;

- audio_percent;

- audio_provider;

- audio_status;

- audio_url.

GTM Custom HTML Spotify Audio Tag:

GTM GA4 Tag:

GTM GA4 Spotify Event Trigger:

GTM Folder:

DataLayer events for a Spotify Episode: playback_started (6), progress (from 7 to 16; from 18 to 25) and complete (17) events:

Re: Spotify iFrame tracking via GTM. Any code?

tomasfn87 — Fri, 09 May 2025 18:43:45 GMT

To log Spotify's player activity to the console:

(check if this is working before anything)

window.addEventListener( 'message', function(e) { console.log(e); }, false );

Re: Spotify iFrame tracking via GTM. Any code?

tomasfn87 — Mon, 12 May 2025 04:16:54 GMT

Hey JoannaReyes, please try my freshly developed solution (described under Version 0.0.2). It's a complete Spotify Audio Tag, similar to YouTube and Vimeo Video Tags.

The repository link cannot be shared but it's Microsoft's repository service, you just need to add the path below:

/tomasfn87/url-parser/blob/main/gtm/spotify-audio.json.md

Re: Spotify iFrame tracking via GTM. Any code?

carlosmdh — Mon, 21 Jul 2025 07:33:56 GMT

Thanks Thomas.

Is possible include Spotify Audio Title like a new parameter?

Re: Spotify iFrame tracking via GTM. Any code?

tomasfn87 — Wed, 20 Aug 2025 02:13:10 GMT

Unfortunately not!

The Spotify player is an iFrame HTML tag that opens https://open.spotify.com, which means one can neither detect activity on it nor capture text from its HTML tags (track or episode title, artist, album or playlist name).

I think it's possible to use some web scrapping tool to visit the https://open.spotify.com URL and fetch this data later to enrich your Google Analytics reports.