Consentimiento de Cookies

Consentimiento de Cookies

Descubre cómo implementar un plugin de consentimiento de cookies en tu sitio web para cumplir con las regulaciones de privacidad. Este artículo te ofrece una revisión de las mejores opciones disponibles.

¿Qué es RGPD?

El Reglamento General de Protección de Datos (RGPD) es el reglamento europeo relativo a la protección de las personas físicas en lo que respecta al tratamiento de sus datos personales y a la libre circulación de estos datos. Entró en vigor el 24 de mayo de 2016 y fue de aplicación el 25 de mayo de 2018, dos años durante los cuales las empresas, las organizaciones, los organismos y las instituciones se fueron adaptando para su cumplimiento. Es una normativa a nivel de la Unión Europea, por lo que cualquier empresa de la unión, o aquellas empresas que tengan negocios en la Unión Europea, que manejen información personal de cualquier tipo, deberán acogerse a ella. Las multas por el no cumplimiento del RGPD pueden llegar a los 20 millones de euros.

Esto nos obliga a tener una gestión de las cookies en nuestras web.​​

¿Qué es CookieConsent?

CookieConsent es una librería que nos permite cumplir todo lo anterior en nuestra web, simplemente sabiendo que scripts estamos usando.

Su sitio web es CookieConsent

Uso de CookieConsent en nuestra web

Si accedemos a su sitio web, vemos que es tan sencillo como seguir 4 pasos y ya tendremos implementado lo mínimo requerido para cumplir la RGPD.

Paso 1. Elegimos si queremos que los scripts se carguen antes o después de aceptar el cumplimiento.

Nos dan dos opciones de funcionamiento:

1. ePrivacy Directive

Los scripts se cargan automáticamente al cargar el sitio.

ePrivacy Directive

2. GDPR + ePrivacy Directive

Los scripts se cargan sólo si se acepta el consentimiento. Se añade un botón más que permite denegar el consentimiento.

GDPR + ePrivacy Directive

Paso 2. Personalizamos la visualización del consentimiento

1. Insertamos el nombre que quieres que aparezca en el popup. Por ejemplo el nombre de tu sitio web.

Personalización - Nombre del sitio web

2. Elegimos la forma en qué queremos que se le presente al usuario.

2.1 Ventana simple
Personalización - Ventana simple
2.2 En la cabecera de la página
Personalización - Cabecera de página
2.3 Como una ventana modal
Personalización - Ventana modal
2.4 En pantalla completa, que cubra toda la ventana
Personalización - Pantalla completa

3. Colores claros u oscuros

3.1 Claros
Personalización - Colores claros
3.2 Oscuros
Personalización - Colores oscuros

4. Idioma

Nos permite seleccionar el idioma. En caso de sitios multi-idioma habrá que dinámizar el script generado en el paso 4 con la variable del sitio, aunque también permite modificarlo en la propia ventana al usuario.

Personalización - Idioma

5. Id del botón de apertura de la ventana

Podemos personalizar el del botón por si necesitamos invocarlo desde otra zona del sitio. Por defecto el id es “open_preferences_center”.

Personalización - Botón de cookies

6. Incluir un enlace a la política de privacidad o de cookies.

Nos permite incluir un enlace a la política de cookies o privacidad que será visible en la ventana de configuración del consentimiento.

Personalización - Enlace cookies

Paso 3. Registramos los scripts que utilizamos

Buscamos por todo el sitio los scripts javascript que utilizamos y tenemos dos opciones:

Los vamos añadiendo en el cuadro según el tipo.

Personalización - Añadir script
Personalización - Script añadido

Para eliminarlo sólo habrá que puelsar en “Delete”.

O directamente modificamos los scripts cambiandolos por type=“text/plain” y añadirle el tipo de consentimiento que requiere:

Ejemplos:

<!-- Login Cookies -->
<script type="text/plain" data-cookie-consent="strictly-necessary" src="/js/login-session.js"></script>

<!-- Google Analytics -->
<script type="text/plain" data-cookie-consent="tracking">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', GOOGLE_PROPERTY_ID_GOES_HERE, 'auto');
ga('send', 'pageview');
</script>

Tipos de consentimiento de los scripts:

Necesarios - Los scripts necesarios para que la web funcione.

Funcionales - Los scripts que nos aportan funcionalidad, pero no son indispensables para el funcionamiento del sitio. (Leaflet, Google Maps, etc)

Rendimiento y Trazabilidad - Los scripts que nos permiten detectar datos de uso del sitio y optimizar su funcionamiento. Por ejemplo Google Analytics.

Enfoque y publicidad - Los scripts que permiten dar una experiencia personalizada al usuario o bien enfocados a la publicidad. Por ejemplo Google adsense.

Paso 4. Copiamos el script generado en nuestro sitio web y Et viola!, ya está implementado.

Script generado

Esta misma librería se usa en www.jacrdeveloper.es, por lo que puedes usarlo de ejemplo.

Uso de librería