Why use Google Tag Manager preview mode?

When you are working with Google Tag Manager, you are creating different types of tags, triggers and variables. However, before implementing those changes live on the website, you need to make sure that your implemented tags are working as expected.

If you are publishing directly, then the changes would go live on the website and measurements like pageviews and events will start to be tracked. But what if the tags are not working properly? How can you make sure that the tags are actually firing when they are supposed to?

This is when you can enable a preview mode in Google Tag Manager which allows you to validate the configuration of the tags before publishing the container.

If you publish something accidentally, without validating, then the entire setup may not work and break the complete configuration.

Through the 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 preview mode, the GTM preview and debug console window, a new tab is opened with Google Tag Assistant in the domain name, which is now the new version of preview mode.

This replaces the orange banner that used to appear for older versions when the GTM container was in preview mode.

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

How to enable GTM preview mode on your website

Step-1: In order to enable preview mode, log in to your GTM account and then click on the ‘Preview’ button:

Step-2: A new tab opens with Google Tag Assistant in the domain name as shown below.

Step-3: You will see an option like below which states ‘Start Tag Assistant’. 

Step-4: Now provide the URL of the website for which you want to enable preview mode in the URL section.

Step-5: Click on the ‘Start’ button to enable preview mode for the URL entered.

Step-6: You will see the success message which states ‘Connected!’ once the preview mode is enabled for the URL.

Step-7: Additionally, on the page where the Google Tag Manager debug mode is enabled, you will see the notification which shows that the debugger is connected.

Step-8: You can also validate if the preview mode was on by checking in the Tag Assistant tab, on the left-hand side. It should say ‘Connected’.

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 to the page where the GTM preview mode is enabled and at the bottom of the page you will see the ‘Debugger connected’ panel, like below.

Step-2: Now click on the ‘X’ that is on the pop-up, which is labelled ‘Stop debugging’.

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

Step-3: You can also check in the Tag Assistant tab, it should show ‘Not connected’ once you have clicked on ‘Stop debugging’.

 
Get the E-Book (100 Pages)

Get the E-Book (62 Pages)

How to preview a 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.

How to use the preview and debug mode

Once you have enabled preview mode, you will notice that a new tab opens. After entering the URL you will see an option to click on ‘Start’. When you click on ‘Start’, the url you entered will be opened in a new tab. 

With the current change in the GTM preview mode, you will now see that every action you take on the page will be tracked in the Tag Assistant tab. This is different from the older versions where you see the debug console on the same page.

You see a screen like below, which is exactly like the older debug console but instead of viewing it below the URL, you see it in a different tab.

Say for example you are on the home page (www.optimizesmart.com) and in the debug console in a different tab you will be able to see all the tags that fired on the home page.

Now let’s say, you have navigated to the contact us page, in the debug console tab under the ‘Summary’ section you will notice a new tab with a drop-down, as shown below.

This makes it easier for troubleshooting issues. You can now separately view the tags that fired on that particular page.

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

Every time, 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 ‘Preview’ button in the GTM container. It will automatically refresh the Tag Assistant tab.

Automatic update of the debug console tab

As you navigate through the previewed web page, you would see additional tabs with drop-down being created in the tag assistant tab for every page you navigate.

You can debug and view all the tags fired on every page individually. Say, for example, you are interested in checking what tags are fired on the ‘Contact us’ page, then you can click on the ‘Contact us’ tab in the ‘Summary’ section of the Tag Assistant page.

You also have an option to close the drop-down by using the arrows on the left-hand side. 

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

Understanding tags in Google Tag Manager debug console

When you navigate to the Tag Assistant debug mode tab, the first thing that you will notice on the page is a summary of all the tags fired on the page.

Click on the tag fired to view the tag details. This section shows the trigger associated with the tag, properties and also the blocking trigger details.

You can also view the tags that did not fire on the page and check if there are any blocking conditions.

Under the firing triggers conditions, you can view why that particular event did not trigger. The cross marks that are seen next to ‘Page URL’ in the screenshot below state that it didn’t satisfy the condition.

Additionally, to validate the reason why that particular tag did not fire, you have a ‘Display Variables’ option on the right-hand side when you open the tag details. Click on ‘Values’ as shown below:

By default ‘Names’ will be selected. Click on ‘Values’. Now you can find out why your tag did not fire.

The left-hand side shows the details that fired on the page and the right-hand side shows the values that are set in the trigger condition. So, referring to the screenshot above, the tag was supposed to fire on gtm.click event but on the current page it was gtm.click event that fired. Since the trigger doesn’t match the tag, it was not fired on the page.

Click on the “Variables” tab to check for all the variables that are set for that particular page.

Similarly you can also view the data layer values for the specific event (Pageview, link click etc) on the page by click on the “Data Layer” Tab.

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 checkmark in the ‘firing triggers’ section then it means the trigger did fire:

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

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.

The debug console window can be minimized

You can minimize the debug console window by clicking on the small arrow button.

This setting can come in handy if you want to view the tags that fired on individual pages. You can minimize the tags fired on one page and troubleshoot the issue on another page without any interference.

How to share the GTM preview mode of your website

If you want to share the preview mode of the container with someone. Go to the versions tab in your GTM container and click on the three dots that you have and click on share preview.

After clicking on the share preview link, you should notice a dialog box appears like below, provide your website URL in the destination URL box.

In order to start previewing, the person with whom you shared the preview link, just 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.

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 have entered the right URL in the preview mode

Just enabling the preview mode within the GTM user interface won’t automatically enable the preview mode on your website. You also need to provide the proper URL, that starts with https, and click on ‘Enter’.

#3 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 the 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 purposes.

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

#4 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 that is used to install Google Tag Manager on your website.

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

#5 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 hardcoded 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:

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

#7 When everything else failed

If everything else fails 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 even better reinstall your web browser.