Adapting YouTube Tracking in GTM for Hidden Videos & Video Title

There’s a great tutorial from LunaMetrics that illustrates how to implement YouTube video tracking. We were using it while working on a custom solution for a client, and we ran into a snag — the videos we wanted to track weren’t present on page load, which meant that the script from the tutorial would never fire. The code can actually handle this situation if the injected iframes have the ‘enablejsonapi’ and ‘origin’ properties set in their src attributes, or if you alter the script that injects the iframe to include those properties. But in this case we didn’t have access to the page back-end to alter how the iframe is added. We came up with a workaround, which I want to briefly illustrate in this post in case it is of use to some intrepid GTM traveler in the future.

Call Tracking Script When Video is Ready

We basically needed a way to tell the code when the video will ACTUALLY be ready. In our case, the YouTube iframes are injected into a modal popup when a link is clicked. LunaMetrics’ GTM script uses the onYouTubeIframeAPIReady event to kick off the tracking sequence, so we can manually call that function when the link is clicked and we should be golden. We ended up injecting this tiny script using a custom HTML tag when the button is clicked:

if(typeof YT !== "undefined") {
window.onYouTubeIframeAPIReady();
}

C:\Users\Dan\Desktop\tagmangerpro.com\adapting-youtube-tracking-gtm-hidden-videos-video-title\post.html It checks to see if the YouTube API is loaded and then calls the onYouTubeIframeReady() function to kick off the tracking code. Depending on when your videos are injected into the page, you can run this script on different events and it should work the same way.

Get Video Title Instead of URL

In the tutorial code, the two values that are pushed into GTM are ‘state’ and ‘videoUrl’. Instead of the video URL we wanted to push the title, to make the data more readable. To do this we made a few small tweaks to the script, illustrated below. Note: these are short excerpts illustrating the changes we’ve made. Highlighted lines are our own additions/modifications. Get the whole modified script here, and the original script here. Change fireAnalyticsEvent() to accept a ‘player’ object, and use that to get the title:

// Fire an event to Google Analytics or Google Tag Manager
function fireAnalyticsEvent(videoId, state, player) {

var videoTitle = player.getVideoData().title;
var _ga = window.GoogleAnalyticsObject;

if (typeof window[dataLayerName] !== 'undefined' && !_config.forceSyntax) {

window[dataLayerName].push({

'event': 'youTubeTrack',
'attributes': {

'videoTitle': videoTitle,
'videoAction': state

}

});

} else if (typeof window[_ga] === 'function' &&
typeof window[_ga].getAll === 'function' &&
_config.forceSyntax !== 2) {

window[_ga]('send', 'event', 'Videos', state, videoTitle);

} else if (typeof window._gaq !== 'undefined' && forceSyntax !== 1) {

window._gaq.push(['_trackEvent', 'Videos', state, videoTitle]);

}

}

Then change the references to the fireAnalyticsEvent function to pass in the ‘player’ object. In onStateChangeHandler():

// If we're meant to track this event, fire it
if (eventsFired[state]) {

fireAnalyticsEvent(youTubeIframe.videoId, state, player);

}

And in checkCompletion():

if (marks[key] <= currentTime && !player[videoId][key]) {

player[videoId][key] = true;
fireAnalyticsEvent(videoId, key, player);

}

That’s it! Let us know in the comments how you implemented video tracking on your own projects!