Google Tag Manager (GTM) has released an exciting update on 5th March 2019. You can now specify when to enable Scroll Depth Triggers and YouTube Video Triggers. GTM suggests using Window Load (gtm.load) for Scroll Depth and DOM Ready (gtm.dom) for YouTube Video.
- Container Load (gtm.js) occurs as soon as possible when the page loads.
- DOM Ready (gtm.dom) occurs after all the HTML has been received and parsed.
- Window Load (gtm.load): occurs after all initial content on the page has loaded.
This update is really useful and here is why.
Let’s talk about Scroll Depth Trigger first.
When a Scroll Depth Trigger fires before the web page is fully loaded, it calculates the size of the page of that moment, which can be devoid of any content and smaller than the viewport size. So 25, 50, 75 and 100% Scroll Depth threshold will all be met at once, and fire all Scroll Depth events.
It’s like drinking with a straw while someone is pouring water into the cup. If you finished sipping before the pouring started, you can say ‘I drank 100% of the water in the cup’ and at the same time the full cup of water is left untouched.
This problem is especially noticeable for pages with excessive DOM size, or pages dynamically load content after HTML template has loaded (eg. AJAX, React post-load).
Before this update, we needed to use some Custom HTML magic to work around this problem. For example, using Timer or replace scroll depth with element visibility event (eg. when the footer element becomes visible). Now we can simply enable Scroll Depth trigger after Window Loaded.
Now let’s have a look at YouTube Video tracking.
Similarly, if the YouTube Video and YouTube IFrame API script are loaded after GTM loaded (eg. lazy-loading video), the video tracking won’t work. In this case, delaying the trigger to enable at Window Loaded may help.
Then why shouldn’t GTM enable all Triggers after Window loaded?
Because delaying GTM tags can affect tracking accuracy. Window Loaded only fires when the entire web page has completely loaded all content (including images, HTML, CSS, scripts, etc.). If a user navigates away before the window is fully loaded, nothing will be tracked.
Imagine you are loading a slow page (let’s say it’s the internet connection). You can see the link you want, but the last picture is still loading pixel by pixel. Will you click the link and navigate away or will you wait because you wouldn’t dare to break the tracking?
With the new updates, we can decide how long we want to wait before enabling Scroll Depth and YouTube Video Triggers and find the best timing for each page.
Well done GTM! Now please bring more new features to make our work even easier! My wish list for 2019 updates is:
- Better syntax highlighting and auto indentation
- Supporting ES6( ES2018 is coming soon!)
- Data Layer Variable version 1 supporting nested objects.
- Reset Scroll Depth on a Custom Event, useful for Single-page Applications (SPA).