×

The Google Tag Manager Preview Mode – Tips and Tricks

Julian Juenemann

Last Modified on September 18, 2024

Not sure how to properly utilize the preview mode in Google Tag Manager?

In this guide, we’ll explain how to use the Google Tag Manager preview mode as well as share some useful tips and tricks.

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

We’ll cover:

All of these have important implications, so we’ll be discussing what these mean for you as a trackers. 

If you learn the new system well, it will serve you far better than the old preview mode.

💡 Top Tip: We recommend creating a demo website for practicing GTM instead of just trying out new methods on your website.

As always, we have a lot to cover. Let’s dive in!

Old vs. New: Google Tag Manager Preview and Debug Mode

If you’re new to Google Tag Manager, you might be wondering what this commotion is all about.

The preview and debug mode is an essential tool for all GTM users. It allows you to test and debug any tracking implementations before actually making them live on your website.

This gives you the power to make sure that every single update you make to your tracking system is perfect. No double-tracking, no lost conversions, and no confusing data.

Both the old and new preview modes were designed to help you accomplish this. In 2020, the new preview mode completely and automatically replaced the old one. Google Tag Manager users had little warning or time to adjust to the new interface.

While the primary functions in the new preview mode are still the same, there are some significant updates that make the GTM preview mode much more effective…while at the same time confusing some users.

The new preview and debug mode is pretty easy to learn. But it’s helpful to have a quick guide to point out the major changes and show you the updated system.

What’s New in GTM Preview Mode?

So what’s so special about the new GTM preview mode that we wrote a whole blog post about it?

Here are the most important new features of preview mode:

Preview Mode Gets Its Own Tab

If you open your Google Tag Manager account, you’ll find the GTM interface unchanged. Everything should look and feel the same until you click the Preview button in your topbar.

Google Tag Manager workspace with preview button highlighted

Instead of opening your website with a GTM console across the bottom, you’ll be directed to a new tab with Tag Assistant. Here, it will ask you to provide the URL for the site you want to debug.

With this update, the Google Tag Assistant has adopted a new role. Instead of a browser extension, the Tag Assistant is now a tool independent of cookies or extensions. It is now the central hub to debug all your different Tags.

Having a separate tab for the Tag Assistant is a huge perk for GTM users.

For example, you can pull these tabs into separate monitors. If you have multiple screens, this makes it much easier to see everything that is going on both on your site and in your debugger.

You can also just split the two windows on one screen, if your monitor is big enough. This is also especially handy for mobile debugging.

💡 Top Tip: Debug for Mobile Users Mobile developers, rejoice! Keeping the debugger in a separate tab is a huge improvement when debugging for mobile users. The mobile view of your site is so small that the old preview console would obscure most of the page. This made both navigating and debugging way harder. But now with our debugger tucked neatly away in a different tab, we can see all that information quite nicely now.

Website in GTM preview mode in mobile view

Debugger Records Events Across Different Pageviews

If you check out the Tag Assistant debugger, you’ll notice some changes in the events menu on the left. In the old preview mode, we had a simple list of events tracked on the current pageview.

Now, we see different pageviews in these dropdown menus. Under each dropdown is a list of all the events recorded for that pageview. (You can expand and condense these by clicking the arrow next to the pageview.)

Tag Assistant window with pageview events in events menu highlighted

What makes this change so special? This record of multiple pageviews helps us get around some major inconveniences that we had with the old GTM preview mode.

For example, say you have a Tag that is triggered when a user clicks on a button that navigates them to a new page. With the old preview mode, you wouldn’t be able to see the Tag fire in your preview console because the events would disappear when you were sent to the new page. 

There were some workarounds, like opening the link in a new tab, but they were tedious and inelegant. With the new GTM preview mode, all of your events and Tags will be visible even if you navigate to a new page.

This is a huge improvement over the old GTM preview mode. Now, we can debug Tags across multiple pages. The Tag Assistant records all the pageviews (and their events) during your entire preview session, so you’ll always know what’s going on across your different pages.

💡 Top Tip: Copy Text from the Data Layer In the old GTM preview mode, you couldn’t copy text from your preview console. This made it harder to quickly and accurately build Tags and variables that relied on information from the Variables and Data Layer tabs. Now, you can copy out of the preview mode and paste all kinds of values that you formerly needed to type out manually. Neat!

Event Data Layer in Tag Assistant with some of the script highlighted for copying

New Event Field: API Call

You’ll notice that the events for each pageview are numbered. Otherwise, most of these events and their data fields will look very familiar—at first.

Just like in the old preview console, you can check out the variables, the Data Layer, and any errors that may have occurred. But you’ll also see something new. At the top, there’s a field named API Call.

Tag Assistant window with API Call field highlighted

Formerly, we’ve referred to the timeline of events in the waterfall menu as an “events menu” (at least in our videos and blog posts). When a page loads, it shows which items have loaded and in what order. These items are essentially our API Calls.

The API Call field describes the script that loads for each call. In many cases, these will be Data Layer pushes that include the event names in the script.

For many GTM users, this isn’t a huge change. It’s really just extra information on how your tracking code itself is functioning. That said, I imagine our future guides will refer to an event in GTM as an API Call. It’s certainly helpful to have a definitive term for each script event.

Debug Multiple Containers at Once

If you’ve been peeking at my events menu in my debugger, you may have noticed that I have two API Calls for loading a GTM container. This isn’t a bug.

Tag Assistant events menu with two Container Loaded events highlighted

On this demo site, I’ve installed Google Tag Manager multiple times using both the Google Tag Manager for WordPress plugin by Thomas Geiger and a manual installation in my theme header file. With these separate installations, I’ve installed a couple of different GTM containers, each with a completely different set of tags for different tracking (and demonstration) purposes.

If you have multiple GTM containers installed on your site, then debugging just got a lot simpler. At the top of your Tag Assistant window, you have a drop down menu where you can choose any of your GTM or Gtag implementations to debug.

Tag Assistant GTM container dropdown highlighted with three container options

With the new dropdown menu, you can switch effortlessly between any of your Google tracking implementations without leaving preview mode. Thanks to this feature, you can run through some potential user actions and check your tags in all of your containers at once.

💡 Top Tip: Debug Cross-Domain Tracking in One Window If you have Google Tag Manager installed on two linked domains, you can debug your cross-domain tracking all in one window. Initially, the domain will not be recognized and you won’t have a log of what’s happening on your second domain. But if you go to the Domains screen on your Tag Assistant, you can connect your two domains to start tracking them together. Then, you’d be able to go seamlessly from one domain to the next.

Debug in Multiple Tabs with the Tag Assistant Extension

Now that Google has released the new GTM preview mode under the name “Tag Assistant,” what does this mean for the Tag Assistant browser extension?

If you’ve been using Google Tag Manager or Google’s Global Site Tag for any length of time, you should already know about the Tag Assistant browser extension. This extension was always super helpful for debugging any Google tags.

Since GTM’s new preview mode is also called the Tag Assistant, you might be fearing that our beloved little extension has been made obsolete. On the contrary—it has now become part of a complex but awesome debugging ecosystem.

If you ever tried debugging on multiple tabs at once on the old system (maybe when tracking button clicks, for example?), you know that you had a separate preview console at the bottom of each tab. This meant flipping between tabs to check each tab’s individual Tags.

With your Tag Assistant extension enabled, go ahead and try opening up multiple tabs in preview mode. Everything shows up in your single Tag Assistant window! But how do you tell each tab’s events apart?

Check out this colorful set of icons—a blue diamond, a tiger emoji, and a yellow square. Each of these signals that the event is from a specific tab. You can now distinguish events from separate tabs all inside one Tag debugger system.

Tag Assistant with pageviews from multiple tabs highlighted, icons are a yellow square, a tiger emoji, and a blue diamond

To know which tab each icon belongs to, just open one of the tabs and check out the Debugger connected popup in the bottom right corner. The icon for that tab will display on the left side of the popup’s text. Nifty.

Website in GTM preview mode with blue diamond tab identifier icon highlighted

The icon shapes and colors are totally randomized and don’t mean anything except for which tab it identifies. So if one of your tabs has a green circle and another has a red square, don’t worry—it doesn’t mean that your system is broken or faulty. 

And while the Tag Assistant extension certainly makes the debugging process easier, you’re certainly not required to install it in order to debug your Tag system. This means that you don’t have to worry about being locked into the Chrome ecosystem if you use a different browser. And speaking of browsers… 

🚨 Note: Find and fix any issue in your container with the new feature Google Tag Manager container diagnostics.

No More Cookies! Use Any Browser You Want

If you’re a Safari user, this may be your favorite update. GTM’s new preview mode has completely done away with cookies.

Why is this important? The old GTM preview mode relied on third-party cookies in order to track down your events. (This is what also limited your Summary to include only events from a single pageview.)

Now, lots of browsers block all third-party cookies by default, such as Safari and Firefox. You can also adjust the setting of most other browsers, including Chrome and Edge, to block third-party cookies.

This was a huge pain for GTM users on browsers that block third-party cookies. There were some workarounds, but it was a big inconvenience. In the new GTM preview mode, this hurdle has been resolved. The preview mode is also just more stable without the reliance on cookies.

🚨 Note: For now, you may still need to disable any third-party ad blockers or popup blockers to use the new GTM preview mode. Otherwise, your debugger may not connect correctly to your website.

Debugger popup could not connect to website, so disable third-party ad blockers

How to Use the New Preview Mode

To use the new preview mode, you’ll click the same Preview button on your workspace as before.

When you do, the Tag Assistant tool will launch on a new tab. Here, you’ll need to enter your website’s URL in order to connect it to the Tag Assistant.

GTM Tag Assistant requires the URL to configure your preview and debug mode

Once you click Start, GTM will launch your website in a separate tab. This is where you’ll be doing all of your testing and debugging.

How to Navigate the GTM Preview Mode

You’ll know that you successfully connected your website and container to the Tag Assistant if you see this box in the lower-right corner of your window.

When your debugger is successfully connected, you'll see a small popup in your window

The little icon on the left may be different—that’s ok! The icon is only for identification purposes if you’re debugging multiple tabs at once.

In the Tag Assistant tab, you’ll find that the interface looks a lot like the tiny console that used to appear on the bottom of your window in the old preview mode. You’ll navigate it really similarly, too. It’s just a lot bigger and easier to find things now!

On the left, you’ll get a list of every pageview recorded in preview mode, including all of their associated API calls . At the top of that list, the Summary gives you overall session information, including any Tags that fired and the most current Data Layer values.

Google Tag Assistant tab now includes a summary of the whole session while in preview mode

Each pageview’s contents can be minimized, and API calls display their variables in a much more legible table. You can even copy text from your Variables table and Data Layer field, which wasn’t available in the old preview mode!

Pageviews in the Tag Assistant can be minimized or expanded to show all their associated API Calls

If you want to debug across multiple tabs, then different tabs (and user flows) will be labeled with a unique icon next to the pageview listing. You can also debug the same pageviews and API calls across multiple GTM Containers by clicking on the Container ID at the top of the Tag Assistant. 

Pageviews across different tabs all in preview mode are identified by unique emoji-like icons

How to Close Preview Mode

There are two ways to exit the GTM preview and debug mode.

First, you can go to any tab with your website. On the Debugger connected window, click on the X to stop debugging. This will disconnect the Tag Assistant from all tabs that are currently in preview mode.

"Debugger connected" window with X button highlighted

The other way to close preview mode is to go to the Tag Assistant tab and click the X next to your domain name.

Tag Assistant window with X button highlighted

None of your tabs will be closed automatically, so you can either reconnect the debugger or continue to work on other things outside of preview mode at your convenience.

Tips for using the GTM Preview mode

  • Always ensure that your browser’s ad blockers or extensions aren’t interfering with the GTM Preview mode.
  • If you’re working on a site with Content Security Policy (CSP), ensure that GTM is whitelisted.
  • Remember to refresh the Preview mode if you make changes in your GTM container.

FAQ

Can I debug across multiple tabs in the new GTM preview mode?

Yes, you can debug across multiple tabs. Different tabs and user flows are labeled with unique icons next to the pageview listings, making it easier to distinguish them. You can also debug the same pageviews and API calls across multiple GTM Containers by clicking on the Container ID at the top of the Tag Assistant.

How can I exit the GTM preview and debug mode?

There are two ways to exit the GTM preview and debug mode. First, you can go to any tab with your website and click on the X button in the “Debugger connected” window. This will disconnect the Tag Assistant from all tabs in preview mode. Alternatively, you can go to the Tag Assistant tab and click the X button next to your domain name. None of your tabs will be closed automatically, allowing you to reconnect the debugger or continue working outside of preview mode.

Are there any changes to the functionality of GTM preview mode?

While there are visual changes in the new preview mode, most of the functionality remains preserved. In fact, some functions are even improved, such as events being preserved across pageviews, the ability to debug multiple containers, and the elimination of third-party cookies.

Why are there always three events on every page?

In Google Tag Manager, every time you load a page with the Preview mode enabled, you’ll notice three events: Page View, DOM Ready, and Window Loaded. These events represent different stages of the page loading process and can be crucial for triggering tags at the right moment.

Summary

Overall, there are plenty of new things to get used to. You may love some of the changes and hate others. There will probably be some adjustments and debugging from Google over the next couple of weeks, but this is essentially the new GTM preview mode.

If you can get through some of the visual changes, you’ll find that most of the functionality is preserved.

And thanks to events preserved across pageviews, the ability to debug multiple containers, and the elimination of third-party cookies, some functions are better than ever.

I wish you well in your new relationship with GTM preview mode, and I’d love to hear about your experience with it!

If you want to make sure that you know all the “essentials” of GTM, check out our in-depth Google Tag Manager tutorial.

What are your favorite new features? What do you miss about the old preview mode? Have you discovered any other changes that I missed here? Leave a comment below!

Sign up to the FREE GTM for Beginners Course...

[wpforms id="9076262" title="false" description="false"]

Julian Juenemann

Julian is the web analytics instructor and the owner of MeasureSchool. He has 10+ years of experience in teaching analytics tools such as Google Analytics, Google Tag Manager and Looker Studio. He founded MeasureSchool to help marketers with the data-driven way of digital marketing.

Related Posts

The Best Google Tag Manager Extensions Tools

Top 11 Google Tag Manager Extensions

Usman Qureshi

First-Party Mode for Hosting Tags on Your Domain blog featured image

Google Tag Manager First-Party Mode Guide

Eric Huguenin

Google Analytics 4 Email Tracking blog featured image

Google Analytics 4 Email Tracking [Ultimate Guide]

Eric Huguenin

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jessica
Jessica
2 years ago

Hi, I’m getting two “Container Loaded” API calls like you did, but I don’t necessarily want an extra one. I also only have one GTM implementation. Any idea how to fix this so I only have one? Thanks!

NOW IT'S TIME TO

Start Measuring Like A Master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.

Ready to take your digital marketing to the next level?

Subscribe to our newsletter and stay ahead with our latest tips and strategies.