Last year, Google Tag Manager released a trigger that gives native support to YouTube video tracking. Now, it is easier than ever to fire tags based on interactions with YouTube videos.
Configure Your Trigger
Head to “Triggers” in Google Tag Manager to create a new trigger. Select “YouTube Video” as your trigger type. As you configure the trigger, you’ll see that the basic capture options are:
- Start — To collect a “start” when a user begins watching a video.
- Complete — To a collect a “complete” when the video ends.
- Pause, Seeking, and Buffering — To collect a “pause if a user pauses a video, moves the scrub bar, or repositions timing and to collect a “buffering” if the video needs to buffer due a lack of bandwidth.
- Progress — To collect a “Progress” when a user reaches a particular point in the video. You can configure this by percentages or by timestamps in seconds. If you want various progress thresholds, list integers separated by commas. Bear in mind that these are only triggered the first time a user reaches the threshold. Furthermore, an earlier trigger will not fire if the user seeks a point further along in the video.
In addition to these basic capture options, you have the advanced option to add JavaScript API support to all your videos. Checking the box next to this option will enable YouTube iFrame Player API. If your embedded videos lack the “enablejsapi=1” parameter, you need to enable this — it will add the parameter automatically to all your videos. You should note that it will cause videos to reload if they’re playing when Google Tag Manager loads. This means users may see a flicker when they load the page.
An Example Tag
You can measure start, pause, percentage, progress, and complete events in a single Universal Analytics event tag. Set the category as “YouTube,” the action as “{{JS - Get video action}},” the label as “{{Video Title}} - {{Video URL}},” and the non-interaction hit to “false.” The Custom JavaScript Variable called “{{JS - Get video action}}” is:
function() {
var status = {{Video Status}};
switch (status) {
case ‘start’:
return ‘Start playing’;
case ‘pause’:
return ‘Pause’;
case ‘buffering’:
return ‘Buffering’;
case ‘progress’:
return ‘Reached ‘ + {{Video Percent}} + ‘%’;
case ‘complete’:
return ‘Reached the end’;
}
}
Next, set up your trigger to fire on a tag with the type “Other - YouTube Video.” Check all the capture boxes, deciding if you prefer percentages or time thresholds. Set the trigger to fire on all videos.
Video Variables
Every interaction sends data about your video and playing status to the data layer. To capture data, you can use several built-in video variables, which you will find by heading to “Variables” on the side bar and then clicking the “Configure” button under “Built-in Variable.” Variables for video consist of:
- Video current time — the gtm.videoCurrentTime key. The second the user is at when an event occurs in the video.
- Video status — the gtm.videoStatus key. The status that caused an event to trigger. Possible values (provided that you enabled them in the triggers settings) are “start,” “complete,” “pause,” “buffering,” and “progress.”
- Video visible — the gtm.videoVisible key. Whether a video is visible in the browser viewpoint (true) or not (false), such as if it is playing below the fold or in a background tab.
- Video duration — the gtm.videoDuration key. The total duration of a video in seconds.
- Video title — the gtm.videoTitle key.
- Video URL — the gtm.videoUrl key.
- Video provider — the gtm.videoProvider key. The name of the platform, i.e. YouTube. This suggests that we can expect capability for other platforms in the future.
Using for Lazy-Loaded and Other Dynamically-Inserted Videos
For videos to load at the same time as the initial page load, all you need to do is check the box next to “Add JavaScript API support to all videos.” However, many sites only load embedded videos when a user has demonstrated a desire to watch the content. These are lazy-loaded videos.
The YouTube video trigger supports tracking for lazy-loaded videos, but you do need to ensure that the page loads the YouTube API library when the video is first loaded. Make sure that the library <script src=“http://www.youtube.com/iframe_api”> is loaded before the first video is added to the site.
Configuring video tracking triggers is such a fast and simple process, there is really no reason not to do it. Start tracking your videos to better understand their performance and your users’ behavior.