Tracking HTML5 Video with Google Tag Manager
Summary: This article offers a step-by-step guide for how to implement HTML5 video tracking using Google Tag Manager.
The HTML5 <video>
element specifies a standard way to embed a video in a web page. Before HTML5 defined this specification, a video would typically only be played in a browser with a plug-in (like Adobe Flash).
As an analyst or digital strategist, you want to know how these kinds of videos perform and how they are used on a given website. You want to answer the following key performance indicators:
- Which videos are the most watched?
- Are the videos viewed to the end?
- Does video make an impact on the conversion goals of my site?
Note: This article does not cover YouTube, Vimeo, Brightcove, or other third-party video solutions – if your site is using one of these solutions, different tagging methodology would be used and is not covered here. This article only applies to HTML5 embedded <video> objects as in the example below.
Step-by-step guide
Given following example HTML5 video element:
<video controls data-title=
"The Video Title"
onpause=
"sendEvent('Pause', this)"
onplay=
"sendEvent('Play', this)"
onended=
"sendEvent('Ended', this)"
>
<source src=
"somevideo.mp4"
type=
"video/mp4"
>
</video>
- Confirm Videos Have Data Elements for Video Tracking: Note the following 4 attributes set on this element – we’ll use this to drive the analytics and tagging. (If your embedded HTML5 video does not have these attributes, you’ll need to have them added.)
data-title, onpause, onplay, onended
Set Up Event Handler Function for Video Tracking: You will deploy the following handler function to the site. (This can be done by adding this code to the page as a <javascript> element, or injecting the function through Tag Manager.)
function sendEvent(action, element) {
var videoTitle = $(element).data(
'title'
);
if
(dataLayer && videoTitle) {
dataLayer.push({
'event'
:
'gtm.custom_event'
,
'eventInfo'
: {
'category'
:
'Video'
,
'action'
: action,
'label'
: element,
'value'
:
0
,
'nonInteraction'
:
false
}
});
}
}
- Download Container File: Download the Google Tag Manager tracking recipe (right-click on the link and click “Save Link As” or “Save Target As” to save the JSON file to your computer).
- Import JSON File into Google Tag Manager: Log into your own Google Tag Manager container and navigate to the Admin section. Under Container options, select Import Container
- Update with Your Own Tracking ID: In Google Tag Manager, update the Constant Variable named {{ UA-XXXXX }} with your Google Analytics Tracking ID.
- Verify Event Tracking Taxonomy in Google Tag Manager: This configuration uses the corresponding action verb (‘Play’, ‘Pause’, ‘Ended’) from the event handler attributes (onpause, onplay, onended) to set the Event Action for the Google Analytics tag. It uses the value in the data-title attribute as the Event Label.
- Preview, Test, & Publish Tracking for Video Events: Test your tagging by playing, pausing, and watching the video to completion. You should see tracking in Google Analytics Events for each of the corresponding actions along with the video name.
If you have any questions about this process or related topics, we’d love to hear from you! Please contact us.
First off I just want to thank you for the detailed tutorial. I followed all steps and everything works great. The only issue I’m having is getting the results to show in Google Analytics so we can run reports on the results. Any help would be greatly appreciated.
Hi Reuben,
Sorry for the delay! I’m glad you found the tutorial helpful! It’s definitely strange that you’re not seeing data in Google Analytics. We would be happy to hop on a quick screen share to review the implementation for you and help figure out what’s gone awry. No cost or obligation, of course! Would it be okay if I email you with a few times that would work for our Analytics team members?