gatsby-plugin-google-analytics-gdpr

Gatsby plugin to add google analytics GDPR compliant.

This plugin works in an easy way together with a plugin to show cookie banner generated with CookieHub: gatsby-plugin-cookiehub-banner

Install

npm install --save gatsby-plugin-google-analytics-gdpr

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics-gdpr`,
      options: {
        // The property ID; the tracking code won't be generated without it.
        trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID", 
        // Optional parameter (default false) - Enable analytics in development mode.
        enableDevelopment: true, // default false
        // Optional parameter (default true) - Some countries (such as Germany) require you to use the _anonymizeIP function for Google Analytics. Otherwise you are not allowed to use it.
        anonymizeIP: true,
        // Optional parameter (default false) - Starts google analytics with cookies enabled. In some countries (such as Germany) this is not allowed.
        autoStartWithCookiesEnabled: false, 
        // Optional parameter - Configuration for react-ga and google analytics 
        reactGaOptions: {
            debug: true,
            gaOptions: {
                sampleRate: 10
            }
        }
      },
    },
  ],
}

Note that this plugin is disabled while running gatsby develop. This way, actions are not tracked while you are still developing your project. Once you run gatsby build the plugin is enabled. Test it with gatsby serve. You can use this plugin in development mode, if you set the plugin option enableDevelopment.

How it works

By default this plugin starts google analytics without cookies and with a generated clientId to make it GDPR compliant. Google Analytics will be started on onClientEntry. As soon as the user accepts your cookie policy, you can set the cookie gatsby-plugin-google-analytics-gdpr_cookies-enabled. Depending on the user input the value should be true or false. If the cookie is set to true, Google Analytics will be restarted with enabled cookies. If the cookie is set to false, Google Analytics will continue without cookies. If the user withdraws the choice, set the cookie to false and Google Analytics will be restarted in the correct mode.

The page view will be tracked on onRouteUpdate. This plugin uses react-ga internally.

Options

trackingId

Here you place your Google Analytics tracking id.

Optional Fields

enableDevelopment

Enable analytics in development mode.

anonymizeIP

Some countries (such as Germany) require you to use the _anonymizeIP function for Google Analytics. Otherwise you are not allowed to use it.

autoStartWithCookiesEnabled

Starts google analytics with cookies enabled. In some countries (such as Germany) this is not allowed.

reactGaOptions

This plugin uses react-ga internally. Use this option to configure react-ga.

It is also possible to configure Google Analytics with Create Only Fields documented in Google Analytics.

reactGaOptions: {
    debug: true,
    gaOptions: { // google analytics create only fields
        sampleRate: 10
    }
}

The plugin overwrites some gaOptions to ensure other options like disabled cookies.

Troubleshooting

No actions are tracked

Check the tracking ID

Make sure you supplied the correct Google Analytics tracking ID. It should look like this: trackingId: "UA-111111111-1"