Google Tag Manager “Page view” trigger won't fire on every page.

[sturoid]

I'm having issues with the "Page view" trigger on Google Tag Manager. If there is a page where the template is reused and only the data changes, the trigger won't fire. I've tried putting the GTM script in the head component directly, and loading it with the react-gtm-module package. Both result in the same problem. I came up with a temporary fix where I fire the tags on "All Pages" and on "All History Changes". This is a lot better because it will catch the history changes as well, but it duplicates the firing in many cases. Is there a specific way to accomplish this in Next? I thought the "Head" component would re-render everything on a route change so I'm guessing either that isn't happening with the tags, or GTM isn't picking that up. Any help on how to solve this is much appreciated.

[pddigital]

Not sure about GTM, but I use vanilla Google Analytics with Next.. not the React wrapped package because it doesn't have ecommerce hooks (or at least they're not well documented).

1. I load Google tracking code from the _document.js. I don't do my initial pageview from here since it would fire twice (once from the server and again from the client), but from a HOC on my Layout in ComponentDidMount - which would automatically have access to the page title since it's a prop I'm passing to the layout. Loaded from the custom document, I have access to the Google Analytics functions anywhere on the site (wherever I need to use them - be it to fire a pageview or a conversion).

2. I use router event hooks to pickup route changes that wouldn't reload the HOC...
   https://github.com/zeit/next.js#router-events

3. I explicitly pass the page title and pathname to the Pageview during routing --- I don't let GA try to determine it as sometimes, it grabs the wrong info (from the previous instead of the current route).

That seemed to work (for a time).

Right now, my issue is that when params change, the router isn't picking it up as a route change to fire a pageview (only when it's a complete template change). I think this was a bug introduced in a recent update, but we haven't had feedback from the Next team on this issue: #4044
I could be wrong, this problem could have always been there and I neglected to see it, nonetheless there was a time when I thought my Next / Google Analytics problem was solved!!!

componentDidMount() {

  Router.onRouteChangeComplete = url => {
    ga("send", {
      hitType: "pageview",
      page: location.pathname,
      title: this.props.title
    });
    fbq('track', "PageView");
  };
  ga("send", {
    hitType: "pageview",
    page: location.pathname
  });
  fbq('track', "PageView");
}

[sturoid]

@pddigital thanks a ton for the response. So you do this in your Layout component and it doesn't double fire? I haven't tried anything with the _document.js file. I might try that and report back if I can figure out anything. The solution that would possibly work is creating a custom event in GTM that can be called to trigger all tags that run on every page. I just can't for the life of me figure out how to do it correctly on this so it runs on initial load AND on every route change.

[prichodko]

Maybe this helps - #4036?

[pddigital]

@sturoid, No problem! I have a HOC wrapped around my layout that includes the business logic, but you could probably do the same in the Layout itself -- as long as it wraps every page.

[sturoid]

@pddigital and @prichodko I have updates. I upgraded the Next version to 5.1.0 and everything started working with the "All history changes" trigger in GTM and the GTM tag hardcoded in the Head component. No idea what changed but it works.