Does Tutorial Mode Questions in U World Wont Be Shown Again

Updated: Jan 1st, 2022.

Why doesn't my tag fire? What data can I ship to Google Analytics? Why didn't this trigger work?

When it comes to Google Tag Manager, we sometimes run into trouble that requires further investigation of what'due south going on. 1 of the most of import, notwithstanding ordinarily disregarded steps in the GTM process is debugging. Information technology allows us to ensure that every possible user experience scenario is tested and data consistency is validated.

In this guide, I'll show you lot how to employ Google Tag Manager Preview way (too known as Preview and Debug mode) and share some best practices.

Tabular array of contents

+ Prove table of contents +

• Video tutorial
• "One-time" vs "New" Preview mode. Why did information technology change?
• What Is Google Tag Director Debug Fashion?
• Enable Preview And Debug Mode
• The layout of the Google Tag Manager Preview folio
  • Effect Timeline
    • Why are there always three events on every page?
    • What Are Other Possible Google Tag Manager Events?
  • Tags
  • Variables
  • Data Layer
  • Errors tab
• Refresh/Share/Go out
  • Refresh the preview way
  • Share GTM Preview way
  • Get out the preview mode
• Debugging multiple domains
• Debugging gtag.js
• Enhancements with Tag Banana Chrome Extension
• Exclude tagassistant.google.com referral and remove gtm_debug=x from URL
• If Google Tag Manager Preview fashion is not working
• Few More Tips
• Google Tag Manager Preview fashion: Conclusion

Video tutorial

If you lot prefer video content, I have recorded and published a tutorial on my Youtube Channel. However, if you are looking for a deeper swoop into the topic, yous should also read this blog post.

"Quondam" vs "New" Preview mode. Why did it change?

If you lot watched/read Google Tag Managing director tutorials posted before October 16th, 2020, you will notice that the older version of the Preview way looks quite unlike.

As well, you might stumble upon debates where some people detest the new preview mode and wonder why on earth did Google endeavor to "fix something that isn't broken".

In this state of affairs, I just wanted to point some things why the preview mode (that you currently see) was a necessary step in its evolution.

3rd party cookies

The older Preview mode depended on third party cookie assail googletagmanager.com domain. If the cookie is not stored on your browser, the preview mode never works. This becomes a default problem/challenge if you try to debug with Safari, Chrome's incognito manner, or any other browser that blocks tertiary party cookies.

Eventually, the entire industry volition move abroad from 3rd party cookies. Significant that it was but a matter of time when the older version of the preview mode would have stopped working completely.

Google Tag Manager's team had to motion away from 3rd party cookies and switch to the first party storage. And they did it with the new preview style in 2020. From now on, it depends on the 1st party cookie and localstorage.

Other known bugs/inconveniences

Together with that change, they have stock-still many problems that were irritating us in the past, like:

• Disability to copy from the Information Layer tab
• Disability to work across multiple windows
• Inability to preserve the data in the Data Layer while navigating betwixt pages, etc.

Yes, some of the benefits were taken away (like the power to have a compact single-window experience) but to sum upwards, there are more pros than cons.

What Is Google Tag Managing director Debug Manner?

Google Tag Manager Preview mode (a.k.a. Preview and Debug mode a.grand.a. P&D) allows you to scan a site on which your GTM container code is implemented and preview which tags are firing, what kind of data do they send to analytics/marketing platforms, etc.

When you enable the preview manner in the Google Tag Manager interface, you volition end up with 3 browser tabs (or ii tabs and one boosted window):

Why is preview way needed at all? Because in that location is zip worse than working with GTM blindly and trying to estimate if your setup is working or not.

Google Tag Managing director's preview mode lets you:

• See which tags have fired on particular website interactions (e.1000. a link click or form submission)
• Which tags did non fire
• The reasons why certain tags fired or didn't fire
• What kind of variables (and their values) were available on the page
• How Data Layer was changing on the page when various interactions were happening, etc.

Personally, I usually never trust my gut when it comes to modifying my GTM setups. I always test them, even the minor ones. Because it's the worst to find out (after several days (or perhaps weeks)) that your contempo change broke something in the analytics setup.

Ever test. Then Publish your changes live.

Now, let'due south take a look at how the preview mode works and how to work with it.

Enable Preview And Debug Manner

To enable Google Tag Director Debug fashion, click Preview button in the top right corner of your GTM interface (well-nigh Submitbutton).

If you ever stumble upon older GTM tutorials (published before the October 16th, 2020), they will tell you that an orangish banner must appear in the GTM interface (when the preview mode is enabled). That is no longer truthful. From October 16th, 2020, the orange banner is gone.

In one case you click the Preview button, a new browser tab volition open withtagassistant.google.com. If it does not, read this guide.

A popup there will enquire you to enter the URL which yous want to exam and debug. It might be the address of a homepage or it might be a specific page'southward URL so pressStart.

A new browser tab (or window) should announced where y'all will encounter the URL that yous entered in the previous popup. If the page does not work, try to enable the preview mode over again and and then disable this checkbox in the preview's popup:

At the bottom of that page/tab, you must see the following badge:

And if you go back to thetagassistant.google.com tab, you must meet this success message.

If you don't see the success message or if the preview badge shows that the debugger is not connected, read this.

The layout of the Google Tag Managing director Preview page

Google Tag Manager Debug mode (a.k.a. Google Tag Manager Console or just GTM console) consists of half-dozen main parts:

1. Upshot Timeline. Displays all events that occur in the Data Layer (eastward.thou. page views, form submissions, clicks, etc.). One item = ane event (a.1000.a. dataLayer.button). Exercise not mistake them for Google Analytics events. These are totally 2 different concepts, which I have discussed in another weblog post.
2. Tags. Displays which tags fired on the selected data layer event and which ones didn't.
3. Variables. Displays detailed data about variables in the selected issue, including the type of variable, the type of data returned, and the resolved value.
4. Information Layer. Displays the exact message object as it was pushed to the data layer for the selected event, and what the data layer looks similar after the bulletin transaction is complete. All data points available hither can exist turned into variables (which then will appear inVariables tab). Continue reading to learn more.
5. Errors. If you notice whatever number in the tab (rather than 0), click it and run across what is the crusade.
6. Header. Here you can see the status of the Preview mode (whether it is connected to the newly opened website window or non). Also, if you have Universal Google Analytics implemented via gtag.js, or yous are running Google Analytics four on your site, you volition see a dropdown to switch between

Event Timeline

All events that occur in the data layer are displayed on the left side of the Preview and Debug panel, Event Timeline. Every time a folio loads, there must be three events displayed in the list – Container Loaded (previously known as Pageview), DOM fix, and Window loaded.

If you come across more events (for example,Bulletin), that's fine. But information technology's important that all three aforementioned events appear on the list of every folio.

If you're missing the Container Loaded outcome, there's probably a instance of the broken data layer. I accept published a weblog post, which explains both the trouble and the solution when Container Loaded event does non appear in GTM P&D mode.

Too, when you lot navigate from one folio to another on your website (that you are debugging), all events in the preview fashion volition be grouped based on those pages.

Why are there e'er three events on every page?

What do they mean?

Container Loaded (a.k.a. gtm.js) is the earliest moment when GTM starts loading and when our tracking scripts tin exist fired. For example, that's when you should fire the Google Analytics page view tracking tag. Even if the folio hasn't finished loading, your tracking script will be already launched. Previously, this issue was called Pageview.

DOM Seteffect (a.k.a. gtm.dom) occurs when the website's HTML is downloaded, the page's document is rendered and a visitor starts to see elements of your website. Acquire more.

Window Loaded event (a.k.a. gtm.load) fires merely when everything else (including Javascript) finishes loading. Acquire more than.

What Are Other Possible Google Tag Manager Events?

Actually, the list of events is endless.

Google Tag Manager offers a list of built-in triggers, such as page view (including the aforementionedPage view, DOM ready and Window Loaded), click (link click andclick of whatever element), grade submission, timer, history change, Javascript error.

After a trigger is enabled, it starts looking for item interactions on your website. For example, Form submission trigger is looking for form submissions, Link Click trigger is waiting for interactions when a visitor clicks any link.

When the desired interaction occurs, that event appears in the Consequence Timeline.

So why did I say that the list of GTM events is endless? It's considering of the terminal type of trigger, calledCustom.

A custom upshot is an event divers past you lot, your developer, or a 3rd party solution that is implemented on your website.

If you desire to acquire more about the custom event tracking, accept a await at the video beneath (just keep in mind that in this video, I was using the older version of the preview mode):

When you click whatsoever event in the timeline, you tin can come across which tags fired and which ones didn't. That's whereTags tab becomes super important.

This tab displays all available tags split into 2 groups: those that fired on the selected event and those that did not. What makes this section really awesome, is the ability to discover out the exact reason why a particular tag did or didn't burn.

Choose any event in the Event Timeline (ane) and so click the tag you're interested in (ii).

What you lot'll come across is a much more than detailed view of what happens with that tag:

1. Backdrop of the tag.
2. Triggers of the tag.
3. Blocking triggers.

If yous're using more complex triggers with several conditions, y'all tin run into the status of each status (take a look at the screenshot below). The dark-green checkbox indicates that the status was met, otherwise, a cherry X appears.

Also, in the peak-right corner of the preview way (while you lot nevertheless have clicked the tag, you can switch between "Names" and "Values". This will affect how variables are displayed in your tag.

If you chooseNames, you will see their bodily names but if y'all want to see their values at that particular moment, switch toValues.

For me, switching to "Values" is more convenient, information technology allows me to quickly place what values were sent to my analytics/marketing tools.

Likewise, you can chop-chop verify whether the values in your trigger friction match your requirements.

VERY IMPORTANT: Exercise not debug individual tags while having aSummary selected to a higher place the effect timeline. This is an incorrect way to practice. E'er, select the effect in the event stream starting time and only and so click the tag to debug.

Variables

OK, let's caput over to theVariables tab. It displays detailed information almost variables in the selected event, including the type of variable, the type of data returned, and the resolved value.

These variables are at your service. You can insert them in any tag, trigger you want (or even other variable), whether it's Google Analytics event tag, Mixpanel result tag, or anything else. Variables tin can be included by surrounding them with curly brackets {{ }}. Take a look at the example beneath.

Switch between GTM events (in the timeline) and you lot'll come across how values of variables were changing depending on the context.

Data Layer

Data Layer tab is the probably virtually undervalued office of GTM preview console among beginners (and quite oftentimes, among fresh intermediate users as well).

This tab shows the exact message object that was pushed to the data layer for the selected result, and what the information layer looks similar subsequently the message transaction is complete.

In other words, you can come across all information that is currently bachelor in the data layer and what values were available afterward every Google Tag Manager event. And the best office: every data betoken (pushed to information layer) can be turned into a variable in Google Tag Director.

Even if you lot run into some useful information in the Data Layer tab, y'all cannot use it in GTM until you create variables for them.

Variables tab (of Google Tag Director Debug pane) displays only those variables that are configured in Google Tag Managing director interface, due east.grand. Page Path, Page URL, etc. So if you have something interesting in the information layer that you'd similar to pass to Google Analytics, you'll demand to create a information layer variable in the GTM interface.

Say, you desire to send a Google Analytics issue when someone leaves a comment. With every consequence, you also want to button the commodity author's full name. This way you'll see which authors drive the highest reader engagement.

In Google Tag Manager business relationship, you should go to Variables and create a new one with the following settings (dlv stands fordata layer variable):

After yourefresh P&D mode AND your website in the browser window y'all should see a new variable in theVariablestab with every new page load. Afterwards on, you can include that {{dlv – Post Author}} variable in Google Analytics (or any other) tags.

In my other blog post, how to track AJAX forms with Google Tag Manager, I accept explained how you lot can dive deeper into the data layer, pull nested values and plough them into GTM variables. That uncomplicated technique has already been useful then many times, I can hardly imagine how I used to work without it.

Errors tab

I don't visit this tab very often (because not many tags actually throw errors that are displayed there). But if yous discover any number in the tab (rather than 0), click information technology and see what is the cause. This tab displays if a GTM Tag Template failed to fire due to an fault. Here's a quick guide about information technology.

Refresh the preview mode

The current menses is not very convenient simply it volition be fixed past the GTM team in the future.

If you make some changes in the container and y'all want to preview them on the website, you lot must refresh the preview fashion. Just reloading the website will not help.

To practice that, tou must go to the Google Tag Manager interface and pressPreviewonce over again. And so complete the steps and the preview mode will be reloaded.

Yes, this is not very convenient but hopefully, this will be fixed by the GTM squad shortly.

In lodge to share the preview mode with someone, first, you need to enable the preview mode yourself and then in the top right corner, click 3 dots > Share.

And then a popup will appear where you volition take to:

1. Enter the link of the website where the preview mode should be enabled
2. Select which container to enable (if there are multiple GTM Containers or GTAGs). IMPORTANT: you must select the GTM container in the dropdown
   
3. Copy the link and share it with someone you wish

Another choice is to click the X icon in the top left corner (while you are in the preview style), and so enable theContinue the domain…enabled for debugging checkbox and click Close debugger.

Then you lot will see the listing of all preview modes that yous have enabled. Adjacent to the preview that yous wish to share, click three dots, and then clickShare.

After you click it, the same popup will appear.

If you lot have enabled the preview mode quondam in the past, just go totagassistant.google.com and complete the aforementioned steps that I have described higher up.

Exit the preview mode

If y'all want to get out the preview mode, the all-time fashion is to click the X icon in the Preview way's badge (that is displayed at the bottom right corner of your website).

If that did not help and you continue seeing that bluecoat on every pageview of the website, read this guide.

Debugging multiple domains (with the same container)

If you are working with multiple domains (that are part of the same customer journeying) and those domains are using the same Google Tag Manager container, you will need to enable the preview mode on both domains.

First, open tagassistant.google.com (or just click Preview button in the GTM Interface) and enter the domain of the second website. Complete all the necessary steps to enable the preview fashion.

And so (also ontagassistant.google.com) click the X icon in the superlative left corner + selectKeep the domain XXXXX enabled for debugging. Click Close Debugger. That way, y'all'll keep the 2nd website in the preview way.

Then press either the Preview button in the GTM interface OR Add domain button intagassistant.google.comand add the domain of the 1st website. Complete all the necessary steps until the website 1 is opened in a new tab or window.

What we have done here is that we set the_TAG_ASSISTANT=X first party cookie on both domains (and this is needed for the preview mode to work). That's why y'all can now navigate between both domains in the preview mode and you'll see all the events/information coming from both websites.

Debugging iFrames

The new preview way also supports debugging iFrames. But there are more than things related to this, hence I take published a dissever web log post.

Debugging gtag.js

If you have GTAG (a newer Google Analytics/Google Ads tracking code) running on your site (or if you have implemented Google Analytics 4), you will also be able to view hits with the new Preview way (because they are send with gtag() commands).

After you enable the Preview and Debug mode on a certain domain, you lot tin can switch to some GTAG ID in the dropdown card (in the upper-left corner).

Also, if y'all are working with Zones (that's a GTM360 feature), y'all will be able to find zone containers there as well.

If you switch to debugging GTAG, y'all might see different content of the event timeline, besides, some of the tabs will be gone (like Tags and Variables). Instead you lot will see hits that were sent and, Data Layer, and Errors.

Feel costless to click on those hits and meet what kind of parameters were sent with a gtag.js request.

Enhancements with Tag Assistant Chrome Extension

If you want, you can improve the Preview mode by installing a browser extension called Tag Assistant Companion. This is especially useful if you hate when your website (during the debug) is opened in a new window (at least this is what happens on Google Chrome).

With the extension installed, your website will be opened in a new tab (instead of a window) when you enable the preview mode. This ways that you can use things similar mobile debugging again.

Too, y'all will be able to debug multiple tabs at the same time.

Furthermore, y'all will notice some shapes/emojis appear in the outcome timeline and in the Preview style'southward badge (on your website). These are added to help you quickly distinguish which window is currently being debugged.

In my video (at the beginning of this tutorial), I too showed that you can encounter those shapes/emojis in the Folio Title. Unfortunately, that characteristic was quickly removed after the launch due to multiple complaints from users (this feature polluted reports that contained Page Championship).

Also, the Tag Assistant Companion helps y'all debug iframes.

Exclude tagassistant.google.com referral and remove gtm_debug=x from URL

With the new preview mode, you will first seeing some traffic coming from tagassistant.google.com (that means that your own sessions might be coming from it). Besides, in your GA reports, you'll start seeing some pageviews contain gtm_debug=ten.

In both cases, if this is a problem for you, I'd say that you should definitely exclude your ain traffic from GA reports.  To do that, go to Admin > Holding > Tracking info > Referral Exclusion List and add togethertagassitant.google.com.

Speaking of the gtm_debug=x in the reports (and removing it), follow this guide.

If Google Tag Manager Preview way is non working

If you are struggling with the Preview and Debug way (east.g. information technology is not displayed), read this troubleshooting guide. I keep this blog postal service as updated as possible.

Few More Tips

Here are a few more quick tips that did not fit in any previous chapter of this blog post:

• If y'all see the "Message" upshot prior to Page view event in Preview and Debug panel's Consequence Timeline, do not worry. This means that your developer, plugin, or particular tertiary political party solution pushed some data into Data Layer but that dataLayer.push did not incorporate an "event" cardinal. Employ GTM debug mode to explore what exact data was pushed at that moment, possibly you'll discover something useful!
• Although Google Tag Managing director debug mode is a very important part of tag deployment, it's not the but tool you should be using. Hither is a list of Google Tag Manager Chrome extensions which will make your work much easier.
• If you're debugging Google Analytics events, ALWAYS cheque them in GA Real-time reports. It'due south the all-time fashion to verify and react to errors without any filibuster.
• A whole bunch of other GTM debugging tips is available here.

Google Tag Managing director Preview mode: Conclusion

Google Tag Director Preview mode (a.k.a. Google Tag Manager debug mode or only simply Preview and Debug mode) is an essential part of tag deployment which helps us ensure that every possible user experience scenario is tested and information consistency is validated.

It brings us more transparency to what's happening under the hood, what data is being fetched or pushed, why a sure tag isn't firing, etc.

But information technology is really of import to understand that this is not the only place where you lot should cheque/exam your tag management implementation. There are many more things you need to go on in heed.

Did I miss anything related to Google Tag Director debug mode? If yes, drop me a annotate below.

cortezmarom1939.blogspot.com

Source: https://www.analyticsmania.com/post/google-tag-manager-debug-mode/

Share this post