Menu

#GTMTips: Fix Missing Page View Event and Broken Triggers

If you can't see the Page View event in your Preview mode list, and GTM's triggers work erratically, you most likely have a broken dataLayer implementation.
Simo Ahava in GTM tips on #google tag manager , #gtmtips , #triggers , #datalayer Non-AMP version

Google Tag Manager should be relatively easy to implement. Just paste the container snippet to the <head> of the page and you’re good to go! However, at some point you’ll want to configure the dataLayer structure, too (read more about dataLayer here). There are two ways to do it: the right way and the wrong way.

In this article, we’ll see what happens if you do it the wrong way, how to identify the issue, and how to fix it.

Tip 71: Page View event missing, and GTM’s triggers don’t work?

If you open Preview mode on your site, and look at the list of events in the left-hand side navigation, you should always see the following three GTM default events:

  1. Page View - This is the event pushed into dataLayer in Google Tag Manager’s container snippet (event name is gtm.js).

  2. DOM Ready - This is the event pushed into dataLayer once the page HTML has been rendered by the browser (event name is gtm.dom).

  3. Window Loaded - This is the event pushed into dataLayer once the page and all linked resources have completed load, execution, and render (event name is gtm.load).

You should always see (2) and (3) - there’s very little you can do to mess these up. But it’s possible you won’t see the Page View event. If you don’t it means you’ve messed up the dataLayer implementation.

Google Tag Manager establishes the dataLayer construct with its own .push() method in the JavaScript library that represents your container. The gtm.js event is pushed into dataLayer in the container snippet, and it is used to trigger any tags that use the Page View or All Pages triggers.

The main reason for not seeing the Page View events is simple. You have overwritten the dataLayer modified in the container snippet with a brand new array. You do it like this:

  <!-- Google Tag Manager container snippet here -->
  (function...)
  <!-- Google Tag Manager container snippet ends -->
</head>
<body>
  <script>
    var dataLayer = [{
      someVariable: 'someValue'
    }];
  </script>

See the problem? By using the syntax var dataLayer = ..., you are resetting the dataLayer variable to a new Array, thus overwriting anything that was in it before (such as Google Tag Manager’s own listener). Since you overwrite dataLayer, it no longer works properly with GTM, and a typical symptom is that GTM’s triggers don’t work anymore, either. So if you have a Click / All Elements trigger on the site and nothing is pushed to dataLayer when you click around, chances are you’ve overwritten GTM’s dataLayer with your reinitialization.

How to fix it? Simple. Always check for the existence of dataLayer before adding items to it, and always add items to dataLayer only with the push() command.

// WRONG! NEVER USE THIS:
var dataLayer = [{
  pageType: 'home'
}];

// CORRECT! ALWAYS USE THIS:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  pageType: 'home'
});

This is a popular topic on this blog and many others simply because it’s so easy to screw it up. It doesn’t help that somewhere in GTM’s documentation there are still instructions to use the declarative method for setting up dataLayer.

Any other typical Google Tag Manager mistakes you can think of, which have been around for a long time, and probably will surface for a long time to come?