Unable to setup Google Analytics

Description

I’m unable to setup Google Analytics on my Gatsby site. I’ve used 3 different approaches and all of them failed to send any data to GA.

1. gatsby-plugin-google-analytics based on the plugin documentation
2. gatsby-plugin-gtag tried this as Google seems to be pushing for gtag instead of analytics code.
3. Manually placing code snippet for analytics in Helmet:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxx"></script>
 <script type="application/ld+json">
    {`
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('config', 'UA-xxxx');
    `}
</script>

I’ve used production builds to test, so that isn’t a problem too. Even more confusing is that inspecting the site, I can find the code being injected to the HTML yet no results.

Steps to reproduce

Use one of the methods used above and production build.

gatsby-config.js

const path = require('path');

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: 'UA-xxxx',
        head: true,
        anonymize: true,
        respectDNT: true,
      },
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-transition-link`,
    {
      resolve: `gatsby-plugin-svgr`,
      options: {
        svgoConfig: {
          plugins: {
            removeViewBox: false,
          },
        },
      },
    },
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `misc`,
        path: `${__dirname}/src/images/misc`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `works`,
        path: `${__dirname}/src/images/works`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `exp`,
        path: `${__dirname}/src/images/explorations`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
       ....
      },
    },
    `gatsby-plugin-offline`,
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`didact gothic`, `raleway\:600`],
      },
    },
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {
          ....
        },
      },
    },
  ],
};

Expected result

GA should work realtime as expected

Actual result

No data sent to GA.

Environment

  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.15.1 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 69.0.1
    Safari: 13.0.3
  npmPackages:
    gatsby: ^2.19.0 => 2.19.0 
    gatsby-image: ^2.2.39 => 2.2.39 
    gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5 
    gatsby-plugin-google-analytics: ^2.1.34 => 2.1.34 
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1 
    gatsby-plugin-gtag: ^1.0.12 => 1.0.12 
    gatsby-plugin-manifest: ^2.2.37 => 2.2.37 
    gatsby-plugin-offline: ^3.0.33 => 3.0.33 
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21 
    gatsby-plugin-sharp: ^2.4.0 => 2.4.0 
    gatsby-plugin-styled-components: ^3.1.18 => 3.1.18 
    gatsby-plugin-svgr: 2.0.1 => 2.0.1 
    gatsby-plugin-transition-link: ^1.17.7 => 1.17.7 
    gatsby-source-filesystem: ^2.1.46 => 2.1.46 
    gatsby-transformer-sharp: ^2.3.13 => 2.3.13 
  npmGlobalPackages:
    gatsby-cli: 2.8.4

[AkashRajpurohit]

The plugin configuration seems fine to me other than I have just added the trackingId and head : true as I am also using google analytics on my website and able to get realtime updates. Can you check on your google analytics dashboard if there is any issue with that.

Or use the current tag on some other website to check if you are getting updates on that or not.

[ajayns]

@sidharthachatterjee It could possibly because of that or maybe a GA issue since I’m collecting data but not getting real-time data. So yes we can close this issue.

Just a recommendation though, as of now there is a couple of Google Analytics plugin for Gatsby which confuses a new user. It could be nice to have documentation stating the difference and what’s the latest tool recommended by Google (As of now I believe they’re recommending GTag instead of GA)