August 31, 2017

Google Tag Manager Video Tracking Guide: Beyond Youtube and Vimeo

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) website?

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

Google Tag Manager Course for Beginners - Learn More

#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 flowchart (below) useful.

In addition, here is a quick explanation/summary:

A pageview trigger’s rule is based on a Custom JavaScript variable. If a variable’s value equals to true, a Video Auto-Event Listener is fired (Custom HTML Tag)
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.
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.
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 the 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 the Vimeo player present on the page?

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

function () {
 for (var e = document.getElementsByTagName("iframe"), x=0; x < e.length; x++) {
 if (/^https?:\/\/player.vimeo.com/.test(e[x].src)) {
 return true;
 }
 }
 return false;
}

function () {

for (var e = document.getElementsByTagName("iframe"), x=0; x < e.length; x++) {

if (/^https?:\/\/player.vimeo.com/.test(e[x].src)) {

return true;

}

return false;

}

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):

<!--
Google Analytics Tag Manager (V2) custom HTML tag for Vimeo video tracking

Copyright 2016, Cardinal Path, Inc.

Original author: Bill Tripple <btripple@cardinalpath.com>
Revised by: Bogdan Bistriceanu <bbistriceanu@cardinalpath.com>

Version 2.0
-->

<script>
var dataLayer = (typeof(dataLayer) !== "undefined" && dataLayer instanceof Array) ? dataLayer : [];
var videoLabels=[];
var lastP=[];

//we declare variables that will hold information about the video being played
var _playerTitle = {}, _playerAuthor = {}, _playerAuthorURL = {}, _playerUploadDate = {}; 

try{
 init();
}
catch(err){
 dataLayer.push({
 'event': 'gtm.error',
 'errorMessage': e.message,
 'tag': 'CP - UA - Vimeo Video Listener'
 })
}
function init(){
 try{
 var player=document.getElementsByTagName("iframe");
 for (i = 0; i < player.length; ++i) {
 var url=player[i].getAttribute("src");

 if(/player\.vimeo\.com\/video/.test(url)){ // vimeo iframe found
 if(!player[i].hasAttribute("id")){ // id attribute missing
 player[i].setAttribute("id","vimeo_id_"+i); // add id attribute
 }
 var urlUpdated=false;
 if(!/api=/.test(url)){ // check to see if api parameter is in src attribute
 url=updateUrl(url,"api",1);
 urlUpdated=true;
 }

 if(!/player_id=/.test(url)){ // check if player_id is in src attribute
 url=updateUrl(url,"player_id",player[i].getAttribute("id"));
 urlUpdated=true;
 }
 if(urlUpdated){ // repopulate src attribute with added parameters
 player[i].setAttribute("src",url)
 }
 videoLabels[player[i].getAttribute("id")]=player[i].getAttribute("src"); // id to label dictionary
 }
 }

 // Listen for messages from the player
 if (window.addEventListener){
 window.addEventListener('message', onMessageReceived, false);
 }
 else {
 window.attachEvent('onmessage', onMessageReceived, false);
 }
 }
 catch(err){
 }
}

function updateUrl(url,param,value){
 try{
 return url+((/\?/.test(url)) ? "&" : "?")+param+"="+value; 
 }
 catch(err){
 }
}

// Handle messages received from the player
function onMessageReceived(e) {
 try{
 var data = e.data;
 
 if(typeof data === "string"){
 data = JSON.parse(data);
 }
 
 switch (data.event) {
 case 'ready':
 onReady(data);
 break;
 case 'play':
 onPlay(data);
 break;
 case 'pause':
 onPause(data);
 break;
 case 'playProgress':
 onPlayProgress(data);
 break;
 }
 }
 catch(err){
 }
}

// Helper function for sending a message to the player
function post(action, value) {
 try{
 var data = {
 method: action
 };

 if (value) {
 data.value = value;
 }

 var message = JSON.stringify(data);
 var player = document.getElementsByTagName("iframe");
 var url;
 var prot;


 for (i = 0; i < player.length; ++i) {
 url=player[i].getAttribute("src");

 if(/player\.vimeo\.com\/video/.test(url)){
 // Check if protocol exists
 prot = player[i].getAttribute('src').split('?')[0].split('//')[0];

 // If protocol doesn't exist, then need to append to "url"
 if (!prot){
 url="https:" + player[i].getAttribute("src").split('?')[0];
 }
 player[i].contentWindow.postMessage(data, url);
 }
 }
 }
 catch(err){
 }
}

function getLabel(id){
 try{
 return videoLabels[id].split('?')[0].split('/').pop();
 }
 catch(err){
 }
}

//our function that will use the Vimeo oEmbed API to retrieve additional information about the video
function getVimeoInfo(url, callback) {
 
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = url;
 
 document.getElementsByTagName('body')[0].appendChild(script);
}

//the callback function which takes the data received from the Vimeo oEmbed API and places it into the corresponding objectes
function vimeoCallback(e){
 //console.log(e);
 _playerTitle[e['video_id']] = e['title'];
 _playerAuthor[e['video_id']] = e['author_name']
 _playerAuthorURL[e['video_id']] = e['author_url']
 _playerUploadDate[e['video_id']] = e['upload_date']
}

function onReady(data) {
 try{
 //execute our function which queries the Vimeo oEmbed API once the embedded videos are "ready"
 getVimeoInfo("https://www.vimeo.com/api/oembed.json?url=https://vimeo.com/"+getLabel(data.player_id)+"&callback=vimeoCallback", vimeoCallback);

 post('addEventListener', 'play');
 post('addEventListener', 'pause');
 post('addEventListener', 'finish');
 post('addEventListener', 'playProgress');
 }
 catch(err){
 }
}

function onPlay(data){
 try{
 dataLayer.push({
 event: "video",
 eventCategory: "vimeo",
 eventAction: "vimeo play",
 eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id),
 vimeo_playerID: getLabel(data.player_id),
 vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],
 nonInteractive: true
 });
 }
 catch(err){
 }
}

function onPause(data){
 try{
 dataLayer.push({
 event: "vimeo",
 eventCategory: "vimeo",
 eventAction: "vimeo video pause",
 eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id),
 vimeo_playerID: getLabel(data.player_id),
 vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],
 nonInteractive: true
 });
 }
 catch(err){
 }
}

// Track progress: 25%, 50%, 75%, 100%
function onPlayProgress(data) {
 try{
 var t = data.data.duration - data.data.seconds <= 1.5 ? 1 : (Math.floor(data.data.seconds / data.data.duration * 4) / 4).toFixed(2); 
 if (!lastP[data.player_id] || t > lastP[data.player_id]) {
 lastP[data.player_id]=t;
 if (parseFloat(t) != 0){
 dataLayer.push({
 event: "vimeo",
 eventCategory: "vimeo",
 eventAction: "vimeo video " +t*100+ "% Complete",
 eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id),
 vimeo_playerID: getLabel(data.player_id),
 vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],
 nonInteractive: true
 })
 }
 }
 }
 catch(err){
 }
}
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

<!--

Google Analytics Tag Manager (V2) custom HTML tag for Vimeo video tracking

Original author: Bill Tripple <btripple@cardinalpath.com>

Revised by: Bogdan Bistriceanu <bbistriceanu@cardinalpath.com>

Version 2.0

-->

var dataLayer = (typeof(dataLayer) !== "undefined" && dataLayer instanceof Array) ? dataLayer : [];

var videoLabels=[];

var lastP=[];

//we declare variables that will hold information about the video being played

var _playerTitle = {}, _playerAuthor = {}, _playerAuthorURL = {}, _playerUploadDate = {};

try{

init();

}

catch(err){

dataLayer.push({

'event': 'gtm.error',

'errorMessage': e.message,

'tag': 'CP - UA - Vimeo Video Listener'

})

}

function init(){

try{

var player=document.getElementsByTagName("iframe");

for (i = 0; i < player.length; ++i) {

var url=player[i].getAttribute("src");

if(/player\.vimeo\.com\/video/.test(url)){ // vimeo iframe found

if(!player[i].hasAttribute("id")){ // id attribute missing

player[i].setAttribute("id","vimeo_id_"+i); // add id attribute

}

var urlUpdated=false;

if(!/api=/.test(url)){ // check to see if api parameter is in src attribute

url=updateUrl(url,"api",1);

urlUpdated=true;

}

if(!/player_id=/.test(url)){ // check if player_id is in src attribute

url=updateUrl(url,"player_id",player[i].getAttribute("id"));

urlUpdated=true;

}

if(urlUpdated){ // repopulate src attribute with added parameters

player[i].setAttribute("src",url)

}

videoLabels[player[i].getAttribute("id")]=player[i].getAttribute("src"); // id to label dictionary

}

// Listen for messages from the player

if (window.addEventListener){

window.addEventListener('message', onMessageReceived, false);

}

else {

window.attachEvent('onmessage', onMessageReceived, false);

}

catch(err){

}

function updateUrl(url,param,value){

try{

return url+((/\?/.test(url)) ? "&" : "?")+param+"="+value;

}

catch(err){

}

// Handle messages received from the player

function onMessageReceived(e) {

try{

var data = e.data;

if(typeof data === "string"){

data = JSON.parse(data);

}

switch (data.event) {

case 'ready':

onReady(data);

break;

case 'play':

onPlay(data);

break;

case 'pause':

onPause(data);

break;

case 'playProgress':

onPlayProgress(data);

break;

}

catch(err){

}

// Helper function for sending a message to the player

function post(action, value) {

try{

var data = {

method: action

};

if (value) {

data.value = value;

}

var message = JSON.stringify(data);

var player = document.getElementsByTagName("iframe");

var url;

var prot;

for (i = 0; i < player.length; ++i) {

url=player[i].getAttribute("src");

if(/player\.vimeo\.com\/video/.test(url)){

// Check if protocol exists

prot = player[i].getAttribute('src').split('?')[0].split('//')[0];

// If protocol doesn't exist, then need to append to "url"

if (!prot){

url="https:" + player[i].getAttribute("src").split('?')[0];

}

player[i].contentWindow.postMessage(data, url);

}

catch(err){

}

function getLabel(id){

try{

return videoLabels[id].split('?')[0].split('/').pop();

}

catch(err){

}

//our function that will use the Vimeo oEmbed API to retrieve additional information about the video

function getVimeoInfo(url, callback) {

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = url;

document.getElementsByTagName('body')[0].appendChild(script);

}

//the callback function which takes the data received from the Vimeo oEmbed API and places it into the corresponding objectes

function vimeoCallback(e){

//console.log(e);

_playerTitle[e['video_id']] = e['title'];

_playerAuthor[e['video_id']] = e['author_name']

_playerAuthorURL[e['video_id']] = e['author_url']

_playerUploadDate[e['video_id']] = e['upload_date']

}

function onReady(data) {

try{

//execute our function which queries the Vimeo oEmbed API once the embedded videos are "ready"

getVimeoInfo("https://www.vimeo.com/api/oembed.json?url=https://vimeo.com/"+getLabel(data.player_id)+"&callback=vimeoCallback", vimeoCallback);

post('addEventListener', 'play');

post('addEventListener', 'pause');

post('addEventListener', 'finish');

post('addEventListener', 'playProgress');

}

catch(err){

}

function onPlay(data){

try{

dataLayer.push({

event: "video",

eventCategory: "vimeo",

eventAction: "vimeo play",

eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id),

vimeo_playerID: getLabel(data.player_id),

vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),

vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),

vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),

vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],

nonInteractive: true

});

}

catch(err){

}

function onPause(data){

try{

dataLayer.push({

event: "vimeo",

eventCategory: "vimeo",

eventAction: "vimeo video pause",

eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id),

vimeo_playerID: getLabel(data.player_id),

vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),

vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),

vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),

vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],

nonInteractive: true

});

}

catch(err){

}

// Track progress: 25%, 50%, 75%, 100%

function onPlayProgress(data) {

try{

var t = data.data.duration - data.data.seconds <= 1.5 ? 1 : (Math.floor(data.data.seconds / data.data.duration * 4) / 4).toFixed(2);

if (!lastP[data.player_id] || t > lastP[data.player_id]) {

lastP[data.player_id]=t;

if (parseFloat(t) != 0){

dataLayer.push({

event: "vimeo",

eventCategory: "vimeo",

eventAction: "vimeo video " +t*100+ "% Complete",

eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id),

vimeo_playerID: getLabel(data.player_id),

vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),

vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),

vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),

vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],

nonInteractive: true

})

}

catch(err){

}

</script>

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

 dataLayer.push({
   event: "video",
   eventCategory: "vimeo",
   eventAction: "vimeo play",
   eventLabel: video_title
 });

dataLayer.push({

event: "video",

eventCategory: "vimeo",

eventAction: "vimeo play",

eventLabel: video_title

});

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). A solution created by David Vallejo.
JW Player. A solution created by Pat Grady.
Vidyard
Vimeo. A solution created by the team of Lunametrics.
Youtube
Wistia. A solution created by the team of Lunametrics.

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:

dataLayer.push({
 event: "youtube",
 eventCategory: "youtube",
 eventAction: "pause",
 eventLabel: video_id:video_title
 });

dataLayer.push({

event: "youtube",

eventCategory: "youtube",

eventAction: "pause",

eventLabel: video_id:video_title

});

While HTML5 video player would send different this.

dataLayer.push({
 event: "video",
 eventCategory: "video",
 eventAction: "play",
 eventLabel: video_url
 });

dataLayer.push({

event: "video",

eventCategory: "video",

eventAction: "play",

eventLabel: video_url

});

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?

HTML5 Video Tracking Recipe

Tracks interactions of HTML5 video player (play, pause, etc.)
Get the recipe

JW Player Tracking Recipe

Tracks interactions of embedded JW player (play, pause, complete, etc.).
Get the recipe

Vidyard Listener Recipe for Google Tag Manager

Vidyard Tracking Recipe

Automatically tracks interactions of embedded Vidyard player (play, pause, etc.).
Get the recipe

Vimeo Tracking Recipe

Tracks interactions of embedded Vimeo player (play, pause, etc.).
Get the recipe

Wistia Tracking Recipe

Automatically tracks interactions with embedded Wistia videos.
Get the recipe

Youtube Tracking Recipe

Automatically tracks interactions with embedded YouTube videos on your site.
Get the recipe

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.

Julius Fedorovicius

In Google Tag Manager Tips

37 COMMENTS

Sep 20 2017
Reply

Thanks for this! Downloaded the HTML5 container & implementation went smoothly, but when I track in GA in real-time, I'm seeing the following - undefined (category) - undefined (action) Video - Pause Video - Play The undefined numbers are skyrocketing while the actual 'Video' events remain pretty conservative. I'd still consider myself green when it comes to GTM, yes, but everything looks okay on the back end - references are in place for the event categories & such, but they're showing up as 'undefined' when I preview. Thank you!

Julius Fedorovicius

Sep 20 2017
Reply

Hi, Maybe you have entered wrong keys in the Data Layer variable? Those keys are case sensitive. It means that variableName does not equal to variablename. You can share with me a link to your preview and debug mode so I could take a closer look. If you don't want to post it in public, shoot me an email to julius [at] analyticsmania.com. Cheers

Sep 20 2017
Reply

Awesome - thanks for the prompt reply, Julius! Will email you separately.

Sep 21 2017
Reply

UPDATE! Looks like this 'undefined' issue was probably caused by server maintenance, as everything appears to be firing properly today. The variables automatically populated in the format of 'eventLabel', but the reference in the tag is to 'gaEventLabel' - just make sure the variables are updated to match the script. Also, since our client's videos were uploaded with a random string of letters/numbers as the URL, I changed the event label to reference the page path that the video was being viewed on instead - that way we could clearly see which topic (& therefore, which video) was being viewed. Worked for our particular case, but may not work for everyone. Anyway, the HTML5 container is awesome & everyone should implement it. Thanks Julius!

Meg

Sep 26 2017
Reply

Thanks so much for all of this - I have managed to get embedded Vimeo videos sorted perfectly, however I am having trouble trying to figure out how to track Vimeo videos that load in a PopUp window ... I am not sure how to tell GTM to fire the tag after the pop up is opened ... do you have any information on how to do this that you could point me at?

Julius Fedorovicius

Sep 26 2017
Reply

Without knowing the full context, I'd say that maybe you should try to initiate the Vimeo listener when the certain button is clicked (which opened the video popup).

Jannette

Nov 14 2017
Reply

This is great! One issue. When I'm in preview mode, I can see that the data layer is being populated with the appropriate video category, actions and label. I see it progress with actions for '50%', 'Paused video' and '100%', etc... However, when I look in Real Time events in GA, the only video category ever is 'Video' and the only action ever is "Play". I don't see the other actions - or even what they're defined as. It's strange is that the event action is 'Played video' - but in GA the event action is 'Play'. And the event category should be 'HTML5 Video' but in GA the event category is just 'Video'. Why the discrepancy? Appreciate your help!

Julius Fed

Nov 14 2017
Reply

Hey, 1. Make sure that you have removed all filters from Real-time reports. They are displayed as blue tags (above the real-time reports) 2. Make sure that you did not add another video listener (by accident). 3. If you want me to do a further troubleshooting, send me an email to julius [at] analyticsmania.com with the following screenshots: a) Preview and Debug console (Data Layer Tab) once the video event is dispatched. b) Settings of Google Analytics event tag c) Settings of the trigger which fires that Google Analytics event tag.

Jackson Y

Nov 19 2017
Reply

Hi, I have implemented the vimeo tracking. It's working awesome. Just a quick question: I assume the Event Action (25%, 50%, 75%) are fired when they meet the threshold.. that means, if I want to find out how many people viewed 25%, I will have to take 50% deduct by 25% to get the actual viewers that viewed 25%, am I correct? So its a compounding summation? Is there an easier way that each percentage are unique to their own?

Julius Fed

Nov 21 2017
Reply

Hey, With this tracking, you cannot be sure that a visitor viewed 25% or 50% percent. It's possible that a user skipped video to 24%, then the event fired at 25% threshold. Without further hesitation, a visitor skipped to 49% percent and another event of 50% fired. As a result, you'll have two events in Google Analytics, 25% and 50%. But actually, in total, a person viewed only about 5 percent of a video. These listeners are not so smart to calculate the REAL duration of the watched video. I would not depend on a calculation you suggested, although I have nothing better to offer :) I believe that Google Tag Manager's built-in Youtube trigger now tracks how much a visitor viewed of your video.

Jackson Y

Nov 21 2017
Reply

Ah yes, but I am using Vimeo, so I am not so sure the YouTube listener will be tracking that. Oh speaking of the video skipping, it won't happen on my site with vimeo, because I have hid all the titles and timebar. Thanks for this great piece of article anyway!

Sameek

Feb 1 2018
Reply

So I tried implementing exactly the same example as mentioned above but the data layer is not being pushed on click of the video . The auto event listener tag is getting fired though. Can anyone please advice what could be the possible reason for the problem? Thanks

Julius Fed

Feb 1 2018
Reply

Hi, which listener are you using and which video player do you wish to track (the web address of the video would be very helpful)? Usually, the videos are not tracked by listeners if that video appears in a popup.

Bronson O'Quinn

Feb 19 2018
Reply

This is great! Thank you so much. The only issue I've encountered is that some of my client's HTML5 videos come from Facebook embedded iframes. Because these URLs don't have extensions, they return the Label "(not set)". Their markup doesn't have any useful identifiers, though, so I'm wondering if there's a way to just skip them and analyze them separately? Here's an example of the markup to see what I mean:

Julius Fed

Feb 19 2018
Reply

You could create a trigger exclusion which does not fire the video event when the eventLabel = (not set), or something like that. This way you'd skip all video events which are from that strange player. Honestly, I have never tracked Facebook embedded videos before, so I cannot give you precise tips. Sorry.

Falk

Mar 9 2018
Reply

Could this also track the # of minutes a certain video was watched per month? And # of unique viewers per video per month? Could you point me in the right direction of how to get that configured with Google Analytics & VIMEO? (And if Vimeo BUSINESS would be required (which integrates with GA) or if VIMEO PRO would be enough.) Thanks!! :)

Julius Fed

Mar 14 2018
Reply

Hi, no idea what Vimeo PRO is so I cannot give you advice here. As for # of watched minutes, this would require more custom JavaScript and unfortunately, I'm not the right guy to write it (my JS skills are too limited). But here's the idea (maybe you'll find some developer who could help you): - A visitor watches a video. When the video completes, custom JavaScript could fire a dataLayer event with a custom metric, a number of watched minutes. Not custom dimension but custom metric. That event could be passed with GTM GA Event tag to Google Analytics (with that custom metric) - When a visitor watches a bit of some video and tries to leave the page, another custom JavaScript code should fire a data layer event, also with custom metric (number of minutes watched). That event should also be handled by GTA GA Event tag. As for a number of unique viewers per video, go to event reports in GA, click the youtube event and drill down till you reach Event Label (which is video title). In that report, you'll also see "Unique events" metric which is what you need. Also, don't forget to change the date to 30 days.

Falk

Mar 14 2018
Reply

Thank you very much for the detailed reply, Julius! I found a programmer on Upwork who will/can implement what I am looking for. I will pass this on as food for thought. Thanks again!!

Cee

Mar 27 2018
Reply

Thank you, very helpful. Does it track Brightcove video as well? Thank you! C

Julius Fed

Apr 3 2018
Reply

Hi, I haven't tried it. The best way for you to find out is to try by yourself :)

Becca

Apr 6 2018
Reply

Hi! Relatively new to Google Tag Manager/GA and your blog has been an amazing help! Quick question for you - I installed the YouTube container from the link I copied below. THINK I set-up the proper goal in GA. In preview mode, I see the tags firing properly on the site, but I don't see any corresponding event information in GA real-time view. Any thoughts I where I messed up? Do I need to set-up custom metrics to get the information? Thank you!! https://www.analyticsmania.com/google-tag-manager-recipes/youtube-built-in/

Julius Fed

Apr 6 2018
Reply

Hi, you probably inserted the Google Analytics Settings Variable in the GA Tracking ID field of the Google Analytics Tag. GA Settings Variable must be inserted ONLY in the GA Settings drop-down.

Becca

Apr 7 2018
Reply

Thank you! I really appreciate your reply.

Alessandro

Jul 26 2018
Reply

Hi, thanks! I just found that, in the package for the JW Player, in order to differentiate the first Play event from the ones occurring after the user has paused the video, a small change has to be done in the code of the "cHTML - JW Player Listener". In particular, in the function "eventToDataLayer (thisObject, eventType, eventInteraction)" the "eventInteraction" parameter has to be pushed to the dataLayer instead of the "eventType". Hope this can help, cheers

Profesor Berkeley

Aug 3 2018
Reply

Is it posible tracking Spotify videos? How I do that? Could you direct me? throw me a little light about it? Thank you!

Julius

Aug 3 2018
Reply

I never tried it. Import HTML5 video tracking recipe and give it a try. Maybe it will work.

Alexandre Sattamini

Sep 21 2018
Reply

Hello Julius I have a little issue with this implementation. It did work just fine in the beginning. But then I realized something: My website has an online course platform where the user can watch different videos from one single discipline. The thing is that the URL does not change. Videos are accessed through clicks that do not change de URL. It is like a dynamic JavaScript. So I noticed the first video play is captured, but not the following ones. Can you help with any insight about that?

Julius Fedorovicius

Sep 24 2018
Reply

Hey, here's an idea (but I haven't properly tried it so beware and test it properly): - Use Lunametrics custom youtube video listener. - Fire it every time a video player appears on the screen (with help of Element Visibility trigger). In theory, every time a Lunametrics code is fired, it should check the page for new players available. However, take this with a grain of salt and test it properly.

Alexandre Sattamini

Sep 24 2018
Reply

Hey Julius. Thanks a lot. I will try it. In fact I got some conflict between the vimeo javascript tag (custom js) with the site’s code. Users reported some autoplay issues But I know this is normal with custom javascript tags I will try the option you pointed

Tanguy

Nov 7 2018
Reply

Hi! I just implemented the YouTube recipe on a WordPress websites. It works fine on classic content, but popup videos loaded through the Elementor page builder won't be tracked. Do you have an idea how I could solve this?

Tanguy

Nov 9 2018
Reply

I added the the visibility trigger, which works fine for this. However the YouTube Video trigger won't fire after this one. Any tips to connect both?

Julius Fedorovicius

Nov 11 2018
Reply

You don't need to connect two triggers (I mean Youtube trigger and the Visibility trigger). First of all, try to implement the Lunametrics solution https://www.bounteous.com/insights/2015/05/11/updated-youtube-tracking-google-analytics-gtm?ns=l. Maybe it will work out of the box. If it does not, then use the Visibility Trigger to fire Lunametrics' Youtube Tracking Listener. Meaning that once the popup appears, then launch the Youtube Listener (Custom HTML tag). That Listener will start listening to Youtube Player's interactions and will send the interactions to the Data Layer. After that, create the Custom Event trigger to catch those Youtube interactions.

Tanguy

Dec 13 2018
Reply

Hi Julius. It works indeed, almost out of the box. Just had to add the percentages to the Custom triggering conditions (after Play|Pause|Watch to End) for them to appear in GA. I spend quite some time on this, but to be honest, I never really understood how these tags work with each other. One thing I got, though, is that these work with my popups... And that I could even replace the Custom Event trigger with the native YouTube Video trigger. The only real drawback I see in this method is that it won't retrieve the video title for label, which would be much more useful than the Url.

Leslie

Jan 1 2019
Reply

Hello there! Thank you for your awesome work! I was curious, is there a recipe that you recommend or have for "Flowplayer" Thank you!

Julius Fedorovicius

Jan 2 2019
Reply

I haven't tried to track that player. Have you tried the HTML5 video recipe?

Leslie

Jan 12 2019
Reply

I'm working to set that up. But I'm asking about flowplayer because we have several players on our site and I want to track all of them including flowplayer.

leslie

Jan 14 2019
Reply

hello again! now I see what you were asking. HTML5 recipe handles flowplayer too. awesome! it seems to be working :)

Google Tag Manager Video Tracking Guide: Beyond Youtube and Vimeo

Ready-made solutions

#1 So what’s the plan, captain?

#1.1 Custom Auto-Event Listener

#1.2 A Trigger for that Listener

#1.3 Checkpoint – testing time

#1.4 Did anyone mention Data Layer?

#1.5 Google Analytics Event

#1.6 Google Tag Manager Video Tracking in a nutshell

#2 Practical example

#2.1 Is the Vimeo player present on the page?

#2.2 Vimeo Auto-Event Listener

#2.3 Data Layer Variables and Custom Event Trigger

#2.4 Universal Analytics Tag

#2.5. Test test test

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

HTML5 Video Tracking Recipe

JW Player Tracking Recipe

Vidyard Tracking Recipe

Vimeo Tracking Recipe

Wistia Tracking Recipe

Youtube Tracking Recipe

Conclusion

37 COMMENTS

Leave a comment Cancel reply