How to track HTML 5 Videos using Google Tag Manager?

If you have a lot of videos embedded on your website which are not YouTube videos, it will be slightly difficult for you to track the video events using in built options of Google Tag Manager. However, we can use Custom HTML tag with few triggers and variables to achieve the tracking for any kind of HTML 5 video. If your video player uses HTML 5 format, then the below library can be used.

Here, we will be tracking "play", "pause", "complete", "milestones - 25, 50 and 75%" with the library and all of these are tracked as events in Google Analytics. Let us zero in the data we want to see in the reports. I want the event fired from the video to contain the below values

Event Category - video
Event Action - "play", "pause", "milestone - 25%", "milestone - 50%", "milestone - 75%", "complete"
Event Label - video name (we will be using the video file name to calculate this)

Code Explanation

When the DOM is ready, on line 4, we are querying all the HTML elements which are video elements and we are iterating through the videos list and for each video, we are adding listeners to "play", "pause", "complete" and few milestone events. We are also using the video file name and applying Regex replace to strip off the extension and store the remaining file name and are going to use it as Event Label in GA Event. We are defining our milestones as 25%, 50% and 75% of total video length and are going to use this array of values inside "timeupdate" event to check whether we have passed the specific milestone. The only downside to this logic is if we move the video position suddenly from 5% to 60%, both the 25 and 50% milestones events will fire. If you are specific about when to fire a milestone, please go ahead and modify the logic inside "ontimeupdate" listener.

Step 1

Create a Custom HTML tag on Google Tag Manager and place the above code.

Step 2

The library file alone cannot fire video events in all the scenarios unless there is a trigger. You can create two kinds of triggers. One, to fire this tag on DOM ready so that all the videos that are available on the DOM are attached to the library. Two, for videos which load dynamically into the web page, you need to use the "Element Visibility" and trigger the tag. Depending on your need, you need to come up with a better trigger. For now, let's go with generic DOM Ready trigger.

Step 3

Once the above setup is done, your library starts sending dataLayer.push commands whenever it detects an event. It specifically sends "html5videoEvent". In order to capture these events, create another trigger. Select "Custom Event" type and supply the name "html5videoEvent"

Step 4

Create two variables as "Data Layer" variables and provide the names "html5VideoAction" and "html5VideoLabel" as shown in the image.

Step 5

Create a Google Analytics tag. Name it appropriately. Select the tag type as "Event". Supply the event category with the value "video". For Event Action and Event Label supply the above variables we have created in the previous step. Select the appropriate Google Analytics settings variable for your property. Finally attach the trigger we have created in Step 3 as shown in the below images.

Now, whenever a user plays a video, our library in the custom html tag fires an event "html5videoEvent" with the appropriate data points in the variables "html5VideoAction" and "html5VideoLabel" which are tracked into Google Analytics event.

For people, who are too busy to do all the above things, I have exported all the above configuration from GTM which you can import into your container. Read this article to know how to import a JSON file into your container. Be careful when you import a container and always Select "Merge" and "Rename" option to be on safer side. Here is the JSON file you can download. Right click on this link and save file as on your computer.