Updated: June 29, 2017. 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 headache 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 how to fix Google Tag Manager Preview and Debug mode. I’m sure at least one of them will apply to your issue.

June 23, 2017 – READ THIS. Apparently, Google has published new updates to GTM, which have affected the Preview and Debug console. Tip #10 should help you. It worked for me.

June 26, 2017 – Some readers report that even tip #10 did not help. If you’re one of them, please provide more information in the comments: What browser are you using? What browser plugins/extensions do you have installed? Describe how the Preview and Debug mode does not work (does it simply stays hidden? Does it flash? etc.). Every clue is valuable. The more information you provide, the faster I will be able to reproduce the issue and (possibly) find the solution.

June 29, 2017 – Check Chrome browser for updates. Some readers report, that updating Chrome helped them fix the problem.

 

#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 GTM snippet implementation:

• Use 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 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 Container Snippet added to 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.

 

#3. You have enabled GTM Preview and Debug mode in wrong container

The more Google Tag Manager accounts and containers you have, the bigger 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 few examples 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?

I haven’t faced this problem myself, but noticed few folks on the internet trying to cope with it. My suggestion here is to put the blame on browser extensions/plugins. Try disabling them one-by-one and check whether it helped (by refreshing the website with Preview and Debug console enabled).

Update: Apparently I am not the only one who faced this problem. In my case disabling plugins in browser helped. 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 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 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 P&D console’s height, but it doesn’t adjust. Clearing browser cookies and cache was the solution that helped me.

 

#12. Your ADBlocker is Blocking GTM

Call it a feature or symptom of today’s web browsing behavior, but ad and content blockers are making 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 blockers, try disabling them and see, whether it helped.

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

 

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 12 quick tips how you can make 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 of 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 🙂