gatsby-plugin-gtag

Add Google Analytics gtag.js to a site

Does the same thing as gatsby-plugin-google-analytics, but instead of adding deprecated analytics.js script, it uses gtag.js. Includes Outbound Link module.

Install

npm install --save gatsby-plugin-gtag

Use

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-gtag`,
      options: {
        // your google analytics tracking id
        trackingId: `UA-XXXXXXXX-X`,
        // Puts tracking script in the head instead of the body
        head: false,
        // enable ip anonymization
        anonymize: true,
      },
    },
  ],
}

Outbound Links

import { OutboundLink } from 'gatsby-plugin-gtag'

Use like any other anchor tag in your component: <OutboundLink href='yourwebsite.example'>Check out this site!</OutboundLink>

Options

head

Puts tracking script in the head instead of the body. Default is false (render in the body)

anonymize

Adds anonymize_ip flag when calling gtag. More info here.

optmizedId

If you need to use Google Optimize for A/B testing, you can add this optional Optimize container id to allow Google Optimize to load the correct test parameters for your site.

Testing in development mode

By default gatsby-plugin-gtag will only load and run google analytics when process.env.NODE_ENV === 'production'. To enable gtag in development mode set the environment variable GATSBY_GTAG_DEBUG=true gatsby develop.

License

MIT