ASM Cookie Consent Advice, ofrece una solución sencilla, de código abierto y gratuito, a la gestión de cookies en tus webs.
El problema
En los últimos años (a partir del la nueva ley de protección de datos de 2108) hemos ido viendo como los mensajes de advertencia de cookies en las webs pasaron de una simple advertencia a ofrecer complejos sistemas de auto-configuración. Me puse a buscar una solución para mis webs, pero no encontré ningún script de código abierto y gratuito que realizara esa función. Todos los scripts o soluciones que eran capaces de gestionar (no solo avisar) la configuración de cookies ofrecían una versión gratuita (hasta un determinado número de visitas) y posteriormente pasaban a ser de pago. Además de no ser completamente gratuitas me resultaron muy intrusivas e ineficientes. Intrusivas porque les tienes que dejar que rastreen el código de la web a proteger cada cierto periodo de tiempo, información que supongo luego ellos contrastan con sus bases de datos. Ineficientes porque desactivaban todos los scripts susceptibles de insertar las cookies no permitidas por el usuario, es decir, si no aceptabas las cookies no funcionaba casi nada. Además comprobé que no eran efectivas al 100% y se dejaban cookies por eliminar. El problema se agrava dada la gran cantidad de webmasters sin el conocimiento necesario para poder gestionar esta obligación. Muchos de ellos ni siquiera saben lo que es una cookie.
Muchos de los webmasters que tienen que poner un aviso/gestor de cookies ni siquiera saben que son.
Yo creo que es una necesidad que debería gestionar el navegador (Safari y Firefox ya lo hacen) y parece que Google anuncia que a finales de 2021 también eliminará las cookies de terceros (Cookieless). Por lo tanto, es probable que esta necesidad de avisar y de ofrecer gestión de cookies puede ser transitoria.
El Objetivo
Después de observar el problema, me puse como objetivo:
Desarrollar un script universal, eficiente, no intrusivo y que me ayudase a integrar esta funcionalidad en mis páginas web, y si tenía éxito y un poquito de tiempo liberarlo como código abierto y gratuito.
La solución
La solución que he conseguido desarrollar, se llama ASM Cookie Consent Advice, un script gratuito, de código abierto, desarrollado en javascript nativo, no intrusivo y eficiente, integrado con Google Consent Mode y que ofrece una solución a aquellos desarrolladores web que tengan un compromiso con la adecuación de su código a la normativa de protección dela privacidad del usuario.
Principales características :
- Realizado en javascript nativo, independiente y compatible de otras librerías usadas en cada web.
- De código abierto (GNU 3.0) y gratuito.
- Compatible e integrado con Google Consent Mode (perfecto para compatibilizar el uso de Google Analytics o anuncios de Google).
Gracias a Google Consent Mode podremos registrar datos de visitas aunque solo acepten las cookies necesarias. - Tres niveles de aceptación de cookies:
- (1) Solo las necesarias (cookies de sesión o técnicas, necesarias para el funcionamiento de la web).
- (2) Se aceptan las cookies de estadísticas.
- (3) Se aceptan todas las cookies.
- Código limpio y no intrusivo.
- Compatible con todos los formatos de pantalla (obvio).
- Aviso de estado de aceptación de cookies.
- Versión minimizada para móviles y cookies previamente aceptadas.
- Lanzador vía enlace HTML.
- Permite la gestión de webs multi-idioma.
Consideraciones del programador:
- Es una solución orientada a desarrolladores: aunque es de fácil instalación y configuración, está orientada a desarrolladores o administradores con conocimientos mínimos de programación. Uno de los objetivos es tomar el control de las cookies y cuidar al usuario, no cumplir el expediente activando un plugin. Si no sabes nada de HTML, javascript o no sabes diferenciar una cookie de sesión de una de terceros, posiblemente no sea esta tu solución.
- Integrando Google Consent Mode podemos recoger estadísticas mínimas vía Google Analytics aunque solo se acepten las cookies necesarias o no se acepte nada.
Esto es gracias a este método de Google, nos permite recoger visitas pero no sesiones, ni porcentajes de rebote, etc... (¡MOLA!) - El script está en fase beta, previsiblemente se generarán nuevas versiones, pero no tengo ningún compromiso ni obligación con ello, por eso está disponible como código abierto y gratuito.
- Los tres niveles buscan poder gestionar las cookies por intereses (necesarias, estadísticas y todas) pero sobre todo no confundir ni marear al usuario.
- Ojo, es posible que ya existan otras soluciones open source y gratuitas, que se hayan desarrollado mientras yo hacía la mía... no los se.
Instalación y configuración:
Para descargar ASM Cookie Consent Advice puedes hacerlo desde GitHub:
La instalación:
- Agregar a la cabecera (header) de la web el script de Google Tag Manager y los dos scripts de ASM:
<script async src="https://www.googletagmanager.com/gtag/js?id=xxxx"></script>
<script src="/your-folder-installation/asm_config.js"></script>
<script src="/your-folder-installation/asm_content.js"></script> - Editar el archivo asm_config.js y configurar la variable asmconfig:
var asmconfig = {
gaid : 'xxx',
ad_not_acepted : 'Estado: <strong>Aceptas</strong> las cookies necesarias.',
ad_acepted : 'Estado: <strong>Has aceptado</strong> todas las cookies.',
ad_acepted_stats : 'Estado: <strong>Has aceptado</strong> las cookies necesarias y de estadísticas.',
aviso : '<p>Este sitio ultiliza cookies necesarias, y otras que se usan para funciones avanzadas, estadísticas o acciones de marketing.</p><p>Puedes aceptarlas todas o configurar su uso:</p>',
aviso2 : 'Pincha <a href="/cookies" class="asm-more-info">aquí</a> para saber más.',
pie : '<div class="pieadvice"><a href="https://algosemueve.es/asm-cookie-consent" class="asmlink" target="_blank">ASM Cookie Consent</a></div>',
taceptar1 : 'Aceptar solo necesarias',
taceptar2 : 'Aceptar estadísticas',
taceptar3 : 'Aceptar todas',
tconfig: 'Configurar'
}En la variable asm_config se configuran textos, enlaces y el id de Google Tag.
- Para configurar el idioma en asm_config.js podremos optar por una sola variable asm_config o una variable por cada idioma.
Por ejemplo en este caso si el idioma del usuario es es-ES mostramos los datos en español y si no lo hacemos en inglés:
var lng = window.navigator.userLanguage || window.navigator.language;
Hay que tener en cuenta que lo anterior es para el idioma que tenga el usuario configurado en cliente (su navegador o sistema operativo).
if(lng=='es-ES') {
var asmconfig = {
gaid : 'xxxx',
ad_not_acepted : 'Estado: <strong>Aceptas</strong> las cookies necesarias.',
ad_acepted : 'Estado: <strong>Has aceptado</strong> todas las cookies.',
ad_acepted_stats : 'Estado: <strong>Has aceptado</strong> las cookies necesarias y de estadísticas.',
aviso : '<p>Este sitio ultiliza cookies necesarias, y otras que se usan para funciones avanzadas, estadísticas o acciones de marketing.</p><p>Puedes aceptarlas todas o configurar su uso:</p>',
aviso2 : 'Pincha <a href="/cookies" class="asm-more-info">aquí</a> para saber más.',
pie : '<div class="pieadvice"><a href="https://algosemueve.es/asm-cookie-consent" class="asmlink" target="_blank">ASM Cookie Consent</a></div>',
taceptar1 : 'Aceptar solo necesarias',
taceptar2 : 'Aceptar estadísticas',
taceptar3 : 'Aceptar todas',
tconfig: 'Configurar'
}
} else {
var asmconfig = {
gaid : 'xxxx',
ad_not_acepted : 'State: <strong>You have accepted</strong> the necessary cookies.',
ad_acepted : 'State: <strong>You have accepted</strong> all cookies.',
ad_acepted_stats : 'State: <strong>Has aceptado</strong> the necessary and statistics cookies.',
aviso : '<p>This site uses necessary cookies, and others that are used for advanced functions, statistics or marketing actions.</p><p>You can accept them all or configure their use:</p>',
aviso2 : 'Click <a href="/en/cookies" class="asm-more-info">here</a> for more info.',
pie : '<div class="pieadvice"><a href="https://algosemueve.es/en/asm-cookie-consent" class="asmlink" target="_blank">ASM Cookie Consent</a></div>',
taceptar1 : 'Accept only necesary',
taceptar2 : 'accept stats',
taceptar3 : 'Accept all',
tconfig: 'Config'
}
}
Si queremos ofrecer un mensaje distinto para las distintas versiones dependiendo del idioma que elija el usuario en el sitio, tenemos que buscar otra solución vía programación en servidor. Por ejemplo podemos cargar un archivo distinto dependiendo del idioma elegido por el usuario, mezclar PHP + javascript, etc.. - Pasamos a la configuración de los scripts que se van a ejecutar al aceptar el usuario todas las cookies (nivel 3).
Es en este punto donde se puede necesitar algún conocimiento de programación, y de las consecuencias que tiene la activación o desactivación de determinado código, tanto a nivel de cookies como a nivel de funcionalidad.
Deberemos saber qué códigos son incompatibles con la no aceptación de "todas las cookies" para no ejecutarlos hasta que el usuario las acepte.
También deberemos de ser conscientes que ciertas funcionalidades (las que usen cookies de terceros, o cookies propias no necesarias) dejarán de funcionar hasta que se acepten todas las cookies.
Tenemos dos maneras de desactivar scripts y activarlos al "aceptar todas las cookies":
La primera es sustituir la propiedad type="text/javascript" por "text/plain" tanto en los enlaces de script como en los trozos de código:
<script type="text/plain" src="/xxxx.js"></script>
La idea no es otra que evitar que se ejecuten los scripts, una vez el usuario acepte las cookies se iran activando uno a uno todos los scripts con type="text/plain".
<script type="text/plain" > alert('hola');</script>
Si queremos que uno de esos scripts no se ejecute hasta que lo haga otro deberemos de añadir el dataset data-main y data-child para relacionarlos:
<script type="text/plain" src="/xxxx.js" data-child="nombre"></script>
<script type="text/plain" data-main="nombre"> alert('hola');</script>
De esta manera solo se ejecutará el alert('hola') cuando /xxxx.js se haya terminado de cargar.
La segunda manera es introducir tu propio código en asm_content.js:
if(modo==2) {
//HERE YOU CAN ENTER YOUR OWN SCRIPTS
//loadjs('/media/aceptar.js');
/* insert code here */
/* end code */
var scripts = document.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
if(scripts[i].type == 'text/plain' && !scripts[i].dataset.main) {
if (scripts[i].src) loadjs(scripts[i].src, scripts[i].dataset.child);
else eval(scripts[i].innerHTML);
}
}
}
Cuando el usuario acepta "todas las cookies" es cuando el modo==2 entra en acción y es ahí donde podremos insertar nuestro código. - Configuración del diseño de las ventanas: de momento se van a necesitar conocimientos de CSS, ya que hasta que en la próxima versión podamos sacar las variables de diseño al archivo de configuración, los css están dentro del archivo asm_content.js:
//css
Además soy consciente de que no es document.write la manera más elegante de añadir CSS vía javascript, se cambiará más adelante.
document.write('<style>div#cookie_button {z-index: 999999999;position: fixed; bottom: 0; right:0; color: #fff;transition: all 2s ease-in;}.aviso.hidden{opacity:0; visibility:hidden; transition: all 1s ease-in;}.aviso {z-index: 999999999;visibility: visible;opacity: 1;position: fixed;;bottom: 0;right: 0;width: 100%;max-width: 100%;background-color: #fff;color: #000;PADDING: 50px;transition: opacity 1s;font-size: 16px;font-family: Arial;line-height: 20px;text-align: center;}.aviso p {margin: 0;margin-bottom: 10px;}.asm-button {padding: 10px;margin: 7px;border: 0;font-size: 15px;cursor: pointer; background-color: #fff;}a.asm-more-info {color: #fff;}svg#Capa_1 {width: 40px;height: 40px;fill: #ca7c1b;position: relative;top: 8px;left: 8px;}button#cookie_button_b {background-color: transparent;margin: 0;padding: 20px;border-radius: 140px 0 0;}button#acepta,button#acepta1, button#acepta2 {background-color: darkcyan;color: #fff;font-size: 16px;} svg#config{position: relative;top: 5px;margin-right: 3px;margin-top: -11px;fill: #333;}button#rechaza {background-color: #ccc;font-size: 16px;color: #333;}a.asm-more-info {color: #008b8b;font-weight: 700;text-decoration: underline;}div#asm_state {margin-top: 20px;margin-bottom: 10px;}.pieadvice {position: absolute;bottom: 10px;right: 10px;font-size: 12px;padding: 2px;color: #666;}button#acepta2, button#acepta1 {background-color: #757c7c;}svg#closeams {position: absolute;top: 20px;right: 20px;cursor: pointer;}</style>'); - Podemos lanzar en cualquier momento la ventana (por ejemplo desde la sección de política de cookies) llamando a la función onclick="show_popup();" desde cualquier elemento HTML que lo permita, por ejemplo un enlace:
<a href="javascript:void();" onclick="show_popup();">Muestra el aviso</a>
Y este sería el resultado: Muestra el aviso (demo)
Despedida
Pues de momento nada más, espero que te sirva de ayuda el script como a mí, y si quieres contactarme me tienes en:
- Twitter: https://twitter.com/CiroArtigot
- Linked-in: https://www.linkedin.com/in/ciroartigot/
Si me quieres ayudar
Ah, y por último, si quieres ayudarme a seguir desarrollando sofware libre y gratuito, me puedes invitar a una cerveza :)
Molaría mucho que:
Donar una cerveza