Ok Google Youtube Ok Google Sam & Dave Went Youtube Baby Kids

Updated: June quaternary, 2020.

Important:this blog post uses Universal Analytics (GA3) examples. If you are looking for Google Analytics iv examples instead, read this weblog post.

To understand what website visitors are doing on your site, tracking pageviews is far from enough. Y'all should as well consider other interactions, such as clicks, views of particular elements, video interactions, etc.

When information technology comes to videos, the most popular embedded video players are Youtube (I have no stats to back up this; merely proverb this based on what I've seen on other websites). But what if your website is using a different player (like Vimeo or maybe a generic HTML5 player)?

That'southward not a problem, because yous can rails them with GTM.

In today's blog post, I'll show you how to track videos with Google Tag Manager. I'll cover Youtube video tracking, Vimeo video tracking, and volition also mention several other players.

Note: this weblog post teaches how to track events with Universal Analytics. If you want to get familiar with event tracking in Google Analytics iv, you can also refer to this blog post.

Tabular array of contents

+ Show tabular array of contents +

• Youtube video player tracking
  • Step 1. Create a Youtube Video Trigger
  • Step 2. Enable built-in Youtube video variables
  • Step 3. Create a Lookup Table variable
  • Stride 4. Create a Google Analytics tag
  • Pace 5. Examination the setup
• How to rails Vimeo video actor with Google Tag Director (custom solution)
• Identify the video player
  • Step 1. Create a variable "Is Vimeo player present on a page"
  • Footstep 2. Vimeo auto-event listener
  • Stride 3. Create Data Layer Variables and Custom Event Trigger
  • Step 4. Create a Google Analytics tag
  • Stride 5. Test the setup
  • To sum up
• 6 Google Tag Director Video Tracking Recipes. All Unified.
• Terminal words

So, what's the plan?

Showtime, we'll accept a look at the most mutual video tracking instance in Google Tag Manager: Youtube video trigger. Then, I'll show you lot an example with a video player that is not supported by GTM by default. That'south Vimeo.

And finally, I'll also give you some prepare-made solutions (recipes) designed for various embedded video players.

Fix? Allow's go.

Chapter 1. How to rails Youtube videos with Google Tag Manager

If y'all are in a bustle, I have created a set-made Youtube video tracking recipe. Download it, import, configure (according to instructions) and it volition automatically start tracking Youtube videos on your website in no time.

But if you lot want to understand the ins and outs of the Youtube video tracking, then go on reading.

Hither are the steps you demand to complete in order to track Youtube videos with Google Tag Manager.

Step one. Create a Youtube Video Trigger

It all starts with a trigger. In Google Tag Manager, get to Triggers > New > Trigger Configuration and chooseYoutube Video. Then enter the post-obit settings:

You lot can change the Percentage threshold to annihilation you like, just separate them with a comma. Likewise, y'all tin enableIntermission, Seeking, and Buffering tracking. Personally, I prefer trackingStart, Complete, and Progress (due east.chiliad. 25% of the video was watched).

Also, even though theAdd JavaScript API support to all Youtube videos is an Advanced setting, I enable it by default because it increases the modify that Youtube video tracking volition work.

Step 2. Enable built-in Youtube video variables

In Google Tag Manager, go to Variables > Configure and enable all video-related variables.

Footstep 3. Create a Lookup Table variable

Here's what we want to achieve:

• If a visitor starts or completes a video, we want to send the give-and-take "start" or "complete" to Google Analytics
• But if the visitor has watched a certain amount of a video (eastward.g. 25%) we want to send not just the discussion "progress". We also will send the percentage of a watched video, e.thou.progress 25%

To practise that, nosotros will create a lookup variable table in GTM that will return a particular output based on the Youtube video interaction.

In GTM, go to Variables > New > Lookup table and enter the post-obit settings:

• In theInput Variable field enter the {{Video Status}} variable
• Then in the Input field enter "progress" (without quotation marks, all lowercase) then in theOutputfield enter {{Video Status}} {{Video Per centum}}%
• Finally, enable "Set Default Value" checkbox and insert {{Video Status}} variable once once more.

What did nosotros do here?

If the video player status is "progress", this means that a certain pct of a video was seen by a visitor and this consequence became available in the preview and debug mode.

In this case, we want this lookup variable to return the video player condition (progress) and also the video per centum that was watched together with a % sign.

Just if the Video status is not "progress", then this lookup variable will just return the name of the status (for example,first,complete,etc.). That's why I take configured the "Set Default Value" checkbox.

Step four. Create a Google Analytics tag

Now, it's time to transport the Youtube video data to Google Analytics. In GTM, get to Tags > New > Universal Analytics and enter the following settings.

If you are new to Google Tag Managing director and have no idea what a Google Analytics Settings Variable is, click hither.

You can cull some other names/values in the Event Category/Action/Characterization fields if y'all want (just I highly recommend following this naming convention).

Also, keep an middle on the Effect Action field. We have entered the Lookup Table variable here.

Also, assign the Custom Event trigger (forvideo event) to that tag.

Step 5. Exam the setup

Once yous accept completed all previous steps, it's time to test. Enable/Refresh the Preview and Debug mode, refresh the folio on your website with the embedded Youtube video player and try to interact with information technology.

Kickoff of all, y'all should outset seeingYoutube Videoevents in the preview way. If y'all don't see them, read this troubleshooting guide.

Click one of them and check whether your Google Analytics tag has fired.

If yep, and then go to Google Analytics Existent-time reports > Events and check whether you see them also. If y'all cannot encounter the events, read this troubleshooting guide.

Later a while, your events information will announced in Standard Google Analytics reports equally well. But that might take upward to 24 hours.

Chapter two. How to track Vimeo video player with Google Tag Director (custom solution)

What if your website does not contain embedded Youtube videos? What if you are using something else? In that case, the built-in Youtube video tracking in Google Tag Director volition not work. You need to discover some custom solution.

It all starts with identifying the video player

Earlier y'all start with the actual tracking of video player interactions, get-go yous need to identify what kind of video player is that. Video players conspicuously bear witness their logo in the player box (e.thousand. Vimeo), others will probably be not that obvious.

If your case is the latter, practise this. In your browser, open developer tools (in Chrome, that's F12 (on Windows)) and so go to Elements tab. Then click this button…

… and and so click on the player itself. At present endeavour to browse a bit and locate some clues mentioning the player provider proper name. For example, in this case, the player that I'm inspecting is JW role player.

If you can't notice the name, most likely it is an HTML5 video player.

Once you place the name of the video role player, but google [ video thespian name ] tracking with Google Tag Manager and you lot should find some guide or tutorial.

Permit's imagine, that in our case, we come across the "Vimeo" logo at the corner of the embedded video player.

Step i. Create a variable "Is Vimeo actor present on a page"

In lodge to track Vimeo players with GTM on a folio, we will need to add together a lengthy code to the container. Loading that code on every folio is not optimal and will affect the page loading speed, that's why we need to activate that code ONLY when the Vimeo player is actually embedded on that site.

To practise that, beginning, we need to create a Custom JavaScript variable and paste the following lawmaking:

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

If the Vimeo player is embedded in the page, this variable will return true.

Then create a pageview trigger and employ that Custom JavaScript variable in it. If the Vimeo role player is nowadays, this trigger will exist activated. If there is no Vimeo histrion, that trigger will remain silent.

Step 2. Vimeo Automobile-Event Listener

Now, information technology'south Vimeo Listener's turn. A listener is a office (or a bunch of functions) that are built to go along looking for certain interactions on a page. In this instance, the listener will exist looking for Vimeo player interactions. If it spots i, it volition make that information visible in the Preview and Debug mode.

Create a Custom HTML tag and paste the following code. The original authors of this lawmaking are Neb Tripple and Bogdan Bistriceanu from Cardinal Path).

This listener was recently slightly updated to support some changes in Vimeo.

<!-- Google Analytics Tag Manager (V2) custom HTML tag for Vimeo video tracking  Copyright 2016, Central Path, Inc.  Original writer: Bill Tripple <[email protected]> Revised by: Bogdan Bistriceanu <[email protected]> Updated by: Julius Fedorovicius <[email protected]> and Richard Outram <[email protected]>  Version 2.i -->  <script> var dataLayer = (typeof(dataLayer) !== "undefined" && dataLayer instanceof Array) ? dataLayer : []; var videoLabels=[]; var lastP=[];  //nosotros declare variables that will hold data virtually the video being played var _playerTitle = {}, _playerAuthor = {}, _playerAuthorURL = {}, _playerUploadDate = {};   try{  init(); } take hold of(err){  dataLayer.push({  'event': 'gtm.fault',  'errorMessage': e.bulletin,  'tag': 'CP - UA - Vimeo Video Listener'  }) } office init(){  try{  var player=certificate.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(!histrion[i].hasAttribute("id")){ // id aspect missing  player[i].setAttribute("id","vimeo_id_"+i); // add id attribute  }  var urlUpdated=false;  if(!/api=/.test(url)){ // cheque to see if api parameter is in src attribute  url=updateUrl(url,"api",one);  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=truthful;  }  if(urlUpdated){ // repopulate src aspect with added parameters  histrion[i].setAttribute("src",url)  }  videoLabels[player[i].getAttribute("id")]=player[i].getAttribute("src"); // id to characterization dictionary  }  }   // Listen for messages from the player  if (window.addEventListener){  window.addEventListener('message', onMessageReceived, faux);  }  else {  window.attachEvent('onmessage', onMessageReceived, faux);  }  }  take hold of(err){  } }  function updateUrl(url,param,value){  effort{  return url+((/\?/.examination(url)) ? "&" : "?")+param+"="+value;   }  catch(err){  } }  // Handle messages received from the player office onMessageReceived(e) {  try{  var data = e.data;    if(typeof data === "string"){  data = JSON.parse(data);  }    switch (data.result) {  case 'ready':  onReady(data);  break;  example 'play':  onPlay(data);  break;  instance 'pause':  onPause(data);  break;  example 'timeupdate':  onPlayProgress(data);  break;  }  }  catch(err){  } }  // Helper function for sending a message to the histrion function post(activeness, value) {  try{  var data = {  method: activeness  };   if (value) {  data.value = value;  }   var message = JSON.stringify(data);  var player = certificate.getElementsByTagName("iframe");  var url;  var prot;    for (i = 0; i < player.length; ++i) {  url=thespian[i].getAttribute("src");   if(/player\.vimeo\.com\/video/.exam(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:" + histrion[i].getAttribute("src").split('?')[0];  }  player[i].contentWindow.postMessage(data, url);  }  }  }  grab(err){  } }  function getLabel(id){  try{  return videoLabels[id].split('?')[0].separate('/').pop();  }  grab(err){  } }  //our function that will use the Vimeo oEmbed API to call up additional information about the video function getVimeoInfo(url, callback) {    var script = certificate.createElement('script');  script.type = 'text/javascript';  script.src = url;    document.getElementsByTagName('body')[0].appendChild(script); }  //the callback function which takes the information received from the Vimeo oEmbed API and places it into the corresponding objectes function vimeoCallback(e){  //console.log(eastward);  _playerTitle[e['video_id']] = east['title'];  _playerAuthor[e['video_id']] = e['author_name']  _playerAuthorURL[due east['video_id']] = e['author_url']  _playerUploadDate[e['video_id']] = e['upload_date'] }  function onReady(data) {  endeavour{  //execute our office which queries the Vimeo oEmbed API one time the embedded videos are "gear up"  getVimeoInfo("https://www.vimeo.com/api/oembed.json?url=https://vimeo.com/"+getLabel(information.player_id)+"&callback=vimeoCallback", vimeoCallback);   post('addEventListener', 'play');  post('addEventListener', 'interruption');  post('addEventListener', 'end');  post('addEventListener', 'playProgress');  }  catch(err){  } }  function onPlay(information){  try{  dataLayer.button({  effect: "video",  eventCategory: "vimeo",  eventAction: "vimeo play",  eventLabel: _playerTitle[getLabel(information.player_id)].toLowerCase() + " - " + getLabel(data.player_id),  vimeo_playerID: getLabel(data.player_id),  vimeo_playerTitle: _playerTitle[getLabel(information.player_id)].toLowerCase(),  vimeo_playerAuthor: _playerAuthor[getLabel(information.player_id)].toLowerCase(),  vimeo_playerAuthorURL: _playerAuthorURL[getLabel(information.player_id)].toLowerCase(),  vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],  nonInteractive: true  });  }  catch(err){  } }  function onPause(data){  try{  dataLayer.push({  result: "video",  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%, l%, 75%, 100% part onPlayProgress(data) {  try{  var t = data.information.duration - data.information.seconds <= i.v ? one : (Math.floor(data.information.seconds / data.data.duration * 4) / iv).toFixed(2); if (!lastP[data.player_id] || t > lastP[information.player_id]) {  lastP[data.player_id]=t;  if (parseFloat(t) != 0){  dataLayer.push({  effect: "video",  eventCategory: "vimeo",  eventAction: "vimeo video " +t*100+ "% Complete",  eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id),  vimeo_playerID: getLabel(information.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>        

Don't forget to assign the previously created Pageview Trigger:

Checkpoint! Allow'due south see what we've created so far:

• A Pageview Trigger which checks whether Vimeo video player is embedded in the web page (thanks to a Custom JavaScript variable).
• A Vimeo Auto-Event Listener (equally a Custom HTML tag) fires just when the aforementioned Pageview Trigger activates. Every time a Vimeo player interaction occurs, the listener will acceleration a Data Layer result with the post-obit data:
  • Outcome 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 inverse and depends on a video).

If you want to examination this now, enable the Preview and Debug mode, refresh the folio with the Vimeo player and try interacting with it. You should start seeingvideo events in the Preview manner's left side.

Step 3. Create Data Layer Variables and a Custom Event Trigger

Google Tag Director does non recognize Data Layer events or other data. So if you wish to transfer some information to other tools (e.k. Google Analytics), you need to "teach" GTM to fetch certain data (with the help of Data Layer Variables).

After variables are configured, it'south time to create a Custom Upshot Trigger. Vimeo Auto-Event Listener sends all interactions every bit Data Layer events nether the proper noun of "video".

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

Then the next thing you should exercise is to create a Custom Event Trigger which listens to ALLvideo events. Later, it volition be assigned to Google Analytics Tag.

In GTM, get to Triggers > New > Custom Event and enter the post-obit settings:

Step 4. Create a Google Analytics Tag

Concluding simply non least, Google Analytics. Now you need to ship an result and laissez passer the respective data with it. Create a new tag, select Universal Analytics every bit Tag Type, choose Event every bit Rails Blazon, and enter all three Data Layer variables.

This ways that every fourth dimension avideo event is created, a Google Analytics Upshot will be pushed to Google's servers and all iii variables will be dynamically replaced with the actual data.

If eventLabel equals toVideo Title Lorem Ipsum, this verbal value will exist passed to Google Analytics.

Just brand sure that you enter the GA settings Variable in its special dropdown (see the screenshot below).

Step five. Test test test

Don't forget to exam this entire configuration. Enable GTM Preview and Debug way, get to a page with an embedded Vimeo player, and click Play. The next thing yous should meet is avideo event in Preview and Debug mode's result stream. Click it and see whether the Universal Analytics tag has fired.

Likewise, don't forget to check Google Analytics Real-fourth dimension reports. Video events will appear in Realtime > Events reports. Within 24 hours (but usually much sooner), that event information will too appear in standard reports: Behavior > Events > Top Events.

The entire process in a nutshell

• Nosotros created a Custom JS variable that returns true if the Vimeo actor is embedded on a page.
• Then we created a Pageview Trigger that checks whether Vimeo video actor is embedded in the spider web folio (thanks to a Custom JavaScript variable)
• So we created a Custom HTML tag (a Vimeo Auto-Event Listener). And it volition fire on all pages where the Vimeo role player is embedded.Important: fifty-fifty if yous oasis't interacted with the player all the same, that tag volition still be fired.
• Every fourth dimension a Vimeo histrion interaction occurs, the listener will dispatch a Information Layer event with the following data:
  • Event Proper noun:video(this value never changes)
  • eventCategory:Vimeo (this value never changes)
  • eventAction. Possible values:Played video,Paused video, 10%, 25%, 50%, 75%, ninety%, or 100%.
  • eventLabel:[Video title](this value is dynamically inverse and depends on a video).
• You have created 3 Data Layer Variables and one Custom Event Trigger (for thevideo event).
• Finally, you created a Google Analytics tag that fires on thevideo event and will send the values of those 3 Data Layer Variables to Google Analytics.

Chapter 3. Half-dozen Google Tag Director Video Tracking Recipes. All Unified.

Believe it or not, but the flow that I have described in the Vimeo player tracking section applies to a bunch of other non-Youtube video players:

• HTML5 Video player (supports various players). A solution created past David Vallejo.
• JW Player. A solution created past Pat Grady and David Vallejo.
• Vidyard
• Wistia. A solution created by the team of Bounteous.

Since most of the GTM Recipes are created past distinct authors, their naming convention is also diverse. That's why I've spent some fourth dimension and unified them (and included the 6th recipe – Youtube tracking with the congenital-in GTM functionality).

What does it mean? Well, if you use several types of video players on your website, video motorcar-outcome listeners will burn events following the same naming design. In other words, data in your Google Analytics event reports will be consequent. For example, Vimeo auto-event listener would burn this Data Layer effect:

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

While HTML5 video player would send different this.

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

Every bit a effect, your issue reports would be cluttered.

Anyhow, here'south what data you lot'll receive from each video auto-event listener:

P.S. Some video player listeners as well transportResumed videoandVideo Errorevents.

P.P.S. JS Player listener will ship the video file URL instead of the championship if that video does not have a championship.

Feel free to download whatever 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?

Youtube Tracking Recipe

Automatically tracks interactions with embedded YouTube video players on your site. This recipe uses the built-in Youtube video tracking functionality with GTM.
Get the recipe

Ane thing that I've noticed is that the HTML5 recipe doesn't play well with others (well, at to the lowest degree some of them). Sometimes, information technology overtakes all interactions and other video listeners end working. Then brand sure that HTML5 auto-event listener does not fire on the same page as JW actor, etc. Everything else should be fine. If you notice whatever bugs, please let me know.

Video tracking with Google Tag Manager: Final words

When it comes to video tracking with Google Tag Director, the showtime thing that probably comes to your mind is the tracking of embedded Youtube videos. Well, I don't blame you lot, since this is the most popular video hosting platform in the world.

But if you lot are dealing with a non-youtube video actor, that is however possible with some custom solutions.

In this blog mail service, I've explained how you can track both Youtube and non-youtube videos embedded on your site.

And to save you some time, I've likewise included a bunch of recipes that you can download, import, configure, and get-go tracking videos in minutes.

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 aforementioned principle, and so once you lot master one, y'all'll conquer all of them.

millerbuttenot.blogspot.com

Source: https://www.analyticsmania.com/post/google-tag-manager-video-tracking/

Share this post