How set up a Gatsby Cookie consent banner with gatsby-plugin-gdpr-cookies

Attention, I had an issue with tracking via Google Analytics. After a lot of research I found the solution in the reactGaOptions which is used under the hood by gatsby-plugin-google-analytics-gdpr. Use the sampleRate option to enable 100% tracking so that also mobilephones will send the requests to Google. In normal mode it is set to 1% so in low bandwith you will loose a lot of user information.

reactGaOptions: {
  debug: false,
  gaOptions: {
    sampleRate: 100,
    siteSpeedSampleRate: 100
  }
}

From the plugin page

First of all the plugin checks in which environment your site is running. If it’s currently running in one of your defined environments it will add the Facebook Pixel javascript by default to the of your site. It will not be activated or initialized by this.

By default this plugin will not send any data to Google or Facebook to make it GDPR compliant. The user first needs to accept your cookie policy. By accepting that you need to set two cookies - gatsby-gdpr-google-analytics and gatsby-gdpr-facebook-pixel. Depending on the user input the value of each of the cookies should be true or false.

If the gatsby-gdpr-google-analytics cookie is set to true, Google Analytics will be initialized onClientEntry. Same is for the Facebook Pixel.

The page view will then be tracked on onRouteUpdate.

So you should build a banner component and set the cookies to true or false, it depends on the user choice.

You have to combine a Gatsby plugin and build your own cookie consent banner or use a ready made component to achieve this.

First as AskaNor_29 suggested you need to install and configure the gatsby-plugin-gdpr-cookies plugin. You can get the plugin here.

Configure the plugin in gatsby-config.js

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-gdpr-cookies`,
      options: {
        googleAnalytics: {
          trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID',
          // Setting this parameter is optional
          anonymize: true
        },
        facebookPixel: {
          pixelId: 'YOUR_FACEBOOK_PIXEL_ID'
        },
        // Defines the environments where the tracking should be available  - default is ["production"]
        environments: ['production', 'development']
      },
    },
  ],
}

The second part is showing a cookie consent banner or modal so the user can make his choice.

For this you can use the react-cookie-consent npm module. You can get the npm package here.

To make it work with the gatsby-plugin-gdpr-cookies, you need to set the cookieName="gatsby-gdpr-google-analytics" prop.

Then you put the CookieConsent component in your layout.js file so it's activated on any page the user visits first.

<CookieConsent
          location="bottom"
          buttonText="Accept"
          declineButtonText="Decline"
          cookieName="gatsby-gdpr-google-analytics">
This site uses cookies ...
</CookieConsent>

The component takes many props so you can tweak the behaviour and looks.

If you want both Google Analytics and Facebook Pixel cookies to be set, there are callbacks for accepting/declining cookies where you can add your custom code to set both cookies.

If you're interested I wrote a longer how-to describing the steps.