Finally, I’ve found some time to write a new blog post. Last week was pretty intense, but it’s over. This week’s topic is Google Tag Manager Video Tracking. I believe some of my readers have already tried to track Youtube or Vimeo players and send the data to Google Analytics. But what about other players, like JW Player, Vidyard, Wistia, etc.? And what about that no-name generic video player which is embedded on your (client’s) web site?

In today’s blog post, I’ll show you how to track video players (not only Vimeo and Youtube). Turns out, all these tracking methods are based on the same principle (but use different tracking codes). So if you master one player, you’ll conquer them all.

 

Ready-made solutions

If you’re in a hurry, I’ve collected a bunch of GTM container templates (a.k.a. Recipes) which track various video players. Click any link below, follow the installation instructions, and you’ll be tracking video interactions in no time.

• HTML5 Video player (supports various players)
• JW Player
• Vidyard
• Vimeo
• Youtube (Update: on Sep 13, 2017, Google launched a default Youtube Video Trigger which eases the entire process, but if you wish, you can use old methods as well: Version 1, Version 2, Version 3).
• Wistia

 

#1 So what’s the plan, captain?

Now, I’ll briefly describe the entire process of how you should implement video player tracking. After that, we’ll proceed to a practical example.

 

#1.1 Custom Auto-Event Listener

One of the key Google Tag Manager concepts is Auto-Event Listeners. These JavaScript functions track certain interactions on your website and fire Data Layer events whenever something important happens. By default, Google Tag Manager offers these auto-event listeners:

• Pageview
• Form submission
• Link click
• All element clicks
• Timer
• JavaScript Error
• History Change

Unfortunately, none of them can track any Video Player embedded on your site. That’s where Custom Auto-Event Listeners come in handy. They are custom Javascript functions which can track pretty much anything you want. All you need to do is:

• Either find a developer who can write a custom auto-event listener.
• Or you can find a ready-made solution. In this case, the aforementioned list of GTM recipes is your best option.

#1.2 A Trigger for that Listener

Ok, let’s imagine that we’ve found the custom auto-event listener we need. What’s next? We could fire it on All pages, right? Well, in most cases, that’s not the best approach.

Why would you want to fire a listener on every page, although only 3 pages of your website contain a video? That’s just non-optimal. What options do you have here?

• Option A: You can create a Pageview Trigger where URL contains A, B or C. This is not a very scalable solution because one day you might add 30 new videos, which means that you’ll also need to manually update the rule of a Pageview Trigger.
• Option B: You can use a Custom Variable which returns “true” only when the page contains an actual embedded video player. That variable could be used as a rule in a Pageview trigger as follows: Fire a custom auto-event listener only when Video Player is present on the page (i.e. Custom JavaScript Variable’s value equals to true). I’ll demonstrate this in action after a few chapters of this blog post.

 

#1.3 Checkpoint – Testing Time

After you implement the custom auto-event listener, you’ll have to try it live. Once you’ll click the Play button, a Data Layer event will be fired with some data points (which will be transferred to Google Analytics).

By default, Google Tag Manager does not recognize variables (e.g. eventCategory) that are stored in the Data Layer, so you’ll need to create them in a GTM container. The same principle applies to the Data Layer event called video (you can see it in the screenshot above). It cannot be used as a trigger unless you create a Custom Event Trigger.

 

#1.4 Did anyone mention Data Layer?

As I have previously mentioned, by default, GTM does not recognize various data points that are stored in the Data Layer. So if you wish to transfer some information to Google Analytics, you’ll first need to create Data Layer Variables in GTM. In the example below, I’ve created a Data Layer Variable which fetches the value of eventCategory. You should do the same with eventAction and eventLabel.

If you wish to better understand, how to pull the data from the Data Layer, read this blog post.

Coming up next, a trigger. We need it to activate ONLY when a video player interaction occurs (Play, Pause, etc.). Remember that “video” event I have previously mentioned? That’s a perfect trigger.

Create a Custom Event Trigger with the following settings:

 

#1.5 Google Analytics Event

The last step is to create a Google Analytics event tag which is triggered by the Custom Event called video. With that event tag, you’ll also need to transfer some additional data to Google Analytics.

 

#1.6 Google Tag Manager VIdeo Tracking in a nutshell

If you feel confused at this moment, that’s perfectly fine. I have explained Google Tag Manager video tracking concept multiple times and almost every time I get this response:

If you’re like me, you probably prefer flow-charts or some other visual content which explains a certain topic in more easy-to-digest manner. Well, this time is no exclusion. I hope you find the flow chart (below) useful.

In addition, here is a quick explanation/summary:

1. A pageview trigger’s rule is based on a Custom JavaScript variable. If variable’s value equals to true, a Video Auto-Event Listener is fired (Custom HTML Tag)
2. That listener is waiting for any video player interaction to occur. When it spots one, a dataLayer.push event is dispatched with the following data: event name, eventCategory, eventAction, eventLabel. All these data points are stored in the Data Layer.
3. By default, GTM does not recognize data in the Data Layer, unless you “teach” it. You can do that by creating Data Layer variables and Custom Event triggers.
4. The last step is to create Universal Analytics Event tag which fires upon Custom Event Trigger “video” and transfers values of 3 Data Layer variables to Google Analytics.

So that’s how Google Tag Manager Video Tracking works in theory. Let’s proceed to fun stuff, practice, shall we?

 

#2 Practical Example

As promised, let’s see how Google Tag Manager Video Tracking works in practice. We’ll use Vimeo as an example.

 

#2.1 Is Vimeo player present on the page?

First, create Custom JavaScript variable and paste the following code:

If Vimeo player is embedded in the page, this variable will return true. This is a good indicator which should be used in a Pageview Trigger. If Vimeo player is present, it’ll fire a Vimeo Auto-Event Listener.

 

#2.2 Vimeo Auto-Event Listener

Now, it’s Vimeo Listener’s turn. Create a Custom HTML tag and paste the following code (the original authors of this code are Bill Tripple and Bogdan Bistriceanu from Cardinal Path):

That’s a long piece of code. Don’t forget to assign the previously created Pageview Trigger:

Checkpoint! Let’s see what we’ve created so far:

• A Pageview Trigger which checks whether Vimeo video player is embedded in the web page (thanks to Custom JavaScript variable).
• A Vimeo Auto-Event Listener (as a Custom HTML tag) fires only when the aforementioned Pageview Trigger activates. Every time a Vimeo player interaction occurs, the listener will dispatch a Data Layer event with the following data:
  • Event Name: video (this value never changes)
  • eventCategory: Vimeo (this value never changes)
  • eventAction. Possible values: Played video, Paused video, 10%, 25%, 50%, 75%, 90%, or 100%.
  • eventLabel: [Video title] (this value is dynamically changed and depends on a video).

 

#2.3 Data Layer Variables and Custom Event Trigger

As I have mentioned before, Google Tag Manager does not recognize Data Layer events or other data. So if you wish to transfer some information to other tools (e.g. Google Analytics), you need to “teach” GTM to fetch certain information (with help of Data Layer Variables).

After variables are configured, it’s time to create a Custom Event Trigger. Vimeo Auto-Event Listener sends all interactions as Data Layer events under the name of “video”.

So the next thing you should do is to create a Custom Event Trigger which listens to ALL video events. Later, it will be assigned to Google Analytics Tag.

 

#2.4 Universal Analytics Tag

The last but not least, Google Analytics. Now you need to send an event and pass the corresponding data with it. Create a new tag, select Universal Analytics as Tag Type, choose Event as Track Type and enter all three Data Layer variables.

This means that every time a video event is created, a Google Analytics Event will be pushed to Google’s servers and all three variables will be dynamically replaced with the actual data.

If eventLabel equals to Video Title Lorem Ipsum, this exact value will be passed to Google Analytics.

#2.5. TEst test test

Don’t forget to test this entire configuration. Enable GTM Preview and Debug mode, go to a page with embedded Vimeo player and click Play. The next thing you should see is video event in Preview and Debug mode’s event stream. Click it and see whether the Universal Analytics tag has fired.

Also, don’t forget to check the Google Analytics Real-time reports.

 

#3.  7 Google TAg Manager Video Tracking Recipes. All Unified.

Believe it or not, but the flow that I have described in this blog post applies to all video players mentioned this blog post:

• HTML5 Video player (supports various players)
• JW Player
• Vidyard
• Vimeo
• Youtube
• Wistia

Since most of the GTM Recipes are created by distinct authors, their naming convention is also diverse. That’s why I’ve spent some time and unified them. What does it mean? Well, if you use several types of video players on your website, video auto-event listeners will fire events following the same naming pattern. In other words, data in your Google Analytics event reports will be consistent. Otherwise, Youtube auto-event listener would fire this Data Layer event:

While HTML5 video player would send different this.

Your event reports would be chaotic.

Anyway, here’s what data you’ll receive from each video auto-event listener:

P.S. Some video player listeners also send Resumed video and Video Error events.

Feel free to download any of these Google Tag Manager Recipes and start tracking video players in no time. Didn’t I tell you that Google Tag Manager Video Tracking was pretty easy?

 

One thing that I’ve noticed is that HTML5 recipe doesn’t play well with others (well at least some of them). Usually, it overtakes all interactions and other video listeners stop working. So make sure that HTML5 auto-event listener does not fire on the same page as JW player, etc. Everything else should be fine. If you notice any bugs, let me know.

 

Conclusion

Google Tag Manager video tracking is a much easier process than you think. Well, it’s not as easy as tracking regular page views, but it’s also not a rocket science. In this blog post, I have explained the entire concept of video tracking with GTM: which tags, triggers, and variables should you use. Since there are at least 7 kinds of video players that can be tracked, I have collected them, unified their naming convention, and published in the Library of GTM Recipes.

Just download any of them, import to your GTM account and start tracking videos in a blink of an eye.

All these Google Tag Manager video tracking solutions follow the same principle, so once you master one, you’ll conquer all of them.