How to make a GatsbyJs site GDPR compliant

#GatsbyJS #SSG #GDPR

In order to use services like Google Analytics or Facebook Pixel you should give to the user the choice to let you collect their data. If you want a GDPR (General Data Protection Regulation) compliant website you must not collect any kind of data, until the user gave you that permissions.

Setup

In order to make your website GDPR compliant you can use a GatsbyJs plugin: gatsby-plugin-gdpr-cookies.
The very first time that I read about this plugin it wasn’t cleat at all to me what it does , so let me clarify one point :

This plugin enable Google analytics and Facebook pixel only if it finds that you have set two cookies : gatsby-gdpr-google-analytics and gatsby-gdpr-facebook-pixel.
How to set these cookies is up to you!.
(You can change the cookies name, continue reading..)

How does gatsby-plugin-gdpr-cookies work?

This plugin works like a switch:

• If you have set a certain cookie to enable it, it will turn itself on and set GA/Facebook cookies
• Otherwise it doesn’t set any cookies

To install it you can use npm install --save gatsby-plugin-gdpr-cookies and then add it to your gatsby-config.js file.

//gatsby-config.js
module.exports = {
  plugins: [
    // your plugins...
    {
      resolve: `gatsby-plugin-gdpr-cookies`,
      options: {
        googleAnalytics: {
          trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID", // leave empty if you want to disable the tracker
          cookieName: "gatsby-gdpr-google-analytics", // here can you change the cookie name
          anonymize: true, // default
        },
        googleTagManager: {
          trackingId: "YOUR_GOOGLE_TAG_MANAGER_TRACKING_ID", // leave empty if you want to disable the tracker
          cookieName: "gatsby-gdpr-google-tagmanager", // // here can you change the cookie name
          dataLayerName: "dataLayer", // default
        },
        facebookPixel: {
          pixelId: "YOUR_FACEBOOK_PIXEL_ID", // leave empty if you want to disable the tracker
          cookieName: "gatsby-gdpr-facebook-pixel", // // here can you change the cookie name
        },
        // defines the environments where the tracking should be available  - default is ["production"]
        environments: ["production", "development"],
      },
    },
  ],
}

What about the user interface and the banner to set the cookies to enable the plugin ?

You can implement the cookies banner by yourself or, if you’re looking for something production ready, you can choose react-cookie-consent.
This package works like a charm with the gatsby-plugin-gdpr-cookies plugin and will handle the graphical part of our setup.
It brings you a React component CookieConsent where you can define which cookie you want to set when the user accept the form.

Google Analytics Example

import CookieConsent from "react-cookie-consent";

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

My suggestion is to put it inside your layout.js component so you can handle the cookies from any page.

⚠️ Pay Attention

If you’re using react-cookie-consent or even if you’ve managed to handle cookies with your own component, you have to ensure that the cookieName props is equal to cookieName that you have set inside the gatsby-config.js.
If you’re using different names, the plugin will not work! ( Do you remember the “switch” concept above?)

Customize react-cookie-consent banner

If you want to customize the react cookie consent banner with your own css classes you can do it by setting disableStyles to true and then pass your css classes name to the buttonClasses, containerClasses, contentClasses props.

<CookieConsent
  disableStyles={true}
  location="bottom"
  buttonClasses="btn-custom-class"
  containerClasses="container-custom-class"
  contentClasses="content-custom-class"
>
  This website uses cookies to enhance the user experience.
</CookieConsent>

This post is inspired by Bojan Bedrač’s article that helped me to setup a GDPR form on this website. Hope you enjoy this post,

Pingu 🐧