Tracking HTML5 Video with Google Tag Manager

Rob Anderson / 9th May 2019 / Comments: 2 / Analytics

 

Google Analytics Tagging for HTML 5 Video

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>
 
  1. 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

  2. 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
                }
            });
        }
    }
  3. 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).

  4. 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

  5. Update with Your Own Tracking ID: In Google Tag Manager, update the Constant Variable named {{ UA-XXXXX }} with your Google Analytics Tracking ID.

  6. 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.


     
  7. 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.

By Rob Anderson