Through Google Tag Manager preview and debug console window, you can make sure that your tags, triggers, variables and data layers work as expected.

By default, what you actually preview and debug is the deployment of the current container draft on your website.

You preview and debug the container draft on your website, as if it is currently deployed.

When you enable the preview mode, the GTM  preview and debug console window appear at the bottom of the page.

This page needs to have the GTM container tag installed.

Note: The preview and debug window is currently not available for the mobile apps which contains the mobile app container tags.

How to enable and disable preview mode in Google Tag Manager?

In order to enable the preview mode, login to your GTM account and then click on the ‘Preview’ button:

You should now see the orange color preview notification banner at the top of the GTM user interface:

The appearance of this notification banner is a proof the GTM preview mode is enabled.

In order to disable the preview mode, click on the ‘Leave Preview Mode’ button:

How to enable the GTM preview mode on your website?

In order to enable GTM preview mode on your website, follow the steps below:

Step-1: Navigate to the web page on your website where you want to preview and debug the deployment of the current container draft.

Step-2: Enable the preview mode within the GTM user interface (as explained earlier).

Step-3: Navigate back to your web page and then refresh it by clicking on the browser ‘refresh’ button.

Note: Just enabling the preview mode within the GTM user interface won’t automatically enable the preview mode on your website. You would also need to refresh your web page.

When the preview mode is enabled on your website, you should then see the debug console window at the bottom of the page:

How to disable the GTM preview mode on your website?

In order to disable GTM preview mode on your website, follow the steps below:

Step-1: Navigate back to your GTM account and then click on the ‘Leave Preview Mode’ button

Step-2: Navigate back to the web page on your website (where you used the debug console window) and then refresh the web page (by clicking on the browser ‘refresh’ button),

Once you refresh the web page, the debug console window should disappear from the bottom of the web page.

Note: Everytime you enable / disable the preview mode from within the GTM user interface, you should refresh your web page.

How to preview previous version of a container?

By default, whenever you enable the preview mode in GTM, you preview and debug the deployment of the current container draft on your website.

But you also have the option to preview any previous version of your container.

To do that, follow the steps below:

Step-1: Login to your GTM account and then click on the ‘Versions’ tab:

Note: Version is the saved snapshot of your container.

Step-2: Scroll down to the version number, you want to preview and then click on the ‘Actions’ drop down menu next to it:

Step-3: Click on the ‘Preview’ link to enable the preview mode for the chosen container version. In our case, the chosen container version is version 49.

Once you clicked on the ‘preview’ link, you can see the ‘Environment’ status changed to ‘Preview’:

Step-4: Navigate to the web page on your website, where you want to preview and debug the chosen container version.

Step-5: In order to disable the preview mode, navigate back to your GTM account, click on the ‘Workspace’ tab and then click on the ‘’leave preview mode’ button:

How to use the preview and debug mode?

Once you have enabled the preview mode, navigate to the web page on your website, where you want to preview and debug the deployment of the current container draft.

You should then see the debug console window at the bottom of the page.

If you are previewing the deployment of the current container draft then you would see the ‘QUICK_PREVIEW’ text in the console window:

If you are previewing the deployment of a previous container version then you would see the container version number in the console window:

Note: The debug console window will appear only to you and not to your website visitors or other users of your GTM account.

How to update the preview and debug mode in Google Tag Manager?

Everytime, you make changes to any tag, trigger or variable in your GTM container, you should update the preview and debug mode.

You can do that by clicking on the ‘Refresh’ button:

How to update the preview and debug mode on your website?

Make sure that you have updated the preview and debug mode in GTM before you update the preview and debug mode on your website.

In order to update the preview and debug mode on your website with new information, simply refresh the webpage (by clicking on the browser ‘refresh’ button) where you see the debug console window.

Once you refresh the web page, the debug console window should update with new information about your events, tags, triggers, variables and data layers.

Automatic update of the Debug Console Window

As you navigate through the previewed web page (the web page which shows the debug console window), the debug console window can also automatically update with new information (even without any browser refresh).

This is more likely to happen, if you are tracking events (like scroll tracking, video tracking etc) on the previewed web page.

Understanding Events in GTM Debug Console

The ‘Summary’ section of the debug console window, list all of the events that have been pushed to the data layer so far (also called the event timeline):

The events are listed in the order they were pushed into the data layer.

From the screenshot above, we can conclude following:

#1 ‘Page View’ event was pushed first into the data layer.

#2 ‘DOM Ready’ event was pushed second into the data layer.

#3 ‘Window Loaded’ event was pushed third into the data layer.

#4 ‘gtm.click’ was the last event pushed into the data layer.

You can click on an event name in the event list.

For example, you can click on the ‘Page view’ event:

When you click on an event name in the event list, you see the snapshot of the container state during that event.

Snapshot of the Container State

This snapshot is, what the current container draft looked like, in terms of: tags, triggers, variables and data layers when an event was pushed into the data layer.

Whenever you click on an event name in the event list (of the debug console window), you see the snapshot of the container state for the selected event.

For example, when you click on the ‘Page View’ event, you see the snapshot of the container state when the ‘Page View’ event fired:

When you click on the ‘DOM Ready’ event, you see the snapshot of the container state when the ‘DOM Ready’ event fired (or pushed into the data layer):

Similarly, when you click on the ‘Window Loaded’ event, you see the snapshot of the container state when the ‘Window Loaded’ event fired (or pushed into the data layer):

From the last three screenshots above, we can conclude that the ‘Google Analytics Tracking’ tag fired only once and that too when the ‘Page View’ event was pushed into the data layer.

This tag did not fire when the ‘DOM Ready’ and ‘Window Loaded’ events were pushed into the data layer.

And that’s how it should be.

Do not expect your tags to be fired for each and every event pushed into the data layer.

Similarly, do not expect your triggers and variables to be resolved for each and every event pushed into the data layer.

Understanding Tags in Google Tag Manager Debug Console

When you open the debugger console window on your web page, the first thing that you see, is the ‘Summary’ of all the tags fired on your web page so far as well as the summary of all the tags not fired on your web page so far:

At the top of the event list in the ‘Summary’ button.

Click on this button whenever you want to see the summary of all the tags fired and not fired on the web page so far.

However make sure that during that time, the ‘Tags’ tab is active / enabled:

In the context of ‘Tags’, the snapshot can mean any of the following:

# Which tags were present on the web page when a particular event was pushed into the data layer:

# Which tags fired on the selected event:

# Which tags did not fire on the selected event:

You can click on a tag to see it properties, firing triggers, and blocking triggers:

Click on ‘Show More’ link to see the full list of properties.

If you scroll down further, you can then see the firing and blocking triggers for the tag:

So if a certain tag does not fire for a particular event, you can click on the tag, scroll down and check the ‘Firing Triggers’ section.

If you see a cross mark in the ‘firing triggers’ section then it means the trigger did not fire and as a result, the corresponding tag did not fire:

If you see a green check mark in the ‘firing triggers’ section then it means the trigger did fire:

That’s how through debugger console, you can determine the reason of a tag not firing.

Understanding Variables in Google Tag Manager Debug mode

In the context of ‘Variables’’, the snapshot means the current state (return type & return value) of the variables when a particular event was pushed into the data layer:

Another example,

You would need to click on the ‘Variables’ tab at the top of the debugger console, in order to see the current state of all the variables when a particular event was pushed into the data layer:

The variables can be:

#1 All the built-in variables you enabled via the GTM user interface.

#2 All the user defined variables available in your GTM container.

Note: In order to make your debugging easier, enable only those built in variables which you really need. Additionally, delete all those user defined variables which you no longer use.

Just like tags, a variable can have a different state (return type & return value) for each new event pushed into the data layer.

Do not expect your variable to retain their state for each new event pushed into the data layer.

For example, if you have installed scroll tracking on your website via the ‘Scroll depth’ trigger then the scroll tracking variables (like ‘Scroll Depth Threshold’, ‘Scroll Depth Units’, ‘Scroll Direction’) will resolve (return a valid value) only when the ‘gtm.scrollDepth’ event is fired:

The scroll tracking variables (like ‘Scroll Depth Threshold’, ‘Scroll Depth Units’, ‘Scroll Direction’) will not resolve (though it will be evaluated) for events like ‘Page View’, ‘DOM Ready’, ‘Window Loaded’ etc):

The preview and debug mode evaluates all of the variables configured in your GTM container tag for each event pushed into the data layer.

So each variable can be evaluated (and sometimes even resolved) multiple times.

But not all the variables configured in your GTM container tag will resolve for each event pushed into the data layer.

Always remember that.

If a variable does not resolve for a particular event then it means that any tag that fire on that event will not have access to the value of the variable.

So it is important to understand that if you want to use a variable then it must resolve (return a value other than ‘undefined’) when the event that triggers the tag is pushed into the data layer.

For example, the scroll tracking variables must resolve when the ‘gtm.scrollDepth’ event is pushed into the data layer.

Otherwise your scroll tracking will not work.

Note (1): If you click on the ‘Summary’ button at the top of your debugger console while using the ‘Variables’ tab, you won’t see any data:

You need to select an event from the event list on the left, in order to see the current state of all of the variables.

Note (2): The variables that you see listed in the debugger console for an event can be used in any GTM tag or trigger, just by surrounding them with double curly brackets:

Understanding Data Layers in GTM Debug and preview mode

In the context of ‘Data Layers’, the snapshot means:

#1 the state of the data layer when a particular event fired.

#2 the state of the data layer after particular event fired.

For example:

Another example,

The debug console window can be minimized

You can minimize the debug console window by clicking on the small downward arrow button as shown below:

This setting can come handy if the debug window is becoming visually obstructive.

The minimized debug window will appear as debug icon on the lower right hand side of your browser window:

Click on this icon to bring back the debug console window.

How to share the GTM preview mode of your website?

Follow the steps below:

Step-1: Enable the preview mode within the GTM user interface by clicking on the ‘Preview’ button.

Step-2: You should now see the orange color preview notification banner at the top of the GTM user interface. Click on the ‘Share Preview’ link:

Step-3: Enter the URL of the web page (in the ‘Destination URL’ text box) whose preview mode you want to share and then copy the preview link:

Step-4: Share the preview link with whomever you want to preview your web page.

When the person with whom you shared the preview link, load the link in his web browser, he will see the following similar web page:

Step-5: In order to start previewing, the person with whom you shared the preview link, must click on the link, as shown below:

Once the person starts previewing, he should see the debug console window at the bottom of the page.

He will see the debug console window despite being logged in to your GTM account.

This is the advantage of sharing the preview mode.

How to quit the shared preview mode?

If you want to quit the preview mode that has been shared with you then load the shared preview link in your browser window once again and then click on the ‘Exit Preview and debug mode’ link:

After clicking on the link, you should be redireted to the following webpage which confirms that you have exited the shared preview mode:

 

Google Tag Manager debug Console not working? Here is how to fix it.

If the debug console window does not appear/load on your web page, then do the following:

#1 Make sure you have enabled preview mode in GTM

If the preview mode is not enabled in GTM then it won’t enable on your website either.

#2 Make sure you refresh the webpage where you want the debug console window to appear.

Just enabling the preview mode within the GTM user interface won’t automatically enable the preview mode on your website. You would also need to refresh your web page.

#3 Every time you enable/refresh the preview mode, you would need to refresh your webpage.

Otherwise the changes you made in your GTM container may not reflect in your debug console window.

#4 Do a hard browser refresh if you use a caching plugin/feature

If you are using a caching plugin and/or CDN (content delivery network) that automatically cache website contents then you may need to do ‘hard refresh’ on the webpage where you want the debug console window to appear.

The hard refresh should bypass the cached content.

In case of windows, you can do a hard refresh by pressing SHIFT Key + F5

#5 Avoid using the ‘Refresh’ button in your GTM account

In order to minimize caching issues, avoid using the ‘Refresh’ button in your GTM account, everytime you make changes in your container tag.

Instead click on the ‘Leave preview mode’ link, make necessary changes and then click on the ‘Preview’ button.

Do this everytime you make changes in your container tag:

#6 Consider temporarily disabling your caching plugin / setting

If you are planning to make and test lot of changes in your container tag and your website is so heavily cached that you need to do multiple refreshes in order to see changes in your debug console then temporarily disable your caching plugin and/or caching feature in your CDN.

You need to disable cache so that your browser does not keep loading the previous version of your web page while you are making changes to it for testing purpose.

Your testing could become really hard, if you can’t see the changes you are making.

#7 Make sure that the GTM container tag code is hardcoded on your website

Check the source code of the web page (where you want to see the debug console window) to make sure that the GTM container tag is present.

This container tag is the same code which is used to install Google Tag Manager on your website.

Without this container tag, the debug console window won’t appear on your website.

#8 Make sure that the GTM container tag is firing on page load

Check the Google Tag Assistant to make sure that the GTM container tag is firing on page load.

Sometimes the tag may not fire even when it is hard coded on your web page.

And whenever the container tag does not fire, the debug console window won’t appear on your web page.

#9 Check whether you have enabled the preview and debug mode of a wrong container

If you have got access to multiple GTM accounts then there is always a possibility that you accidentally enabled GTM preview mode of a container which does not match with the container code hardcoded on the website.

Note down the container ID from the hard coded container tag on your website and then compare it with the container ID you see within the GTM user interface.

They both need to match.

If they are different then it means, you have enabled the GTM preview mode of a wrong container:

#10 Make sure that both your website and GTM account are opened in the same web browser.

Otherwise the debug console window will not appear on your website.

#11 Make sure that both your website and GTM account are opened in the same privacy mode.

For example, if your GTM account is opened in the incognito mode then your website should also be opened in the incognito mode.

Similarly, if your GTM account is opened in the regular (non-incognito) mode then your website should also be opened in the regular mode.

Otherwise the debug console window will not appear on your website.

#12 Indentify the browser extension(s) which is blocking GTM tag from firing

Sometimes a browser extension can stop GTM container code from getting fired.

And whenever the container code is not fired, the debug console window won’t appear on your web page.

The browser extensions which are most likely to stop GTM container code from getting fired are ad blockers (like Ghostery, AdBlock plus etc).

If you are not sure which browser extension is causing problem then disable them all and then enable them one by one.

#13 Check your browser default or modified privacy settings

Sometimes browser default or modified privacy settings can stop the debug console window from loading on a web page.

This could happen when the 1st party and/or 3rd party cookies have been disabled in your web browser.

Make sure that your browser accept cookies esp. 3rd party cookies.

#14 Check your website firewall settings

Sometimes website firewall settings can stop the GTM container code from firing.

Contact your web developer and make sure that it is not the case.

#15 When everything else failed

If everything else failed and the debug console window still does not appear on your web page then clear all your cookies, cache and history and restore your browser settings to default or better re-install your web browser.