gatsby-plugin-google-analytics doesn't seem to work with newer GA 4 properties

[dbertella]

Description

Google analytics doesn't seem to work with new analytics property version 4 I believe
https://support.google.com/analytics/answer/9310895

I also tried using gatsby-plugin-google-tagmanager on his own or using both plugin together but I couldn't see any data sent to GA.
I fall back to an old UA- property and everything works as expected. Am I missing something?

Steps to reproduce

Add the plugin following the documentation and use a new traking id that starts with G- instead of UA-

Expected result

The site should send tracking to google analytics

Actual result

Nothing happen

Environment

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 86.0.4240.198
    Safari: 14.0.1
  npmPackages:
    gatsby: ^2.26.1 => 2.26.1
    gatsby-image: ^2.5.0 => 2.5.0
    gatsby-plugin-google-analytics: ^2.5.0 => 2.5.0
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.6.0 => 2.6.0
    gatsby-plugin-offline: ^3.4.0 => 3.4.0
    gatsby-plugin-react-helmet: ^3.4.0 => 3.4.0
    gatsby-plugin-sharp: ^2.8.0 => 2.8.0
    gatsby-plugin-theme-ui: ^0.3.3 => 0.3.3
    gatsby-source-dev: ^0.1.4 => 0.1.4
    gatsby-source-devto: ^1.1.0 => 1.1.0
    gatsby-source-filesystem: ^2.5.0 => 2.5.0
    gatsby-transformer-sharp: ^2.6.0 => 2.6.0
  npmGlobalPackages:
    gatsby-cli: 2.12.66

[olivierk95]

Hello, I have the same issue but since I am a new user of GA, I am not able to go back to UA-property for tracking.
Thanks for your help

[MichaelMarner]

I'm having the same issue - newer analytics properties not working with the plugin.

The issue may be caused by newer V4 properties using different code to initialise Google Analytics?

Here's what the Analytics console suggests for integrating tracking:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TRACKING_ID');
</script>

This is different to the old way that is currently implemented in the plugin:

if(true) {
--
  | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
  | (i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  | })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  | }
  | if (typeof ga === "function") {
  | ga('create', 'TRACKING_D', 'auto', {});

The good news is it looks like new V4 properties and the older ones can use the new initialisation code - GA is giving me the same code snippet for both old and new properties.

[jussivirtanen]

I noticed the same today when trying to use gatsby-plugin-google-analytics.

[ubuntutest]

i ran into the same problem, i thought i misconfigured GA, but apparently i'm not the only one who can't get it to work.

        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
            trackingId: "G-******",
            // Puts tracking script in the head instead of the body
            head: true,
            anonymize: true,
            },
        },

function gaOptout() { document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;path=/', window[disableStr] = !0 } var gaProperty = 'G-*******',', disableStr = 'ga-disable-' + gaProperty; document.cookie.indexOf(disableStr + '=true') > -1 && (window[disableStr] = !0);
if (true) {

    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
}
if (typeof ga === "function") {
    ga('create', 'G-*******', 'auto', {});
    ga('set', 'anonymizeIp', true);
}

any tips?

[suzu-prog]

I solved this!
You can create a UA code by recreating the property.

FYI: https://flippingbook.com/help/publisher-2/statistics/setting-up-google-analitics

[ubuntutest]

yes, you can just rollback to GA 3 (Universal Analytics), I'm interested in finding a solution for GA 4

[nickmccurdy]

gatsby-plugin-google-analytics is only for analytics.js, which has been deprecated and isn't supported by GA 4. Instead you'll want to use gatsby-plugin-google-gtag which uses the newer gtag.js that supports both GA 3 and GA 4.