When using a file
dataLayer.push() On a page with a Google Tag Manager container, you pass the information to the GTM internal data model and potentially activate the tags (if
push() it contains
event a key). You can also add a file
eventCallback The key to these payments. The value of this key must be a function, and this function is then executed once the container has finished processing any flags that might be run on it
This is useful if you want to give Google Tag Manager time to complete its operations before proceeding with other actions on the page, for example.
There is a wrinkle, though. Since Google Tag Manager supports adding multiple containers to a page, the . file
eventCallback It is called once for each container on the page.
“But I don’t use multiple containers on a page,” I hear you exclaim. Good for you! However, if you are experimenting with on-page optimization, or if you are also loading gtag.js,
eventCallback It will be called once per app for it as well. why? Because they use Google Tag Manager as the core technology.
In this tip, we’ll learn how to detect which Google Tag Manager container has invoked the callback and use that to effectively eliminate redundancy in our code execution.
Simmer . Newsletter
Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava right in your inbox!
Tip 74: eventCallback automatically receives the container ID as the method argument
The advice is simple (because these things usually are). The Google Tag Manager Container ID (for example GTM-12345) who summoned
eventCallback The method will be automatically passed as a parameter to the function you set as
If you have multiple containers on the page,
eventCallback It will fire once per container, once you finish shooting any tags
dataLayer.push() Effects. Every time the container calls a file
eventCallback method, its container ID will be the argument.
For example, let’s say I have three Google Tag Manager containers running on a site.
Google Tag Manager Container with ID GTM-12345
Google Optimize Container ID GTM-23456
gtag.js library bundled to UA-12345-1
window.dataLayer = window.dataLayer || ; window.dataLayer.push( event: 'GTMEvent', eventCallback: function(containerId) console.log('Container ID: ' + containerId); );
The output in the console looks like this:
Container ID: GTM-12345 Container ID: GTM-23456 Container ID: UA-12345-1
As you can see, with each iteration of the callback, the container ID is automatically assigned as an argument to the function. With this information, it is easy to remove duplicate file
eventCallback So that it only interacts with the “correct” container.
For example, here I want to execute some code only when GTM-12345 calls the callback:
window.dataLayer = window.dataLayer || ; window.dataLayer.push( event: 'GTMEvent', eventCallback: function(containerId) if (containerId === 'GTM-12345') // Run some code // Ignore if not GTM-12345 );
Once you check the container id passed as an argument, it’s trivial to ensure that the . file
eventCallback The code is not executed over and over with every additional container on the page.