[DesActualizado] Ley Cookies & Google Analytics: una solución Legal, Fácil y sin Desarrollo basada en Google Tag Manager

A estas alturas ya sabréis que el 27 de Septiembre de 2013 se modificó la LSSI para dar cabida a una nueva regulación a la grabación y lectura de cookies en los equipos de los usuarios, y que ya ha dado algún susto en forma de sanciones. Me ahorraré las opiniones personales sobre la norma porque ya se ha hablado mucho del tema, pero en cambio sí me quiero centrar en el problema que supone para la analítica, y la dificultad que en muchas ocasiones supone cumplir con la legalidad y seguir contando con unos datos de cierta calidad con los que seguir midiendo algo tan simple como las visitas que recibe nuestra Web.

Durante estos meses me ha sorprendido ver en muchos de nuestros clientes la diversidad de soluciones que están adoptado: desde los que simplemente colocan el cartel de aviso sin evitar la carga de la cookie de GA al mostrar la Web, sabiendo que no cumplen la normativa al 100% pero intentando mostrar que no actúan de mala fe, hasta los que han decidido gastar dinero en potentes desarrollos o plug-ins de terceros que acatan la Ley hasta el límite, solicitando un opt-in antes de cargar ningún script de medición.

En los primeros casos mantenemos todos nuestros datos, pero no cumplimos la legalidad. En el segundo, la cumplimos a rajatabla, pero a cambio veremos descender de manera preocupante nuestros datos, hasta el punto de que la analítica tenga poco que analizar.
Por eso llevaba algunas semanas dándole vueltas a una forma fácil y sencilla de resolver el problema sin invertir un euro, que fuera legal y que supusiera las mínimas complicaciones posibles para ser implementado. ¿Intrigados?…vamos a ello 🙂

Mi solución

He trabajado sobre la base de Google Tag Manager y está específicamente diseñada para controlar la cookie de Google Analytics, aunque con las modificaciones precisas se podría aplicar a otras herramientas de medición sin mayores problemas.

Por otra parte, dejaré claro que tras investigar un poco y consultar con algún abogado especializado en digital, para cumplir con la Ley es necesario avisar claramente a la visita de la utilización de cookies y su cometido (en nuestro caso con Google Analytics, cookies de primera parte para la mejora de la experiencia de navegación, y blablabla), y obtener su consentimiento implícito. Y aquí reside “la trampa”: no necesitamos un clic en un botón “Aceptar”. El simple hecho de que la visita continúe navegando por nuestra Web tras haberle mostrado el aviso, puede ser interpretado como una aceptación de nuestras condiciones, que pasan por la utilización de las cookies que necesitamos para prestar el servicio. Es decir, un scroll, un clic en cualquier enlace o el hecho de que la visita permanezca en la Web leyendo un determinado tiempo, supone la aceptación implícita de las cookies porque se entiende que la visita está usando la Web y por tanto acepta nuestras condiciones.

¿Y que vamos a necesitar?

  • Google Tag Manager funcionando en nuestra página
  • Google Analytics como cuenta de medición de nuestra analítica
  • Un par de scripts que os entrego más abajo
  • Poder subir a vuestro alojamiento Web un archivo CSS con los estilos del aviso de cookies que bajos a mostrar.
  • Conocimientos básicos de HTML

Explicado esto, vamos al lío. Lo que vamos a hacer es que Tag Manager controle la presencia o no de una cookie técnica (nuestra) llamada “aceptacookie”, y en base a esto cargue o no el aviso de cookies en la Web y la medición de Google Analytics. Si la visita es repetidora y ya tiene dicha cookie técnica, cargará la medición de GA sin más, y si no la detecta, mostrará el aviso de cookie y vigilará el uso implícito de la Web para lanzar la medición de GA y guardar la cookie técnica en el navegador del usuario, de forma que recordemos su decisión para el futuro. Para detectar el uso implícito, desde Google Tag Manager controlaremos el scroll, los clics en enlaces y un temporizador de tiempo.
El aviso de la cookie se mostrará en la parte inferior de la página, con un texto que podremos personalizar, y un estilo que podremos re-ajustar a nuestro gusto si tenemos unos conocimientos mínimos de HTML. Por defecto he optado por un color blanco hueso, con un resultado final similar a este:

avisocookie

Veamos cómo hacerlo:

1) Instala Google Tag Manager

Si no lo tienes ya, empieza a utilizar Google Tag Manager. Este gestor de etiquetas es el que nos permitirá hacer funcionar la solución de control de cookies pero, además, te simplificará mucho la vida a la hora de gestionar etiquetas de tu Web, realizar cambios de configuración en la medición con GA, etc. Lo único que tendrás que hacer es darte de alta una cuenta (es gratuito) y crear un contenedor sobre el que a continuación daremos de alta las etiquetas, reglas y macros necesarias. ¿Ni idea de cómo hacerlo? En Internet tienes muchos tutoriales, pero si no te apetece buscar mucho, puedes empezar por este.

Tras dar de alta la cuenta y crear el contenedor, la única modificación que tendrás que hacer en tu Web es eliminar el antiguo código de Analytics que utilizabas hasta el momento, y colocar el script de Tag Manager justo tras la apertura de la etiqueta <body>. Por suerte hay tutoriales y plug-ins que simplifican la tarea para WordPress, Joomla e incluso plataformas como Prestashop.

En cualquiera de los casos, no crees aún ninguna Etiqueta, Regla o Macro al generar el contenedor. Lo haremos justo a partir del siguiente punto.

2) Crear Macro

Una vez dentro de la interfaz de Google Tag Manager, y dentro del contenedor que hemos creado, pinchando en el icono en forma de pieza de lego de la barra superior podemos crear una regla.

Crearemos una Macro con los siguientes parámetros:
Macro_Existeaceptacion
En este caso, lo que vamos a hacer es que Google Tag Manager lea el contenido de la cookie técnica “aceptacookie” en el navegador del usuario, si es que esta existe, cada vez que se cargue.

3) Crear Reglas

Tendremos que crear tres reglas. Éstas las podremos generar pinchando en el icono con dos aros de la barra superior.

La primera Regla tendrá estos parámetros:
Regla01

Esta regla se disparará en todas las URLs, y siempre que la exista la cookie “aceptacookie” con valor igual a “yes”.

La segunda Regla tendrá estos parámetros:
Regla02

Esta regla se disparará en todas las URLs, y siempre que no exista la cookie “aceptacookie”, o esta no tenga valor igual a “yes”.

La tercera Regla tendrá estos parámetros:
Regla03

Esta se disparará siempre que el “event” del dataLayer coincida con la expresión regular (aceptacookies|gtm.linkClick|aceptacookieportiempo), y la cookie “aceptacookie” no exista o no contenga un valor igual a “yes”.

4) Crear Etiquetas

Y llegamos a las etiquetas, el plato fuerte y la parte más compleja de todo el sistema, pues implica volcar código en etiquetas HTML personalizadas. Para crear las etiquetas, utilizaremos el botón en forma de etiqueta de precio que tenemos en la barra superior.

La primera etiqueta tendrá estos parámetros:

Etiqueta01

Esta etiqueta es la que mostrará el aviso en la parte inferior de cualquier página de nuestro sitio a la que acceda una visita que carezca de la cookie técnica “aceptacookie”, lo que indicará que no ha estado en nuestra Web antes (o ha limpiado cookies), y por tanto no tenemos su aceptación implícita para cargar Google Analytics y su cookie.

Se trata de una etiqueta de tipo HTML personalizado con el siguiente código HTML: http://pastebin.com/tSAfW1yd. En este código será necesario ajustar dos cosas:

  • La ubicación del archivo CSS con los estilos de la etiqueta de aviso de las Cookies. Y es que para que funcione todo correctamente, tendrás que crear un archivo de extensión CSS (p.ej. aviso.css) con este código http://pastebin.com/PZPcvBj3 y colgarlo en tu sitio Web. Tendrás que especificar la URL completa en la primera línea de la etiqueta HTML (p.ej. http://www.midominio.com/estilos/aviso.css). Además, si tienes conocimientos de programación CSS/HTML, podrás ajustar los estilos de este archivo para cambiar colores, bordes, tamaño, etc. a tu gusto.
  • El texto de la caja de aviso. El que he indicado es genérico y lo he sacado de una Web. No obstante. sería interesante personalizarlo para tu Web incluyendo tu nombre, e incluso colocando un enlace a la política de privacidad de la página.

Por último, no olvidéis marcar como regla de activación la indicada en la captura, y que hemos creado previamente.

La segunda etiqueta tendrá estos parámetros:


Etiqueta02
Esta etiqueta, también de tipo “HTML personalizado”, contiene un script basado en JQuery que se encargará de crear una cookie llamada “aceptacookie” y cargarla con valor a “yes” cuando es ejecutado. Además, una vez realizada esta acción, se encarga de ocultar el mensaje de aviso que estaba presente.

Podéis encontrar el script completo para hacer copia/pega en http://pastebin.com/TRWY2z0R.

Por último, no olvidéis asignar la regla de activación que se indica en la captura para que funcione correctamente.

La tercera etiqueta tendrá estos parámetros:

etiqueta03

La tercera etiqueta es la más sencilla: simplemente se trata de crear la etiqueta que lanza las páginas vistas a Google Analytics. En nuestro caso hemos creado una para el método Universal Analytics, teniendo que introducir el UA de nuestra Propiedad de medición en Analytics para que mande los hits a nuestra cuenta.

Para los que aún tengáis Classic GA, en principio podéis aplicar este método exactamente igual, pero indicando en este punto como Tipo de etiqueta “Google Analytics“. No obstante, os invito plantearos seriamente migrar vuestra cuenta a Universal 🙂

Por último, muy importante asignar correctamente las 2 reglas de activación que se muestran, pues son la clave de que todo funcione correctamente.

La cuarta etiqueta tendrá estos parámetros:

etiqueta04

Llegamos a la etiqueta que detecta un clic en cualquier enlace de la página, una de las condiciones que utilizaremos para obtener el consentimiento implícito por parte del usuario. Para ello, la clave está en seleccionar como Tipo de Etiqueta “Procesador de eventos / Procesador de clics en enlaces“. Esta funcionalidad fue integrada recientemente en GTM, y permite detectar de manera automática cualquier clic en un enlace href de la página. De esta forma detectará tanto el clic sobre el enlace de cualquier subpágina del sitio, como sobre el propio botón Aceptar del aviso de cookies que mostraremos.

En todo caso, os recomiendo marcar las dos opciones indicadas, y especialmente la de “Esperar por las etiquetas”. En este caso se esperará 2 segundos (2000 milisegundos) antes de abrir el enlace para dar tiempo a que el evento sea detectado por GTM, y con ello lance el script de aceptación de cookie.

Por último, atención a poner la regla de activación indicada en la captura.

La quinta etiqueta tendrá estos parámetros:
etiqueta05



Con esta etiqueta lograremos detectar cualquier movimiento del scroll en la página, y en caso de hacerlo, disparar la etiqueta que carga la aceptación de la cookie. Para ello indicaremos una etiqueta de tipo “HTML Personalizada” y copiaremos el siguiente script tal cual: http://pastebin.com/Yv8fxbSq

De nuevo, atención a la regla de activación que se indica para esta etiqueta en la captura.

La sexta y última etiqueta tendrá estos parámetros:
etiqueta06


Esta etiqueta lanzará un contador de tiempo, de manera que si no ocurre nada en la página (clic o scroll), disparará la etiqueta de aceptación de cookie pasados 10 segundos desde la entrada en la página. Para ello hay que seleccionar como Tipo de Etiqueta “Procesador de eventos / Procesador del temporizador“, otra de las novedades para el auto etiquetado que se integró recientemente en GTM.

Si deseamos ampliar o reducir estos 10 segundos, podemos jugar con la opción “Intervalo“, introduciendo el tiempo en milisegundos. Bajo mi punto de vista 10 segundos es un tiempo prudencial para dar la oportunidad a que las visitas que no quieran seguir navegando abandonen la página. Sin embargo, mucho cuidado porque todos aquellos que abandonen la Web antes de 10 sg. no será contabilizados como visitas. Esto va a influir en nuestras métricas, y especialmente hará que bajen los rebotes de la misma (y las visitas). Según la Web, podemos incluso bajar a menos segundos, aunque tampoco os recomiendo pasarnos, porque entonces podríamos estar jugando sucio y enfrentarnos a problemas en la interpretación de la famosa “aceptación implícita”.

Una posible solución podría ser combinar una medición interna del servidor (p.ej. AWStats), y comparar los datos de GA con los del servidor. Otra alternativa sería combinar esta solución con una segunda cuenta de GA sin cookie que sólo cuente las visitas de una página, aunque esa es otra historia que quizá me plantee para un post futuro 🙂

Con esto se acabaron las etiquetas, aunque no os olvidéis de comprobar la regla de activación indicada en la captura para que todo funcione como debe.


5) Listo, ¡ya hemos terminado!

Llegados a este punto, si hemos creado todas las macros, relgas y etiquetas correctamente, deberíamos tener resuelto el problema de las cookies. Si queréis ver una cutre-página de pruebas que he preparado con toda esta configuración montada, podéis verla aquí:

http://www.esanchezrojo.es/testing/gtm-cookie/index.html

Si miráis con un complemento como Firebug las cookies que carga dicha página, podéis comprobar que ocurre ante las diferentes tipos de acciones, y cómo carga la cookie técnica y la de GA tras la aceptación implícita:
pruebas_cookie

¿Que te ha parecido la solución? ¿Algo que aportar? ¡No dudes en dejar tus comentarios!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *