How to make a GatsbyJs site GDPR compliant
August 12, 2020
#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 🐧