Gatsby: Google analytics tracks pages, but not always the path and the title are from the same page. Sometimes a visitor visits "/" but the title of another url.

Created on 16 Oct 2018 · 7Comments · Source: gatsbyjs/gatsby

Description

Google analytics tracks pages, but not always the path and the title are from the same page. Sometimes a visitor visits "/" but the title of another url.

Looks like the url is correct but the title is from the previous page I've seen. I'm using import { Link } from 'gatsby' for the links.

Steps to reproduce

Created default app:

Add Google analytics script:

{
  resolve: `gatsby-plugin-google-analytics`,
  options: {
    trackingId: "UA-12420899-9",
    // Puts tracking script in the head instead of the body
    head: false,
    // Setting this parameter is optional
    anonymize: false,
    // Setting this parameter is also optional
    respectDNT: false ,
    // Avoids sending pageview hits from custom paths
    exclude: [],
    // Any additional create only fields (optional)
    sampleRate: 100,
    siteSpeedSampleRate: 100,
    cookieDomain: "www.freereikicourse.com",
  },
},

Add helmet in your page template:

    <Helmet
      title={frontmatter.title}
      meta={[
        { name: 'description', content: frontmatter.description },
        { name: 'keywords', content: frontmatter.keywords },
      ]}
    >
      <html lang="en"/>
    </Helmet>

Expected result

All pages should have the path matching with the title.

Actual result

Google analytics tracks pages, but not always the path and the title are from the same page. Sometimes a visitor visits "/" but the title of another url.

Environment

gatsby info --clipboard:

    System:
        OS: Windows 10
        CPU: x64 Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz
      Binaries:
        Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
        npm: 5.5.1 - C:\Program Files\nodejs\npm.CMD
      Browsers:
        Edge: 42.17134.1.0
      npmPackages:
        gatsby: ^2.0.19 => 2.0.21
        gatsby-plugin-catch-links: ^2.0.4 => 2.0.4
        gatsby-plugin-emotion: ^2.0.5 => 2.0.5
        gatsby-plugin-google-analytics: ^2.0.6 => 2.0.6
        gatsby-plugin-manifest: ^2.0.5 => 2.0.5
        gatsby-plugin-offline: ^2.0.5 => 2.0.6
        gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
        gatsby-plugin-sharp: ^2.0.6 => 2.0.6
        gatsby-plugin-typescript: ^2.0.0 => 2.0.0
        gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
        gatsby-remark-images: ^2.0.4 => 2.0.4
        gatsby-source-filesystem: ^2.0.3 => 2.0.3
        gatsby-transformer-remark: ^2.1.7 => 2.1.7

help wanted stale? needs more info needs reproduction

Source

hackhat

👍4

Most helpful comment

The PR got merged :) Big thank you to @jorgenblindheim
should be fixed in next release.

wardpeet on 15 Feb 2019

🎉3 👍2

All 7 comments

@hackhat can you provide a minimal reproduction repo for this issue?

kakadiadarpan on 14 Nov 2018

I don't, but basically the problem happens in the template because the tracker sends the pageview before the markdown page is loaded. The title of the page is only updated when the markdown is downloaded, because the title is in the markdown. But is tracked as soon as that url is changed. I wonder how this doesn't happen in other places...

hackhat on 16 Nov 2018

As @hackhat says this is happening because gatsby-plugin-google-analytics is sending off the pageview in Gatsby's onRouteUpdate hook, before react-helmet has rendered the new page title.

The issue affects SPA's generally and is discussed here. A hacky fix is arbitrarily delaying GA to allow the title to update. I'd like to see a discussion that results in a more elegant solution.