Google Tag Manager plug-in captures incorrect page title

[cmckulka]

Description

Google Analytics captures incorrect page title when using Google Tag Manager via gatsby-plugin-google-tagmanager. See solution below.

Steps to reproduce

1. Install plug in
2. Configure GTM and GA within GTM
3. Per plug-in (README) wire GA to the history change event in GTM.

Expected result

Page navigation (internal and external) would correctly get recorded as page views with the correct titles.

Actual result

Incorrect titles are captured. This is the same issue as discussed here where the title is a page view behind because Helmet hasn't had a chance to update the page title yet.

Environment

Not relevant to the issue but for completeness

  System:
    OS: macOS 10.14.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.12.0 - /usr/local/bin/node
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 3.7.2 - /usr/local/opt/python/libexec/bin/python
  Browsers:
    Chrome: 74.0.3729.131
    Safari: 12.1
  npmPackages:
    gatsby: ^2.3.16 => 2.3.16 
    gatsby-cli: ^2.5.12 => 2.5.12 
    gatsby-image: ^2.0.37 => 2.0.37 
    gatsby-plugin-google-tagmanager: ^2.0.13 => 2.0.13 
    gatsby-plugin-manifest: ^2.0.29 => 2.0.29 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 
    gatsby-plugin-robots-txt: ^1.4.0 => 1.4.0 
    gatsby-plugin-root-import: ^2.0.5 => 2.0.5 
    gatsby-plugin-sass: ^2.0.11 => 2.0.11 
    gatsby-plugin-sharp: ^2.0.32 => 2.0.32 
    gatsby-plugin-sitemap: ^2.0.12 => 2.0.12 
    gatsby-source-filesystem: ^2.0.29 => 2.0.29 
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17 
  npmGlobalPackages:
    gatsby-cli: 2.5.9

Solution

In gatsby-browser.js fire a custom GTM event in onRouteUpdate -
window.dataLayer.push({'event': 'page-change'}). Note the "page-change" is arbitrary.

In GTM create a trigger for that custom event and wire GA (and other relevant plug-ins) to it. Don't wire those plug-ins to the built in page view event nor a custom history change event.

My gatsby-browser.js code is based on the recent PR to the gtag plug-in.

Suggested Changes

At a minimum the README should be updated. It may also make sense to fire the custom event from the plug-in and tell people to wire it in the GTM UI.

[freiksenet]

Hi!

Thank you for the report! I agree that google-tag-manager should be changed to be more in line with how gtag plugin handles it. Do you want to make a PR to gatsby to fix that? We would really appreciate that.

Thank you! 💜

[ryandrew14]

Hi @freiksenet! I'm taking a look at this right now. Will have a PR up later tonight, which will probably need some feedback.

[pieh]

gatsby-plugin-google-tagmanager@2.0.14 was published. Check updated notes for route tracking ( https://www.npmjs.com/package/gatsby-plugin-google-tagmanager#tracking-routes )