- TLC Home Home
- Discussions & Ideas Discussions & Ideas
- Product Guides Product Guides
- Knowledge Base Knowledge Base
- Developer Docs Developer Docs
- Education Education
- Blog TLC Blog
- Support Desk Support Desk
This article shows how to set up video tracking in Tealium iQ for embedded YouTube videos.
In this article:
This solution implements basic video tracking events for embedded YouTube videos. There are two components to this solution:
The YouTube video embed code needs to be located on your website page. Here is an example of the embed code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/1234567ABC?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
The query string parameter enablejsapi=1
is required for video tracking to work.
In the YouTube iframe an "id" is not required. If one is not present, the Tealium tracking code will automatically add a unique ID to the iframe in the format of "tealium_youtube1".
The following code defines the functions that initialize the video tracking.
Copy the following code and paste into a JavaScript Code Extension scoped to Pre Loader. Then save and publish your changes.
// Tealium Tracking Code for YouTube iframe embeds
//
// Read the identifiers on the YouTube iframes. If not present, then add ids
if (jQuery('iframe[src*="youtube.com"]').length > 0) {
var i = 0, id;
window.iframe_id = [];
jQuery('iframe[src*="youtube.com"]').each(function() {
if (jQuery(this).attr('id')) {
id = jQuery(this).attr('id');
window.iframe_id.push(id);
} else {
id = 'tealium_youtube' + i;
jQuery(this).attr('id', id);
window.iframe_id.push(id);
i++;
}
});
}
// Configure Milestones
//
function setMileStones(i) {
// Set the intervals here as you want them reported, in % viewed, each number separated by a comma
// If you do not want mileStones set mileStones[i] = [] ;
mileStones[i] = [10, 25, 50, 75, 90];
}
var mileStones = [];
if (window.iframe_id) {
for (i = 0; i < window.iframe_id.length; i++) {
setMileStones(i);
}
}
// Load the YouTube iframe library
//
var ytapi = document.createElement('script');
ytapi.src="https://ww" + "w.youtube" + ".com/iframe_api";
var scriptref = document.getElementsByTagName('script')[0];
scriptref.parentNode.insertBefore(ytapi, scriptref);
window.players = [];
window.onYouTubeIframeAPIReady = function() {
// Confirm existing ID or set ID in the iframe for each video on the page
jQuery('iframe[src*="youtube.com"]').each(function() {
var id = jQuery(this).attr('id');
window.players[id] = new YT.Player(id, {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
});
};
window.start = [];
window.onPlayerReady = function(event) {
//Log that the video is ready/open
var idx;
for (i = 0; i < window.iframe_id.length; i++) {
if (window.iframe_id[i] === event.target.getIframe().id) {
idx = i;
}
window.start.push(true);
}
if (event.target.getPlayerState() === YT.PlayerState.CUED) {
var player = event.target;
var player_data = player.getVideoData() ;
utag.link(
{ tealium_event: 'video_load',
video_id: player_data.video_id,
video_length: Math.round(player.getDuration()).toString(),
video_name: player_data.title,
video_platform: 'YouTube'
});
}
};
var playerCheckInterval, event;
window.onPlayerStateChange = function(event) {
player = event.target;
var playhead, idx;
for (i = 0; i < window.iframe_id.length; i++) {
if (window.iframe_id[i] === event.target.getIframe().id) {
idx = i;
}
}
tealium_event = "";
if (event.data == YT.PlayerState.PLAYING) {
if (start[idx]) {
if (mileStones[idx].length > 0) {
playerCheckInterval = setInterval(mileStoneCheck, 50);
}
tealium_event = "video_start";
playhead = 0;
} else {
//This will catch when the video playback is changed from not playing to playing
tealium_event = "video_play";
playhead = player.getCurrentTime().toString();
}
start[idx] = false;
} else if (event.data == YT.PlayerState.PAUSED) {
tealium_event = "video_pause";
playhead = player.getCurrentTime().toString();
} else if (event.data == YT.PlayerState.ENDED) {
if (mileStones[idx].length > 0) {
clearInterval(playerCheckInterval);
// reset in case visitor replays the video
playerCheckInterval = 0;
setMileStones(idx);
}
tealium_event = "video_complete"; // utag
playhead = Math.round(player.getDuration()).toString();
}
if (tealium_event) {
utag.DB("Video event: " + tealium_event + ", video ID: " + window.iframe_id[idx]);
var player_data = player.getVideoData() ;
utag.link(
{ tealium_event: tealium_event,
video_playhead: parseInt(playhead).toString(),
video_id: player_data.video_id,
video_length: Math.round(player.getDuration()).toString(),
video_name: player_data.title,
video_platform: 'YouTube'
});
}
function mileStoneCheck() {
var idx;
for (i = 0; i < window.iframe_id.length; i++) {
if (window.iframe_id[i] === player.getIframe().id) {
idx = i;
}
}
var duration = Math.round(player.getDuration());
var playhead = parseInt(player.getCurrentTime());
var percComplete = (playhead / duration) * 100;
var ms_len = mileStones[idx].length;
if (ms_len > 0) {
var next_ms = mileStones[idx][0];
if (next_ms <= percComplete) {
mileStones[idx].shift();
utag.DB("Video event: video_milestone, video ID: " + window.iframe_id[idx] + ", Milestone=" + percComplete.toFixed());
var player_data = player.getVideoData() ;
utag.link(
{ tealium_event: 'video_milestone',
video_playhead: parseInt(playhead).toString(),
video_id: player_data.video_id,
video_length: duration.toString(),
video_milestone: next_ms.toString(),
video_name: player_data.title,
video_platform: 'YouTube'
});
}
}
}
};
To test the video tracking code:
As you interact with the You Tube video, the events triggered through the tracking code will be seen in the UTAG Debugger tool.
The Tealium tracking code will handle multiple videos embedded in one page. The milestones and events configured will apply to all videos.
By default, this solution will track video milestones at 10%, 25%, 50%, 75% and 90% watched. To adjust which milestones to track.
mileStones[i] = [10,25,50,75,90] ;
To turn off milestone tracking, change the line to: mileStones[i] = [] ;
A demo page has been created with a YouTube video and the video tracking code:
Tealium Video Tracking for YouTube - Demo Page
The UTAG Debugger has been provided as a button on the page for your convenience to view the video events as they are triggered.
Copyright All Rights Reserved © 2008-2021