The most complex component is the Custom HTML Tag, so let\u2019s start there.<\/p>\n
Here\u2019s the full Tag code. Copy-paste it into a new Custom HTML Tag:<\/p>\n
\n
<\/span>\nscript src<\/span>=\"https:\/\/w.soundcloud.com\/player\/api.js\"<\/span>>script<\/span>>\n<\/span>\nscript>\n (function<\/span>() {\n try<\/span> {\n \/\/ initWidget is called when a SoundCloud iframe is found on the page\n<\/span> var<\/span> initWidget = function<\/span>(w) {\n var<\/span> currentSound, act, pos, q1, q2, q3, go, lab;\n var<\/span> cat = 'SoundCloud'<\/span>;\n var<\/span> widget = SC.Widget(w);\n \n \/\/ Events.READY is dispatched when the widget has been loaded\n<\/span> widget.bind(SC.Widget.Events.READY, function<\/span>() {\n \n \/\/ Get the title of the currently playing sound\n<\/span> widget.getCurrentSound(function<\/span>(cs) { \n lab = cs['title'<\/span>]; \n });\n \n \/\/ Fire a dataLayer event when Events.PLAY is dispatched\n<\/span> widget.bind(SC.Widget.Events.PLAY, function<\/span>() { \n act = 'Play'<\/span>; \n sendDl(cat, act, lab); \n });\n \n \/\/ Fire a dataLayer event when Events.PAUSE is dispatched\n<\/span> \/\/ The only exception is when the sound ends, and the auto-pause is not reported\n<\/span> widget.bind(SC.Widget.Events.PAUSE, function<\/span>(obj) { \n pos = Math<\/span>.round(obj['relativePosition'<\/span>] * 100<\/span>);\n if<\/span> (pos !== 100<\/span>) {\n act = 'Pause'<\/span>; \n sendDl(cat, act, lab); \n }\n });\n \n \/\/ As the play progresses, send events at 25%, 50% and 75%\n<\/span> widget.bind(SC.Widget.Events.PLAY_PROGRESS, function<\/span>(obj) { \n go = false<\/span>;\n pos = Math<\/span>.round(obj['relativePosition'<\/span>] * 100<\/span>);\n if<\/span> (pos === 25<\/span> && !q1) {\n act = '25%'<\/span>;\n q1 = true<\/span>;\n go = true<\/span>;\n }\n if<\/span> (pos === 50<\/span> && !q2) {\n act = '50%'<\/span>;\n q2 = true<\/span>;\n go = true<\/span>;\n }\n if<\/span> (pos === 75<\/span> && !q3) {\n act = '75%'<\/span>;\n q3 = true<\/span>;\n go = true<\/span>;\n }\n if<\/span> (go) {\n sendDl(cat, act, lab);\n }\n });\n \n \/\/ When the sound finishes, send an event at 100%\n<\/span> widget.bind(SC.Widget.Events.FINISH, function<\/span>() { \n act = '100%'<\/span>; \n q1 = q2 = q3 = false<\/span>; \n sendDl(cat, act, lab); \n });\n });\n };\n \n \/\/ Generic method for pushing the dataLayer event\n<\/span> \/\/ Use a Custom Event Trigger with \"scEvent\" as the event name\n<\/span> \/\/ Remember to create Data Layer Variables for eventCategory, eventAction, and eventLabel\n<\/span> var<\/span> sendDl = function<\/span>(cat, act, lab) {\n window<\/span>.dataLayer.push({\n 'event'<\/span> : 'scEvent'<\/span>,\n 'eventCategory'<\/span> : cat,\n 'eventAction'<\/span> : act,\n 'eventLabel'<\/span> : lab\n });\n };\n\n \/\/ For each SoundCloud iFrame, initiate the API integration\n<\/span> var<\/span> i,len;\n var<\/span> iframes = document<\/span>.querySelectorAll('iframe[src*=\"api.soundcloud.com\"]'<\/span>);\n for<\/span> (i = 0<\/span>, len = iframes.length; i 1) {\n initWidget(iframes[i]);\n }\n } catch<\/span>(e) { console.log('Error with SoundCloud API: '<\/span> + e.message); }\n })();\nscript<\/span>><\/code><\/pre>\n<\/div>\nMake sure this Custom HTML Tag fires upon a Page View<\/strong> Trigger, where the Trigger Type is DOM Ready<\/strong>. If it doesn\u2019t work, try changing the Trigger Type to Window Loaded<\/strong>. It\u2019s possible a race condition emerges, where the Custom HTML Tag is fired before your SoundCloud widgets are loaded, and shifting the Trigger to fire on Window Loaded should remedy that.<\/p>\nLet\u2019s chop it up into pieces so we\u2019ll understand what\u2019s happening. This time, we\u2019ll start from the end!<\/p>\n
\n
\/\/ For each SoundCloud iFrame, initiate the API integration\n<\/span>var<\/span> i,len;\nvar<\/span> iframes = document<\/span>.querySelectorAll('iframe[src*=\"api.soundcloud.com\"]'<\/span>);\nfor<\/span> (i = 0<\/span>, len = iframes.length; i 1) {\n initWidget(iframes[i]);\n}\n<\/code><\/pre>\n<\/div>\nThe code above goes through all the iframes on the page. If it encounters an iframe that loads an embedded SoundCloud Widget, it calls the initWidget<\/code> method, using the iframe object as a parameter. This is as simple as it gets. The cool thing is that each iframe gets its own bindings, so you can run the script with multiple SoundCloud widgets on the page!<\/p>\n\n
var<\/span> initWidget = function<\/span>(w) {\n var<\/span> currentSound, act, pos, q1, q2, q3, go, lab;\n var<\/span> cat = 'SoundCloud'<\/span>;\n var<\/span> widget = SC.Widget(w);\n \n \/\/ Events.READY is dispatched when the widget has been loaded\n<\/span> widget.bind(SC.Widget.Events.READY, function<\/span>() {\n \n \/\/ Get the title of the currently playing sound\n<\/span> widget.getCurrentSound(function<\/span>(cs) { \n lab = cs['title'<\/span>]; \n }); \n<\/code><\/pre>\n<\/div>\nThe initWidget<\/code> function is called for all the SoundCloud iframes on the page. First, it declares some utility variables. Next, it uses the Widget API SC.Widget<\/code> constructor to create a new widget object the API uses for the bindings.<\/p>\nOn the following lines, the SC.Widget.Events.READY<\/code> event is bound to the widget object. This event is fired when the embedded SoundCloud object has loaded and is ready to be interacted with. All the listeners are put into this function callback, as we don\u2019t want to start listening for events before the embedded file has loaded, right?<\/p>\nThe first thing we do is get the title of the sound, and for that we need to use the asynchronous getCurrentSound<\/code> function, whose callback returns the sound object. Then, we access this object\u2019s title<\/code> key and store it in a variable. Now we have all the static variables defined, and we can create our four listeners.<\/p>\n\n
\/\/ Fire a dataLayer event when Events.PLAY is dispatched\n<\/span>widget.bind(SC.Widget.Events.PLAY, function<\/span>() { \n act = 'Play'<\/span>; \n sendDl(cat, act, lab); \n});\n<\/code><\/pre>\n<\/div>\nThe first listener is bound to the SC.Widget.Events.PLAY<\/code> event, which, surprisingly, is dispatched when a \u201cPlay\u201d event is recorded in the widget. Once that happens, we set the act<\/code> variable to \u201cPlay\u201d, and invoke the sendDl<\/code> (see below) method, which does the dataLayer.push()<\/code>. Parameters are the cat<\/code> (\u201cSoundCloud\u201d), act<\/code> (\u201cPlay\u201d), and lab<\/code> (Sound title) variables.<\/p>\n\n
\/\/ Fire a dataLayer event when Events.PAUSE is dispatched\n<\/span>\/\/ The only exception is when the sound ends, and the auto-pause is not reported\n<\/span>widget.bind(SC.Widget.Events.PAUSE, function<\/span>(obj) { \n pos = Math<\/span>.round(obj['relativePosition'<\/span>] * 100<\/span>);\n if<\/span> (pos !== 100<\/span>) {\n act = 'Pause'<\/span>; \n sendDl(cat, act, lab); \n }\n});\n<\/code><\/pre>\n<\/div>\nThe next event we\u2019ll bind is SC.Widget.Events.PAUSE<\/code>, which is dispatched when a \u201cPause\u201d event is recorded in the widget. It\u2019s practically the same as the \u201cPlay\u201d event, but we need to add one extra check there. SoundCloud auto-pauses the sound when it\u2019s completed, so GA would receive a number of \u201cPause\u201d events that were not initiated by the user. That\u2019s why we have the check on the first line of the callback, where we basically see if the \u201cPause\u201d event occurred when the position of the sound is at 100%. This would indicate that it\u2019s an auto-pause, and we won\u2019t invoke sendDl<\/code> in that case.<\/p>\n\n
\/\/ As the play progresses, send events at 25%, 50% and 75%\n<\/span>widget.bind(SC.Widget.Events.PLAY_PROGRESS, function<\/span>(obj) { \n go = false<\/span>;\n pos = Math<\/span>.round(obj['relativePosition'<\/span>] * 100<\/span>);\n if<\/span> (pos === 25<\/span> && !q1) {\n act = '25%'<\/span>;\n q1 = true<\/span>;\n go = true<\/span>;\n }\n if<\/span> (pos === 50<\/span> && !q2) {\n act = '50%'<\/span>;\n q2 = true<\/span>;\n go = true<\/span>;\n }\n if<\/span> (pos === 75<\/span> && !q3) {\n act = '75%'<\/span>;\n q3 = true<\/span>;\n go = true<\/span>;\n }\n if<\/span> (go) {\n sendDl(cat, act, lab);\n }\n});\n<\/code><\/pre>\n<\/div>\nThe next binding is for the SC.Widget.Events.PLAY_PROGRESS<\/code>. This event is dispatched every few milliseconds, and the object it returns has the relative position<\/em> of the sound at the time of the event. This relative position is actually a percentage of how far the user has listened to the track. So, because I\u2019ve chosen to send an event at 25%, 50%, 75% and 100%, I need to check if the relative position is at these milestones. I also use a couple of booleans, q1 q2 q3 go<\/code>, which prevent the same milestone from being sent multiple times. The go<\/code> variable ensures that the GA Event is only fired when the milestones are reached, and not for every single iteration of the PLAY_PROGRESS event.<\/p>\n\n
\/\/ When the sound finishes, send an event at 100%\n<\/span>widget.bind(SC.Widget.Events.FINISH, function<\/span>() { \n act = '100%'<\/span>; \n q1 = q2 = q3 = false<\/span>; \n sendDl(cat, act, lab); \n});\n<\/code><\/pre>\n<\/div>\nFinally, when the sound finishes, we send the 100% event, and we also reset the utility variables. If we don\u2019t reset them, repeated listenings would not be recorded.<\/p>\n
\n
\/\/ Generic method for pushing the dataLayer event\n<\/span>\/\/ Use a Custom Event Trigger with \"scEvent\" as the event name\n<\/span>\/\/ Remember to create Data Layer Variables for eventCategory, eventAction, and eventLabel\n<\/span>var<\/span> sendDl = function<\/span>(cat, act, lab) {\n window<\/span>.dataLayer.push({\n 'event'<\/span> : 'scEvent'<\/span>,\n 'eventCategory'<\/span> : cat,\n 'eventAction'<\/span> : act,\n 'eventLabel'<\/span> : lab\n });\n};\n<\/code><\/pre>\n<\/div>\nAnd here\u2019s the sendDl<\/code> method. It just takes the parameters, and pushes them into a
![\"Google](\"https:\/\/www.simoahava.com\/images\/2015\/06\/gtm-soundcloud.jpg#ZgotmplZ\")
<\/p>\n