• Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login
  • Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login

October 12, 2021

Youtube trigger isn’t working in Google Tag Manager? 9 ways to fix it

Updated: October 12th, 2021

This is an updated version of the blog post posted back in 2016 (when the built-in Youtube trigger was not a thing in GTM yet).

In the autumn of 2017, the Google Tag Manager team released multiple awesome features and the native Youtube trigger was one of them. Before that happened, the industry was utilizing custom video tracking solutions created by Bounteous or Cardinal Path.

Even though the new Youtube trigger was a great addition to the feature set within GTM, it wasn’t (and still isn’t) bulletproof. Due to particular factors (I’ll explain them later), it will not be able to track some YT players. That’s why you can still occasionally see new posts popping up in GTM communities or forums asking for help tracking YT videos.

In this blog post, I’ll share several tips/workarounds you can implement in order to track videos when the Youtube trigger isn’t working in Google Tag Manager.

Table of contents

  • The result you should expect from the built-in Youtube trigger in GTM
  • Why is the built-in Youtube trigger not working in Google Tag Manager?
  • How to fix Youtube trigger in Google Tag Manager? (+ some alternatives)
    • #1. Enable JavaScript API support to all embedded Youtube videos
    • #2. Play around with the new “Enable this trigger on” setting
    • #3. Load the Youtube Iframe API library
    • #4. Privacy-enhanced mode
    • #5. Check if the video play contains the “src” attribute
    • #6. When src attribute is updated later
    • #7. Embedded Youtube video’s URL must contain valid query parameters
  • Other solutions to replace the built-in Youtube trigger in GTM
    • #8. Custom Youtube listener by Bounteous
    • #9. Modified Cardinal Path’s solution
  • Conclusion: what to do when Youtube trigger in Google Tag Manager is not working

 

The result you should expect from the built-in Youtube trigger in GTM

Here’s how Youtube video tracking should work in the perfect scenario:

  1. You must have at least one Youtube video trigger enabled on a page
  2. When you interact with the embedded Youtube video player, a gtm.video event appears in the Preview and Debug console (that’s because the Youtube auto-event listener catches the interaction and pushes it to the Data Layer).
  3. If this happens, you’re good to go. Enabled built-in video variables in GTM, create a tag (e.g. GA Event), and fire it on those gtm.video Data Layer events.

However, this does not always happen. The main problem that occurs with Youtube trigger in GTM is that gtm.video does not appear with all videos. Why?

 

Why is the built-in Youtube trigger not working in Google Tag Manager?

The main cause of this problem is a thing called lazy-loaded videos. For example, if a video player is not loaded together with the entire page document but later (e.g. in a popup after a user clicks a big blue button on your homepage), that is considered as a lazy-loaded video and the built-in GTM trigger will not track its interactions.

Another quite popular reason for the Youtube trigger not working is the absence of the enablejsapi query parameter in the embedded YT video player code. When this parameter is set to 1, the website (and GTM, of course) can start listening to the player via JavaScript API.

Other possible reasons are: the embedded Youtube video is using privacy-enhanced mode or has a query parameter origin set to null. Let’s take a closer look at them and what are the possible solutions.

Google Tag Manager Ebook Bundle

How to fix Youtube trigger in Google Tag Manager? (+ some alternatives)

 

Option #1. Enable JavaScript API support to all embedded Youtube videos

The first thing you could do with the trigger if you’re not seeing gtm.video events in the Preview and Debug console is to enable JavaScript API support. How can you do that? You have two options:

#1.1 Ask a developer (or change it yourself if you have access to the website’s code) to add an additional query parameter enablejsapi=1 to the URL of the embedded Youtube video. Before you do that, you need to make sure that this is a problem at all. Inspect the video player and keep looking for the iframe element that loads the YT video. Check its src attribute. Does the URL contain enablejsapi=1? If no, then you could indeed ask a developer to add this parameter to the embedded video’s URL.

#1.2. Use the checkbox in trigger’s settings: Add JavaScript API support to all Youtube videos. After you enable this checkbox, Google Tag Manager will check the existing embedded YT videos on a page and if some of them are missing this query parameter, it will be added automatically.

The main advantage of the second solution is that it does not require a developer’s input. But on the other hand, it will add a flicker effect to the player. This means that GTM will reload the player once in order to load it with the enablejsapi query parameter present. This can become an issue if a video on your page starts playing automatically (because it might start playing, then GTM will reload it and it will start playing again). This is a VERY rare edge case (but still worth knowing).

Important: If the embedded YT video is already using the enablejsapi parameter that is set to 0 (enablejsapi=0), then GTM will not change its value to 1. Unfortunately, that’s how GTM works right now (thanks to Simo Ahava for his comment).

Important #2: enablejsapi must be added to the URL as a valid query parameter. this means that it must go after the question mark and if there are multiple query parameters, then they should be connected with an ampersand &.

Good example: https://www.youtube.com/embed/93ba93bas?feature=oembed&enablejsapi=1

Bad example: https://www.youtube.com/embed/93ba93bas?feature=oembed&enablejsapi=1

Also, if there is no ampersand in front of the enablejsapi (when it should be), that’s also not good.

If you are dealing with the trouble of incorrect ampersands (e.g. encoded &), you must contact your developer and ask for a fix.

Also, another important note from Simo was that if the embedded player’s URL contains the query parameter origin that is set to null (origin=null), Youtube trigger will also not work. Ask a developer to remove that parameter from the URL (or it should contain the URL of the domain that the player is embedded on).

 

Option #2. Play around with the new “Enable this trigger on” setting

One of the main reasons why I published this blog post today is the new feature in GTM. On March 6th, Google Tag Manager team added a new setting to YT and Scroll triggers. You can now control when the trigger is enabled on a page:

  • On the earliest moment when GTM container loads (gtm.js event)
  • When the Document Object Module is ready, a.k.a. DOM Ready (gtm.dom event)
  • When all scripts are loaded on a page, a.k.a. Window Loaded (gtm.load event)

By default, Youtube Trigger is enabled on the DOM Ready event, however, you may try to delay it and enable on Window Loaded. Maybe that will help if the video is injected dynamically into the page and that happens after the DOM ready event has already occurred.

 

Option #3. Load the Youtube Iframe API library

I’ve learned this today as Sergii Lysenko (a member of the GTM community on Facebook) shared his tip (and Simo added his two cents as well). Thanks!

In addition to the enablejsapi=1 requirement, there are two more things you need to keep in mind in order to make the Youtube listener start working. If at least one of those two things (read requirements) is met then the built-in YT trigger in GTM will work:

  • An embedded video must be already present on a page when GTM container loads
  • Or the Youtube Iframe API script must be present on a page when GTM container loads

So if one of these two things are present on a page, then the YT listener will be activated and will start listening to video interactions.

However, as I have mentioned at the beginning of this blog post, the main problem comes with the lazy-loaded videos. When GTM loads, the lazily loaded video (and the Youtube Iframe API script) are not present yet, therefore, the listener never activates.

A solution? Load the Youtube API script before the Youtube Trigger is enabled. Create a Custom HTML tag with the following code:

<script src="https://www.youtube.com/iframe_api">

And fire it on All Pages (or only those pages where it is possible for the lazy-loaded Youtube video to appear). Just make sure you choose Page view trigger.

Then enable the Youtube trigger on DOM Ready event. Or if you have set the Custom HTML tag to fire on DOM Ready, then set the YT trigger to be enabled on Window Loaded event.

I haven’t tried to use both of them on the same event but I presume that there might be some race-conditions (I might be totally wrong there, so feel free to correct me).

And that’s it! When the page loads, the Youtube API script will be already available thus the Youtube trigger will be activated and listening to video interactions. As a result, you should start seeing gtm.video events in the Preview and Debug console.

However, other factors may still be interfering with your YT tracking (e.g. enablejsapi parameter is set to “0” or is missing at all) so make sure you’ve read other tips here as well.

This is not a silver bullet (but still very useful tip). I just love the GTM community and constant learning!

 

Option #4. Privacy-enhanced mode

Youtube video player can also be embedded with the privacy-enhanced mode (that does not store cookies on visitor’s browser). However, if this setting is enabled, Youtube trigger will not work (because in this case, the video will be loaded not from the youtube.com but from youtube-nocookie.com, instead).

How can you know whether the embedded video player is in the privacy-enhanced mode?

Inspect the player and check with is the source of the iframe (see the src attribute). If the domain is youtube-nocookie.com, that’s the privacy-enhanced mode.

What options do you have?

  • Disable the privacy-enhanced mode by changing the youtube-nocookie.com to youtube.com in the code of the embedded player (this needs to be done in the web site’s source code or in content management system’s editor. However, in the light of GDPR this might not be the best option).
  • Accept the defeat and skip Youtube tracking.
  • Use a custom listener and modify its code to start listening to youtube-nocookie.com instead of youtube.com. If, for example, you want to start using solution #9 (from this blog post), replace these two domains with the youtube-nocookie.com in that listener’s code (it is available in the Custom HTML tag).

 

Option #5. Check if the embedded Youtube video contains the “src” attribute

Sometimes Youtube videos are embedded in a non-standard way. By saying “non-standard”, I mean that the embedded video’s src attribute (that contains the URL of the video) does not exist.

Instead, developers use the data-src attribute.

To make sure that you’re dealing with this issue, you should inspect the video player, locate the iframe element and check whether the src attribute (see the screenshot below) contains the www.youtube.com URL.

If not, then the Youtube video tracking will not work.

In the screenshot below, the iFrame element has the src attribute but it contains the image, not the video URL. Instead, the video URL is stored in the data-src attribute.

What is the solution? Ask a developer to fix this issue and store the video URL in the src attribute. That’s the only solution.

 

Option #6. When src attribute is updated later

The subtitle of this option might look a bit misleading or confusing but bear with me. In fact, it is quite related to option #5. When developers want to optimize the page loading speed, one of the places that definitely can improve things is lazy-loaded Youtube video players.

For example, when a player is on a page, only the thumbnail is displayed. When the visitor then clicks the play button, the actual player is loaded and then you watch the video.

This, unfortunately, quite often is not supported by the built-in Youtube trigger in Google Tag Manager.

Here is a situation: when the page is loaded, Click Inspect Element on the player. If that inspected element contains the data-src attribute (that contains the URL of the video) BUT:

  • the src does not exist in that very same element
  • OR the src exists but its value is not https://www.youtube.com/embed/oasbsaoasd….., then continue reading this tip.

Now, check another thing. While inspecting that element, click that video thumbnail/play button. Did the src attribute of the player get new value and that value is the URL of the video + additional parameters (like enablejsapi=1)?

If this is exactly what you are seeing in your project, here’s the explanation of why the Youtube trigger does not work. One of the things that this trigger is looking for is iframe elements that contain the src attribute with the URL of a Youtube video. This check happens when the GTM container is loaded (but depends on the settings).

During the initial page load, your Youtube players do not contain the “src” attribute with the Youtube URL (because the URL is stored in the data-src attribute). When GTM loads, the Youtube listener checks all the Youtube players on a page and inspects them once. When the element is inspected, it gets a new attribute, called data-gtm-yt-inspected…. 

Even if the Youtube player’s URL (in the src attribute) changes, that change will not be noticed by GTM anymore (because the player was already inspected and it got that data-gtm-yt-inspected… attribute.

How can you solve this? You’ll need the developer’s input.

Your developer must do certain changes in code that is responsible for the lazy-loading of the video. Your developer will have to figure this out.

Currently, when a visitor clicks on the video thumbnail, the src attribute is updated with the actual Youtube URL. To make sure that GTM Youtube listener notices this, ask a developer to also add some functionality that removes all the data-gtm-yt-inspected… attributes that were added. This must be done every time a visitor clicks the thumbnail and the actual video player is loaded.

This will force GTM to check the player once again and start tracking it.

Keep in mind that in your case, the number of data-gtm-yt-inspected… attributes and their names will, most likely, be different.

 

Option #7. Embedded Youtube video’s URL must contain valid query parameters

When I say “valid” query parameters, I mean that they must come after a question mark (in the URL) and multiple parameters must be connected with an ampersand (&).

This is a correct example of the URL (that you can see if you do the “Inspect element” on the embedded Youtube player):

But in some rare cases, you might see something like this:

Every URL parameter is connected with &amp; instead of just &. This breaks the Youtube video player tracking in GTM. The solution here is to ask a developer to identify the code on a site that is causing this and fix it.

 

Other solutions (replacements of the built-in Youtube trigger in GTM)

Even though the aforementioned tips should be enough to fix the Youtube Trigger in Google Tag Manager, you might also find useful two tips mentioned below. They are both custom (in fact, that’s how the web tracking industry was rolling back in the older days of Youtube tracking).

 

Option #8. Custom Youtube listener by Bounteous

Before GTM offered the built-in Youtube trigger, people were using either Bounteous‘ or Cardinal Path’s custom solutions. Bounteous’ listener supports lazy-loaded videos (at least in the majority of cases that I remember). So if for some reason, none of the above tips helped (even though that’s very unlikely), you can try implementing this one.

Just remember that this custom solution uses custom triggers and variables (meaning that you’ll need to create Data Layer Variables and Custom Event trigger on your own. The built-in video triggers will not work here.

P.S. Here’s a GTM recipe (that automatically created triggers, variables, etc.).

 

Option #9. Modified Cardinal Path’s solution

Another custom solution that was popular in the industry was created by Cardinal Path. However, I remember working on one project where neither Bounteous’ nor this Cardinal Path’s solution worked.

As a result, I asked a colleague of mine who is a JavaScript developer to modify the listener a bit. Now that listener is listening to changes of the Youtube player every second. So even if the video is lazily loaded, after 1 second it will be tracked. Here’s the listener’s code:

<script>
	//enable the JavaScript API for an embedded player
	for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;)
		if (/youtube.com\/embed/.test(e[x].src))
			if (e[x].src.indexOf('enablejsapi=') === -1)
				e[x].src += (e[x].src.indexOf('?') === -1 ? '?' : '&') + 'enablejsapi=1';

var gtmYTListeners = [],
	gtmYTListenersStates = []; // support multiple players on the same page
// attach our YT listener once the API is loaded
function onYouTubeIframeAPIReady()
{
	for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;)
	{
		if (/youtube.com\/embed/.test(e[x].src))
		{
			gtmYTListeners.push(new YT.Player(e[x],
			{
				events:
				{
					onError: onPlayerError,
					onReady: onPlayerReady
					//onStateChange: onPlayerStateChange
				}
			}));
			YT.gtmLastAction = "p";
		}
	}
}

function onPlayerReady(e)
{
	var url = e.target.getVideoUrl();
	gtmYTListenersStates[url] = e.target.getPlayerState();

	setInterval(function ()
	{
		var state = e.target.getPlayerState();

		if (gtmYTListenersStates[url] !== state)
		{
			e.data = state;
			onPlayerStateChange(e);
		}
		gtmYTListenersStates[url] = state;
	}, 100);
}

// listen for play, pause and end states
// also report % played every second
function onPlayerStateChange(e)
{
	e["data"] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e["target"]);
	var video_data = e.target["getVideoData"](),
		label = video_data.title;
	// Get title of the current page
	var pageTitle = document.title;
	if (e["data"] == YT.PlayerState.PLAYING && YT.gtmLastAction == "p")
	{
		label = "Video Played - " + video_data.title;
		dataLayer.push(
		{
			'event': 'youtube',
			'eventCategory': 'Youtube Videos',
			'eventAction': pageTitle,
			'eventLabel': label
		});
		YT.gtmLastAction = "";
	}
	if (e["data"] == YT.PlayerState.PAUSED)
	{
		label = "Video Paused - " + video_data.title;
		dataLayer.push(
		{
			'event': 'youtube',
			'eventCategory': 'Youtube Videos',
			'eventAction': pageTitle,
			'eventLabel': label
		});
		YT.gtmLastAction = "p";
	}

}

// catch all to report errors through the GTM data layer
// once the error is exposed to GTM, it can be tracked in UA as an event!
function onPlayerError(e)
{
	dataLayer.push(
	{
		'event': 'error',
		'eventCategory': 'Youtube Videos',
		'eventAction': 'GTM',
		'eventLabel': "youtube:" + e["target"]["src"] + "-" + e["data"]
	})
}

// report the % played if it matches 0%, 25%, 50%, 75% or completed
function onPlayerPercent(e)
{
	console.log("onPlayerPercent");
	if (e["getPlayerState"]() == YT.PlayerState.PLAYING)
	{
		var t = e["getDuration"]() - e["getCurrentTime"]() <= 1.5 ? 1 : (Math.floor(e["getCurrentTime"]() / e

			["getDuration"]() * 4) / 4).toFixed(2);
		if (!e["lastP"] || t > e["lastP"])
		{
			var video_data = e["getVideoData"](),
				label = video_data.title;
			// Get title of the current page
			var pageTitle = document.title;
			e["lastP"] = t;
			label = t * 100 + "% Video played - " + video_data.title;
			dataLayer.push(
			{
				'event': 'youtube',
				'eventCategory': 'Youtube Videos',
				'eventAction': pageTitle,
				'eventLabel': label
			})
		}
		e["lastP"] != 1 && setTimeout(onPlayerPercent, 1000, e);
	}
}

// load the Youtube JS api and get going
var j = document.createElement("script"),
	f = document.getElementsByTagName("script")[0];
j.src = "//www.youtube.com/iframe_api";
j.async = true;
f.parentNode.insertBefore(j, f); 
</script>

It will push the “youtube” events to the Data Layer. If you’re not sure what variables and trigger should you create, everything is explained in the Cardinal Path’s blog post. All you need to do is to update Cardinal Path’s Custom HTML tag’s code with the one that I’ve posted above.

The solution isn’t perfect (compared to those that are at the beginning of the post) and it can cause some video flickering but if you are looking for a plan B, this might be it.

In this case, you should also remember that this solution uses custom triggers and variables (meaning that you’ll need to create Data Layer Variables and Custom Event trigger on your own. The built-in video triggers will not work here.

P.S. Here’s a GTM recipe (that automatically created triggers, variables, etc.).

 

Bonus Option #9. Changed video URL

This is kind of an edge case but still worth checking.  So, recently I stumbled upon a case where none of the above-mentioned solutions worked (this happened in the #MeasureSlack). A video player appeared in a popup only after a visitor clicked a certain button on a page.

But there was something different that broke the player tracking.

Apparently, the Youtube video player was always present on a page but it was hidden. When GTM loaded, Youtube listener successfully spotted the video player and was ready to start listening. However, when the button was clicked (that opens a video popup), some custom JavaScript on a page changed the Youtube video URL (added an additional parameter ?autoplay=1). This caused the iFrame to reload and create a new instance of the iFrame, which is no longer tracked by GTM.

GTM’s built-in Youtube tracking checks video players on a page only once, hence that new instance is ignored.

Here are a bit more details. Basically, I opened the Elements inspector in my Chrome browser and did a quick search for /embed/ (because your embedded Youtube videos have that in URL).

Here’s a screenshot of the embedded player’s URL while the popup is still invisible.

Memorize this. The URL contains the hostname, /embed/some_id, and two query parameters (enablejsapi and origin).

However, when I click the button that opens a popup with Youtube video, its URL changes to this one:

A new query parameter is added to the URL, autoplay=1. This URL change caused the issue that GTM Youtube tracking was not working. And this is not related ONLY to autoplay. There could have been any parameter or any other change. Youtube tracking would not have worked.

What’s the solution? You need to tell the developers to not change the video URL. Or have those parameters added to YT video URL right from the beginning.

This cause of this issue was spotted (to no one’s surprise) by Simo Ahava.

 

Conclusion: what to do when Youtube trigger isn’t working in Google Tag Manager

So there you have it. 9 ways how you can solve the puzzle when the built-in Youtube trigger isn’t working in Google Tag Manager.  Here are the key takeaways:

  • The default Youtube trigger will properly track YT videos if:
    1. enablejsapi is added to the URL of the embedded Youtube video player and is set to 1 (you can check that by inspecting the iframe of the Youtube video and checking its src attribute).
    2. and one of these conditions is met:
      • Youtube video player is already present on a page when GTM container loads (and that’s why lazy loaded videos are not tracked by default)
      • Youtube Iframe API script is already present when the GTM container loads

The enablejsapi issue can be solved either by a developer (ask him/her to add this parameter to the src of the iframe) or by enabling Add JavaScript API support to all Youtube videos checkbox in your GTM trigger. However, if the video URL already contains the enablejsapi=0 (means disabled), ask a developer to set it to 1 in the website’s source code.

As for those other two conditions (where at least one must be met), create a Custom HTML tag that contains the Youtube Iframe API script and fire it before the Youtube trigger is enabled.

<script src="https://www.youtube.com/iframe_api">

All pages trigger assigned to that Custom HTML tag should do the trick.

If these settings do not work (even though they should), consider checking other tips:

  • Take a look at whether your embedded videos are using the privacy-enhanced Youtube mode
  • Try implementing custom Youtube listeners. These solutions are not very elegant (compared to the built-in functionality of GTM) but still might serve as a plan B.
  • Check whether the URL of the embedded YT player does not contain origin=null query parameter. If it does, it should be removed (or set to the domain of the parent page).

As always, the comments section is at your service. Did I miss anything? Let me know.

Julius Fedorovicius
In Google Tag Manager Tips
32 COMMENTS
Stephan Wilmas
  • Jan 18 2019
  • Reply

This is awesome. I had a similar problem where there was a video wrapper(with DIVI theme) on the youtube embed and Tag Manager could not detect the gtm.video event. This worked great.

    guillaume
    • Apr 16 2019
    • Reply

    Stephan Wilmas, which of the above method worked for you?
    I'm facing the same issue with the divi video module, I'm unable to track the views.

      Julius Fedorovicius
      • Apr 18 2019
      • Reply

      Hey, have you tried all the methods explained here?

Gabriel
  • Mar 7 2019
  • Reply

Your articel was a great help. Not only for trouble shooting but also to get a better understanding on the matter of youtube tracking.

Have a great day,
Gabriel

PS: You are the man :)

Peter
  • Apr 12 2019
  • Reply

This was a huge help, thank you! Tag manager is working perfectly with lazy loaded videos, but unfortunately only on desktop. I'm not sure why, but the Youtube tag isn't working on mobile with lazy loaded videos. Any chance you might have some insight into this? Thank you either way!

    Julius Fedorovicius
    • Apr 18 2019
    • Reply

    Haven't noticed that. Are all other tags (excluding Youtube) working on your mobile version?

Aneri Gandhi
  • May 24 2019
  • Reply

Hello,

The solution you provided for lazy-loading video works great. There is one slight problem. My YouTube Video plays in a lightbox. The Start and Pause events are tracked when the video is started for the first time. When I close the lightbox and lauch it to play the video again, it does not track the Start and Pause events again. Although, it tracks the Progress Events. Any thoughts on how to achieve this?

Regards,
Aneri

Mohit
  • Jul 25 2019
  • Reply

I've tried all of your options except for last custom tag! My page is playing youtube video on Button Click in Modal Window, and youtube trigger is not firing somehow, but if I directly past the iframe code to page , not placing in modal container then it works. can you tell me whats wrong with it ?

    Jamie
    • Aug 22 2019
    • Reply

    Hey, did you figure this out? I've got the same issue

      Julius Fedorovicius
      • Aug 23 2019
      • Reply

      Can you both share links to your websites with a quick description on where/how to find that video

Claire Boardman
  • Aug 17 2019
  • Reply

I'm working with a Wix site and the YouTube videos are embedded in a Lightbox. I've tried all your fixes above (thank you for sharing!) but it's still not working and I wondered if anyone had any experience/solutions?

Killian
  • Sep 20 2019
  • Reply

Hi Julius,

The Cardinal Path blog post page no longer loads.. I am having trouble tracking YT videos that are in an iframe in a carousel. Your version of the Cardinal Path solution sounds like it might work. Any ideas?

Thanks :)

    Killian
    • Sep 20 2019
    • Reply

    I imported the recipe.. unfortunately it also did not work :( ....is there anything else I can try?

      Julius Fedorovicius
      • Sep 23 2019
      • Reply

      You can try sharing the link to the page with the YT player here and I will take a look.

Swapna Ramaka
  • Dec 6 2019
  • Reply

Hi Julius,

I am trying to track the video interaction on my client website. The videos are embedded in a popup.

Ex: Articles are loaded in carousal.. when i click on each article link, opens in popup and a video is embedded in the content.

Tried creating an event listener but its not working. Can you help me out.

Embedded videos are from YouTube and Vimeo

Thank you

Bartek
  • Dec 30 2019
  • Reply

Hi Julius.

I have another reason why YouTube trigger isn't working. I had JW Player Listener enabled, which blocked YouTube trigger.
When I turned off JW Player Listener, the YouTube trigger started working.

priya
  • Jan 18 2020
  • Reply

I am facing issue when i am trying to track the auto play video which is the banner of the page. can we track auto play video?

Amit Prasad
  • Apr 16 2020
  • Reply

Will this solution also work for Single Page Application (for youtube video tracking)??

    Julius
    • Apr 16 2020
    • Reply

    The best way to find out is to try :)

Giny
  • May 2 2020
  • Reply

Woww.. because of custom iframe, i got solution. now my videos are tracking & i'm getting report in analytics. Thank you so much. great help indeed. have tried many options but your article helped me..

Thank You

Norman
  • Aug 6 2020
  • Reply

I look up a lot of things at work and have never commented on anything before, but this was a great article and made my life easier - well done

Tom Mercik
  • Aug 20 2020
  • Reply

Greetings Julius!

About to start Module 7 but decided to loop back to Module 3 because so fair, tracking YT was the only aspect causing me trouble.

Before I try either/both the Bounteaous/Cardinal Path options (since nothing else works), I thought I'd share the embed code for the youtube in question:

Is "encrypted-media;" the source of my troubles?

OR is it the theme (X) that's causing the challenges? Theme X provides very limited info via "View page source" and "Inspect".

THX in advance,
Tom

    Julius
    • Aug 21 2020
    • Reply

    Hi, what is the URL of the page?

Tom Mercik
  • Sep 3 2020
  • Reply

Greetings Julius, sorry for tardy response, family matter.

Url is: https://dogfenceontario.ca/link-dog-fence-ontario-phone-app/

    Julius Fedorovicius
    • Sep 4 2020
    • Reply

    You have a mix of problems here. You need to solve:
    1. Implement method #4 (you can do that on your own via GTM)
    2. You need to talk to developers and make sure that they implement method #5

    ALL of these requirements must be met. And two of them must be solved by your developers.

Max Thomas
  • Oct 30 2020
  • Reply

Thank you for this extremely helpful post. For the particular site I'm dealing with, "loading the Youtube API script before the Youtube Trigger is enabled" was the solution. Thanks again!

Glynn
  • Dec 4 2020
  • Reply

Thanks, Option 3 solved it for me!

Ivan
  • Dec 11 2020
  • Reply

Julius, thank you for this, you saved me a lot of time :)
Add JavaScript API support to all Youtube videos solution worked like a charm. I have two unrelated questions though:

On the client site I manage, there was already a GTM container placed by another agency that handles their advertising, so I placed my own container alongside it. Is there a problem with that, besides maybe adding some time to page load?

Other question is related to the first GTM container which is placed incorrectly, both scripts within the head tag of the page. Is there a problem with that? From what I could see, my container wouldn't work when I placed it correctly (second script within the body), so I too had to place both scripts to head in order for it to work...

Thanks and keep up the great work :)

Katherine
  • Nov 5 2021
  • Reply

In regards to the note you made in Bonus Option #9 on the URL. - - If I have the developer remove the autoplay=1 parameter, will the youtube trigger in GTM work without an origin parameter? -- I am inspecting the source url and it contains the hostname, /embed/some_id, and only one query parameter (enablejsapi). I did not see origin in the URL and wondered if that would be an issue.

Brandie Green
  • Nov 12 2021
  • Reply

We are having trouble tracking videos on our new stonesmart site. I've tried to debug but no luck. Any ideas on what might be wrong?

Lucas Kostka
  • Jan 25 2022
  • Reply

Hey, recent finding of a (seemingly) undocumented JS behavior, moving iframes in the DOM through JS also reloads the iframe, thus eliminating listeners...

George
  • Sep 16 2022
  • Reply

Thank you this was helpful. I'm working on a Laravel/Vue Build and the GA4 Enhanced Tracking wasn't working for YT videos.

The fix was to add the YT iframe API in the head.blade. Excellent :)

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and Google Analytics. Join thousands of other digital marketers and digital analysts in this exciting journey. Read more
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
Recent Posts
  • Google Tag Manager Tutorial + Video & Free E-Book for Beginners
  • How to Find Time to Learn New Skills?
  • Complete Google Tag Manager Data Layer Tutorial
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings