Klaro-cookie-consent, plugin para WORDPRESS para cumplir con la GDPR europea

Nueva directiva europea y española

• Enlace de interés oficial en España:
  Ley de Servicios de la Sociedad de la Información y del Comercio Electrónico
• Cookies, the GDPR, and the ePrivacy Directive (europe.eu):
  https://gdpr.eu/cookies/

Un antes y un después a nivel técnico

Este cambio normativo significa un cambio radical. Anteriormente solamente había que informar al visitante, pero se continuaba usando las cookies como siempre. Pero ahora la ley exige que no se use ninguna cookie hasta que explcítamente el visitante haya expresado su consentimiento, lo cuál a nivel técnico es un poco "caminar hacia atrás", porqué las cookies -de toda la vida- se instalan en el navegador del usuario solamente aterrizar en la págin. Hacerlo de otra manera es lo "artificial" en el sentido de que nunca se había pensado ni construido la tecnología cliente-servidor para este tipo de requisito.

Con un ejemplo se entenderá mejor: en wordpress NO ES SUFICIENTE CON INSTALAR UN PLUGIN, sino que hay que modificar MANUALMENTE el código de inserción de los scripts de javascript que se usan para cosas como el pixel de seguimiento estadístico de tráfico de Google Analítics (o Piwik, o del software que use la web), o el de inserción de widget sociales de Facebook, o el de un vídeo de Youtube para que quede embebido en la web (Youtube utiliza con diferencia muchíiiiiisimas cookies), etc...

Casi cualquier script de terceros (normalmente redes sociales, pero también publicidad o análisis de tráfico) usan código javascript que genera sus propias cookies para "recordar al usuario" cuando regresa de nuevo. Realmente no guardan información personal en tu navegador web, sino un ID alfanumérico largo, en este sentido nadie debe preocuparse.

Lo que hay que entender es que para usar cualquiera de estos elementos de terceros (como insertar un vídeo de Youtube) ya no puedes copiar y pegar el código que te dan esos servicios. Hay que modificar ese código de inserción manualmente de cierta manera para que el plugin que uses de consentimiento de cookies EVITE QUE SE EJECUTE AUTOMÁTICAMENTE esos scripts como siempre han venido haciendo y a su vez pueda activarlos de forma asíncrona si el usuario otorga su consentimiento.

¿Vas entendiendo lo rebuscado, complicado e incómodo de todo el asunto a nivel técnico?

En el mejor de los casos, el CMS de turno (Wordpress, Drupal, Joomla, Barllo, etc...) puede modificarse (lo harán con el tiempo) para gestionar estas modificaciones adhoc de forma más o menos automática. Pero de momento -como he dicho- es "caminar hacia atrás".

Qué es Klaro

Son dos proyectos de software libre relacionados:

• Klaro! es un código abierto opensource:
  
  https://github.com/KIProtect/klaro
   
• Klaro Consent Manager es un plugin de Wordpress que se basa en el anterior:
  
  https://wordpress.org/plugins/klaro-consent-manager/

El de Github es para cualquier CMS y está más acabado. El de Wordpress está un poco raro, porqué no me detectaba bien las traducciones. Así que tuve que crear a mano los .po y .mo para castellano y catalán. Y la verdad la documentación es pésima. Me ha costado muchas horas hacerlo funcionar.

Qué son las "aplicaciones" para Klaro

En el contexto de esta ley de privacidad y por tanto de plugins como éste, a cada trozo/archivo de código javascript que se cargue en nuestra web y que use la tecnología de cookies o cualquier otra tecnología de almacenamiento en el navegador (que en los últimos años han aparecido muchas más) para dejar información circunstancial de cualquier tipo acerca del usuario, se le llama aplicación.

Las casi omnipresentes son: Google Analytics, Google Adsense, Youtube, Facebook, Twitter, Instagram, Piwik, etc...

Una vez instalado el plugin Klaro en nuestro wordpress, en el panel de adminitración de nuestro Wordpress hay una nueva sección en el panel lateral izquierdo llamada Klaro Consent Manager. Con varias subsecciones. Entre ellas, está la lista de Aplicaciones en donde tenemos que dar de alta una aplicación por cada script de javascript que guarde una cookie en el navegador del visitante. Veamos cómo configurar las más habituales.

Ten en cuenta que solo haciendo esto el plugin no tendrá control sobre las cookies, aunque la ventana emergente y los mensajes de las cookies parezcan funcionar estupendamente. Para que el plugin controle la ejecución de los scripts que generan las cookies hay que retocar el código manualmente o hackear el código de tu WP, etc... es la parte complicada del asunto!

Voy a mostrar a continuación cómo configurar adecuadamente cada una de las principales aplicaciones.

Configurar aplicación: Google Analytics

• Título: Google Analytics
• Explicación para el visitante: Para que podamos tener estadísticas de tráfico en nuestra web.
• Propósito: Análisis
• Estado por defecto DESACTIVADA: marcar esta opción!!
• Enlace de interés oficial: Cómo utiliza Google las Cookies
• Es una de las aplicaciones más presentes en cualquier portal web, por ser un servicio gratuito de excelente y probada calidad. El código que normalmente insertamos en nuestra web es de este tipo:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-397101-44"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-397101-44');
</script>

Lo único que tenemos que modificar es la segunda etiqueta <script> de este modo:

<script type="opt-in" 
        data-type="application/javascript" 
        data-name="google-analytics">

Esto, lo que provocará es que al cargar la página no se ejecute -como hasta ahora- el código script que contiene. Será el plugin Klaro quien en base a los consentimientos que dé el usuario ejecute o no el código contenido en ese script, de forma controlada.

Tan controlada que la primera vez que un visitante llega a nuestra web, el código no se ejecuta. El visitante verá el diálogo de configuración de consentimientos que Klaro construye y cuando el visitante active conscientemente el interruptor de Google Analytics o bien pulse el botón Acepto del mensaje inicial, Klaro ejecutará ese script inmediatamente y en futuras páginas que visite el usuario en el futuro.

¿Genial no?

Configurar aplicación: Wordpress

• Título: Wordpress
• Explicación para el visitante: Control de sesión de usuario y algunas herramientas del propio portal web: carrito de compra, etc. La información personal del usuario nunca se guarda en el navegador web sino en el servidor.
• Propósito: Usabilidad
• Aplicación NECESARIA: marcar esta opción!!

En cuanto al código a modificar en nuestro portal web no hay que hacer nada, porqué realmente Klaro no ha de tocar nada de lo que Wordpress tenga que hacer en cuanto a sus cookies.

Configurar aplicación: Klaro Consent Manager

• Título: Klaro Consent Manager
• Explicación para el visitante: Permite recordar al navegador web los consentimientos que aquí estás expresando, para futuras visitas.
• Propósito: Usabilidad
• Aplicación NECESARIA: marcar esta opción!!

De nuevo, no hace falta tocar nada del código de Wordpress.

Configurar aplicación: Youtube

• Título: Youtube
• Explicación para el visitante: Para que Youtube pueda mejorar tu experiencia de usuario, tanto en la selección de publicidad más acorde a tu historial de uso. como en las sugerencias de nuevos vídeos para ti en tu cuenta.
• Enlace de interés oficial: Cómo utiliza Google las Cookies
• Propósito: Publicidad
• Estado por defecto DESACTIVADA: marcar esta opción!!

No necesita presentación. Si se quiere que Klaro pueda controlar los <iframe> que haya de Youtube en la página, hay que insertar estas líneas de código al final del archivo /index.phpen la raíz de tu Wordpress:

// modify youtube tags
echo str_replace( 
         array(' src="http://www.youtube.com/',' src="https://www.youtube.com/'),
               ' type="opt-in" data-name="youtube" data-src="https://www.youtube.com/',
               ob_get_clean());

Modificación no-perfecta

Esta modificación del archivo raíz de tu propio Wordpress es un "auto-hackeo" en toda regla. Si me preguntas, el mayor inconveniente es que cada vez que se genera la llamada a tu portal web se da este reemplazo... lo cuál no me agrada demasiado. Preferiría que Wordpress gestionase la inserción de los IFRAME de youtube contemplando ya este reemplazo.

Pero la verdad, los vídeos de Youtube se pueden incrustar en tu wordpress de múltiples maneras: desde el template del mismo, embebido en el código fuente, o bien desde una entrada, o una págna, o la descripción de cualquier otro módulo (woocommerce, etc...) o desde plantillas y bloques de texto de la configuración del Tema de wordpress que use el portal... Así pues, este hackeo es la manera más efectiva y segura de hacerlo.

El otro gran "inconveniente" es que cuando actualices Wordpress debes volver a insertar este código!!! porqué probablmente la actualización lo quite.

Se me ocurre que a futuro podría hacer que el plugin Klaro compruebe la existencia de este código en el index.php y si no lo halla entonces lo agregue. Bastaría hacer esa confirmación una vez al día, con la primera visita del día.

Descárgate el plugin que he modificado

Por último, quiero compartir aquí el plugin en formato ZIP. Úsalo y si puedes traducirlo a algún otro idioma pásamelo y actualizo el plugin con tu traducción.

Descargar ZIP

Cómo se ve el plugin funcionando

Así se ve el plugin Klaro en un portal web, en la esquina inferior derecha:

Al pulsar sobre el botón Configurar se abre este cuadro de diálogo modal, y es asombroso cómo al activar el interruptor de Youtube, INSTANTÁNEAMENTE se cargan los vídeos de Youtube!! De hecho, hasta que el usuario no de este consentimiento los vídeos NO SE DEBEN MOSTRAR si quieres cumplir con la ley. Créeme que ya han puesto sanciones de 30,000 euros! Poca broma...

Finalmente, debes editar el pie de página de tu portal web para mostrar un enlace que abra de nuevo el recuadro modal anterior, para que el usuario pueda modificar sus consentimientos:

El código de ese enlace debe ser éste:

<a href="#" onclick="return klaro.show(klaroConfig)">
   Revisar y actualizar consentimientos
</a>