<script type="text/javascript"> // OPTIONAL: Enable JSAPI if it's not already on the URL // note: this will cause the Youtube player to "flash" on the page when reloading to enable the JS API for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;) if (/youtube.com\/embed/.test(e[x].src)) if(e[x].src.indexOf('enablejsapi=') === -1) e[x].src += (e[x].src.indexOf('?') ===-1 ? '?':'&') + 'enablejsapi=1'; var gtmYTListeners = []; // support multiple players on the same page // attach our YT listener once the API is loaded function onYouTubeIframeAPIReady() { for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;) { if (/youtube.com\/embed/.test(e[x].src)) { gtmYTListeners.push(new YT.Player(e[x], { events: { onStateChange: onPlayerStateChange, onError: onPlayerError } })); YT.gtmLastAction = "p"; } } } // listen for play/pause, other states such as rewind and end could also be added // also report % played every second function onPlayerStateChange(e) { e["data"] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e["target"]); var video_data = e.target["getVideoData"](), label = video_data.video_id+':'+video_data.title; if (e["data"] == YT.PlayerState.PLAYING && YT.gtmLastAction == "p") { dataLayer.push({ event: "youtube", action: "play", label: label }); YT.gtmLastAction = ""; } if (e["data"] == YT.PlayerState.PAUSED) { dataLayer.push({ event: "youtube", action: "pause", label: label }); YT.gtmLastAction = "p"; } } // catch all to report errors through the GTM data layer // once the error is exposed to GTM, it can be tracked in UA as an event! // refer to https://developers.google.com/youtube/js_api_reference#Events onError function onPlayerError(e) { dataLayer.push({ event: "error", action: "GTM", label: "youtube:" + e }) } // report the % played if it matches 0%, 25%, 50%, 75% or completed function onPlayerPercent(e) { if (e["getPlayerState"]() == YT.PlayerState.PLAYING) { var t = e["getDuration"]() - e["getCurrentTime"]() <= 1.5 ? 1 : (Math.floor(e["getCurrentTime"]() / e["getDuration"]() * 4) / 4).toFixed(2); if (!e["lastP"] || t > e["lastP"]) { var video_data = e["getVideoData"](), label = video_data.video_id+':'+video_data.title; e["lastP"] = t; dataLayer.push({ event: "youtube", action: t * 100 + "%", label: label }) } e["lastP"] != 1 && setTimeout(onPlayerPercent, 1000, e); } } // Crossbrowser onbeforeunload hack/proxy // https://developer.mozilla.org/en-US/docs/WindowEventHandlers.onbeforeunload window.onbeforeunload = function (e) { var e = e || window.event; // For IE and Firefox prior to version 4 if(e) e.returnValue = 'na'; // For Safari return 'na'; }; window.onbeforeunload = trackYTUnload; function trackYTUnload() { for (var i = 0; i < gtmYTplayers.length; i++) if (gtmYTlisteners[i].getPlayerState() === 1) { // playing var video_data = gtmYTlisteners[i]['getVideoData'](), label = video_data.video_id+':'+video_data.title; dataLayer.push({ event: 'youtube', action: 'exit', label: label }); } } // load the Youtube JS api and get going var j = document.createElement("script"), f = document.getElementsByTagName("script")[0]; j.src = "//www.youtube.com/iframe_api"; j.async = true; f.parentNode.insertBefore(j, f); </script> | 
.png)