Updated: July 21st, 2021. 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 various ways to verify whether the GTM snippet implementation. To name a few:
Use the Tag Assistant Chrome extension which checks for Google pixels on the page (e.g. Google Analytics, Google Ads, 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. Try exiting the preview mode and entering it once again
Close the preview mode’s tab, close the website tab. Then click the Preview button once again in the GTM interface and complete all the steps to enable it. This worked for me multiples times.
#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 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.
Other plugins (that are reported by readers as interfering with the GTM preview mode) are:
Avira Save Shopping
DuckDuckGo privacy
Windscribe VPN
uBlock Origin
#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.
Update: the design there looks a bit different now. The container IDs are more visible.
#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.
#16. Don’t use Brave browser while working with GTM
Brave browser is known to be blocking various endpoints related to Google. This includes Google Analytics, Google Ads, but also, Google Tag Manager. If Brave is your main browser, you have two options when it comes to working with GTM:
Use a different browser just for work with GTM (e.g. Chrome or Edge because there are many useful GTM-related extensions)
Or disable the main security feature of Brave browser called Shields
I would personally, just use a different browser because having Brave with Shields disabled makes it pretty much useless.
#17. Website’s domain is on http (not https)
I don’t know (yet) if there is any other workarounds for this, but it looks like GTM preview mode does not work if your site does not have an SSL certificate. In other words, the URL must contain https, not http.
If that is your case, it’s time to update and make your site more secure. Contact your developer/webmaster and ask him/her to add the SSL certificate and make sure that the web is loaded from https.
#18. Content security policy is blocking the GTM from loading
If your website has a Content Security Policy, it might block GTM’s preview mode. You can identify this by going to your browser’s developer console (On Windows, Chrome, you should go to Browser’s Menu > More Tools > Developer Tools > Console.
Then refresh the page. If you can find an error that looks like this (or something similar), this means that you are dealing with the Content Security Policy.
What does that mean? Your developers will have to update the CSP of the website. There are no workarounds, you won’t avoid developers here. Here are the instructions on what they should do.
#19. GA Debugger Extension affects GA4 debugging in the Preview mode
You probably have noticed that if GA4 is loaded on a site, you will see its ID at the top of the preview mode. If you click it, you will see all requests that were sent to Google Analytics 4 from your website (page by page). This is useful.
But sometimes you might see a list like this (without any detailed information). If yes, this is happening because you have activated a Chrome extension called GA Debugger. If it is enabled, GTM preview mode stops reporting on GA4 debugging. However, it has NO IMPACT on regular GTM debugging and your tags will still fire just fine. The only thing that’s affected is a dedicated GA4 debugging.
Your hits are still sent to GA4. They are just not displayed in the preview mode. To fix this, you will have to turn off the GA Debugger extension.
#20. Try to completely relaunch/restart your browser
This means that you have to completely close it, make sure that your browser’s process is not running somewhere in the background. For example, in Chrome, click three dots in the top right corner and then click Exit. Click X button to close the browser window WILL NOT HELP.
Then launch the browser again and see if that helps.
#21. GTM is blocked by your cookie consent solution
Some websites implement cookie consent solutions (like OneTrust) and configure them to block GTM completely until a visitor agrees to be tracked. In that case, the preview mode will work only after “I agree” (or whatever) will be clicked.
So when you try to enable the preview mode, you will be redirected to your website. Click “Agree” in your cookie consent bar and see if that helps.
#22. An array (pushed to the Data Layer) broke it
Sometimes a little piece of code on your website can break the data layer. There are multiple ways how things can go wrong and here is one of them. In that quick blog post, I mentioned that if something like this is visible in the code:
…it will break the data layer and you won’t see anything useful in the preview mode. What’s the solution? Cooperate with developers and ask them to remove that code. Or disable the website’s plugin that is adding this code.
Which plugin is causing this problem? Difficult to say (because different websites might use different plugins). You will have to investigate this with your developers. Read this to learn more.
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 a bunch of 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
The post Is Google Tag Manager Preview Mode Not Working? 22 Ways To Fix It. appeared first on Analytics Mania.
Read MoreAnalytics Mania
