Google Tag Manager Preview Mode

The new Google Tag Manager Preview mode offers a powerful platform for testing and debugging the implementation of GTM tags and Google Analytics on your website. It allows you to examine in real-time which tags are firing on a web page, which tags are being blocked, what data is being sent to analytics and marketing platforms, and also what other data is available in the data layer.

Before October 2020, Google Tag Manager Preview mode displayed a single pane at the bottom of the webpage you were inspecting. However, the new version of Google Tag Manager Preview mode makes it easier to examine and debug a user journey. Which is done by displaying a timeline of events on a separate window/tab. It has also solved several of the limitations of the old GTM Preview mode.

1. What’s different?

The new Google Tag Manager Preview mode has been renamed Google Tag Assistant because it has been fully integrated with the Chrome extension of the same name. This is slightly confusing, but I would recommend you still add the Google Tag Assistant Chrome extension to your browser. It makes the new GTM Preview and debug mode easier to use.

The new Google Tag Manager Preview mode only uses first party storage because increasingly many browsers automatically block 3^rd party cookies. Unlike first party cookies, 3^rd party cookies are also problematic because they are often blocked by Content Security Policies.

Google Tag Manager Preview mode now opens in a separate window or tab depending upon if you have installed the Google Tag Assistant extension. This requires that GTM Preview mode and the website connects to your GTM container.

Tags are now grouped under each page view and the Preview mode does not refresh each time you navigate to a new a page. This means GTM Preview mode retains the tags fired (or not fired) across multiple pages and so this is a big improvement on the old version.

2. Open GTM Preview Mode:

To enable GTM Preview mode simply click on the ‘Preview’ button in the far right-hand side of your GTM container.

If you have installed the Google Chrome Tag Assistant extension a new tab will open for GTM Tag Assistant. Otherwise a new window will open instead. You may have to enter your full URL, or it may have been prefilled for you if you have used Preview mode on the same site before. Leave the ‘Include debug signal in the URL’ checked unless your website does not support this.

3. Debugger Connected:

You can then click ‘Start’ and new tab will open for the website you are debugging. If GTM Preview mode has successfully opened, you will see the Preview mode widget on the website with the message ‘Debugger connected’.

4. Confirm Tag Assistant is Connected:

Now go back to the Tag Assistant tab and if Tag Assistant has connected you can click ‘Keep on going’ to complete the enabling process. If it doesn’t connect, try unclicking the ‘Include debug signal in the URL’. Check that it is trying to connect to the correct GTM container.

In the header you can also switch to different GTM containers if the correct one does not automatically display as the default container.

To stay connected to GTM Preview mode you must keep the two tabs open and don’t close your GTM container either. A web page can also only be debugged if it was initially opened by GTM Tag Assistant. Thus, you will need to repeat the above process if you want to debug a page in a tab that was not originally opened by Tag Assistant.

Tag Assistant has four tabs; Tags, Variables, Data Layer and Errors. Let’s begin with the tags tab.

5. GTM Preview Mode – Tags:

Tag Assistant always opens on the Tags tab. The header shows whether Preview mode is connected and the website URL that it is monitoring. This also includes the drop-down menu shown above if you have implemented Google Analytics using gtag, js or have Google Analytics 4 on the site. This allows you to switch between them in Google Tag Assistant.

On the left of the page you will see the event timeline which by default highlights the ‘Summary’ view. The timeline displays the events in the Data Layer (e.g. window loaded, container loaded, clicks etc). This is not the same as Google Analytics events because not everything in the Data Layer will trigger a GA event.

The ‘Summary’ view allows you to instantly see which tags have fired since Tag Assistant was opened, and also which tags have not fired. Never use the ‘Summary’ view to debug individual tags as this would be misleading. Always select an individual event (e.g. Container Loaded) first as this will enable you to examine the relevant details.

In the example above, I have selected the first ‘Container Loaded’ event. This shows the pageview tag fired, along with several other tags when the container loaded. If you look at the tags that did not fire and check the last tag in the list, you will see that the SessionCam tag did not fire. This is because the SessionCam tag is configured to only fire after the DOM loads and so we would not expect this to fire on container loaded.

Checking when tags fire will give you a better understanding of how to configure triggers to optimise the performance of your GTM container and also minimise the impact on your site’s load speed.

The Three Default Events:

You will notice there should always be a minimum of three events shown on each page. These are:

Container Loaded: Previously called ‘Pageview’. This represents the earliest opportunity for GTM to begin loading and when it fires your tracking script.

On my website I notice that I get two Container Loaded events in GTM Tag Assistant. One of these is blank and is triggered by Tag Assistant. I used Chrome Dev Tools to validate this which shows this is caused by GTM Preview mode (see below).

DOM Ready: This shows when the webpages HTML has rendered, and the user can view all the elements on the page. This is why GTM gives you the option for tags to wait for the DOM to load, otherwise an element may not be visible on the page.

Window Loaded: This fires when everything else, including JavaScript, has completely loaded.

To inspect an individual tag, click on the tag’s name. This enables you to view:

• Properties, including the tag type, whether it’s a non-interactive hit, category and track type.
• Triggers, which shows you what fires the tag and filters that have been set.
• Blocking Triggers; which displays any triggers which prevent the trigger from firing.

Click on ‘Show more’ if you want to see the event action and label. You can also view the event’s values by selecting this from the top right-hand corner (20).

By selecting values, you can see much more detail about a tag. Including Google Analytics Settings variable, customer dimension values and the event action and label values. This tells you exactly what values are being sent to Google Analytics or other marketing tools.

6. GTM Preview Mode – Variables:

This shows detailed information about the selected event from the timeline. It allows you to examine the nature of the data layer push. Including the Click Classes, element ID, Click Text etc. You can include these variables in any tag, trigger or other variable to configure you GTM container as you need. Variables can be added to a trigger or tag by using two lots of curly brackets {{ }}.

7. GTM Preview Mode – Data Layer Tab:

This tab displays the GTM data model, although it is referred to as the data layer. The data model shows the precise message that is pushed to the data model for the selected timeline event. Remember that every data point shown in the data layer tab can be used to create a variable in GTM to help configure triggers and tags.

The variables tab in GTM Tag Assistant only shows variables that have already been configured in GTM. If you want to use data that is only shown in the data layer you will first need to create a data layer variable to send the data to GTM. Once you have created a data layer variable you will then be able to see that data point in the variables tab.

For example, in the above screenshot, you will see the variable ‘pagePostAuthor’ which captures the author of each post on my website. To allow analysis of the popularity of posts by different authors I might want to capture this in a variable.

8. GTM Preview Mode – Errors Tab:

This tab displays any issues when a tag doesn’t fire properly and so is useful in debugging GTM configuration problems.

9. Share GTM Preview Mode:

You can easily share the GTM Preview mode you are working on with a colleague or agency. Click on the three dots in the top right-hand corner, then select share. You will also need to select which container to enable and copy the link to share.

10. Close GTM Preview Mode:

Once you have completed using GTM Tag Assistant, you can close it by going to the tab with the website and click on the cross. If this doesn’t work, try some of the tips to close preview mode from Julius at Analytics mania.

11. What if GTM Widget Appears on Other Websites?

If you have the Google Analytics Debugger Chrome extension enabled, you may notice the GTM debugger widget sometimes appears on other websites when browsing. This happens even after you have closed GTM Preview mode. To remove the widget from the page you will need to turn off the Google Analytics Debugger Chrome extension. Closing the widget will only refresh the page. Hopefully Google will resolve this bug in the next few weeks, and I can remove this bug from the blog.

Sometimes another GTM container is shown on the Tag Assistant page and so it fails to connect with your website. To resolve this you will need to click on the drop down menu and select the correct GTM container. If there is no dropdown menu, check that your developer has added the correct GTM container ID to your website. Alternatively, check that you have the correct GTM container open.

GTM Preview Mode Conclusion:

The new Google Tag Manager Preview mode is a big improvement over the old version because it opens a dedicated page to examine tags, variables, the data layer and errors. This makes GTM Preview mode much easier to use because you don’t need to keep resizing or closing the window and it doesn’t prevent you from examining the website page you are inspecting.

The biggest improvement though is that GTM Preview mode retains timeline events when you navigate to another page. This means you don’t lose any history and so can easily compare differences in events across multiple pages. This makes the task of testing and debugging a lot easier with the new GTM Preview mode.

In addition, by only using first party cookies GTM Preview mode avoids using 3^rd-party cookies which are increasingly blocked by many browsers. This also helps with strong Content Security Policies which will automatically block 3^rd party cookies.