#GTMTips: The Mysterious .macro() Call In Custom HTML Tags

In the code sample above, there is a global method window.someFunction to which we want to pass the variable {{Some Variable}}. However, we are uncertain what its actual value is since Preview mode isn’t very helpful.

Because of this, we log the value of {{Some Variable}} into the browser JavaScript console.

Furthermore, I’ve built a helper function named log() that only logs the value to console if GTM is in Preview mode. This way you avoid your tags from writing arbitrary log messages into the live browser console.

3. Debug the tag result

This is the most difficult way to debug whether or not the variable worked. Unfortunately, it’s also the best way to do it.

When you add JavaScript to a Custom HTML tag, it should do something. Maybe it adds some text to an HTML element, maybe it creates a new pixel or Ajax call, or perhaps it pushes something to dataLayer.

In any case, the best way to ensure whether or not the .macro() call resolved to its correct value is to check the output or result of the tag itself to see if whatever value the variable was supposed to pass was done correctly.

For example, let’s say your tag creates a pixel request like this:

script>
  (function() {
    var imgId = '?id=' + {{Container ID}};
    var imgUrl = 'https://www.somedomain.com/img' + imgId;
    var el = document.createElement('img');
    el.src = imgUrl;
    document.body.appendChild(el);
  })();
script>

It’s a simple, almost nonsensical example, but it should serve to highlight the debug process nicely.

The tag creates a new image element whose URL is https://www.somedomain.com/img plus the string ?id= concatenated with whatever is returned by the {{Container ID}} variable.

This is what it looks like in Preview mode:

This is what it looks like after injection in the Inspect Elements pane:

Note! As you can see, in Inspect Elements the script element still has the .macro() call. This is how the browser works. GTM injected an element with the .macro() call and this is what was added to the page. If you remember, the script isn’t executed until AFTER injection.

Finally, you can inspect the Network Requests to find the image request with the ID in place.

Also, because the tag did its own little injection with document.body.appendChild(el), you can find the image element at the end of by inspecting the elements on the page.