Saturday, November 2, 2024
No menu items!
HomeData Analytics and VisualizationA Guide To Google Tag Manager Preview Mode

A Guide To Google Tag Manager Preview Mode

Updated: January 1st, 2022. 

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 Preview and Debug mode) and share some best practices.


 

Table of contents

+ Show table of contents +

Video tutorial
“Old” vs “New” Preview mode. Why did it change?
What Is Google Tag Manager Debug Mode?
Enable Preview And Debug Mode
The layout of the Google Tag Manager Preview page
Event Timeline
Why are there always three events on every page?
What Are Other Possible Google Tag Manager Events?

Tags
Variables
Data Layer
Errors tab

Refresh/Share/Exit
Refresh the preview mode
Share GTM Preview mode
Exit the preview mode

Debugging multiple domains
Debugging gtag.js
Enhancements with Tag Assistant Chrome Extension
Exclude tagassistant.google.com referral and remove gtm_debug=x from URL
If Google Tag Manager Preview mode is not working
Few More Tips
Google Tag Manager Preview mode: Conclusion

 

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.

 

“Old” vs “New” Preview mode. Why did it change?

If you watched/read Google Tag Manager tutorials posted before October 16th, 2020, you will notice that the older version of the Preview mode looks quite different.

Also, you might stumble upon debates where some people hate the new preview mode and wonder why on earth did Google try to “fix something that isn’t broken”.

In this situation, I just wanted to point some things why the preview mode (that you currently see) was a necessary step in its evolution.

3rd party cookies

The older Preview mode depended on 3rd party cookie set on googletagmanager.com domain. If the cookie is not stored on your browser, the preview mode never works. This becomes a default problem/challenge if you try to debug with Safari, Chrome’s incognito mode, or any other browser that blocks 3rd party cookies.

Eventually, the entire industry will move away from 3rd party cookies. Meaning that it was just a matter of time when the older version of the preview mode would have stopped working completely.

Google Tag Manager’s team had to move away from 3rd party cookies and switch to the first party storage. And they did it with the new preview mode in 2020. From now on, it depends on the 1st party cookie and localstorage.

Other known bugs/inconveniences

Together with that change, they have fixed many problems that were irritating us in the past, like:

Inability to copy from the Data Layer tab
Inability to work across multiple windows
Inability to preserve the data in the Data Layer while navigating between pages, etc.

Yes, some of the benefits were taken away (like the ability to have a compact single-window experience) but to sum up, there are more pros than cons.


 

What Is Google Tag Manager Debug Mode?

Google Tag Manager Preview mode (a.k.a. Preview and Debug mode a.k.a. P&D) 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 mode 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 mode 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 preview mode works and how to work with it.

 

Enable Preview And Debug Mode

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

If you ever stumble upon older GTM tutorials (published before the October 16th, 2020), they will tell you that an orange banner must appear in the GTM interface (when the preview mode 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 mode once again and 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 Preview page

Google Tag Manager Debug mode (a.k.a. Google Tag Manager Console or just GTM 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 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 Preview mode (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 Preview and Debug 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 Container Loaded event does not appear in GTM P&D mode.

Also, when you navigate from one page to another on your website (that you are debugging), all events in the preview mode 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, 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 the 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 Tags tab becomes super important.

 

Tags

This tab displays all available tags split into two groups: those that fired on the selected event and those that did not. What makes this section really awesome, is the ability to find out the exact reason why a particular tag did or didn’t fire.

Choose any event in the Event Timeline (1) and then click the tag you’re interested in (2).

What you’ll see is a much more detailed view of what happens with that tag:

Properties of the tag.
Triggers of the tag.
Blocking triggers.

If you’re using more complex triggers with several conditions, you can see the status of each condition (take a look at the screenshot below). The green checkbox indicates that the condition was met, otherwise, a red X appears.

Also, in the top-right corner of the preview mode (while you still have clicked the tag, you can switch between “Names” and “Values”. This will affect how variables are displayed in your tag.

If you choose Names, you will see their actual names but if you want to see their values at that particular moment, switch to Values.

For me, switching to “Values” is more convenient, it allows me to quickly identify what values were sent to my analytics/marketing tools.

Also, you can quickly verify whether the values in your trigger match your requirements.

VERY IMPORTANT: Do not debug individual tags while having a Summary selected above the event timeline. This is an incorrect way to do. Always, select the event in the event stream first and only then click the tag to debug.

 

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 variable), 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

Data Layer tab is the probably most undervalued part of GTM preview 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 the preview mode

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 preview mode. 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 preview mode will be reloaded.

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

 

Share GTM Preview mode

In order to share the preview mode with someone, first, you need to enable the preview mode yourself and then in the top right corner, click three dots > Share.

Then a popup will appear where you will have to:

Enter the link of the website where the preview mode should be enabled
Select which container to enable (if there are multiple GTM Containers or GTAGs). IMPORTANT: you must select the GTM container in the dropdown
Copy the link and share it with someone you wish

Another option is to click the X icon in the top left corner (while you are in the preview mode), then enable the Keep the domain…enabled for debugging checkbox and click Close debugger.

Then you will see the list of all preview modes that you have enabled. Next to the preview that you wish to share, click three dots, and then click Share.

After you click it, the aforementioned popup will appear.

If you have enabled the preview mode sometime in the past, just go to tagassistant.google.com and complete the same steps that I have described above.

 


Exit the preview mode

If you want to exit the preview mode, 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 multiple domains (with the same container)

If you are working with multiple domains (that are part of the same customer journey) and those domains are using the same Google Tag Manager container, you will need to enable the preview mode on both domains.

First, open tagassistant.google.com (or just click Preview button in the GTM Interface) and enter the domain of the 2nd website. Complete all the necessary steps to enable the preview mode.

Then (also on tagassistant.google.com) click the X icon in the top left corner + select Keep the domain XXXXX enabled for debugging. Click Close Debugger. That way, you’ll keep the 2nd website in the preview mode.

Then press either the Preview button in the GTM interface OR Add domain button in tagassistant.google.com and add the domain of the 1st website. Complete all the necessary steps until the website 1 is opened in a new tab or window.

What we have done here is that we set the _TAG_ASSISTANT=X first party cookie on both domains (and this is needed for the preview mode to work). That’s why you can now navigate between both domains in the preview mode and you’ll see all the events/data coming from both websites.

 

Debugging iFrames

The new preview mode also supports debugging iFrames. But there are more things related to this, hence I have published a separate blog post.

 

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 Preview mode (because they are send with gtag() commands).

After you enable the Preview and Debug mode 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 Preview mode by installing a browser extension called Tag Assistant Companion. 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 mode. 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, the Tag Assistant Companion helps you debug iframes.

 

Exclude tagassistant.google.com referral and remove gtm_debug=x from URL

With the new preview mode, you will start seeing some traffic coming from tagassistant.google.com (that means that your own sessions might be coming from it). Also, in your GA reports, you’ll start seeing some pageviews contain gtm_debug=x.

In both cases, if this is a problem for you, I’d say that you should definitely exclude your own traffic from GA reports.  To do that, go to Admin > Property > Tracking info > Referral Exclusion List and add tagassitant.google.com.

Speaking of the gtm_debug=x in the reports (and removing it), follow this guide.

 

If Google Tag Manager Preview mode is not working

If you are struggling with the Preview and Debug mode (e.g. it is not displayed), read this troubleshooting guide. I keep this blog post as updated as 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 Page view event in Preview and Debug 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 which 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 Preview mode: Conclusion

Google Tag Manager Preview mode (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 below.


The post A Guide To Google Tag Manager Preview Mode appeared first on Analytics Mania.

Read MoreAnalytics Mania

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments