Tracking Video With Google Analytics Part 3 of 3- HTML5 Edition

This is the third and final installment of tracking video with Google Analytics.

In Part 1 we covered YouTube in Part 2 we covered Vimeo. Get ready for HTML5.

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!
The setup of all these solutions requires javascript and dependent on whether you are using Google Tag Manager you may require a developer to install the script directly onto your site. This article will cover how to implement HTML5 video tracking via GTM but it can be done without it.
Using any third-party party video hosting service causes issues for tracking engagement on your site. Most of these services allow you to <i-frame> content, which is essentially providing a window into their service via your site. That means that any analytics tool you are using is not even going to know that it is there, and most out of the box analytics solutions do next to nothing with regards to actions taking place on your site. Anything beyond pageviews and Time-On-Site requires custom coding. HTML5 is an add-on player with content being hosted somewhere else so it works a bit differently, although it’s still difficult.

Let’s jump right into tracking HTML5 Video on our site.

HTML5 videos allows you to control your content. Unlike Vimeo or YouTube your content is hosted somewhere that you own the rights to. You aren’t subjected to new privacy policies, copyright issues, or anything else that may change over the course of time as these megalith video hosting service evolve.

As with the Youtube video tracking and Vimeo video tracking posts I borrowed this script from someone much more adept with API’s than myself. In the case of HTML5 I modified a script from David Vallejo. Having clean reporting is really important to us and with 3 different video sources and three different scripts we wanted to have the most cohesive way of tracking events.
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.

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

  1. Custom Javascript Variable that checks for HTML5 videos
  2. Trigger for when to fire the HMTL Tag
  3. Custom HTML Tag that loads the script that does the bulk of the work
  4. Custom dataLayer Variable to capture the “category”
  5. Custom dataLayer Variable to capture the “action”
  6. Custom dataLayer Variable to capture the “label”
  7. Trigger for when there is a HTML5 Event pushed into the dataLayer
  8. 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 HTML5 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 HTML5 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 HTML5 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.

  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 HTML5 Video Present” since we will be using it as a trigger for our Custom HTML Tag we will be creating next.


Trigger to fire a Custom HTML Tag:

This trigger looks at the “Is HTML5 Video Present” variable in the dataLayer and will fire our custom HTML when “Is HTML5 Video Present” is equal to “true” is pushed into it.

  1. Create a “Page View” Trigger
  2. Add a filter where “Is HTML5 Video Present”is equal to “true”
  3. Name it “HTML5 Video Loaded”


Custom HTML Tag:

This is the magic! This script is doing a LOT! 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 HTML5 videos.

  1. Create a Custom HTML Tag and copy and paste the entire code including into 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 HTML5 Video Present” “equals” “true”
  4. Give your Trigger a name. We chose “HTML5 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

HTML5 Video Script

Custom dataLayer Variable for HTML5 Category, Action, and Label:

Creating these variables essentially makes a bucket in the dataLayer for our Custom Script we just installed to push data into. We are going to be creating a Category, Action, and a Label here since these three 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 “HTML5 Video”  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 of the video being played.
Directions HTML5 Category:

  1. Create a Data Layer Variable
  2. Give it a Variable Name of “HTML5 Video Category”
  3. Give it a Data Layer Variable Name of “gaEventCategory”
  4. Save the Variable

HTML5 Category
Directions HTML5 Action:

  1. Create a Data Layer Variable
  2. Give it a Variable Name of “HTML5 Video Action”
  3. Give it a Data Layer Variable Name of “gaEventAction”
  4. Save the Variable

HTML5 Video Action
Directions HTML5 Label:

  1. Create a Data Layer Variable
  2. Give it a Variable Name of “HTML5 Video Label”
  3. Give it a Data Layer Variable Name of “gaEventLabel”
  4. Save the Variable

HTML5 Video Action

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

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

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

HTML5 Video Event

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 HTML5 video is interacted with.

  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 “HTML5 Video Trigger” that we created previously.
  5. Give your tag a name we used “HTML5 Video 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 {{HTML5 Video Category}} for Category. Remember we created this earlier
  10. Select {{HTML5 Video Action}} for Action. Remember we created this earlier.
  11. Select {{HTML5 Video 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!

HTML5 Video Event 2

Congratulations! You are now tracking HTML5 videos!

If you want more information about tracking video, Google Analytics or site performance, let me know through the contact form!

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.