Google Tag Manager Console (GTM Console): Complete Guide

Updated: October 10th, 2020.

Why doesn’t my tag fire? What data can I send to Google Analytics? Why didn’t this trigger work?

When it comes to Google Tag Manager, we sometimes run into trouble that requires further investigation of what’s going on. One of the most important, yet commonly overlooked steps in the GTM process is debugging. It allows us to ensure that every possible user experience scenario is tested and data consistency is validated.

In this guide, I’ll show you how to utilize Google Tag Manager Preview mode (also known as Google Tag Manager Console) and share some best practices.

+ Show table of contents +

Video tutorial

If you prefer video content, I have recorded and published a tutorial on my Youtube Channel. However, if you are looking for a deeper dive into the topic, you should also read this blog post.

What Is Google Tag Manager Console?

Google Tag Manager Console (a.k.a. Preview and Debug mode) allows you to browse a site on which your GTM container code is implemented and preview which tags are firing, what kind of data do they send to analytics/marketing platforms, etc.

When you enable the preview console in the Google Tag Manager interface, you will end up with three browser tabs (or two tabs and one additional window):

A tab with your Google Tag Manager interface

.
A new tab for tagassistant.google.com where is the actual preview console displayed

.
A new tab (or window) where you see your website and a preview mode’s badge at the bottom-right corner of the screen.

Why is preview mode needed at all? Because there is nothing worse than working with GTM blindly and trying to guess if your setup is working or not.

Google Tag Manager’s preview console lets you:

See which tags have fired on particular website interactions (e.g. a link click or form submission)
Which tags did not fire
The reasons why certain tags fired or didn’t fire
What kind of variables (and their values) were available on the page
How Data Layer was changing on the page when various interactions were happening, etc.

Personally, I usually never trust my gut when it comes to modifying my GTM setups. I always test them, even the minor ones. Because it’s the worst to find out (after several days (or maybe weeks)) that your recent change broke something in the analytics setup.

Always test. Then Publish your changes live.

Now, let’s take a look at how the Google Tag Manager console works and how to work with it.

Enable Google Tag Manager console

To enable Google Tag Manager Debug mode, click the Preview button in the top right corner of your GTM interface (near Submit button).

If you ever stumble upon older GTM tutorials (published before October 16th, 2020), they will tell you that an orange banner must appear in the GTM interface (when the GTM console is enabled). That is no longer true. From October 16th, 2020, the orange banner is gone.

Once you click the Preview button, a new browser tab will open with tagassistant.google.com. If it does not, read this guide.

A popup there will ask you to enter the URL which you want to test and debug. It might be the address of a homepage or it might be a specific page’s URL and then press Start.

A new browser tab (or window) should appear where you will see the URL that you entered in the previous popup. If the page does not work, try to enable the preview console once again an then disable this checkbox in the preview’s popup:

At the bottom of that page/tab, you must see the following badge:

And if you go back to the tagassistant.google.com tab, you must see this success message.

If you don’t see the success message or if the preview badge shows that the debugger is not connected, read this.

The layout of the Google Tag Manager Console

Google Tag Manager Console consists of six main parts:

Event Timeline. Displays all events that occur in the Data Layer (e.g. page views, form submissions, clicks, etc.). One item = one event (a.k.a. dataLayer.push). Do not mistake them for Google Analytics events. These are totally two different concepts, which I have discussed in another blog post.
Tags. Displays which tags fired on the selected data layer event and which ones didn’t.
Variables. Displays detailed information about variables in the selected event, including the type of variable, the type of data returned, and the resolved value.
Data Layer. Displays the exact message object as it was pushed to the data layer for the selected event, and what the data layer looks like after the message transaction is complete. All data points available here can be turned into variables (which then will appear in the Variables tab). Continue reading to learn more.
Errors. If you notice any number in the tab (rather than 0), click it and see what is the cause.
Header. Here you can see the status of the GTM Console (whether it is connected to the newly opened website window or not). Also, if you have Universal Google Analytics implemented via gtag.js, or you are running Google Analytics 4 on your site, you will see a dropdown to switch between

Event Timeline

All events that occur in the data layer are displayed on the left side of the Google Tag Manager console, Event Timeline. Every time a page loads, there must be three events displayed in the list – Container Loaded (previously known as Pageview), DOM ready, and Window loaded.

If you see more events (for example, Message), that’s fine. But it’s important that all three aforementioned events appear on the list of every page.

If you’re missing the Container Loaded event, there’s probably a case of the broken data layer. I have published a blog post, which explains both the problem and the solution when the Container Loaded event does not appear in the GTM console.

Also, when you navigate from one page to another on your website (that you are debugging), all events in the console will be grouped based on those pages.

Why are there always three events on every page?

What do they mean?

Container Loaded (a.k.a. gtm.js) is the earliest moment when GTM starts loading and when our tracking scripts can be fired. For example, that’s when you should fire the Google Analytics page view tracking tag. Even if the page hasn’t finished loading, your tracking script will be already launched. Previously, this event was called Pageview.

DOM Ready event (a.k.a. gtm.dom) occurs when the website’s HTML is downloaded, the page’s document is rendered and a visitor starts to see elements of your website. Learn more.

Window Loaded event (a.k.a. gtm.load) fires only when everything else (including Javascript) finishes loading. Learn more.

What Are Other Possible Google Tag Manager Events?

Actually, the list of events is endless.

Google Tag Manager offers a list of built-in triggers, such as page view (including the aforementioned Page view, DOM ready, and Window Loaded), click (link click and click of any element), form submission, timer, history change, Javascript error.

After a trigger is enabled, it starts looking for particular interactions on your website. For example, the Form submission trigger is looking for form submissions, Link Click trigger is waiting for interactions when a visitor clicks any link.

When the desired interaction occurs, that event appears in the Event Timeline.

So why did I say that the list of GTM events is endless? It’s because of the last type of trigger, called Custom.

A custom event is an event defined by you, your developer or a 3rd party solution that is implemented on your website.

If you want to learn more about custom event tracking, take a look at the video below (but keep in mind that in this video, I was using the older version of the preview mode):

When you click any event in the timeline, you can see which tags fired and which ones didn’t. That’s where the Tags tab becomes super important.

Variables

OK, let’s head over to the Variables tab. It displays detailed information about variables in the selected event, including the type of variable, the type of data returned, and the resolved value.

These variables are at your service. You can insert them in any tag, trigger you want (or even other variables), whether it’s Google Analytics event tag, Mixpanel event tag, or anything else. Variables can be included by surrounding them with curly brackets {{ }}. Take a look at the example below.

Switch between GTM events (in the timeline) and you’ll see how values of variables were changing depending on the context.

Data Layer

The Data Layer tab is the probably most undervalued part of the GTM console among beginners (and quite often, among fresh intermediate users too).

This tab shows the exact message object that was pushed to the data layer for the selected event, and what the data layer looks like after the message transaction is complete.

In other words, you can see all data that is currently available in the data layer and what values were available after every Google Tag Manager event. And the best part: every data point (pushed to data layer) can be turned into a variable in Google Tag Manager.

Even if you see some useful information in the Data Layer tab, you cannot use it in GTM until you create variables for them.

Variables tab (of Google Tag Manager Debug pane) displays only those variables that are configured in Google Tag Manager interface, e.g. Page Path, Page URL, etc. So if you have something interesting in the data layer that you’d like to pass to Google Analytics, you’ll need to create a data layer variable in the GTM interface.

Say, you want to send a Google Analytics event when someone leaves a comment. With every event, you also want to push the article author’s full name. This way you’ll see which authors drive the highest reader engagement.

In Google Tag Manager account, you should go to Variables and create a new one with the following settings (dlv stands for data layer variable):

After you refresh P&D mode AND your website in the browser window you should see a new variable in the Variables tab with every new page load. Later on, you can include that {{dlv – Post Author}} variable in Google Analytics (or any other) tags.

In my other blog post, how to track AJAX forms with Google Tag Manager, I have explained how you can dive deeper into the data layer, pull nested values and turn them into GTM variables. That simple technique has already been useful so many times, I can hardly imagine how I used to work without it.

Errors tab

I don’t visit this tab very often (because not many tags actually throw errors that are displayed there). But if you notice any number in the tab (rather than 0), click it and see what is the cause. This tab displays if a GTM Tag Template failed to fire due to an error. Here’s a quick guide about it.

Refresh Google Tag Manager Console

The current flow is not very convenient but it will be fixed by the GTM team in the future.

If you make some changes in the container and you want to preview them on the website, you must refresh the GTM preview console. Just reloading the website will not help.

To do that, tou must go to the Google Tag Manager interface and press Preview once again. Then complete the steps and the console will be reloaded.

Yes, this is not very convenient but hopefully, this will be fixed by the GTM team soon.

Exit Google Tag Manager console

If you want to exit the GTM console, the best way is to click the X icon in the Preview mode’s badge (that is displayed at the bottom right corner of your website).

If that did not help and you continue seeing that badge on every pageview of the website, read this guide.

Debugging gtag.js

If you have GTAG (a newer Google Analytics/Google Ads tracking code) running on your site (or if you have implemented Google Analytics 4), you will also be able to view hits with the new Google Tag Manager console (because they are send with gtag() commands).

After you enable the preview console on a certain domain, you can switch to some GTAG ID in the dropdown menu (in the upper-left corner).

Also, if you are working with Zones (that’s a GTM360 feature), you will be able to find zone containers there as well.

If you switch to debugging GTAG, you might see different content of the event timeline, also, some of the tabs will be gone (like Tags and Variables). Instead, you will see hits that were sent and, Data Layer, and Errors.

Feel free to click on those hits and see what kind of parameters were sent with a gtag.js request.

Enhancements with Tag Assistant Chrome Extension

If you want, you can improve the Google Tag Manager console by installing a browser extension called Google Tag Assistant. This is especially useful if you hate when your website (during the debug) is opened in a new window (at least this is what happens on Google Chrome).

With the extension installed, your website will be opened in a new tab (instead of a window) when you enable the preview console. This means that you can use things like mobile debugging again.

Also, you will be able to debug multiple tabs at the same time.

Furthermore, you will notice some shapes/emojis appear in the event timeline and in the Preview mode’s badge (on your website). These are added to help you quickly distinguish which window is currently being debugged.

In my video (at the beginning of this tutorial), I also showed that you can see those shapes/emojis in the Page Title. Unfortunately, that feature was quickly removed after the launch due to multiple complaints from users (this feature polluted reports that contained Page Title).

Also, Tag Assistant helps you debug iframes. I will post more info about this later.

If Google Tag Manager Console is not working

If you are struggling with the Google Tag Manager console (e.g. it is not displayed), read this troubleshooting guide. I keep this blog post as updatedas possible.

Few More Tips

Here are a few more quick tips that did not fit in any previous chapter of this blog post:

If you see the “Message” event prior to the Page view event in the GTM console’s Event Timeline, do not worry. This means that your developer, plugin, or particular 3rd party solution pushed some data into Data Layer but that dataLayer.push did not contain an “event” key. Use GTM debug mode to explore what exact data was pushed at that moment, maybe you’ll find something useful!
Although Google Tag Manager debug mode is a very important part of tag deployment, it’s not the only tool you should be using. Here is a list of Google Tag Manager Chrome extensions that will make your work much easier.
If you’re debugging Google Analytics events, ALWAYS check them in GA Real-time reports. It’s the best way to verify and react to errors without any delay.
A whole bunch of other GTM debugging tips is available here.

Google Tag Manager Console: Final Words

Google Tag Manager Console (a.k.a. Google Tag Manager debug mode or just simply Preview and Debug mode) is an essential part of tag deployment which helps us ensure that every possible user experience scenario is tested and data consistency is validated.

It brings us more transparency to what’s happening under the hood, what data is being fetched or pushed, why a certain tag isn’t firing, etc.

But it is really important to understand that this is not the only place where you should check/test your tag management implementation. There are many more things you need to keep in mind.

Did I miss anything related to Google Tag Manager debug mode? If yes, drop me a comment under this blog post.