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

Updated: June 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.

Read this before we continue!

If you refresh the page where you have enabled the GTM preview and debug mode or if you click the link that redirects you to another page, the Google Tag Manager preview and debug mode will refresh together with the page and everything that was tracked with it will be lost.

Such behavior is expected. This is not a bug.

If you want to prevent the debug console from refreshing (in other words, the main page from redirecting/refreshing), try one of these methods.

IMPORTANT: if you have just gtag.js is NOT a Google Tag Manager code. If you have only gtag.js added to a page, Google Tag Manager will not work. You need to explicitly add the GTM container snippets to the site’s source code.

#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, GTM sends your browser a special cookie that allows you to preview without changing your actual site. You’ll get to see your site with your changes as if they were deployed. That’s why both Google Tag Manager account interface (which sets the cookie) and website with P&D mode enabled (which reads cookie’s data) must be opened in the same browser.

Here are a few examples of what might and might not work:

• Will work – Both Google Tag Manager account and your website are opened in Chrome’s regular tab.
• Won’t work – GTM account is opened in Chrome’s regular tab, but your website is opened in incognito (a.k.a. private) tab.
• Won’t work – GTM account is opened with Firefox and your website is opened with Chrome.

#5. Make Sure Your Browser Accepts 3rd Party Cookies

Some users are really concerned about their online presence and security, so they’ve decided to disable 3rd party cookies. In some occasions, browser’s default settings might have 3rd party cookies disabled. Remember that “special” cookie mentioned in tip #4? Yup, that’s also a 3rd party cookie. Without it, Preview and Debug mode will not appear on your website. You have two options here:

• Enable 3rd party cookies in your browser’s settings. Here’s a list of instructions how to start accepting those cookies in various browsers.
• Keep 3rd party cookies disabled, but add an exception to www.googletagmanager.com

#6. Using Tag Manager Injector? Leave No Empty Space

If you haven’t used Tag Manager Injector chrome extension before, you definitely should. It makes the transition to Google Tag Manager as quick and painless as possible. The extension gives you the ability to run/preview a GTM container on your site without needing to add any JavaScript to your pages. You just open the extension and paste your GTM container’s ID into the predefined field. 

However, there is one bug. You need to paste that ID precisely without any blank spaces before or after, otherwise TagManajerInjector will not work => Preview and Debug console will not appear in your browser. Examples:

• ” GTM-XXXXX” is incorrect (because there is a blank space before GTM container’s ID)
• “GTM-XXXXX ” is also incorrect for the same reason – blank space, but this time it’s after container’s ID.
• “GTM-XXXXX” is the only correct option.

Unfortunately, this extension does not strip unnecessary blank spaces in the ID field (well, at least for now), so you should bear that in mind.

#7. Using Tag Manager Injector? Check its settings.

Another awesome feature of TagManagerInjector is the ability to inject Google Tag Manager snippet only on certain websites – just use include settings and define a domain or regular expression.

However, there’s also a room for mistake. Leave this setting unattended and you might end up blocking the right website from displaying Preview and Debug Console. So make sure you’ve added correct rules or leave the field blank (which is a default setting for “Include all websites”).

#8. Enabled Preview and Debug mode? Then Refresh the Website

Not much to add here, actually. Whenever you enable P&D mode, refresh the website where you expect it to appear. This is a very rare but still possible mistake among beginners.

#9. Preview and Debug Mode Is All White?

In some cases, your Preview mode might look like this (thanks to Raphael for the screenshot).

See the whitespace at the bottom of the image? That’s where the GTM preview mode was supposed to appear.

In some cases, disabling plugins in the browser might help. The issue might also be caused by the conflict between your website’s CSS and GTM.

According to Simo Ahava, when GTM loads the Preview and Debug panel on the website, style conflicts might arise if they share the same namespace. In other words – if particular elements on your website use the same style class (e.g. div class=”gtm-some-class”), then problems might occur while debugging.

If this happens, your best bet is to contact the developer team via the Send Feedback link in the UI, or by posting the issue in the Product Forums.

#10. Preview Panel Appears Only After ~10 Minutes And Multiple Refreshes

Update #2: Several people in the comments have complained that Preview and Debug panel randomly did not appear in the website, although both container and webpage had been refreshed. It usually took them about 10 minutes of wait until Google Tag Manager P&D panel started working again. P.S. No Javascript errors were logged in the browser’s console.

I am still not sure what’s the reason behind it (looks like the issue with cookies), but I noticed that clearing/temporarily disabling cache helped. I am sure that you really don’t want to clear cache several times a day.

Update #3: Brian Kuhn has explained what caused this issue:
Chrome has recently changed the way its location.reload() API works. This has broken GTM’s ability to clear out the old (non-preview) gtm.js from your browser cache. The result is that you won’t see the preview-version of gtm.js until that cached value expires (~15 minutes).

No worries, I have a pretty convenient way of solving it.

The following step-by-step tutorial is for Chrome users. If you’re using another browser – search for similar features. I am pretty sure other browsers offer similar functionality.

1. In Chrome, open Developer Tools (Press F12 on Windows or Cmd + Opt + I on Mac, or simply go to Chrome Menu > More tools > Developer Tools and a panel will appear.
   
2. Click three dots located in the right corner (1) and then choose Settings (2).
   
3. Find the Network section and hit the Disable cache (while DevTools is open) checkbox.
   
4. Now, refresh both browser tabs – with GTM user interface and your website (leave the Developer tools opened).

In my case, it helped and the Google Tag Manager P&D panel appeared. Now you can close the Developer tools panel.
If the issue resurfaces, just open Developer tools and refresh browser tab. That should do the trick.

Did it help? Let me know in the comments.

#11. Cannot Resize Preview and Debug Console?

I am not sure what the exact reason behind this bug is, but it’s pretty annoying when appears. Google Tag Manager P&D console can be easily resized by dragging the top border up or down. It’s a basic but very useful feature. However, sometimes I face the problem when I try changing the P&D console’s height, but it doesn’t adjust. Clearing browser cookies and the cache was the solution that helped me.

#12. Your AdBlocker or Other Similar Extension Is Blocking GTM

Call it a feature or symptom of today’s web browsing behavior, but ad and content blockers are making the life for web analysts difficult. Firefox, for example, offers Tracking Protection out-of-the-box, and it blocks Google Analytics by default.

Popular browser extensions like Ghostery 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. The same problem applies to extensions which block trackers, e.g. Avira Browser Safety, Ghostery, or DuckDuckGo Privacy. So if you want to see the debug panel, you’ll need to disable the extension.

This does not happen too often, but there’s still a chance.

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

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.

#14. Content Security Policy Is Blocking GTM Scripts from Loading

A Content Security Policy (CSP) is something your developers might configure a web server with to add an additional layer of protection. Once you have a CSP in place, all resources loaded and executed by the web page need to pass the CSP directives (including Google Tag Manager’s script).

If Preview and Debug mode does not appear at all or appears without its usual styles, and you see errors in developer’s console saying something like “Refused to load […] because it violates the following Content Security Policy directive ….“, then you’ve just found the reason why GTM isn’t working.

What’s the solution? A developer will have to modify the CSP and Simo Ahava has explained it in greater detail.

#15. You’re Working with Firefox Private Mode

Unfortunately, Firefox private mode blocks Google Tag Manager. So in this case, you should quit the private mode and browse with a regular mode.

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

#17. The configuration of Flags in Chrome

This chapter is valid in early 2020 (before February 4th). One of the experimental features is the sameSite cookie changes that also affect GTM’s Preview and Debug mode (until GTM’s developers will update their codebase responsible for setting 3rd party cookies).

Anyway, here’s what you could try:

• In the address bar of your Chrome Browser enter the following address chrome://flags/
• Then in the search bar enter enable-experimental-web-platform-features
  
  
• If it is enabled, disable it.
• After that, completely exit Chrome
  
• Launch Chrome once again and see if this helped.

If that did not help, stay on that very same page of Flags. try searching for same-site-by-default-cookies and cookies-without-same-site-must-be-secure. They should be set to Default. If that still does not help, set those settings to Disabled.

#18. You’re using Chrome’s Incognito Mode

Starting with Chrome 83.x version, Google Chrome’s incognito mode starts blocking all 3rd party cookies. As it was mentioned several times in this blog post, Google Tag Manager preview mode is also using them.

To fix this issue, enter chrome://settings/cookies in your Chrome’s address bar and scroll down to find Sites that can always use cookies.

Click Add, enter [*.]googletagmanager.com , and click save. If this does not work, restart the Chrome browser.

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. Sites with preview mode enabled will display a debugger pane below the website content so that you can inspect which tags fired and in which order. A thorough previewing and debugging process will help you avoid the risk of compromising your live site with tagging issues.

Is Google Tag Manager preview mode not working for you? In this blog post, I outlined 18 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.

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 🙂