gatsby-plugin-rgpd-acceptance

Description

Yet Another plugin to manage third-party scripts, respecting the GDPR.

This plugin is not specific to one solution (e.g. Google Analytics, Facebook pixel, YouTube, etc.), it can use and drive them all.

You just have to declare the whole script or an URL to load.

All consents datas are stored in localStorage.

Two components are provided:

• RGPDCookieBanner which is used to display and manage the acceptance.
• RGPDBlocker which is used to prevent the loading of code (e.g. YouTube iframe, navigation map, playlist, etc.) if the person has not explicitly given his consent.

Two modes are proposed, one where the banner component is automatically added and a manual mode where you have to add it yourself.

To use the manual mode, it in the gatsby-config.js plugin options. Change the value of useInternalComponent to false.

RGPDCookieBanner	RGPDBlocker
Full version, not accepted:	Not accepted version:
Accepted version:	Accepted version:
Choosing view without mandatory cookie:
Choosing view with mandatory cookie:

How to install

npm i gatsby-plugin-rgpd-acceptance

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-rgpd-acceptance`,
      options: {
        cookieDuration: 365, // Optionnal, default value: one year in days
        useInternalCss: true, // Boolean Optionnal, default value: true
        useInternalComponent: true, // Boolean Optionnal, default value: true
        labels: {
          // See below
        },
        cookiesList: [
          // At least one is required (otherwise, what is the point of installing this plugin).
          // See below for all explaination
          {
            key: `google-analitics`, // Required, your internal key
            publicName: `Google Analytics`, // Required, a Friendly Name
            publicDescription: `GA Description`, // Required, a Friendly Description
            type: `analytic`, // Required, a type/usage of script, chose one of them `ads|analytic|api|comment|other|social|support|video`
            mandatory: true, // Boolean Required, set if this script is mandatory
            urlToCall: `https://test.io`, // Optional (otherwise, enter `scriptToInclude`), the url of your script.
            scriptToInclude: `<script>console.info('Testing script is loaded')</script>`, // Optional (otherwise, enter `urlToCall`), the url of your script.
          },
          // ...
        ],
      },
    },
  ],
}

Explanation of the options

Name	Default	Description
cookieDuration	365	How long the acceptance is still validate
useInternalCss	true	Active the internal demo style
useInternalComponent	true	Add automatically the RGPDCookieBanner component
labels	{*} Object	The different labels of the RGPDCookieBanner component
labels.icon	🍪	The icon used in both version of RGPDCookieBanner component
labels.titleBanner	Les cookies	Title of the RGPDCookieBanner
labels.descriptionBanner	Nous utilisons des cookies [...]	Description text (complete text below) of the RGPDCookieBanner
labels.acceptAllLabel	Accepter tout	Button label of RGPDCookieBanner
labels.rejectAllLabel	Rejeter tout	Button label of RGPDCookieBanner
labels.chooseLabel	Choisir	Button label of RGPDCookieBanner
labels.saveLabel	Enregistrer	Button label of RGPDCookieBanner
labels.mandatoryLabel	obligatoire	information to indicate the cookie is mandatory
labels.blockerWarnLabel	Accepter	Button label of RGPDBlocker
labels.blockerWarnMessage	Vous n'avez pas accepté les cookies [...]	Description text (complete text below) of the RGPDBlocker
cookiesList	[*] Array of objects	The configuration Array of each cookie, at least 1 is mandatory
key	-	Required, your internal key
publicName	-	Required, a Friendly Name
type	-	Required, a type/usage of script, chose one of them (list below)
mandatory	-	Boolean Required, a set if this script is mandatory
urlToCall	-	Optional, (otherwise, enter scriptToInclude), the URL of your script
scriptToInclude	-	Optional, (otherwise, enter urlToCall), the URL of your script

type of cookie :

• ads
• analytic
• api
• comment
• other
• social
• support
• video

descriptionBanner default value:

Nous utilisons des cookies et des technologies similaires sur notre site web et traitons vos données personnelles (par exemple, l'adresse IP), par exemple, pour personnaliser le contenu et les annonces, pour intégrer des médias de fournisseurs tiers ou pour analyser le trafic sur notre site web.<br/> Le traitement des données peut également se produire à la suite de la mise en place de cookies. Nous partageons ces données avec des tiers que nous nommons dans les paramètres de confidentialité. Le traitement des données peut avoir lieu avec votre consentement ou sur la base d'un intérêt légitime, auquel vous pouvez vous opposer dans les paramètres de confidentialité. Vous avez le droit de ne pas consentir et de modifier ou révoquer votre consentement ultérieurement. Pour plus d'informations sur l'utilisation de vos données, veuillez consulter notre politique de confidentialité.

blockerWarnMessage default value:

Vous n'avez pas accepté les cookies globalement ou celui-ci précisement.<br/> Pour afficher ce contenu, vous devez accepter.

Available options

Design

The design is intentionally horrible. So, you can/should adapt it by disabling it in the gatsby-config.js plugin options. Change the value of useInternalCss to false

Here are the CSS classes (the names speak for themselves)

If you set useInternalCss a rgpd-acceptance-theme class is added to <html>. So, you don't need to put !important to override the predefined styles.

/* RGPDCookieBanner and his mini version component */
.rgpd--container
  .rgpd--banner
  .rgpd--banner.full
    .rgpd--header
      .rgpd--icon
      .rgpd--title
    .rgpd--cookies-list
      .rgpd--cookie-item
        .rgpd--cookie-name
        .rgpd--cookie-description
        .rgpd--cookie-type
        .rgpd--cookie-mandatory
        .rgpd--cookie-checkzone
     .rgpd--footer
       .rgpd--btn
       .rgpd--btn.all
       .rgpd--btn.some
       .rgpd--btn.none
       .rgpd--btn.choose
       .rgpd--btn.save
  .rgpd--banner.mini
    .rgpd--icon
    .rgpd--link

/* RGPDBlocker component */
.rgpd--blocker--container
  .rgpd--blocker--container .rgpd--icon
  .rgpd--blocker--title
  .rgpd--blocker--warn-message

Component RGPDCookieBanner

If you set in gatsby-config.js the option useInternalComponent at false you can add it manually in your layout.

It's mandatory if you need to translate labels with i18n. I you have only one language, you can directely set text in gatsby-config.js.

import { RGPDCookieBanner } from 'gatsby-plugin-rgpd-acceptance'

/**
 * The pilot of acceptance
 * @param {*} icon `String` Emoji Override plugin or config label (eg. for i18n).
 * @param {*} titleBanner `String` Override plugin or config label (eg. for i18n).
 * @param {*} descriptionBanner `String` Override plugin or config label (eg. for i18n).
 * @param {*} acceptAllLabel `String` Override plugin or config label (eg. for i18n).
 * @param {*} chooseLabel `String` Override plugin or config label (eg. for i18n).
 * @param {*} rejectAllLabel `String` Override plugin or config label (eg. for i18n).
 * @param {*} saveLabel `String` Override plugin or config label (eg. for i18n).
 * @param {*} mandatoryLabel `String` Override plugin or config label (eg. for i18n).
 * @param {*} asAContainer `Boolean` Add a container with `rgpd--container` classname.
 * @returns
 */

Component RGPDBlocker

This component is used to block the loading of a child component that would require an acceptance validation.

If he didn't get it, an alert message is displayed and he can directly accept it by clicking on a button.

By implementing this system, you protect your users from tracking by the third party service used.

/**
 * A component to block the loading of an unaccepted third party script.
 * @param {*} cookieKey `String` **Required**, your internal key, same as configured in `gatsby-config.js`
 * @param {*} className `String` Optionnal, your style (set width and height)
 * @param {*} blockerWarnMessage `String` Optionnal, the label of the localy acceptance button
 * @param {*} blockerWarnLabel `String` Optionnal, the warning message.
 * @returns
 */

How to contribute

Bugs and Features

You can make enhancement requests, report bugs, or simply offer help at https://github.com/NovaGaia/gatsby-plugin-rgpd-acceptance/issues

Futur

Create some plugins to facilitate the implemtation of a cookie script (like the others plugins who are specialized).