What is Google Tag Manager?
It has a user friendly interface, it’s web-based and lets you manage and deploy all the marketing tags you need (for tracking, analytics, 3rd party data integrations).
In addition, you can add scripts with which you can manipulate the DOM.
Google Tag Manager has multiple target platforms (web, iOS, Android, AMP and Server) but in this story, we will be focusing on GTM for web.
What will you be working with?
The key elements are:
If you could imagine GTM as a person: a tag will be the head (there you have the big information - a script that tells where to send data and how), triggers will be legs and arms to give direction (help the tag trigger on the right moment) and variables are inside components like veins and entrails that help the body (you can use them to collect and send parameters or as an extra condition for triggers - you can’t walk properly if you don’t have blood in one leg, right?).
What kind of events* can be tracked?
First of all, let’s define events as actions that a user takes on the website.
A custom event it’s something that should have some kind of logic. For example, when a user makes a purchase an event should be pushed into a global variable (like the dataLayer) that can be cached by GTM, that is the golden snitch for GTM.
For more information about working with GTM, please use the backlinks.
I was working on implementing Enhanced Ecommerce for GA4 (the Universal Analytics implementation was already in place). I had all the product data I needed in dataLayer, but I needed to iterate through it and manipulate it to give it the shape it needs.
So, my plan was simple, add the Google Analytics: GA4 Event tags for each event I wanted to track, make the proper configuration settings, choose the appropriate trigger and add the event parameters (items).
The events I was looking for: view item list, view item, select item, add to cart, remove from cart, add to wishlist, begin checkout, purchase, view promotion, select promotion.
Very easy, since I already did that for Universal Analytics object structure, tags etc..
So, like every good kid in town, I wanted to test my implementation in the debug version of GTM: THE PREVIEW MODE.
But the GTM preview mode was not working.
It looked something like this, frozen to the bone (this was the first sign):
Like every naive good kid, I made a mistake: I thought there was a bug or something in GTM and published the container as it was, thinking I can check the collects in the network to be sure that the events with all the parameters are sent to GA4.
When I tried to access the website, the site did not load properly, and if I tried to click on something or scroll, it froze (yes, I’m thinking of Narnia too).
What were the first things I did:
- asked the SEO specialist if he had knowledge of any updates or new changes in the platform;
- debugged the network request to see where it ‘hangs’;
- restore the GTM version where I knew everything was fine.
Chicken, chicken, 3’s a winner!
Watch your typos, guys!
2. Click event listener interferes with the site logic
GA4 has some new features like Enhanced measurement events. You can see them or edit in your data stream details. These don’t need code changes or specific tags in GTM (like for UA).
The Outbound clicks tracks each time a user clicks a link that leads away from the current domain. This sets an event listener on all your anchors.
I stumbled upon one special case:
On the product detail page on a website, if you clicked on the product image, an elegant modal opened so you can see the picture zoomed-in. The logic of the site was listening to the click on the picture, and when that click happened the picture was opened in a modal, on the site domain even if the <a> was holding a link to the CND (content delivery network). After the GA4 configuration tag was implemented, the modal stopped working and the picture of the product was opened on the cdn domain, in the initial href.
After some investigations, we concluded that another click event listener was interfering with the one of the site logic and after we disabled it, the site started to work as expected.
3. GTM didn’t read the dataLayer in live mode
Last chapter of this story. Picture this: a basic implementation of Universal Analytics Enhanced Ecommerce, with some data in the dataLayer, the tags had the ‘use dataLayer’ enabled. All working fine. The same implementation for all the events: product impressions, product click, product detail view, add to cart, checkout, transactions.
We took some of the information from the dataLayer and some with some querySelectors from the page html. We encountered some issues with the new implementation. The event was sent without parameters in Universal Analytics. We made some changes to try to make it work - removed the new custom dimensions, went back to the simple dataLayer implementation -, but nothing worked.
In the GTM preview mode, the request looked like this:
As you can see, the product impressions event sent all the parameters in the request to Universal Analytics, in the GTM preview mode. So we took this version live but… an error occurred:
We did the same thing for product click:
After these changes, the parameters were sent correctly to Universal Analytics, both in preview and live mode.
Google Tag Manager is a complex tool with which you can achieve a lot. You can send data to marketing platforms (like: Google Ads, Facebook Ads, TikTok Ads, Criteo, RTB House, Klaviyo, Analytics etc.), you can track the user's activity on the site, you can manipulate the DOM, modify meta tags and many more. But it can behave surprisingly and you have to pay attention to the syntax, test all possible cases and be open to out-of-the box solutions.