How Does Youtube Video-tracking Actually Work
Despite Google Tag Manager (GTM) providing easy ways to set up triggers, many users still struggle with tracking issues. Google Analytics 4 (GA4) offers an out-of-the-box feature to track YouTube videos. However, their YouTube video engagement is not tracked properly. You may have heard common troubleshooting steps. These include adding the <enablejsapi> parameter to the video URL. They also entail including YouTube’s iFrame API in the <head> tag of the website. While these steps are necessary, the real problem could be elsewhere. To fully understand the issue, it’s important to learn how YouTube’s iFrame API works.
Scenario 1: Issues with YouTube iFrame API Initialization
YouTube’s iFrame API allows developers to build, track, manage, and destroy a YouTube video player on a website. However, a critical limitation is that once the API initializes a player, it cannot be reinitialized. This means that if your developer creates a player using the API, it is assigned to a JavaScript variable. You won’t be able to enable tracking later using GTM, GA4, or custom code.
Example of a Common Issue
If a developer initializes a YouTube video player using the iFrame API, the code may look like this:
onYouTubeIframeAPIReady = function() {
dev_player = new YT.Player('player0', {
videoId: 'ovNe1akDQTk',
playerVars: {
'autoplay': 1,
'rel': 0,
'showinfo': 0
}
});
};
This creates a YouTube player inside an iFrame with the ID player0. However, if GTM or GA4 attempts to track the same video by creating another reference to it, like this:
function onYouTubeIframeApiReady()
{
my_player = new YT.Player('player0',
{
events:
{
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
};
The new reference my_player will not work because the original player (dev_player) was already initialized. As a result, event listeners won’t function properly.
The Fix
To avoid this issue, always ensure that the YouTube video player is built as an HTML <iframe> instead of using the API. Without variable references, tracking works seamlessly using the iFrame API.
Recommended Developer Code
<iframe src="https://www.youtube.com/embed/ovNe1akDQTk?enablejsapi=1&rel=0&origin=https%3A%2F%2Fsuzhiumcorp.com" id="player0"></iframe>
This method allows you to track video events with GTM triggers or GA4’s auto-tracking feature.
If your developer must use the iFrame API, ask them to add event listeners during the player initialization:
onYouTubeIframeAPIReady = function() {
player0 = new YT.Player('player0', {
videoId: 'ovNe1akDQTk',
playerVars: {
'autoplay': 1,
'rel': 0,
'showinfo': 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
};
Scenario 2: Videos in Pop-Ups or Dynamically Loaded Videos
If your developer has built the video player as an HTML <iframe> with enablejsapi=1 and properly included the iFrame API, yet tracking still fails, you should consider how the video appears on the page.
Tracking will not work if:
The video appears in a pop-up or modal.
The video is loaded dynamically after a user interaction (e.g., clicking a thumbnail).
This happens because GTM triggers and GA4’s automatic tracking are designed to track videos that are present when the page initially loads.
The Fix
In such cases, you need to write a custom tracking script that waits for the video player to be ready before firing tracking events.
try {
var addListeners = function() {
var elements = document.querySelectorAll('iframe[src*="youtube"]');
elements.forEach(function(item) {
if (!item.getAttribute('id')) {
item.setAttribute('id', 'video_' + Math.random().toString(36).substr(2, 5));
}
var id = item.getAttribute('id');
if (!item.src.includes('enablejsapi=1')) {
var url = new URL(item.src);
url.searchParams.set('enablejsapi', '1');
item.src = url.toString();
}
});
};
setTimeout(addListeners, 1500);
} catch (err) {
console.log(err);
}
Scenario 3: Incorrect YouTube URL Format
Even if everything appears to be set up correctly, tracking may still fail due to the format of the video URL. The YouTube iFrame API only works when the video URL contains www.
Recommended URL Format1
<iframe src="https://www.youtube.com/embed/ovNe1akDQTk?enablejsapi=1&rel=0&origin=https%3A%2F%2Fsuzhiumcorp.com" id="player0"></iframe>
Incorrect URL Formats1
<iframe src="youtube.com/embed/ovNe1akDQTk?enablejsapi=1&rel=0&origin=https%3A%2F%2Fsuzhiumcorp.com" id="player0"></iframe>
1
<iframe src="https://watch.youtube.com/embed/ovNe1akDQTk?enablejsapi=1&rel=0&origin=https%3A%2F%2Fsuzhiumcorp.com" id="player0"></iframe>
Conclusion
If your YouTube video tracking isn’t working, the issue might not just be missing API parameters but could stem from how the video player is initialized. Make sure:
The player is created as an HTML <iframe> rather than using the iFrame API whenever possible.
The developer attaches event listeners correctly if the API is used.
The video is present at page load or a custom script ensures tracking for dynamically loaded videos.
The video URL includes www to ensure compatibility with the YouTube iFrame API.
By following these best practices, you can ensure accurate YouTube video tracking for better analytics insights.