A Guide on How to Use Google Tag Manager Preview & Debug Mode

Colin Differ

30 June 2019

What is Google Tag Manager Preview & Debug Mode?

Google Tag Manager’s Preview & Debug mode allows you to browse the website with your GTM container installed and preview how Tag Manager will implement your Tags, Triggers and Variables.

However, it can take a little while to get used to the layout and to understand exactly what is going on, so we have written the following guide to help make it a bit simpler. Before we carry on, it’s important to understand that the preview mode is cookie based, so any activity will only be based from your machine. This is especially important to remember when you have not published your container yet. You can, however, share your view of the debug mode to other people; this will still not be viewable by general users.

How to enable and disable Preview & Debug Mode

In your Google Tag Manager container, choose the workspace you wish to preview and you’ll see a button called Preview – it’s next to the Submit button in the top right-hand corner of the screen. Click the preview button, there’s normally a pause, then the page will refresh and a large orange box will appear at the top of the container. This tells you that you are now in preview mode.

Then you’ll need to navigate to your website and refresh the page; you won’t be able to see the preview box unless you refresh. This needs to be on the same browser type as the GTM container is using; remember Preview and Debug is cookie based, so it’s only that browser that will be affected. It also won’t work if you then change to incognito mode.

Once you’ve refreshed, the Preview Console will appear at the bottom of the screen:

To exit preview mode, navigate back to Google Tag Manager and click ‘Leave Preview Mode’ in the large orange box and hit refresh on your website.

Before we move on, there’s one more feature on this box that you may see – the ‘Share Preview’ box.

This will allow another user who is not logged into your Tag Manager account to preview everything you’re about to read through. This is great if you don’t want to add someone to your account, or for some reason they can’t log in and preview themselves.

Preview and Debug Console Layout

The layout of the GTM Preview and Debug console is made up of a number of sections:

  • Event Timeline
  • Tag – see which tags fired and didn’t fire on a specific event or all combined events
  • Variables – displays the results of all variables in the container
  • DataLayer – displays the DataLayers loaded so far on the page
  • Errors – displays if a tag errors and provides the reason
  • Version – displays which version of your GTM container is showing (QUICK_PREVIEW is the most recent one, it will display the version number if anything before that)
  • GTM Container Number – your GTM Container number, especially important if you are using more than one container as it allows you to switch between them.

Google Tag Manager Preview Event Timeline

The left-hand side panel displays all the events occurring on that page. These are not Google Analytics events and shouldn’t be confused with them. They are Google Tag Manager Events and are essentially your Triggers (or at least part of them). You will use these events on the timeline to understand if your tags are firing against them. It works in chronological order and will refresh when you refresh the page or go to another page.

There are 3 standard events:

  1. Page View – the first instance of Google Tag Manager loading on your page. This is where your Page View triggers will load and in the Tag Manager DataLayer, this is known as gtm.js
  2. DOM Ready – all the HTML has been received and parsed by the browser. The page is not fully loaded yet though. This is where your DOM Ready triggers will load. In the Tag Manager DataLayer, this is known as gtm.dom
  3. Window Loaded – everything is now loaded including JavaScript etc. This is where your Window Loaded triggers will fire, and in the GTM DataLayer it’s known as gtm.load.

These events should always appear and always be in this order. If one of them doesn’t appear, there’s an error to fix – normally something within the code (or a GTM tag) is stopping the page moving on to the next event.

These events will ( or rather should) always occur, but there are different types of events that can appear. Essentially, any type of trigger you can set up will appear here.

DataLayer Events in the GTM Timeline

Sometimes you will see something completely bespoke in the Event timeline that you can’t find as a trigger. This is usually a DataLayer event and will appear when that DataLayer loads an event key:

<script>
dataLayer.push({
'event' : 'promoView',

This is what you use the Custom Event triggers for in GTM.

‘Message’ in the event timeline

When the word ‘Message’ appears in the event timeline, it means a DataLayer has loaded that does not have an event key:

So, the event timeline shows you what is happening on the page, but how does this help you? Well, essentially you use the timeline to understand if and where your tags have fired. This is done on the Tag tab.

Tags in Google Tag Manager Preview

This is one of the most important tabs you will use in the preview tool, and is probably the reason for it existing. This tab tells you if your Tag is appearing, if it’s triggered in the correct place and what information it’s collecting. More importantly, it tells you if it’s not.

When you first land on it, it will give you a summary of all tags that have fired so far, but, using the event timeline, you can also see where your tags are firing. In the below example you’ll see three tags being fired on the page, but if you click on to the event timeline, you can see where they’re triggered.

If you click inside the tag, you can find out the reasons why it fired and the information it’s collecting.

Tag Properties

Essentially everything about that tag, obviously this will vary from tag to tag.

Firing Triggers

This shows you the reason the tag has fired – in other words, your Triggers. It will not show all the information you need unless you click on an event in the Event Timeline, and then click on the Tag. The trigger in the above example was set to Window Loaded and only on the Homepage:

That’s what the Firing Triggers state, remember gtm.load in GTM is ‘Window Loaded’:

You’ll see little green tick marks next to them that tells you that each of those conditions were true.

Blocking Triggers

Blocking Triggers are your exception Triggers. In Tag Manager you set Exceptions to state certain times when a tag shouldn’t fire, and the Blocking Triggers will tell you if they’ve worked or not. Again, it will not show all the information you need unless you click on an event in the Event Timeline and then click on the Tag. You’ll see in the below example; a green tick is showing next to the event ‘Window Loaded’ (gtm.load) and a red cross shows next to the rule that the Page URL must contain a ‘?’. Because this is a Blocking Trigger, the fact that there’s a red cross next to one of the filters means it did not block the tag from firing. If both filters contained a green tick, the tag would not have fired.

Tags Not Fired on This Event

Another useful tool of the Tag screen is to see which Tags did not fire. You would use this if you were expecting a tag to fire but it didn’t. It’s the same method as before; click into the tag and look for the triggers. In the below example, the Page Path was set to the Homepage (correct), but it was a DOM Trigger (gtm.dom), so, therefore, it wouldn’t fire on Window Loaded.

Variables in Google Tag Manager Preview

The Variables screen shows you the values that are being pulled into the Variables (Built-in and User-defined) from GTM. This will only work if you select an event in the Timeline. This is because different variables can show different data for different events. So, you must always choose an event to see the variables.

The variables screen is split into 4 columns:

  • Variable Name – name you or GTM have given to the Variable
  • Variable Type – the type of Variable in GTM
  • Return Type – how the value of the Variable is returned (String, Boolean, Array etc)
  • Value – the value of the variable for that GTM event

The Variables tab is important for 2 reasons:

  1. It allows you to see the data being pulled into your tags and that the variables are correct
  2. It allows you to plan how to trigger your Tags

We’ll go into the 2nd reason a bit more in-depth now.

When creating a trigger, it’s important to understand the variables that will make that trigger fire, and ensure you get them right. If, for instance, you’re creating a click trigger, you have a number of options in which that trigger will fire:

  • Click Classes
  • Click Element
  • Click ID
  • Click Target
  • Click Text
  • Click URL

By clicking on the link/element with the Debug and Preview mode activated you can see the values that GTM recognises from the above, and therefore you can use them when creating your triggers.

This is the same for all variable types.

Data Layer in Google Tag Manager Preview

The Data Layer screen will be of constant use to you when using Tag Manager. Data Layers are part of the core use of GTM, and as you continue to use it you will need to understand how GTM sees them. Whilst there are ways to see your Data Layer without the preview tool, using it helps you understand exactly what it looks like in a clear way and at what event it appears in the page timeline.

The DataLayer screen is split into 2 columns:

  • Left-hand side – the Data Layer on that event timeline
  • Right-hand side – all the DataLayers of the page up until that point in the timeline

Unlike the variables screen, values do not just appear if you choose a specific event in the timeline. You can see all of the DataLayers of the page separately and joined together clicking ‘summary’ in the event timeline:

Whenever you need to see your Data Layer clearly, use this screen.

Errors

Hopefully, you won’t need to use this screen that often; it’s actually very rare for you to need it. If a tag fails due to an error, it will show here.

Conclusion

If you’re using Google Tag Manager, make sure you’re using the Preview & Debug mode as much as you can. It will save hours of trying to figure out if you’ve created the correct Tags, Triggers and Variables and helps make certain your data is correct.