FAQ on Google Tag Manager (GTM) for non-GTM devs
Tags: webdev, gtm, website
Published: 2023-08-18 18:09:16

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

![How GTM works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uk0jvta5oyv47ig3r06y.png)



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.

<u>Here I want to highlight two things:</u>

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


![Disabling GTM in the browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcrxtck7hepel19yyadq.png)

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

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

![Enabling GTM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l7ajgtanb7n6pdoubs5.png)

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


![DataLayer in the browser console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0xqcal6yhkm9928b31i.png)

Not very handy, is it?

So I recommend using the Chrome extension [Datalayer Checker](https://chrome.google.com/webstore/detail/datalayer-checker/ffljdddodmkedhkcjhpmdajhjdbkogke) instead. It has the elegant user interface and many useful features.


![Datalayer Checker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pq0i7brvus19fjv7hrm2.png)

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

![Enabling Datalayer Checker for Incognito ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3cm2vvenu7fnxb3ufgi.png)