This Google Tag Manager auto-event listener was originally posted by Simo Ahava.
What does it do? Automatically tracks interactions with embedded Mixcloud player on your site. This recipe will fire events to Google Analytics when users view 25%, 50%, 75% of the audio track. Other possible events are: ‘buffering’, ‘play’, ‘pause’, ‘ended’, ‘error’.
INSTRUCTIONS
- Download Container File
Download the container JSON file (right-click on the link and click “Save Link As” or “Save Target As” to save the JSON file to your computer). - Import JSON File into GTM
Log into your own Google Tag Manager container and head to the Admin section of the site. Under Container options, select Import Container. Read this blog post for more details about importing a container file. - Update With Your Own Tracking ID
Update or create a new Constant Variable named {{YOUR_GA_TRACKING_ID}} with your Google Analytics Tracking ID (a.k.a. UA Number). I’d recommend using Google Analytics Settings variable instead. Read this guide how to properly change Tracking ID in the imported container. - Embed the correct Mixcloud code
To add the player widget to your site, select the show you want to embed, and click the Share button. An overlay should open with both a Share and an Embed option. Choose the latter. Setup the player visuals however you wish. Once you’re done, uncheck the box next to WordPress, after which the text box should contain an iframe embed tag.
- Edit embedded code
Add a unique ID attribute to the iframe code. It makes much easier to target the correct player. The code should look like this (notice that id=”myPlayer” in the 2nd piece of code?).
You can add any ID you want, but make sure it’s unique on that page. Embed this code on your website. - Edit Mixcloud Listener
Open “cHTML – Mixcloud Listener” tag in Google Tag Manager and edit line 11 of its code. Replace #myPlayer with the very same ID you chose in the 5th step of this tutorial. This way Mixcloud tracking code will know which player it should track. - Preview & Publish
Use the Preview options to test this container on your own site. Try testing each of the events to make sure they’re working properly. If everything looks good, go ahead and publish!
View all 30+ Google Tag Manager Recipes