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.
#1 So what’s the plan, captain?
Now, I’ll briefly describe the entire process of how you should implement video player tracking. After that, we’ll proceed to a practical example.
#1.1 Custom Auto-Event Listener
One of the key Google Tag Manager concepts is Auto-Event Listeners. These JavaScript functions track certain interactions on your website and fire Data Layer events whenever something important happens. By default, Google Tag Manager offers these auto-event listeners:
- Pageview
- Form submission
- Link click
- All element clicks
- Timer
- JavaScript Error
- History Change
Unfortunately, none of them can track any Video Player embedded on your site. That’s where Custom Auto-Event Listeners come in handy. They are custom Javascript functions which can track pretty much anything you want. All you need to do is:
- Either find a developer who can write a custom auto-event listener.
- Or you can find a ready-made solution. In this case, the aforementioned list of GTM recipes is your best option.
#1.2 A Trigger for that Listener
Ok, let’s imagine that we’ve found the custom auto-event listener we need. What’s next? We could fire it on All pages, right? Well, in most cases, that’s not the best approach.
Why would you want to fire a listener on every page, although only 3 pages of your website contain a video? That’s just non-optimal. What options do you have here?
- Option A: You can create a Pageview Trigger where URL contains A, B or C. This is not a very scalable solution because one day you might add 30 new videos, which means that you’ll also need to manually update the rule of a Pageview Trigger.
- Option B: You can use a Custom Variable which returns “true” only when the page contains an actual embedded video player. That variable could be used as a rule in a Pageview trigger as follows: Fire a custom auto-event listener only when Video Player is present on the page (i.e. Custom JavaScript Variable’s value equals to true). I’ll demonstrate this in action after a few chapters of this blog post.
#1.3 Checkpoint – testing time
After you implement the custom auto-event listener, you’ll have to try it live. Once you’ll click the Play button, a Data Layer event will be fired with some data points (which will be transferred to Google Analytics).
By default, Google Tag Manager does not recognize variables (e.g. eventCategory) that are stored in the Data Layer, so you’ll need to create them in a GTM container. The same principle applies to the Data Layer event called video (you can see it in the screenshot above). It cannot be used as a trigger unless you create a Custom Event Trigger.
#1.4 Did anyone mention Data Layer?
As I have previously mentioned, by default, GTM does not recognize various data points that are stored in the Data Layer. So if you wish to transfer some information to Google Analytics, you’ll first need to create Data Layer Variables in GTM. In the example below, I’ve created a Data Layer Variable which fetches the value of eventCategory. You should do the same with eventAction and eventLabel.
If you wish to better understand, how to pull the data from the Data Layer, read this blog post.
Coming up next, a trigger. We need it to activate ONLY when a video player interaction occurs (Play, Pause, etc.). Remember that “video” event I have previously mentioned? That’s a perfect trigger.
Create a Custom Event Trigger with the following settings:
#1.5 Google Analytics Event
The last step is to create a Google Analytics event tag which is triggered by the Custom Event called video. With that event tag, you’ll also need to transfer some additional data to Google Analytics.
#1.6 Google Tag Manager Video Tracking in a nutshell
If you feel confused at this moment, that’s perfectly fine. I have explained Google Tag Manager video tracking concept multiple times and almost every time I get this response:
If you’re like me, you probably prefer flow-charts or some other visual content which explains a certain topic in more easy-to-digest manner. Well, this time is no exclusion. I hope you find the 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:
|
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 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):
|
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> 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> |
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”.
|
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.
#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:
|
1 2 3 4 5 6 |
dataLayer.push({ event: "youtube", eventCategory: "youtube", eventAction: "pause", eventLabel: video_id:video_title }); |
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 }); |
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 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.
44 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!