Fix Lazy-Loaded YouTube Video Tracking on Google Tag Manager

Lazy loading is a technique of delaying load of webpage resources until they are actually needed to improve page load performance. This is often used for images and videos.

GTM can automatically track lazy-loaded YouTube videos. If it’s not working for you, it’s most probably due to the way the lazy loading was done.

In order for GTM to track lazy-loaded YouTube videos, the iframe needs to be initially loaded with “youtube.com” or “youtu.be” in the src.

For example, this will NOT work:

//Initial load - iframe with no src
<div id="videoItem"><iframe></iframe></div>
//Lazy load - iframe is later updated with src
<div id="videoItem"><iframe src="https://www.youtube.com/embed/PKtnafFtfEo"></iframe></div>

Unfortunately, many code plugins (eg. WordPress) do it this way, causing GTM to not being able to track the video playback.

This example, however, will work:

//Initial load - Don't load the iframe initially
<div id="videoItem"></div>
//Lazy load - iframe is later loaded (for the first time) and with src having "youtube"
<div id="videoItem"><iframe src="https://www.youtube.com/embed/PKtnafFtfEo"></iframe></div>

I see many people having this issue of tracking lazy-loaded YouTube videos using GTM. Hope this little tip can help lead you to the solutions.

Sparkline aims to provide data accuracy, comprehension and consolidation, and most importantly, tangible insights for businesses. Get in touch if you’d like to learn more.