With the proliferation of gtag.js implementations, we can see that there’s a small-ish paradigm shift in how to implement Google’s stack of marketing tools.
As adding gtag.js snippets to the site code becomes more and more common (to cater to things like early Optimize loading), you might be at a point where you have lots of interesting information stored in the gtag.js queue but no way to access it in your Google Tag Manager tags and variables.
Fret not! There is a way. Read on for elucidation.
The Simmer Newsletter
Follow this link to subscribe to the Simmer Newsletter! Stay up-to-date with the latest content from Simo Ahava and the Simmer online course platform.
Tip 113: Use gtag.js events and parameters in Google Tag Manager
Whenever gtag.js is used to collect an event, this information can be used to create Custom Event triggers and Data Layer variables in Google Tag Manager.
The way it works is very simple. Take this example:
gtag('event', 'my_custom_event', {
event_category: 'some category',
event_label: 'some label',
value: 15.00
});
Here my_custom_event
is the “event action” in Google Analytics parlance. Coincidentally, it also becomes the event pushed into dataLayer
. You can verify this in Preview mode, as it will show up in the list of events:
This means that you can create a Custom Event trigger with this “event action” to fire your tags when the gtag.js call happens.
As you can see, the parameters are also shown in Preview mode. The catch is that the parameters are embedded in a top-level key named eventModel
. Thus, if you wanted to create Data Layer variables for them, you’d need to map them to:
-
event_category
becomeseventModel.event_category
-
event_label
becomeseventModel.event_label
-
value
becomeseventModel.value
This method works with all events sent to gtag.js - Ecommerce as well, for example.
It won’t work with the config
call, so the initial call to gtag.js, where you initialize the integration to Universal Analytics, for example, cannot be picked up by Google Tag Manager.
Summary
Short and sweet this time. This should prove useful for you if you want to access your site’s gtag.js integration with Google Tag Manager.
It’s not that rare to have both gtag.js and Google Tag Manager running on the site these days. There’s a convergence of sorts going on as well, with gtag.js’ tech stack merging with Google Tag Manager under the hood as well. In fact, if you look at the gtag.js library and compare it with the gtm.js library, you can see a lot of similarities. And then take a look at the Google Optimize library, and the App+Web library. See the trend?
For many, Google Tag Manager remains the main way of consolidating tracking on the site, so being able to access the gtag.js queue without resorting to complicated hacks is useful indeed, I think.