Anyone who uses Google Tag Manager will agree that preview mode has always been a great tool when adding and debugging tags. That said, it certainly wasn’t perfect… Want to see the previous state of GTM after a page loads? Nope. Want to debug a mobile site? Good luck. These are the two main headaches that plagued the old GTM preview mode, but not anymore!
So what are the main differences?
One of the main differences with the new preview mode is its move into the Tag Assistant ecosystem, hence the new name “Tag Assistant Preview Mode”. While you don’t need to install the Tag Assistant Chrome extension, it does give you some additional features that we’ll cover later.
The most notable difference is probably the debug window is no longer integrated with the window you are in debugging. This means that all of your debugging data will persist as you navigate through different pages. Gone are the days of using third-party tools or quickly trying to see your events fire before the page refreshes.
It also allows you to debug mobile previews much more easily. Previously, when the debug pane was built into the page, enabling mobile preview mode simply made debugging impossible. You now have the luxury of having your debug pane anywhere you want!
Preview mode now uses part one cookies instead of third parties. With more and more browsers starting to block third-party cookies, this move will make using preview mode with browsers such as Safari and Firefox much easier.
Basics of using the new preview mode
Enabling preview mode is now slightly different. After pressing « Preview » in Tag Manager, you are now taken to a separate tab, with a prompt to enter the URL you want to debug.
After clicking start, the URL entered will open in a new window and preview mode will attempt to connect the debug window to the page you are debugging.
The two windows are now connected and all activity and navigation you do in that window will be recorded in your debug window. The layout here will be very familiar, with your summary column on the left, and the ability to show tags, variables, data layer, and all errors in the main right area of the debug window.
If you are an early adopters of Google Analytics 4 aka App + Web properties, you can also debug all calls in the same window, just select the different configurations listed at the top of the page.
When debugging is complete, just click the “X” at the top left of the debug window, then you will be asked to confirm that you want to stop debugging. After clicking “Stop Debugging”, the first party cookie will be deleted and all windows will be removed from debug mode.
Additional features with the Tag Assistant extension
If you are a heavy user of Tag Manager and read the blog, you are probably already using Google Tag Assistant extensionotherwise, the installation is certainly worth it. Along with the quick tag checks it lets you do, it also adds some pretty useful features to the new preview mode.
The first of these features allows you to debug on multiple tabs instead of being limited to the new window that is open. This will give you more flexibility with the console window and allow you to open the device toolbar for improved mobile debugging.
The next feature you gain actually helps you keep track of these multiple tabs. Preview mode will assign an icon to each one you open, which you can see in the left summary, next to the page title. This icon will also appear as a favicon in the specific tab it’s associated with, giving you an easy way to match debug data with the tab in question.
These new features are a huge improvement over the previous version of Google Tag Manager, and since it’s still in development, it’s likely we’ll see even more cool features added in the months and years to come.