CONNECT WITH US

Next

Definitive Guide to Tracking Video with Google Analytics Part 1 – Youtube


This is the definitive guide to tracking video using Google Analytics.

track
This is Part 1 of 3. Covering Youtube, Vimeo, and HTML 5 videos.
NOTE: Since this article was published, Google has implemented major updates to their Tag Manager platform that may alter both the nomenclature and implementation steps seen below.

Our crack team of experts is working diligently to update this post ASAP. Until then, enjoy, but be on alert!
I will be covering these implementations using Google Tag Manager but these solutions will work for sites that have Universal Analytics (analytics.js) or (god forbid) Aysnc Google Analytics(ga.js) natively in the <head> of the page. This is my attempt to aggregate all of the disparate solutions out there. I’ve borrowed a lot of knowledge from developers more gifted than me and modified their work to make it more user friendly and human readable.
 
Big thanks to: CardinalPath(YouTube), Inside Google Tag Manager(HTML 5),and Sander Heilbron(Vimeo)
 
YouTube and Vimeo are inherently difficult to track within Google Analytics because they are <IFrame’s>. This means that you are essentially just opening a window to YouTube or Vimeo for your visitors to look through so, out of the box, Google doesn’t even know that there is even a video on your site. It takes a lot of work on your part to be able to track anything beyond pageviews with Google Analytics. This is the reason why we have transitioned entirely over to creating our measurement frameworks with Google Tag Manager. It gives us the ability to affect change on a client’s (or ours) site, without having as much back and forth with an offsite development team.

The first video solution we will look at is YouTube.

 
Youtube is ubiquitous and is often called the second most popular search engine on the net. It was one of the first video hosting services and because of that a good portion of business video content is hosted there. It’s touted across a lot of SEO shops as a major strategy to employ if your content lends itself to video as well so there are a lot of reasons to be using Youtube. Add the fact that we all love to post hilarious cat videos within our blogposts and there is a 99% chance that if you have more than one video on your site at least one of them is hosted by Youtube.

Cat
I stole this Youtube strategy from CardinalPath and Stephane Hamel.

It’s important to note that each one of these strategies employs the solutions respective API and we are utilizing them to push events to Google Analytics.

What this means for Youtube is that each video URL will need to have “?enablejsapi=1”
appended to it. Our developers have created a backend edition to our CMS installations we do that adds this to every Youtube video posted but you can just as easily just handcode it to each URL. However if you have 1,000’s of videos this could be arduous and is another point in favor of this solution since we can add the string using Custom HTML in Google Tag Manager or as a standalone JavaScript file if you are not employing a tag manager. It will however make the video flash on screen as it is reloaded. Contact me at Tyler@eroi.com if you need help with that.

There are 7 pieces that will need to be created in Google Tag Manager to enable Youtube tracking:

  1. Custom Javascript Variable that checks to see if there is a Youtube video on the page
  2. Trigger for determining there is a Youtube video present
  3. Custom HTML Tag that loads the script that does the bulk of the work
  4. Custom dataLayer Variable to capture the “action”
  5. Custom dataLayer Variable to capture the “label”
  6. Trigger for when there is a Youtube Event pushed into the dataLayer
  7. Google Analytics Event Tag

Below is the step by step directions and an explanation of what each is doing(if you care). If you just want to be able to track Youtube videos and you have the new version Google Tag Manager Container already set up we have uploaded all 8 pieces to be downloaded to your container here:

Refer to Google Tag Manager Help to learn how to import an entire container.

If you are interested in the nuts and bolts, read on.

Custom JavaScript Variable:

This Variable will be used to trigger our Custom HTML Tag below. This Variable returns “true” when a Youtube video is present. This is a smart way of doing things, since we always want to load only the minimal amount of information on a page as possible. Only loading the script when a Youtube video is present (even though Google Tag Manager is a light load) will decrease page load time on pages without videos. Google has publicly said that pageload time and UX are important ranking factors for SEO.

Directions:

  1. Create a new Custom JavaScript Variable and copy and paste the code into the editor. (Remember, it is NORMAL to have an unnamed function in Google Tag Manager so resist the urge to name it!)
  2. Give the Variable a name. We use “Is Youtube Present” since we will be using it as a trigger for our Custom HTML Tag we will be creating next.

YouTube Custom JS Variable

Custom HTML Tag:

This is the magic! This script is doing a LOT! Checking for the API parameter on your Youtube videos and adding if it’s not present, listening for changes in the state of the player(Play, Pause, and % viewed) while pushing data into the dataLayer, and allowing us to push events into Google Analytics to visualize our visitors’ engagement with our Youtube videos.

Directions:

  1. Create a Custom HTML Tag and copy and paste the entire code includinginto the editor.
  2. Create a Pageview trigger for “some pages.” This will open a section to add a “Filter” where we will use the Custom JavaScript Variable we just created.
  3. From the left dropdown select “Is Youtube Present” “equals” “true”
  4. Give your Trigger a name. We chose “Youtube Video Loaded”
  5. Select “DOM Ready” in the dropdown for Trigger type. This ensures all elements are loaded.
  6. Save your Trigger
  7. Save your Tag

Custom HTML YouTube

Custom dataLayer Variable for Youtube Action and Label:

Creating these variables essentially makes a bucket in the dataLayer for our Custom Script we just install to push data into. We are going to be creating both an Action, and a Label here since these two pieces of information will be dynamic and dependent on the video being played. We will eventually be sending this information to Google Analytics as a Custom Event so remember there are 3 strings that we can send to as an event:
Category: This will be sent as “Youtube” with each event
Action: This is dynamic and will include Play, Pause, and % completed
Label: This is dynamic and will include information on the title and ID of the video being played.

Directions Youtube Action:

  1. Create a Data Layer Variable
  2. Give it a Variable Name of “Youtube Action”
  3. Give it a Data Layer Variable Name of “youtubeaction”
  4. Save the Variable

Directions Youtube Label

Directions Youtube Label:

  1. Create a Data Layer Variable
  2. Give it a Variable Name of “Youtube Label”
  3. Give it a Data Layer Variable Name of “youtubelabel”
  4. Save the Variable

YouTube Custom Label

Trigger to fire a Custom Event when a Youtube video is interacted with:

This trigger looks at the “event” variable in the dataLayer will fire our event when “youtube” is pushed into it. Each Custom Event needs a way to fire so this trigger will do that.

Directions:

  1. Create a “Custom Event” Trigger
  2. Add a filter where Event name to match is “youtube”
  3. Name it “Youtube Event”

Custom YouTube Interaction

New tag to fire a Custom Event:

This is the final step. We are going to combine all of our previous work into this tag which will send our Custom Event to Google Analytics each time a Youtube video is interacted with.

Directions:

  1. Create a new Tag
  2. Choose Google Analytics
  3. Choose Universal Analytics. Hopefully you have upgraded! If you haven’t, choose Classic but you really should stop this tutorial and upgrade your installation on your site.
  4. Click on What triggers this tag to fire and click the “More” button. Choose our “Youtube Event” that we created previously.
  5. Give your tag a name we used “Youtube Event”
  6. Input your Tracking ID. Hopefully you have saved your UA in a Constant Variable but if you haven’t go ahead and input it manually “UA-XXXXXXXX-XX”
  7. Check the “Enable Display Advertising Features” box. Always do this
  8. Select “Event” as your track type
  9. Select {{Event}} for Category
  10. Select {{Youtube Action}} for Action. Remember we created this earlier.
  11. Select {{Youtube Label}} for Label. Remember we created this earlier
  12. Leave Value blank unless you know how much each video is worth to you
  13. Keep Non-Interaction Hit False unless you don’t want to have a video play counted in your bounce rate.
  14. Save your tag!

Custom YouTube

Congratulations! You are now tracking Youtube videos!

About eROI

eROI crafts compelling digital experiences across email, web, and social channels. Our work has been consistently successful in driving revenue and exceeding goals for our partners.

VIEW OUR WORK → LEARN ABOUT OUR AGENCY →