YouTube Video Tracking Setup Guide for Tealium iQ

[#1]

This article shows how to set up video tracking in Tealium iQ for embedded YouTube videos.

In this article:

Table of Contents Placeholder

Prerequisites

• jQuery 1.0+ loaded in the page

How It Works

This solution implements basic video tracking events for embedded YouTube videos. There are two components to this solution:

• Embedded YouTube Video Iframe 
  A web page where a YouTube video is embedded as an iframe with the YouTube Javascript API enabled. (Learn more about the YouTube API Reference.)
• YouTube Video Tracking Code with Tealium Events
  The code needed to track video events in Tealium, implemented in your iQ account as a Javascript Code extension.

Embedded YouTube Video Iframe

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".

YouTube Video Tracking Code

The following code defines the functions that initialize the video tracking.

• window.onYouTubeIframeAPIReady()
  Used to initialize YouTube iframe players. If this already exists on your page, it can be omitted from the extension.
• window.onPlayerReady()
  Initializes the video to track and any meta data about the video eg. video_length.
• window.onPlayerStateChange()
  Tracks the changes in state of the video as it plays and calls the corresponding tracking call.

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:

1. Open the page that contains the embedded YouTube video.
2. Open the UTAG Debugger tool to see the tracking call log.
3. Interact with the video. 

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.

Milestone Tracking

By default, this solution will track video milestones at 10%, 25%, 50%, 75% and 90% watched. To adjust which milestones to track.

1. Find the code section named Configure Milestones.
2. Find the variabled named mileStones: mileStones[i] = [10,25,50,75,90] ;
3. Add or remove values from the array.
   

   To turn off milestone tracking, change the line to: mileStones[i] = [] ;

Demo Page

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.