Let's talk about how Google Tag Manager (GTM) uses events in the dataLayer to make tracking work smoothly. Specifically, we're going to break down gtm.js, gtm.dom, and gtm.load – these are the key events that tell GTM what's going on with your page.
GTM uses dataLayer, which is basically a JavaScript array that holds information you want to track. When your GTM container loads, it fires off a series of events within this dataLayer. Think of these events as checkpoints during the page loading process. They're named gtm.js,gtm.dom, and gtm.load, and they're super important for controlling when your tracking tags actually fire.
gtm.js: The Very Beginning
gtm.js is the very first event that gets pushed into the dataLayer. It's like GTM announcing its arrival on the page.
Timing: This event fires almost instantly after the GTM container snippet runs. It happens way before the browser has even finished reading the HTML of the page, and definitely before any images or other files have loaded.
Practical Uses (or not): You could technically fire tags on gtm.js, but it's usually not a great idea for most common tracking setups. Since the page structure isn't ready yet, trying to do things like track clicks on buttons would probably fail. However, there are a couple of niche uses:
Setting up some initial values in the dataLayer that don't rely on the page content. For instance, you might want to set a pageCategory variable based on the URL.
Sometimes, people use it to trigger tags that load other scripts in the background, but this is less common.
Behind the Scenes: This event fires almost instantly after the GTM container snippet runs. It happens way before the browser has even finished reading the HTML of the page, and definitely before any images or other files have loaded.
1<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':2new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],3j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=4'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);5})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>See - 'gtm.start': new Date().getTime(),event:'gtm.js' ; that's what gets pushed into the dataLayer to trigger this event.
gtm.dom: The Page Structure is Ready
The gtm.dom event fires when the browser has finished building the page structure – what developers call the Document Object Model (DOM). This means the browser has read the HTML and knows what all the elements on the page are. But remember, images and other resources might still be loading.
Timing: This event gets pushed after gtm.js but before gtm.load.
Why it matters: Using gtm.dom makes sure that the things your tags are trying to track actually exist on the page, which prevents errors and gives you accurate data.
gtm.load: Everything is Fully Loaded
The gtm.load event is the final event in this sequence. It's triggered when the entire page, including all resources (images, stylesheets, scripts, iframes), has finished loading.
Timing: This is the last of the three events, occurring after both gtm.js and gtm.dom.
Use Cases:gtm.load is less frequently used than gtm.dom but is essential for specific scenarios:
Tags that depend on external resources being fully loaded. For example, if you have a tag that relies on a third-party script that modifies the DOM after the initial DOMContentLoadedevent.
Tracking time-on-page metrics where you need to ensure the user has fully loaded the page.
Considerations: Firing tags ongtm.load can sometimes introduce a slight delay in tracking data, as it waits for everything to load. In most cases,gtm.dom provides a good balance between accuracy and speed.
Key Considerations and What to Avoid
Never Reinitialize the dataLayer: This is a critical point. Reinitializing the dataLayer (e.g., by doing dataLayer = []) breaks the connection between your website and GTM. GTM relies on the existing dataLayer object to function correctly. If you reinitialize it, GTM will lose track of events and variables, leading to data loss. If you need to reset the dataLayer use dataLayer.push to set or clear variables.
Event Order is Crucial: Remember the order: gtm.js → gtm.dom → gtm.load. This sequence is fundamental to how GTM works.
Choosing the Right Event: Selecting the appropriate trigger event for your tags is crucial for accuracy and performance. Use gtm.dom for most cases, and reserve gtm.load for specific situations where full page load is a requirement.
