November 15, 2019
Google Tag Manager Video Tracking Guide: Beyond Youtube
Updated: November 15, 2019 (several tracking codes were updated).
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.
Table of contents
- Built-in vs. Custom
- #1. Youtube video player tracking
- #2. Non-Youtube video tracking: an overview of the process
- #3 Practical example: Vimeo video player
- #4. Six Google Tag Manager Video Tracking Recipes. All Unified.
- Final words
Built-in vs. Custom
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 a bunch of auto-event listeners, for example:
- Pageview
- Form submission
- Link click
- All element clicks
- Timer
- JavaScript Error
- Element Visibility
- Scroll Depth
- History Change
- Youtube (tracks embedded videos on your site)
Even though GTM offers a built-in functionality to track Youtube videos (because that’s Google’s property + the most popular video platform in the world), there are still other video player in the market.
#1. Youtube video player tracking
In this blog post, I’ll focus more on non-Youtube video players (e.g. Vimeo, generic HTML5, etc.). If you are interested in just a Youtube video player, you can either import the ready-made Youtube tracking recipe or implement everything manually by following this guide.
Also, if you find yourself stuck with the Youtube player tracking not working properly, read this guide. But now, let’s move to the zone of non-Youtube players.
#2. Non-Youtube video tracking: an overview of the process
#2.1 Identify the video player
Before you start with the actual tracking of video player interactions, first you need to identify what kind of video player is that. Video players clearly show their logo in the player box (e.g. Vimeo), others will probably be not that obvious.
If your case is the latter, do this. In your browser, open developer tools (in Chrome, that’s F12 (on Windows)) and then go to Elements tab. Then click this button…
… and then click on the player itself. Now try to browse a bit and locate some clues mentioning the player provider name. For example, in this case, the player that I’m inspecting is JW player.
If you can’t find the name, most likely it is an HTML5 video player.
#2.2 Check whether an existing tracking solution for that player exists
This one might look obvious but sometimes people forget to use Google Search. Enter the player’s name and “tracking with Google Tag Manager”. Let’s say that we are interested in tracking Vimeo video player.
#2.3 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.
#2.4 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.
#2.5 Did anyone mention the 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:
#2.6 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.
#2.7 Confusing?
If you feel confused at this moment, that’s perfectly fine. I have explained Google Tag Manager video tracking concept multiple times and quite often, I get this response:
If you’re like me, you probably prefer flow-charts or some other visual content that explains a certain topic in a 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 (meaning that a video player exists on a page), 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. Note: the parameters pushed to the Data Layer might be different depending on the video player/listener.
- 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 a Universal Analytics Event tag that fires upon the 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?
#3 Practical example: Vimeo video player
As promised, let’s see how Google Tag Manager Video Tracking works in practice. We’ll use Vimeo as an example.
#3.1 Is the Vimeo player present on the page?
First, create a Custom JavaScript variable and paste the following code:
|
1 2 3 4 5 6 7 8 |
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 the Vimeo player is embedded in the page, this variable will return true. This is a good indicator that should be used in a Pageview Trigger. If Vimeo player is present, it’ll fire a Vimeo Auto-Event Listener.
#3.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). This listener was recently slightly updated to support thresholds of the watched video (there was some change on Vimeo’s end that temporarily broke the listener’s functionality).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 Copyright 2016, Cardinal Path, Inc. Original author: Bill Tripple <btripple@cardinalpath.com> Revised by: Bogdan Bistriceanu <bbistriceanu@cardinalpath.com> Updated by: Julius Fedorovicius <julius@analyticsmania.com> and Richard Outram <Richard.Outram@simmbiotic.com> Version 2.1 --> <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 'timeupdate': 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: "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%, 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: "video", 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> |
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).
#3.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”.
|
1 2 3 4 5 6 |
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.
#3.4 Universal Analytics Tag
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.
Just make sure that you enter the GA settings Variable in its special dropdown (see the screenshot below).
If you download some video-related recipe from here, you might see a checkbox “Enable overriding….” enabled and {{YOUR_GA_TRACKING_ID}} in the GA Event tag. The most recommended approach here is to disable that checkbox and insert your existing GA settings variable in its dropdown.
If you’re not familiar with the GA Settings Variable, you can read more about it here.
#3.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 Google Analytics Real-time reports.
#4. Six 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 non-Youtube 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 and David Vallejo.
- Vidyard
- Vimeo. A solution created by the team of Bounteous.
- Wistia. A solution created by the team of Bounteous.
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 (and included the 6th recipe – Youtube tracking with the built-in GTM functionality).
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. For example, Vimeo auto-event listener would fire this Data Layer event:
|
1 2 3 4 5 6 |
dataLayer.push({ event: "video", eventCategory: "vimeo", eventAction: "vimeo video play", eventLabel: "video title - video id" }); |
While HTML5 video player would send different this.
|
1 2 3 4 5 6 |
dataLayer.push({ event: "video", eventCategory: "video", eventAction: "play", eventLabel: video_url }); |
As a result, 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.
P.P.S. JS Player listener will send the video file URL instead of the title if that video does not have a title.
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 the 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 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. This recipe uses the built-in Youtube tracking functionality with GTM.
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). Sometimes, 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, please let me know.
Video tracking with Google Tag Manager: Final words
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 rocket science. In this blog post, I have explained the entire concept of non-youtube 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.
50 COMMENTS
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!
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
Awesome - thanks for the prompt reply, Julius! Will email you separately.
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!
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?
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).
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!
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.
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?
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.
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!
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
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.
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:
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.
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!! :)
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.
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!!
Thank you, very helpful. Does it track Brightcove video as well?
Thank you!
C
Hi, I haven't tried it. The best way for you to find out is to try by yourself :)
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/
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.
Thank you! I really appreciate your 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
Is it posible tracking Spotify videos? How I do that?
Could you direct me? throw me a little light about it? Thank you!
I never tried it. Import HTML5 video tracking recipe and give it a try. Maybe it will work.
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?
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.
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
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?
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?
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.
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.
Hello there! Thank you for your awesome work! I was curious, is there a recipe that you recommend or have for "Flowplayer" Thank you!
I haven't tried to track that player. Have you tried the HTML5 video recipe?
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.
hello again! now I see what you were asking. HTML5 recipe handles flowplayer too. awesome! it seems to be working :)
Hi Julius,
I've implemented the HTML5 recipe on a clients site, however they have 2 videos present and I only would like to track one of them. One is in the header and on loop, so doesn't need tracking.
The one I need tracking is near the bottom of the page - https://www.forzafinance.co.uk
GTM is firing for both, but how do I explictly state it to only push play data to GA for the 2nd video?
Thanks in advance.
Simon
Hey, Simon. With every dataLayer.push there is a variable called eventLabel. You can use it to distinguish which video is playing.
That header video's eventLabel is "forza-vid-web-2.mp4".
So you could update your Custom Event trigger to ignore those events that contain "forza-vid-web-2.mp4" eventLabel belonging to that header video.
Hi Julius, thank you for sharing your knowledge. It helped me a lot. I have a question regarding the interpretation of the data being sent to GA. I am struggling to understand which number indicates the amount of users actually watching the video (no matter the lenght)? Because it is my unterstanding that one user who constantly pauses and jumps further in the timeline can trigger multiple actions like 25% and paused video.
Or do i have to elimiate all the other actions in the javascript part in ordner to track unique amount of users who came in contact with the video?
Hey. To answer that question, create an advanced segment in GA and include sessions with at least one "video play" (or whatever you called those actions). Then (with that segment selected) go to Audience > Overview and you'll see the number of all users that are included in that segment. That's the number of users who have played the video (regardless of the watched length).
Thank you so much!
Hi,
I also had the GA variable inserted both on the drop down and on the overwrite. I unselected overwrite and now it's tracking in google analytics (before I could see the events in the datalayer but not in google analytics). I also was using duracell's GTM plugin and had selected the media event's so I had 2 listeners running at the same time.
Now it works. Thanks very much for this!
You rock Julius! Thanks so much!
hello Julius, i have 2 videos in one page. the first video is in html5 and second video is youtube embed. i'm using your html5 video container. and it only tracks the youtube video events. why can't it track the html5 video?
Maybe that video player is very much modified, therefore, the HTML5 listener cannot spot it. It's difficult to give you advice without knowing more information.
Is it an HTML5 video?
If true, how can I track it using GTM?
I have tried DAVID VALLEJO's solution: https://www.thyngster.com/tracking-html5-videos-gtm/
http://measuremysite.com/html5-video-tracking-google-tag-manager/
But cannot help me out.
I guess it is because this tag is hidden so I cannot use gtm.dom but a click trigger to run custom HTML code by David.
video tabindex="0" class="video-stream html5-main-video" controlslist="nodownload" style="width: 1046px; height: 588px; left: 0px; top: 0px;" controls="" src="blob:https://www.youtube.com/b27beece-0f2a-407f-b5ab-*********"></video
HI,
can you please explain how to track flow player with google tag manager.
Man, a need to write this comment to congrats and thanks you for this! I was hard working in the last three weeks searching a way to make this, and your informations supply this perfectly! Thanks so much and regards from Brazil!