FAQ on Google Tag Manager (GTM) for non-GTM devs

Intro

GTM is a valuable tool in the modern WEB ecosystem. But several times I faced the following issue. The FE team works on a website and the dedicated GTM-focused team works on GTM for the same website. The problem is that GTM-related knowledge gets concentrated in the GTM team and the FE team is completely unaware of GTM features and approaches.

But at the same time, occasionally the FE team has to deal with bugs and unexpected behavior caused by GTM. In those cases lack of knowledge of GTM reduces the efficiency of the FE team.

I have composed a short FAQ for non-GTM FE devs who just want to grasp the basic aspects of working with GTM.

How GTM works

There are plenty of resources over the Internet explaining what is GTM and how it works. It will put it as simple as this.

1. The GTM specialist (the guy in the fancy hat to the right) logs in to the GTM admin panel.
2. He sets up the container and puts some custom scripts in it. Note that the container has a unique id (the red label).
3. The user (the guy in the sunglasses) opens the website. The HTML has the <script> tag responsible for initializing GTM. I call it "loader", the green brick in the picture above. The loader is added in HTML by the FE team. Also, the loader has a hardcoded container id. The loader makes a request to the Google servers to fetch the container by id.
4. Once the container is received, custom scripts added by the GTM guy are executed in the browser.

Actually, things are a bit more complicated. Variables, triggers, and tags have to be configured in the GTM container as well to make it work. I omit all those complex details in order to provide a straightforward explanation and keep the focus on the GTM basics.

Here I want to highlight two things:

Benefit: new custom scripts might be added to GTM without redeploying the main website.

Drawback: the FE team working on the website might be completely unaware of the release schedule of the GTM team. Even the purpose of GTM scripts may be not shared with the FE team.

How to disable GTM in the browser

Sometimes you might want to disable GTM on the website to compare UX and behavior with GTM and without it. It's possible to do this via an admin panel of your site, site configs, or via modifying the code. But there is a simpler way. GTM can be easily disabled in the browser.

1. In the devtools open the Network tab and filter JS requests by the 'gtm' keyword.

2. Then block the request https://www.googletagmanager.com/gtm.js?id=<CONTAINER_ID>. Here <CONTAINER_ID> is an arbitrary set of letters and digits. It's unique for your website.

3. That's it. After the page reload the block will be applied and the container will never be loaded by your browser.

Don't forget that the blocking works in your browser only.

You can unblock scripts anytime on the Network Request Blocking tab.

Visualizing dataLayer

One of GTM's key features is dataLayer. In a nutshell, it is a bus enabling interaction between scripts on the page and GTM scripts. The app's code push events in the dataLayer to notify custom scripts in GTM about user actions and other important things.

In some cases, it's essential for development and bug fixing to study published events and their payload. The easiest way is to type dataLayer in the browser's console. You will see the events as a simple array.

Not very handy, is it?

So I recommend using the Chrome extension Datalayer Checker instead. It has the elegant user interface and many useful features.

There is one trick. By default, Chrome extensions are disabled in incognito mode. So the Datalayer Checker will not be available in incognito which is not very useful. However, there is a special setting for that case. Go to the extension settings and enable it for incognito