Cómo configurar el consentimiento de Cookies GDPR con Gatsby

Cómo ya sabrás el Reglamento General de Protección de Datos (GDPR) impone un par de requisitos a los sitios web en lo que respecta a la recopilación y el procesamiento de los datos de los usuarios.

Si quieres utilizar Google Analytics o Facebook Pixel para «rastrear» a los usuarios sólo puedes utilizarlos poniendo el típico aviso de cookies en tu web y que los usuarios les parezca correcto que les rastrees, o lo que es lo mismo acepten en la barrita de las cookies.

Para hacer que tu sitio Gatsby cumpla con los requisitos, hay dos partes que necesitas implementar.

Para cumplir con la normativa de la GDPR, no se pueden recopilar datos de los usuarios a menos que éstos hayan dado su consentimiento explícito. Cuando se trata de scripts de rastreo eso significa que los scripts no pueden ser activados antes de que el usuario dé el consentimiento.

Para lograr esto hay un plugin de Gatsby que nos facilita todo el trabajo. El plugin gatsby-plugin-gdpr-cookies comprueba dos cookies que controlan si los scripts de Google Analytics o de Pixel de Facebook se pueden activar.

Las cookies tienen el nombre de los scripts gatsby-gdpr-google-analytics y gatsby-gdpr-facebook-pixel. Cuando el valor de estas cookies es verdadero, los scripts se activan.

Puedes instalar el plugin usando npm:

npm install --save gatsby-plugin-gdpr-cookies

Para configurar el plugin pon la configuración en tu gatsby-config.js:

// in your gatsby-config.js
module.exports = {
  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', // default
          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', // default
          dataLayerName: 'dataLayer', // default
        },
        facebookPixel: {
          pixelId: 'YOUR_FACEBOOK_PIXEL_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-facebook-pixel', // default
        },
        // defines the environments where the tracking should be available  - default is ["production"]
        environments: ['production', 'development']
      },
    },
  ],
}

Puedes ver los detalles en la página de Gatsby

Recibir el consentimiento del usuario

El usuario puede dar su consentimiento para que se recojan sus datos construyendo su propio formulario y configurando las cookies (gatsby-gdpr-google-analytics y gatsby-gdpr-facebook-pixel).

Si está usando React en su sitio Gatsby, puedes optar por una solución ya hecha , sería utilizar el plugin react-cookie-consent

Este componente de React viene empaquetado en un módulo npm, así que puedes añadirlo a tu proyecto desde yarn o npm, sería así:

npm install --save react-cookie-consent

Después de eso, tienes que añadir el componente en su archivo layout.js para luego añadirlo en el diseño. Es importante que el componente se cargue en todas las páginas para que aparezca en cualquier página que haya visitado el usuario.

Yo he creado el compomente CookieConsent , que voy a llamar desde el footer o header para que se lance en todas las páginas.

import CookieConsent from "react-cookie-consent";

<CookieConsent
location="bottom"
buttonText="Accept"
declineButtonText="Decline"
cookieName="gatsby-gdpr-google-analytics">

Este sitio usa cookies...
</CookieConsent> 

Ahora, desde donde quieras llamarlo tienes que importar el módulo, y luego llamarlo pasándole los datos que le quieras pasar para su correcta ejecución.

En mi caso lo llamo en el footer como he comentado, pero también puedes importarlo y lanzarlo directamente desde el layout que quieras sin tener que crear un componente aparte.

Y listo , con esto tendrás tu flamante banner con lo de las cookies :)