gatsby-plugin-google-gtag window.gtag not working

[jsbrain]

Hi, I'm trying to send a custom event with the gatsby-plugin-google-gtag plugin.

But window.gtag is not available. I really don't get it. What am I doing wrong?

Thanks

[coreyward]

@jsbrain Mind reader is busted today, can you manually provide details for debugging (I know, I know, it's archaic).

[jsbrain]

@coreyward Yeah, that's what I thought reading the docs of the plugin.

The plugin says:

Custom Events
This plugin automatically sends a “pageview” event to all products given as “trackingIds” on every Gatsbys route change.

If you want to call a custom event you have access to window.gtag where you can call an event for all products:

window.gtag("event", "click", { ...data })
or you can target a specific product:

window.gtag("event", "click", { send_to: "AW-CONVERSION_ID", ...data })
In either case don’t forget to guard against SSR:

typeof window !== "undefined" && window.gtag("event", "click", { ...data })

And I am trying something like:

componentDidMount () {
  window.gtag('event', 'click', { ...data })
}

but it says that window.gtag is undefined. So obviously I'm misunderstanding something or the docs are misleading.

Thank you

[jsbrain]

Btw in case this question comes up: Yes, I tested in production ;)

[sidharthachatterjee]

@jsbrain Just tried this out

Here's what I added to gatsby-config.js

{
  resolve: `gatsby-plugin-google-gtag`,
  options: {
    // You can add multiple tracking ids and a pageview event will be fired for all of them.
    trackingIds: [
      "UA-XXXXXXXX-X", // Google Analytics / GA
    ],
    pluginConfig: {
      // Puts tracking script in the head instead of the body
      head: true,
    },
  },
},

And I added a log in the index page component in the starter (this will be run after mount just like componentDidMount in your comment)

  useEffect(() => {
    console.log(window.gtag)
  }, [])

And it seems to work like the screenshot above.

Can you link to your repository or try to make a minimal reproduction of this issue? That would help us track it down and help you resolve it.

[jcursoli]

Hello I am experiencing the same issue, heres my config since i dont see anyone elses posted

    {
      resolve: 'gatsby-plugin-google-gtag',
      options: {
        trackingIds: ["UA-XXXXXXXX"],
        pluginConfig: {
          head: true,
          respectDNT: true,
        },
      },
    },

and im using the window.gtag like this
window.gtag('event', `blah blah`);

and im getting Uncaught TypeError: window.gtag is not a function

"gatsby": "2.0.50",
"gatsby-plugin-google-gtag": "^1.0.16",

NOTE: I also tried head: false and that did not work wither

[jsbrain]

Hi @sidharthachatterjee , thank you for your help.

I was able to resolve the issue. My browser cache was serving me an old version of my site 🤦‍♂️ So I removed all application data from chrome and voila it worked!

@jcursoli Make sure to run in production mode (eg. gatsby build && gatsby serve). It is not working with gatsby develop, as stated in the docs ;)

[jcursoli]

@jsbrain Yes i tried it in production, cleared cache etc.

[jcursoli]

Okay i think i got it, the problem is when you specify respectDNT option as true, it becomes undefined even though i dont have do not track options set on my browser. once i remove it, it works. But I still would like to have that option available. @sidharthachatterjee

[sidharthachatterjee]

@jcursoli Just tested out setting respectDNT to true. It works fine when DNT is set to false in my browser. When setting DNT to true in Chrome browser settings, it becomes undefined (which is correct behaviour)