YouTube Video tracking via Google Tag Manager

Google Tag Manager, Specialized Tracking

Table of Contents

Embed YouTube video players on your website and use the API for iframe embeds
Check whether YouTube video is embedded on a web page
Find web pages which contain one or more YouTube videos
Create / Customize video tracking script
Push video player states as events into data layer whenever a video is played or paused
Pull YouTube videos event data from the data layer into the container tag
Find web pages where the YouTube Player states were tracked
Send YouTube player states as events to Google Analytics
Preview, debug and publish your tags
Integrating YouTube with Google Analytics

This article is related to Google Tag Manager (GTM).

If you are brand new to GTM then I would suggest to read this article first: Beginners guide to Google Tag Manager.

Follow the steps below to install YouTube video tracking via Google Tag Manager:

Step #1: Embed YouTube video players on your website and use the API for iframe embeds

Before you can track YouTube videos, you need to embed them on your web page(s):

While this is a no-brainer, I have seen many people trying to track YouTube videos when no such videos have been embedded on their website or trying to track Vimeo videos using the YouTube video tracking script.

This article is only about tracking YouTube videos that are embedded on your website.

You can’t track the YouTube videos embedded on YouTube.com in Google Analytics via my video tracking script.

This article is not about tracking videos hosted by other video hosting players like: ‘Vimeo’ or ‘wistia’.

I used the YouTube Player API for iframe embeds to access and control the YouTube player which has been embedded via iframe.

However you don’t need to worry about understanding the YouTube Player API.

I have done all of the hard work for you.

You just need to understand and use my video tracking script.

Note: Instead of writing the whole video tracking script from scratch, I modified the video tracking script which was originally developed by ‘Cardinal Path’.

Being an ex-programmer, I understand how difficult it can be to write a script from scratch.

So despite of its shortcomings, this is the best video tracking script I have found so far. I am just building up on the work, actually done by ‘Cardinal Path’ and give them the full credit for it.

Get the E-Book (62 Pages)

Step-2: Check whether YouTube video is embedded on a web page

#2.1 Login to your GTM account and create following new variable named ‘Is YouTube video embedded on a web page‘ of type ‘Custom JavaScript‘ which checks, whether YouTube video is embedded on a web page. This variable returns ‘true’ if YouTube video is embedded on a web page, otherwise it returns ‘false’.

Following is the code, which you need to copy-paste, into the ‘custom JavaScript’ variable text box:

// Return "true" if YouTube video is embedded on a web page otherwise false
function () {
    for (var e = document.getElementsByTagName('iframe'), x = e.length; x--;)
        if (/youtube.com\/embed/.test(e[x].src)) return true;
    return false;
}

#2.2 Create a new folder named ‘YouTube Video Tracking’ and add this variable to it:

By adding the variable to a folder, it becomes easy to find this variable later for editing/debugging purpose.

#2.3 Click on the ‘Save’ button to complete the process of creating the new variable.

Step-3: Find web pages which contain one or more YouTube videos

Create following new trigger named ‘Pages on which one or more YouTube videos have been embedded‘, which fires on a DOM load (Pageview – DOM Ready) and when a YouTube video is embedded on a web page:

Here, ‘Is YouTube video embedded on a web page‘ is the custom JavaScript variable we created earlier. This trigger is fired only when youtube video is present on a web page.

Add the trigger ‘Pages on which one or more YouTube videos have been embedded‘ to the ‘YouTube Video Tracking’ folder so that it becomes easy to find/edit it later:

Step-4: Create / Customize video tracking script

Here is what my video tracking script does, in a nutshell:

1. Tie YouTube videos to the page on which they are embedded.

2. Track single/multiple video players (same as with the original script)

3. Tie player state (play, pause and the percentage of video played) to the video title thus making it easy to understand the performance of a particular video without drilling down further.

4. Does not append Video ID to the video title, thus making it easy to read the video title

5. Creates an ‘event category‘ called ‘Youtube Videos’ which store all of the YouTube video events.

6. Use ‘event action‘ to store the list of all the web pages where users interacted with one or more videos.

7. Use ‘event label‘ to show the player current state and the title of the video being watched.

Event Category: Youtube Videos

Event Action: <URI of the web page on which a user interacted with one or more videos>

Event Label: <Player Current State> + Title of the Video

Here is how the output from my video tracking script will look in Google Analytics, once the video tracking has been implemented:

youtube videos event category

event action report

youtube videos event label

Note: I have deliberately put the player state before the video title so that they are always visible in GA reports even when the video title is too long. Otherwise a very long video title can hide the player state in the event reports.

Copy the YouTube Video tracking code from here. You may need to customise this script if it doesn’t work the way you would like to, on your website.

Step-5: Push video player states as events into data layer whenever a video is played or paused

Create a new custom HTML tag named ‘Push YouTube Video Player States as events into dataLayer‘. This tag will push YouTube video player states (play, pause, percentage of video played) into a data layer, whenever a YouTube video is played or paused on a web page which contains the video player:

Copy-paste the video tracking script we created/customised in step 4, into the HTML text box as shown above.

Fire this tag on pages on which one or more YouTube videos have been embedded by adding the trigger we created earlier i.e. ‘Pages on which one or more YouTube videos have been embedded‘:

Click on the ‘save’ button to complete the custom HTML tag creation process. Add this tag to the ‘YouTube Video Tracking’ folder so that it becomes easy to find/edit it later.

Step-6: Pull YouTube videos event data from the data layer into the container tag

In order to pull YouTube videos event data (event category, event action and event label) from the data layer into the container tag, create following three user defined variables of type ‘data layer’:

#1 ‘Pull event category YouTube Video Player State from dataLayer’

#2 ‘Pull event Action YouTube Video Player State from dataLayer’:

#3 ‘Pull event Label YouTube Video Player State from dataLayer’:

Add all of these variables to the ‘YouTube Video Tracking’ folder so that it becomes easy to find/edit them later:

Step-7: Find web pages where the YouTube Player states were tracked

Create following new trigger of type ‘custom event’ which look for ‘youtube’ event key in a data layer.

The ‘youtube‘ event key is pushed into the data layer only when YouTube video player state is tracked. This trigger will later be required while sending YouTube video event data to Google Analytics.

Add this trigger to the ‘YouTube Video Tracking’ folder so that it becomes easy to find/edit it later.

Step-8: Send YouTube player states as events to Google Analytics

Create a new tag named ‘Send YouTube player states as events to Google Analytics‘ of type ‘Universal Analytics’ which send YouTube player states as events to Google Analytics on pages where the YouTube Player states were tracked. Use the following tag configuration:

Fire this tag on pages where YouTube player states were tracked by using the trigger named ‘Pages where YouTube player states were tracked‘ we created earlier:

This is the tag which will send all the interactions with YouTube video player as events to your Google Analytics reports. Add this tag to the ‘YouTube Video Tracking’ folder so that it becomes easy to find/edit it later.

Note: {{Pull event category YouTube Video Player State from dataLayer}}, {{Pull event Action YouTube Video Player State from dataLayer}} and {{Pull event Label YouTube Video Player State from dataLayer}} are all user defined variables of type data layers which we just created earlier. Follow the steps below to use these data layer variables while creating this tag:

#8.1 Click on the plus button next to ‘Category’ text field:

#8.2 Select the ‘Pull Event Category from the data layer’ variable:

Similarly, you can select other data layer variables. Once you have selected all the three data layer variables, your final set up will look like the one below:

Step-9: Preview, debug and publish your tags

Preview and debug your new tags, create a new container verions and then publish it.

# Go to a web page on which you have embedded a YouTube video and then play and pause it.

# Check the real time ‘Events‘ report to see whether your Google Analytics is capturing the video events:

real time events report

Integrating YouTube with Google Analytics

If you want to integrate your YouTube Channel with your Google Analytics account and track channel views then read this article: Google Analytics and YouTube Integration Guide

How to get lot more useful information?

I share lot more useful information on Web Analytics and Google Analytics on LinkedIn then I can via any other medium. So there is really an incentive for you, to follow me there.