March 6, 2019

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

Updated: March 6th, 2019. 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, Google Tag Manager team released multiple awesome features and native Youtube trigger was one of them. Before that happened, the industry was utilizing custom video tracking solutions created by Bounteous (ex Lunametrics) 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.

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)
Other solutions to replace the built-in Youtube trigger in GTM
- #5. Custom Youtube listener by Bounteous
- #6. 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:

You must have at least one Youtube video trigger enabled on a page
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).
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 Course for Beginners - Learn More

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

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

#2.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 this 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).

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

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

#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">

1	<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!

#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 #6 (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).

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 web tracking industry was rolling back in the older days of Youtube tracking).

#5. 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 LINK (that automatically created triggers, variables, etc.).

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

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

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

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

So there you have it. 6 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">

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

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