#GTMTips: check the container ID using eventCallback – News Couple

#GTMTips: check the container ID using eventCallback

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 dataLayer.push().

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 eventCallback.

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.

  1. Google Tag Manager Container with ID GTM-12345

  2. Google Optimize Container ID GTM-23456

  3. gtag.js library bundled to UA-12345-1

Next, I will run the following code in the JavaScript console:

window.dataLayer = window.dataLayer || [];
  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 || [];
  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.

Source link

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button