[gatsby-plugin-google-gtag] Analytics isn't working #12967

AAverin · 2019-03-31T08:58:53Z

Summary

Relevant information

With the default setting of gatsby-plugin-google-gtag, analytics doesn't seem to work at all.
No active users or custom events are being tracked.
I tested on production, also tried putting script into header

Environment (if relevant)

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.10.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 73.0.3683.86
Safari: 12.1
npmPackages:
gatsby: ^2.2.8 => 2.2.8
gatsby-image: ^2.0.34 => 2.0.34
gatsby-plugin-catch-links: ^2.0.13 => 2.0.13
gatsby-plugin-facebook-pixel: ^1.0.3 => 1.0.3
gatsby-plugin-google-analytics: ^2.0.17 => 2.0.17
gatsby-plugin-google-gtag: ^1.0.16 => 1.0.16
gatsby-plugin-react-helmet: ^3.0.10 => 3.0.10
gatsby-plugin-sharp: ^2.0.30 => 2.0.30
gatsby-remark-autolink-headers: ^2.0.16 => 2.0.16
gatsby-remark-copy-linked-files: ^2.0.11 => 2.0.11
gatsby-remark-images: ^3.0.10 => 3.0.10
gatsby-source-filesystem: ^2.0.28 => 2.0.28
gatsby-transformer-remark: ^2.3.8 => 2.3.8
gatsby-transformer-sharp: ^2.1.17 => 2.1.17
npmGlobalPackages:
gatsby-cli: 2.4.4

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
  },
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        // You can add multiple tracking ids and a pageview event will be fired for all of them.
        trackingIds: [
          "<my_google_tracking_id>", // Google Analytics / GA
          // "AW-CONVERSION_ID", // Google Ads / Adwords / AW
          // "DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
        ],
        // This object gets passed directly to the gtag config command
        // This config will be shared accross all trackingIds
        gtagConfig: {
          optimize_id: "OPT_CONTAINER_ID",
          anonymize_ip: true,
          cookie_expires: 0
        },
        // This object is used for configuration specific to this plugin
        pluginConfig: {
          // Puts tracking script in the head instead of the body
          head: true,
          // Setting this parameter is also optional
          respectDNT: true,
          // Avoids sending pageview hits from custom paths
          // exclude: ["/preview/**", "/do-not-track/me/too/"],
        },
      },
    },
    {
      resolve: `gatsby-plugin-react-helmet`
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 970,
            },
          },
          {
            resolve: "markdown-embed-youtube"
          },
          `gatsby-remark-autolink-headers`
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages/blog/posts`,
        name: "pages",
      },
    },
    {
      resolve: `gatsby-plugin-facebook-pixel`,
      options: {
        pixelId: '',
      },
    },
    `gatsby-remark-copy-linked-files`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-remark-images`,
      options: {
        maxWidth: 1080,
      },
    }
  ],
}

The text was updated successfully, but these errors were encountered:

AAverin · 2019-03-31T09:04:04Z

Problem was in optimize_id: "OPT_CONTAINER_ID",
Why is it in default documentation?

janbaykara · 2019-04-17T09:55:01Z

Problem was in optimize_id: "OPT_CONTAINER_ID",
Why is it in default documentation?

Can you elucidate on this?

semireg · 2019-05-25T02:30:10Z

@janbaykara, I got tripped up on this, too.

Basically, the "How to use" at https://www.gatsbyjs.org/packages/gatsby-plugin-google-gtag/ shows optimize_id: "OPT_CONTAINER_ID" which breaks analytics until it is removed.

BrunoQuaresma · 2019-06-22T01:52:19Z

I'm using this config:

{
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        header: true,
        trackingId: process.env.GA_ID,
      },
    },

And it is not working for me. No data is displayed in GA.

Sarah86 · 2019-06-26T22:29:17Z

Anyone found the solution?

I am doing gatsby build && gatbsy serve and tried even another plugin, but no success:

{
      resolve: `gatsby-plugin-gtag`,
        options: {
          // your google analytics tracking id
          trackingId: `XXXX`,
          // Puts tracking script in the head instead of the body
          head: true,
          // enable ip anonymization
          anonymize: true,
        },
    });
  }

Sarah86 · 2019-06-26T23:24:54Z

Anyone found the solution?

I am doing gatsby build && gatbsy serve and tried even another plugin, but no success:

{
      resolve: `gatsby-plugin-gtag`,
        options: {
          // your google analytics tracking id
          trackingId: `XXXX`,
          // Puts tracking script in the head instead of the body
          head: true,
          // enable ip anonymization
          anonymize: true,
        },
    });
  }

I figured out!

It was the path of the .env file inside the gatsby-config.js of the starter that I am using:

require('dotenv').config({ path: .env, });

Sarah86 · 2019-06-26T23:36:20Z

Anyone found the solution?
I am doing gatsby build && gatbsy serve and tried even another plugin, but no success:
{
      resolve: `gatsby-plugin-gtag`,
        options: {
          // your google analytics tracking id
          trackingId: `XXXX`,
          // Puts tracking script in the head instead of the body
          head: true,
          // enable ip anonymization
          anonymize: true,
        },
    });
  }
I figured out!

It was the path of the .env file inside the gatsby-config.js of the starter that I am using:

require('dotenv').config({ path: .env, });

Actually it was not that, I even removed again the { path: .env, }.
So I kept

require('dotenv').config(); const { ACCESS_TOKEN, SPACE_ID, ANALYTICS_ID } = process.env;

then, in the .env file i inserted the credentials like: ACCESS_TOKEN='mytoken' etc

How the .env is a .gitignore file, in Netlify I used the credentials inside the Build command like:

SPACE_ID='xxxxx' ACCESS_TOKEN='xxxxx' ANALYTICS_ID='xxxxxx' gatsby build

It worked! clap

BrunoQuaresma · 2019-07-01T16:07:34Z

I don't know why but I just put the plugin as the first one in the config file.

ThomasJanUta · 2019-10-06T15:57:34Z

This plugin has issues. This is how I solved it:

Put it at very first position so it is the first plugin to be loaded.
Remove all optional attributes you don't need or are not sure about what they do.

This is how it looks in my gatsby-config.js:

  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-1111111111-1",
        head: true,
        anonymize: true,
      },
    },
  // other plugins

AAverin · 2019-10-06T20:13:15Z

If you have problems, keep in mind "do not track" setting in your browser.
Basically for me having this setting enabled in plugin was breaking tracking no matter what browser setting was. Maybe it's broken in the plugin or analytics itself?

Anyways, tracking seems to work now, but it's quite unstable. Not all events are tracked so not sure what's the problem.
Anybody else has that?

srepollock · 2019-10-13T06:44:05Z

This plugin has issues. This is how I solved it:

Put it at very first position so it is the first plugin to be loaded.
Remove all optional attributes you don't need or are not sure about what they do.

This is how it looks in my gatsby-config.js:
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-1111111111-1",
        head: true,
        anonymize: true,
      },
    },
  // other plugins

I would just like to add (for future note) that moving gatsby-plugin-google-analytics to the top of my plugins solved the issue. Thanks for the assist @ThomasUta !

TeemuKoivisto · 2019-10-26T13:29:08Z

This thing hasn't worked me since the first time I tried (maybe 1.5 years ago). At one point it did track the first pageview, but the subsequent navigations to other pages didn't trigger anything. Quite unsatisfied with the quality of this library and has caused me to waste a lot of time. You would think that given that this is an officially supported plugin it would have official-level support. It's not nice having to debug 3rd party code with no obvious clues why it's not working. Even tricks like the aforementioned moving of the plugin to the top of the plugin list are ugly hacks, not permanent fixes.

Sometimes I feel Gatsby has become too tangled of a mess to use it without weird problems. Or well, it was a mess to start with and it feels it still is. It's just as a developer I don't have interest in debugging arcane problems. And the JS source code itself looks quite spagetti. No wonder no one can understand what is the problem with it.

AAverin · 2019-10-26T14:44:57Z

@TeemuKoivisto
Well, everything is opensource and pluggable, so you can always write your own analytics wrapper and not rely on someone else's ugly hacks. You would have to do it manually anyways if you go to the plain react app without gatsby.

TeemuKoivisto · 2019-10-26T21:21:17Z

@AAverin I am not sure what you were going for, yes I can write my own wrapper? But why should I? I thought the point of having libraries is that I can rely on them to let me focus on more productive things. And "go to the plain react app", what you mean by that? I am not making a plain react app, that is why I am here. I just wanted to add GA with basic pageviews and that's it. Didn't think it was this hard.

After fiddling with the gatsby-browser.js and gatsby-ssr.js for some time I got the thing working. Didn't first understand what that gtag is for, but it seems Google is advocating people to use it instead of analytics.js.

So I decided to give gatsby-plugin-google-gtag library a try and it seems it worked straight away. I don't know what is different in the gatsby-plugin-google-analytics code, but for some reason it didn't work as intended for me with pageviews. No need to move the plugin to the top of the plugin list. I hope it's now resolved and I don't have to think about it anymore.

LekoArts · 2019-11-05T09:32:17Z

Thank you for opening this!

The PR (#19175) addressed some of the things here although I never had any issues with the positioning of the analytics plugin in the plugins list. But it's now in the docs, it doesn't hurt anyone...

This could also be an issue with a bunch different outside factors like browser settings, AdBlockers, software on your machine. Or even how Google handles gtag and analytics differently. AFAIK they're pushing people towards gtag, so feel free to look into that.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

Summary: this is a known and strange issue -- the gatsby GA plugin would work in production only when the plugin is on the very top of the plugin list the fix is **very ugly** but seems the only easy way gatsbyjs/gatsby#12967 gatsbyjs/gatsby#19175 Test Plan: I tested in local and it worked. {F108362} But it worked before too.. the issue only exists in prod, so I could only test it after I deploy it 🤦‍♀️ Reviewers: sashank, max Reviewed By: sashank Differential Revision: https://dagster.phacility.com/D2379

jyoo · 2020-05-01T18:31:43Z

Quite silly to say this, but I noticed that the it is disabled gatsby develop. Could see GA is working after running gatsby build and gatsby serve and opening the localhost.

Nothing was added or altered other than adding below in gatsby-config.js.

plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // replace "UA-XXXXXXXXX-X" with your own Tracking ID
        trackingId: "UA-XXXXXXXXX-X",
        head: false,
        anonymize: true
      },
    },
   ...
]

ilyankou · 2020-05-28T13:32:38Z

Moving the plugin to the top did nothing for me, but switching to gatsby-plugin-gtag and making sure it is right below gatsby-plugin-react-helmet in gatsby-config.js did! The options are basically the same as with google-analytics:

  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-gtag`,
      options: {
        trackingId: `UA-XXXXXXXXX-X`,
        head: false,
        anonymize: true,
      },
    },
   ...
  ],

ardalis · 2020-06-05T20:03:25Z

@ilyankou are you able to get it to track page views? it seems to be hard-coded not to do so.

ilyankou · 2020-06-06T14:06:50Z

@ardalis Yes, gtag works for it all (I created the code snippet from Google Analytics): https://developers.google.com/analytics/devguides/collection/gtagjs/

See what Google Tag Assistant shows (I only added the gtag plugin).

alexblack · 2020-09-10T23:16:25Z

Did this go anywhere? I'd love to get GA working in dev/test mode, so we can build and test analytics (we have separate dev and prod GA profiles)

sarathAvantari · 2020-09-18T12:08:41Z

after configuring how to how acces gatg and fbq in the project in order to emit events like fbq('init', '1234567'); fbq('track', 'PageView'); like this and fbq('track', 'checkout'); in a particular pages like this

dkoloditch · 2020-11-17T04:06:29Z

I tried a variety of options listed above and this is the combo that eventually worked for me:

plugins: [
    { // this must be loaded first in order to work
      resolve: `gatsby-plugin-gtag`, // note this instead of gatsby-plugin-react-helmet
      options: {
        trackingId: "UA-XXXXXXXXX-X",
        head: true, // note this is TRUE and not FALSE as listed in other examples above
        anonymize: true
      }
    },
    "gatsby-plugin-react-helmet",
    // other plugins
  ]

erichfw · 2021-01-23T21:15:01Z

I've been struggling with this for a while. I could get it working with by placing the gtag plugin before the other plugins (including the react helmet) as mentioned by @dkoloditch here. A mentioned already use gatsby build and gatsby serve as opposed to gatsby develop to test this. Also, for clarity, I am only running the gtag plugin. Some users above seem to be running the legacy analytics plugin also.

…anonymise' options

naojamg · 2021-02-14T08:28:04Z

I tried a variety of options listed above and this is the combo that eventually worked for me:

plugins: [
    { // this must be loaded first in order to work
      resolve: `gatsby-plugin-gtag`, // note this instead of gatsby-plugin-react-helmet
      options: {
        trackingId: "UA-XXXXXXXXX-X",
        head: true, // note this is TRUE and not FALSE as listed in other examples above
        anonymize: true
      }
    },
    "gatsby-plugin-react-helmet",
    // other plugins
  ]

this save my life

knambiar · 2021-03-16T19:30:23Z

Using the gatsby-plugin-google-gtag plugin worked for me, I had to set "send_page_view: true" in the options, it seems to default to false.

  {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        // You can add multiple tracking ids and a pageview event will be fired for all of them.
        trackingIds: [
          "<TRACKING ID GOES HERE>", // Google Analytics / GA
        ],
        // This object gets passed directly to the gtag config command
        // This config will be shared across all trackingIds
        gtagConfig: {
          anonymize_ip: true,
          cookie_expires: 0,
          send_page_view: true // default appears to be false.
        },
        // This object is used for configuration specific to this plugin
        pluginConfig: {
          // Puts tracking script in the head instead of the body
          head: false,
          // Setting this parameter is also optional
          respectDNT: true,
          // Avoids sending pageview hits from custom paths
          exclude: ["/preview/**", "/do-not-track/me/too/"],
        },
      },
    },`

aaronamm · 2021-08-05T05:31:15Z

@knambiar Thank you for your solution. However, I don't quite understand how you can override send_page_view to true value.
Here is the source code,
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-google-gtag/src/gatsby-ssr.js#L25

  const gtagConfig = pluginOptions.gtagConfig || {}
  const pluginConfig = pluginOptions.pluginConfig || {}

  // Prevent duplicate or excluded pageview events being emitted on initial load of page by the `config` command
  // https://developers.google.com/analytics/devguides/collection/gtagjs/#disable_pageview_tracking
  gtagConfig.send_page_view = false

As you can see, it looks like it always set to false. Even though we set it to true from gtagConfig in gatsby-config.js file.

In addition, I think we also need to update a setting in Google Analytics admin as in this video.
https://www.youtube.com/watch?v=kO_GMfC1LHA&t=287s

FYI 9842 PR set send_page_view to false.

…anonymise' options

itstyro · 2022-02-28T10:58:01Z

did anyone found a reliable way to make it work? The gtag plugin isn't sending page view events to google tag manager. I have tried everything that is mentioned above in this thread

unimprobable · 2022-03-03T21:01:30Z

@itstyro Have you tried the GA Debug extension? This works pretty good to show what the scripts are doing. You might be able to step through in the console and get some insight to your issue.

ZiggStardust · 2022-09-04T09:46:40Z

#12967 (comment)

Worked for me :)

masafumimori · 2023-12-04T11:44:47Z

For someone who is still struggling with this issue (like me).
The settings below worked for me. Hope this helps!

{
	resolve: `gatsby-plugin-google-gtag`,
	options: {
		trackingIds: [
			"G-XXXXXXX", // Google Analytics / GA
		],
		pluginConfig: {
			head: true,
		},
	},
},

AAverin closed this as completed Mar 31, 2019

AAverin reopened this Oct 6, 2019

ThomasJanUta mentioned this issue Oct 31, 2019

Docs/improve gatsby plugin google analytics docs #19175

Merged

LekoArts added the type: question or discussion Issue discussing or asking a question about Gatsby label Nov 5, 2019

LekoArts closed this as completed Nov 5, 2019

jakekaminski mentioned this issue Oct 26, 2020

"t.test is not a function" Console Error on "gatsby serve" #27666

Closed

holly-cummins added a commit to holly-cummins/holly-cummins.github.io that referenced this issue Feb 3, 2021

Follow advice in gatsbyjs/gatsby#12967 - move first, add 'head' and '…

93b157a

…anonymise' options

holly-cummins added a commit to holly-cummins/gatsby-platform that referenced this issue Nov 12, 2021

Follow advice in gatsbyjs/gatsby#12967 - move first, add 'head' and '…

00fc8ec

…anonymise' options

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[gatsby-plugin-google-gtag] Analytics isn't working #12967

[gatsby-plugin-google-gtag] Analytics isn't working #12967

AAverin commented Mar 31, 2019

AAverin commented Mar 31, 2019

janbaykara commented Apr 17, 2019

semireg commented May 25, 2019

BrunoQuaresma commented Jun 22, 2019

Sarah86 commented Jun 26, 2019 •

edited

Loading

Sarah86 commented Jun 26, 2019

Sarah86 commented Jun 26, 2019 •

edited

Loading

BrunoQuaresma commented Jul 1, 2019

ThomasJanUta commented Oct 6, 2019

AAverin commented Oct 6, 2019

srepollock commented Oct 13, 2019

TeemuKoivisto commented Oct 26, 2019

AAverin commented Oct 26, 2019

TeemuKoivisto commented Oct 26, 2019 •

edited

Loading

LekoArts commented Nov 5, 2019

jyoo commented May 1, 2020 •

edited

Loading

ilyankou commented May 28, 2020

ardalis commented Jun 5, 2020

ilyankou commented Jun 6, 2020 •

edited

Loading

alexblack commented Sep 10, 2020

sarathAvantari commented Sep 18, 2020 •

edited

Loading

dkoloditch commented Nov 17, 2020

erichfw commented Jan 23, 2021

naojamg commented Feb 14, 2021

knambiar commented Mar 16, 2021 •

edited

Loading

aaronamm commented Aug 5, 2021 •

edited

Loading

itstyro commented Feb 28, 2022

unimprobable commented Mar 3, 2022

ZiggStardust commented Sep 4, 2022

masafumimori commented Dec 4, 2023 •

edited

Loading

[gatsby-plugin-google-gtag] Analytics isn't working #12967

[gatsby-plugin-google-gtag] Analytics isn't working #12967

Comments

AAverin commented Mar 31, 2019

Summary

Relevant information

Environment (if relevant)

File contents (if changed)

AAverin commented Mar 31, 2019

janbaykara commented Apr 17, 2019

semireg commented May 25, 2019

BrunoQuaresma commented Jun 22, 2019

Sarah86 commented Jun 26, 2019 • edited Loading

Sarah86 commented Jun 26, 2019

Sarah86 commented Jun 26, 2019 • edited Loading

BrunoQuaresma commented Jul 1, 2019

ThomasJanUta commented Oct 6, 2019

AAverin commented Oct 6, 2019

srepollock commented Oct 13, 2019

TeemuKoivisto commented Oct 26, 2019

AAverin commented Oct 26, 2019

TeemuKoivisto commented Oct 26, 2019 • edited Loading

LekoArts commented Nov 5, 2019

jyoo commented May 1, 2020 • edited Loading

ilyankou commented May 28, 2020

ardalis commented Jun 5, 2020

ilyankou commented Jun 6, 2020 • edited Loading

alexblack commented Sep 10, 2020

sarathAvantari commented Sep 18, 2020 • edited Loading

dkoloditch commented Nov 17, 2020

erichfw commented Jan 23, 2021

naojamg commented Feb 14, 2021

knambiar commented Mar 16, 2021 • edited Loading

aaronamm commented Aug 5, 2021 • edited Loading

itstyro commented Feb 28, 2022

unimprobable commented Mar 3, 2022

ZiggStardust commented Sep 4, 2022

masafumimori commented Dec 4, 2023 • edited Loading

Sarah86 commented Jun 26, 2019 •

edited

Loading

Sarah86 commented Jun 26, 2019 •

edited

Loading

TeemuKoivisto commented Oct 26, 2019 •

edited

Loading

jyoo commented May 1, 2020 •

edited

Loading

ilyankou commented Jun 6, 2020 •

edited

Loading

sarathAvantari commented Sep 18, 2020 •

edited

Loading

knambiar commented Mar 16, 2021 •

edited

Loading

aaronamm commented Aug 5, 2021 •

edited

Loading

masafumimori commented Dec 4, 2023 •

edited

Loading