A few years ago, to design a tagging plan, it was necessary to integrate pieces of code like gaq.push in order to escalate events to a tracking solution. But the good days are here, in fact, since the release of Google Tag Manager, setting up tags in response to events has become much easier.
What are Google Tag Manager events?
The events in Google Tag Manager allow you to retrieve much more data than simply a page viewed with Google Analytics. For example, you can associate commands with a specific amount for a conversion from Google Ads or even know the number of pages viewed in order to activate a tag of Facebook pixel, and many other uses are possible. In a marketing context, if your site has premium content like white papers, guides and all other documents that allow you to obtain information about your visitors, you will naturally seek to measure performance of your actions. Thus, you will have to use events to achieve your goals in terms of Tracking, and get the answers to your various questions. Now let's get to the heart of the matter, so that we can understand all this a little more.
The advantage of using events for your tracking
When creating events in Google Tag Manager, you will be able to organize them into 4 main categories in order to better analyze your data then in your analysis tool (like Google Analytics) .Which are:
- The category of the event
- The action of the event
- The value of the event
- The title of the event
Here is a concrete example in our Google Tag Manager, at Angular:

Native events
Once you have installed your Tag Manager, you'll need to understand three types of triggers that track events. Each has slightly different characteristics, here's a bit more context:
- The page view : the beacons are triggered when the browser starts to load the web page.
- The DOM ready : the tags are triggered when the browser has finished loading the entire HTML page and GTM can retrieve the available data.
- The loaded window : tags are triggered when all the resources on the page are fully loaded (HTML, images, scripts, etc.).
An event causes a change in the state of the datalayer
To fully understand the difference between these 3 triggers, you also need to know what happens when a page loads in a browser. A page contains code that has dozens or even hundreds of elements from top to bottom, and this is what happens when you browse the Internet:

GTM.js
When the browser receives the code from Google Tag Manager container, which should always be placed in the tag <head>of your site, a data set is initialized and a first event is triggered. It is based on this first event which is called “All pages” that you will trigger all the tags that need to be activated on all the pages where the container is located, i.e. all your pages.To give you a little more context, you use this trigger on all scripts such as: Facebook Pixel, Google Analytics, Google Analytics, LinkedIn Tag Insight, LinkedIn Tag, Tag Insight, LinkedIn, Pixel, Albacross, and so on.
Gtm.dom
The browser continues to browse the page file (code included) and when the analysis is complete, it models the page it will display. This is where the DOM is ready. However, the page is not fully displayed, the browser may be loading other scripts, images, or files found in the code. But the moment the DOM is loaded, a new event is triggered, the gtm.dom.The data layer So switch to a second state and you have a second possible hook point to trigger new tags. In fact, this one is useful for several reasons:
- Trigger tags with certain conditions related to the DOM.
- Triggering tags that require another tag to have been executed before it, this allows you to sequencing the tags by yourself.
- Spread the loading of the scripts in order to optimize the loading time, since yes, your Tag Manager will influence the loading of your pages because of the tags that compose it.
As a general rule, the gtm.dom occurs on average between 1 and 4 seconds after gtm.js depending on the size and content of the page.
Gtm.start
At this point, the browser has fully displayed the page and loaded all of the resources that make up the page. So, the third event is triggered: gtm.start.The GTM container goes to the third state and you have a third hook point to trigger new beacons. The event usually occurs between 1 and 5 seconds later gtm.dom depending on the size of the page, which means that between the time the page starts to load and the event gtm.start If activated, 10 seconds can easily pass. You must therefore be careful not to trigger vital tags on this event (when the window loads = gtm.start), because you may lose a lot of data. Indeed, a visitor who is not convinced by the content of a page will stay less than 8 seconds.
Activate GTM native variables
By activating additional native variables, you broaden the range of possibilities, and this gives you access to new elements such as clicks, forms, videos, etc. In order to activate these Google Tag Manager events, you need to go to the triggers section. Here is the list of all the native events:
- Page view
- Click
- Visibility of the event
- Sending the form
- Editing the history
- JavaScript error
- Scroll depth
- Timer
- Video
- Personalized events
- Trigger group
Personalized events
So there are numerous native events, but they do not always meet the needs that one may have. It is precisely for this reason that we have the possibility of creating tailor-made events in order to broaden the field of possibilities.
What are custom events for?
Compensate for the limitations of native triggers
You should know that some forms are not always as easy to follow as you think, especially if it's an iFrame for example. There may also be a problem with the propagation of your JavaScript preventing detectors from Google Tag Manager to capture clicks.
Add context to an action performed on your site
The way you create a custom event allows you to add context to the event. This is the most used technique for sending e-commerce information to Google Analytics. For example, it is necessary to create a custom variable if you want to raise the value of the basket in a GTM tag, you can also bring up the ID of the product ordered in this way. You will also have to create a custom variable if you want to differentiate your B2C customers from B2B customers, a point that is more than useful for effectively managing the audiences of your marketing campaigns.
Make your tracking reliable
In the context of contact forms, the measurement reliability of certain forms is sometimes problematic.For example and in many cases, if a user tries to submit a form, but who did not fill it out completely or made a mistake, the event form.submit will still go off. And in 15% of cases, the visitor does not go Resend the form by correcting his error, there will therefore be false conversions. With the custom events, we will be able to counter this problem by using another trigger, for example the visibility confirmation message in order to detect the sending of the form.
The preview tool
The preview tool or the debug console is a native tool of Google Tag Manager which allows you to see in real time, all the tags deployed or not deployed on your pages according to your actions. It also allows you to see all the Datalayer changes in order to check the tags triggered at each stage of the data layer. But also the untriggered ones (waiting for their trigger conditions). When you activate the preview, go back to your site and you will get the console at the bottom of the page. If you make changes to your tags and others elements in GTM, don't forget to refresh the console.
Conclusion
Now that we've reviewed the events and fully understood the role of custom variables, it's time to move on to even more concrete ones by downloading our tagging plan template. If you have any questions about this document, contact us via chat or the contact page.