Is Google Tag Manager Preview Mode Not Working? 15 Ways To Fix It.

IMPORTANT: October 16th, 2020. Google has just released a new version of the Preview and debug mode, which works completely differently. If you want to get familiar with it, watch this video first or read this blog post.

Updated: October 29th, 2020. Is Google Tag Manager Preview Mode not working? I’m pretty sure we’ve all been there at least once. This issue has caused some serious headaches in the very beginning when I started using it. Does this sound familiar to you? – GTM Preview and Debug mode is enabled but does not appear on your website (or appears, but does not function properly). Just don’t rage quit and read the following tips on how to fix Google Tag Manager Preview and Debug mode. I’m sure at least one of them will apply to your issue.

 

If you manage to solve the problem by yourself

If you find a solution to your problem by yourself (and that solution is not mentioned in this article), please let me know in the comments. I’ll make sure to update the guide accordingly, thus more people will benefit from it.

 

#1. GTM Snippet is Not Added to the Website

Here’s an example: you asked a developer to follow Tag Manager’s instructions and add container snippet to the website. After some time he completes the task but something’s not right here – Preview and Debug console still does not appear after you enable it. Turns out the snippet was never published to the live version of your website – a developer made a gawky mistake and somehow failed to publish changes.

There are two ways to verify whether the GTM snippet implementation:

• Use the Tag Assistant Chrome extension which checks for Google pixels on the page (e.g. Google Analytics, Adwords, Google Tag Manager) and provides real-time feedback.
• Check the website’s source code. Click Ctrl + U (I guess it’s CMD + U for Mac users?) in your browser and look for GTM container code there.

 

#2. Wrong or Incorrect Container Snippet Added to the Website

Although this tip might sound silly, you should not ignore it. In order to verify, open your GTM account and check the upper right corner of the screen – see GTM container ID?. Compare it with the one which is added to your website’s source code.

Compare it with the one which is added to your website’s source code. Tag Assistant will help you do that.

Also, keep in mind that you or your developers should not modify the GTM container snippet. It must be added to the site exactly as you have copied it from the GTM interface.

 

#3. You Have Enabled GTM Preview and Debug Mode in the Wrong Container

The more Google Tag Manager accounts and containers you have, the bigger the chance you’ll eventually make this mistake. I have been there more than once and it keeps getting more and more frustrating every time. So do not forget to double-check whether the container is right. You can follow the method described in tip #2.

 

#4. You Need To Use The Same Browser

When Preview and Debug mode is enabled, it opens a new tab/window with the website that you are going to debug. If you then try to open Chrome’s incognito mode (or other browser’s private mode) that will not work.

 

#5. Recently created container? Publish it

If you have recently created a Google Tag Manager container and never published it, the Preview mode will not work. You can quickly identify if this applies to you by going to the Overview section of the GTM interface:

If you see Container Not Published text, do the following thing:

• Click the Submit button in the top right corner of the GTM interface
• If you already have a Preview mode’s tagassistant.google.com tab open, close it, and click the Preview button in the GTM interface once again. This step is important.
• Complete all the steps that the preview mode requires (e.g. enter the URL of the page)

 

#6. Try disabling preview mode’s query parameter

When you want to enable the Preview and Debug mode, it adds a gtm_debug=x parameter to the URL. This is default behavior. However, some websites do not support custom URL parameters, hence might not work (or throw things like “404 Page Not Found” errors).

If that is your case, try disabling this checkbox (see the screenshot below):

 

#7. Cloudflare Is Altering the Way GTM.JS Is Loaded

Note: I am not sure if this affects the new GTM preview mode but I kept this tip anyway.

This tip comes from our reader Chris.

A Content Delivery Network or CDN is designed to cache the static content on sites through a wide geographic network. The end result of using the CDN is that the static content will be delivered faster to the visitor from the network node in closest proximity to the visitor, thereby shortening the amount of time it takes the page load for your site’s visitors.

CDN also affects how JavaScript is pulled and gtm.js (Google Tag Manager’s JS library) isn’t an exception. If you’re using Cloudflare (a very popular CDN solution), make sure you have the feature called Rocket Loader disabled. I highly recommend consulting your developer about this issue.

 

#8. GTM code was accidentally modified while copy/pasting it to the developer

This situation happens when you want to send the GTM container code to a developer, copy it from tag manager’s interface, then paste it to some word file (maybe Google Docs or some other text editing tool) and then send the code to a developer.

Little did you know that the text editing tool “fixed” the container code according to certain grammar rules, maybe removed or added some spacing, changed apostrophes, etc.

Even though the code looks the same (at first sight), it won’t work (meaning that your Preview and Debug mode also won’t appear).

Here’s an example. On a website, a developer added GTM container snippet. However, if you take a closer look at apostrophes (in the screenshot below), they look wrong.

In JavaScript, apostrophes must be ‘ ‘, but in the screenshot below they are ‘ ’. Similar, but not the same.

A solution to this? Copy the GTM container code in the GTM interface and paste it to the .txt file (e.g. via Notepad), save the file and then send it to a developer. An alternative solution would be to copy the code and paste it to pastebin.com. Save the paste and then forward the link to a developer. When a dev opens the link, he/she will see the raw/unmodified code.

 

#9. Check if your browser is not blocking popups and redirects

When you click the Preview button in the GTM interface, a new tab or window will be opened that belongs to tagassistant.google.com.  Sometimes, a browser might not like it and block it.

If you are using the Chrome browser, you might start seeing this in the GTM interface:

For me, this happens inconsistently. Sometimes, Chrome blocks the window, sometimes not.

Anyway, if you see that the browser blocked the tagassistant.google.com tab/window, click that icon and select Always allow popups and redirects… and click Done.

This enables this setting only for Google Tag Manager, so don’t be afraid of opening some pandora’s box.

If you are using a different browser, that “blocked” warning might look different. You will need to do some further investigation on your own.

 

#10. Try publishing the container (even if the container is not new)

Some people mentioned that they published the container before enabling the preview mode and it helped them. Since that moment, their debugging experience was smooth. I wasn’t able to verify it but it’s still worth a shot.

 

#11. Preview mode’s timeout when you try to enable it

Some people are facing issues when they try to enable the preview mode but it eventually times out. It looks like the current time out duration is 5 seconds. If GTM loads after more than 5 seconds, you get a timeout.

Even if GTM loads after the timeout, the preview mode does not recover. This was a known bug and the GTM team has already implemented a fix for it. But I am keeping this tip up (for a while) in case someone still faces the issue.

What could you do now about it? Ask a developer to move the GTM container snippet higher in the source code. Maybe it is currently added in the <body>? Moving it to the <head> of a website would definitely help.

If the GTM container snippet is already in the <head> of your website’s source code, then, most likely the problem lies somewhere else.

Additionally, here’s what I have noticed on some websites. When a preview mode popup tells you that it could not connect, click the Retry button and repeat the same process all over again. When you see the progress bar once again, it will show you an error but then after 3-5 more seconds, it will show you that the preview mode connected successfully.

This happened to me in some projects. Maybe it will help you too.

 

#12. AdBlocker, Ghostery, or Other Similar Extension Is Blocking GTM

Call it a feature or symptom of today’s web browsing behavior, but the ad and content blockers are making the life for web analysts difficult.

Popular browser extensions like Ghostery, AdGuard AdBlocker, and AdBlock Plus make it easy to block Google Tag Manager, too. So if you’re using one of the blockers, try disabling them and see, whether it helped. So if you want to have a working preview mode, you’ll need to disable the extension.

Another plugin (that was reported by readers as interfering with the GTM preview mode) is Avira Save Shopping.

 

#13. Your website is using an automatic solution that blocks cookies from being set

With the dawn of GDPR and other privacy-related regulations, some website owners decided to use automatic cookie-blocking solutions connected to their cookie consent popups. Some examples are:

• OneTrust Cookie Auto-blocking
• Automatic Cookie Blocking in CookieBot

Unfortunately, I don’t have the specific steps on how to resolve this (because every tool will probably have different steps). But in general, you need to make sure that the cookie named _TAG_ASSISTANT (all uppercase) is allowed to be set.

It is necessary for the Preview mode to work. If you are not sure whether your website is using auto-blocking, consult with someone who is more familiar with your cookie-consent-management tool and the website that you are working with.

This will require some investigation from your side.

 

#14. Make sure you have selected to correct GTM container in the top left corner

If there are more containers on a site (but you have enabled the preview mode in just one of them), it’s possible that you are currently previewing the wrong container.

In the tool left corner of the Preview mode, you might see a little arrow-down icon. If yes, then click and check if you are previewing the correct container. If not, pick the right now.

 

#15. You might be previewing a workspace instead of an environment

Note: try verifying your GTM environments even if you don’t see the same warning in your preview and debug mode (as I have described in this chapter).

Here’s a situation. You enable the preview mode and you see the message “No tags were evaluated in this container”. You don’t see any events (like Container Loaded) on the left side of the preview mode (all you see there is just the title of the page).

Also, you don’t see an arrow-down icon next to a GTM container ID at the top left corner of the preview mode. In that case, it’s most likely that you are trying to preview the workspace rather than the environment. It is quite confusing but let me try to explain. It will take a while to explain but this is important, otherwise, you might be even more confused.

When GTM is installed, usually developers add the GTM Container code that can be found by clicking on the container ID in the interface.

This is the regular GTM container snippet (not having any environment parameters). When you enable the preview mode by clicking the PREVIEW button in the top right corner of the GTM interface,  you enable the preview mode for that particular snippet.

However, GTM offers the functionality of environments. You can create different environments, like development, staging, something else. In order to install it, your developer has to get separate snippets for each environment and place it in the respective versions of your website. For example, place the staging GTM container on staging.yourwebsite.com.

In order to get the snippets for environments, you need to go to Admin > Environments > Click Actions next to an environment > Get snippet, and then a developer should place it on the website. By default, there are two environments but you can create more if you need it.

Here’s the catch: if you want to create a custom environment like development or staging, create a new environment and get their snippets installed on respective versions of your website. But, when it comes to a live website, you should not use the LIVE environment’s snippet. Instead, click on the ID in the GTM interface and ask a developer to install that one.

So, where is the problem after all?

Sometimes developers add the Live environment’s snippet to the live website. That snippet looks a bit different compared to the default GTM snippet.

If you have an environment snippet (with additional parameters) implemented on the live site AND you try to enable the preview mode by clicking the PREVIEW button, it will not work. And you will get the “No tags were evaluated in this container” message. That is happening because you enabled the preview button of the current workspace (but not in a specific environment).

If you want to enable the preview move in the environment snippet, then you must go to Admin > Environments > Choose the environment that you want to preview (for example, it might be Live environment of your live website) > Actions > Share Link and then use that to access the environment.

Important: your GTM container must have at least one version published before you can see the Share Link option.

Yes, this might sound confusing and hopefully, the GTM team will improve the flow in the future. But if you are in fact dealing with GTM environments, the only way how you can preview the environment now is to go to Admin > Environments > Actions > Share Link.

And if you need this even on the live website, then ask developers to replace the Live environment’s snippet with the default GTM container snippet that you can find by clicking the container ID in the GTM interface.

How can you find out whether your GTM container (installed on your live website) is not using the Environment’s snippet? You will need to check the website’s source code (by using the View page source feature in the browser) and then compare that snippet to the default GTM snippet.

 

Do you keep seeing the Preview mode badge at the bottom right corner of your screen?

I am talking about this badge:

If you continue to see it even after you have exited the GTM preview mode, read this blog post to resolve the issue.

 

None of the tips worked?

If none of these solutions helped you, please post a comment with the following information:

• A detailed explanation of what is not working. Some people report that they get a timeout, others say that they cannot see some events in the preview mode, etc. I need you to describe your situation in great detail
• Link to the website where this situation is happening
• Link to your preview mode. After you launch the preview mode, you are redirected to a tagassistant.google.com. When you enter your website’s URL and start previewing, copy the URL of that preview mode and share it in the comments. Don’t worry, if you publish the container at some point in the future, that shared preview mode will stop working.

 

GTM Preview Mode Not Working: Conclusion

Google Tag Manager’s preview mode allows you to browse a site on which your container code is implemented as if the current container draft was deployed.

Is Google Tag Manager preview mode not working for you? In this blog post, I outlined 15 quick tips on how you can make the preview and debug mode start working right away – from checking your cookie settings to using Tag Assistant.

If Google Tag Manager Preview mode is still not working for you (even after reading this blog post), post a comment below and we’ll come up with a solution.

If you have already found a solution that is not mentioned here, please share it in the comments with others.

I have also published a post on the most common Google Tag Manager mistakes (some of which were mentioned in this post as well). I might save you some time in the future 🙂