Why doesn’t my tag fire? What data can I send 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’s going on. One of the most important, yet commonly overlooked steps in the GTM process is debugging. It allows us to ensure that every possible user experience scenario is tested and data consistency is validated. In this guide, I’ll show you how to utilize Google Tag Manager Debug mode and share some best practices.

 

What Is Google Tag Manager Debug Mode?

Google Tag Manager Preview and Debug (P&D) mode allows you to browse a site on which your GTM container code is implemented. Sites with preview mode enabled will display a debugger pane (a.k.a. console) at the bottom of your browser screen so that you can inspect which tags fired and in what order.

Google Tag Manager Debug Mode

 

Enable PReview And Debug Mode

To enable Google Tag Manager Debug mode, click Preview button in the top right corner of your GTM interface (near Submit button).

Enable Google Tag Manager Debug Mode

After you enable P&D mode, a large orange notification banner will appear.

Google tag manager preview notification

Now, navigate to the site where the Google Tag Manager container code is implemented, refresh the page and a debug console window will appear at the bottom of your browser, showing detailed information about your tags, including their firing status and what data is being processed.

This console window will appear only on your computer as you preview the site, and is not visible to your other website visitors.

Important: If you’re having difficulties with Preview and Debug mode, read the guide on how to fix it (click the button below).

The layout of Preview and Debug console

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

Google Tag Manager Debug Mode

  1. Event Timeline. Displays all events that occur in the Data Layer (e.g. page views, form submissions, clicks, etc.). Do not mistake them for Google Analytics events. These are totally two different concepts, which I have discussed in another blog post.
  2. Tags. Displays which tags fired on the selected event and which ones didn’t.
  3. Variables. Displays detailed information about variables in the selected event, including the type of variable, the type of data returned, and the resolved value.
  4. Data Layer. Displays the exact message object as it was pushed to the data layer for the selected event, and what the data layer looks like after the message transaction is complete. All data points available here can be turned into variables (which then will appear in Variables tab). Continue reading to learn more.

 

Event Timeline

All events that occur in the data layer are displayed on the left side of the Preview and Debug console, Event Timeline. Every time a page loads, there must be three events displayed in the list – Page view, DOM ready and Window loaded.

If you see more events (for example, Message), that’s fine. But it’s important that all three aforementioned events appear in the list. If you’re missing Page view event, there’s probably a case of broken data layer. I have published a blog post, which explains both the problem and the solution when page view event does not appear in GTM P&D mode.

 

Why are there always three events?

What do they mean?

Pageview event (a.k.a. gtm.js) is the earliest moment in the entire Page Load process when our tracking scripts can be fired. That’s when you should fire Google Analytics page view tracking script or Adwords remarketing tags. Even if the page hasn’t finished loading, your tracking script will be already launched.

DOM Ready event (a.k.a. gtm.dom) occurs when website’s HTML is rendered and visitor starts to see elements of your website.

Window Loaded event (a.k.a. gtm.load) fires only when everything else (including Javascript) finishes loading.

If you have tags that are not so important but still must fire on every page, I recommend linking them with DOM Ready or Window Loaded events/triggers. Browsers limit the number of HTTP requests that can happen at a time. Firing all tags with Page view might cause some issues.

This situation can also be resolved by implementing tag priorities or tag sequencing.

 

What Are Other Possible Google TAg MAnager Events?

Actually, the list of events is endless. Let me explain.

Google Tag Manager offers a list of built-in triggers, such as page view (incl. previously described Page view, DOM ready and Window Loaded), click (link click and click of any element), form submission, timer, history change, Javascript error.

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

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

So why did I say that the list of GTM events is endless? It’s because of the last type of trigger, called Custom.

Custom google tag manager event

Custom event is an event defined by you, your developer, or a 3rd party solution which is implemented on your website.

As an example I’d like to mention is Facebook LIKE tracking recipe which is available in my library of GTM recipes. After that recipe is imported to your Tag Manager container, it starts monitoring all Facebook LIKE clicks. After one occurs, a data layer event (called social interaction) fires.

social interaction event

Custom events are also important when you’re tracking Youtube, Vimeo, Scroll depth, Form abandonment, etc.

When you click any event in the timeline, you can see which tags fired and which ones didn’t. That’s where Tags tab becomes super important.

 

Tags

This tab displays all available tags separated between those that fired on the selected event and those that did not. What makes this section really awesome, is the ability to find out the exact reason why a particular tag did or didn’t fire.

Choose any event in the Event Timeline (1) and then click the tag you’re interested in (2).

Tags tab in GTM preview and debug mode

What you’ll see is a much more detailed view of what happens with that tag:

  • Properties of the tag.
  • Triggers of the tag.
  • Blocking triggers.

Event in Preview and Debug mode

If you’re using more complex triggers with several conditions, you can see the status of each condition (take a look at the screenshot below). Green checkbox indicates that the condition was met, otherwise a red X appears.

Separate conditions of one GTM trigger

Variables

OK, let’s head over to Variables tab. It displays detailed information about variables in the selected event, including the type of variable, the type of data returned, and the resolved value.

Variables in Google Tag Manager Preview mode

These variables are at your service. You can include them in any tag you want, whether it’s Google Analytics event tag, Mixpanel event tag, or anything else. Variables can be included by surrounding them with curly brackets {{ }}. Take a look at the example below.

Insert Variable in GTM

Switch between GTM events (in Events Timeline) and you’ll see how values of variables were changing depending on context.

 

Data Layer

Data Layer tab is the most undervalued and totally untapped part of GTM debug console, which is forgotten by beginners and (especially) intermediate users.

This tab shows the exact message object as it was pushed to the data layer for the selected event, and what the data layer looks like after the message transaction is complete.

In other words, you can see all data that is currently available in the data layer and what values were available after every Google Tag Manager event. And the best part: every data point (pushed to data layer) can be turned into a variable in Google Tag Manager.

Variables tab (of Google Tag Manager Debug pane) displays only those variables, which are configured in Google Tag Manager interface, e.g. Page Path, Page URL, etc. So if you have something interesting in data layer that you’d like pass to Google Analytics, you’ll need to create a data layer variable in GTM interface.

Turn data layer variable into GTM variable

Here’s an example. For my WordPress blog I’m using DuracellTomi’s GTM plugin, which is pushing some data with each page load: pagePostType, pagePostType2, pageCategory, pagePostAuthor.

duracelltomi gtm event

These four data points do not appear in my Variables tab, because I haven’t created them in my GTM user interface as Data Layer variables.

Say, you want to send a Google Analytics event when someone leaves a comment. With every event you also want to push article author’s full name. This way you’ll see which authors drive the highest reader engagement.

In Google Tag Manager account, you should go to Variables and create new one with the following settings (dlv stands for data layer variable):

post author data layer variable

After you refresh P&D mode AND your website in browser window you should see a new variable in Variables tab with every new page load. Later on, you can include that {{dlv – Post Author}} variable in Google Analytics event.

Comment event variables in GTM

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

Share or Exit

Remember, when you enable preview mode, the previewed container configuration and debugger pane are only visible from the same browser from where you activated preview mode.

However, you may share your preview with others using the share preview feature. Click Share Preview in the preview notification banner.

Share Google tag manager debug preview

This brings up a dialog box where you can copy a URL to send to someone else. Enter the website domain (you are currently working on) and copy the generated preview URL in the box below.

Share preview in GTM

You can then send the preview URL to another person. The preview URL will take the user to a landing page where they will be informed that their browser has been enabled for preview mode. There will also be a link on the landing page to disable preview mode for that browser.

Make sure that person has also enabled 3rd party cookies in his/her browser. If Preview and Debug pane does not appear, read this blog post.

After you finished debugging your Google Tag Manager implementation, click Leave Preview Mode link in the orange notification bar.

 

Few More Tips

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

  • If Google Tag Manager Debug console is taking too much space of the screen, you can easily resize it by dragging its top border up or down, or you just can simply hide the entire pane by clicking down-arrow icon located in its top right corner.
  • If you see “Message” event  prior to Page view event in Preview and Debug console’s Event Timeline, do not worry. This means that your developer, plugin or particular 3rd party solution pushed some data into Data Layer before Google Tag Manager container snippet was event loaded. Use GTM debug mode to explore what exact data was pushed at that moment, maybe you’ll find something useful!
  • Although Google Tag Manager debug mode is very important part of tag deployment, it’s not the only tool you should be using. Here is a list of Google Tag Manager Chrome extensions which will make your work much easier.
  • If you’re debugging Google Analytics events, ALWAYS check them in GA Real-time reports. It’s the best way to verify and react to errors without any delay.

 

Conclusion

Google Tag Manager debug mode is an essential part of tag deployment which helps us ensure that every possible user experience scenario is tested and data consistency is validated.

It brings us the full transparency of what’s happening under the hood, what data is being fetched or pushed, why a certain tag isn’t firing, etc.

And the best past, it is fairly simple to use even for non-developers, which makes it even more attractive for regular marketers.

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

Julius Fed

Head of Developer Operations at Omnisend. I am highly interested in Google Tag Manager, Google Analytics, Adwords, Email marketing, Email Deliverability, Digital Marketing in general. You can follow me on Twitter.