La magia de Google Tag Manager y Cookies

Actualizado: 30 de octubre de 2023. Las cookies son una parte súper importante de la web. Imagina el mundo sin ellas: no podrías usar tu Facebook o Twitter. Ayudan a retener datos durante la visita de un usuario a una página web, así que naturalmente, también son un componente importante de la analítica web.

De forma predeterminada, Google Analytics y otras herramientas analíticas utilizan cookies para rastrear el comportamiento de los usuarios en su sitio web. Desafortunadamente, todavía veo a muchos vendedores (que trabajan con GTM) sufriendo por no poder despedir a los Tags para los visitantes que regresan, o después de 4 visitas a la página, etc.

Pero esto no debería ser un problema ya que puedes usar el Google Tag Manager para configurar y recuperar datos de las cookies de una manera bastante fácil. En esta entrada del blog, te mostraré cómo utilizar fácilmente las cookies con Google Tag Manager y llevar tu seguimiento web al siguiente nivel.

Recuerdo cuando estaba empezando a aprender GTM. Fue un gran salto para mí cuando me di cuenta de que podía configurar y leer las cookies sin la ayuda de un desarrollador. Añadió mucha más flexibilidad y libertad a mi gestión de etiquetas.

¿Qué pasa si tengo que disparar un Pop-up específico si un visitante originalmente aterrizó en mi sitio web de Adwords Y ya ha visto 5 páginas? No hay problema!

Antes de continuar: este tema también se explica detalladamente en el Curso Intermedio de GTM

Si prefieres el contenido de video a las entradas de blog, entonces deberías considerar inscribirte en mi curso intermedio de Google Tag Manager. En él, descubriré muchas características/consejos/trampas del GTM que los usuarios intermedios suelen pasar por alto. Además, obtendrás una introducción adecuada a algunos temas técnicos que te ayudarán a pasar al siguiente nivel con el GTM.

¿Por qué deberías molestarte con las cookies? Algunos ejemplos

Al configurar y leer las cookies con el Google Tag Manager puedes empezar a crear disparadores muy sofisticados, como por ejemplo:

• Un visitante ha visto 5 páginas. ¡Mostrémosle un popup con una oferta especial!
• Un visitante es en realidad un usuario en su SaaS (Software as a service) pero actualmente está navegando sin registrarse. Sin embargo, él/ella todavía tiene una cookie con el valor «registeredUser=true» que puede ser usada como una condición para su activación.
• Un visitante ha llegado a su sitio web a través de un enlace de afiliado. Con cada visita a la página, puedes conservar el ID de afiliado en la cookie del visitante.
• ¿Tienes una página de precios con calculadora de precios? Adjuntemos los resultados de la calculadora (precio) a ese visitante en particular. De esta manera verás cómo se comportan en tu sitio los visitantes con diferentes rangos de precios.

Bastante bien, ¿no?

Entonces, ¿cuál es el plan?

1. Primero, alguien tiene que colocar la cookie. Puedes ser tú (con la ayuda del administrador de etiquetas de Google) o un desarrollador.
2. Luego, tienes que crear una variable de la cookie de la primera persona en el GTM. Esta buscará una cookie con un nombre particular y hará que su valor esté disponible en la capa de datos. También podrás verla en el modo de vista previa y depuración del Google Tag Manager.
3. Crear un disparador en el que la condición involucre la mencionada variable de la primera cookie.
4. Disparar una etiqueta basada en un disparador del punto 3.
5. Ganancia.

Configurar las cookies con el Google Tag Manager

Para poder establecer una cookie, tendrás que crear una etiqueta HTML personalizada. Contiene código Javascript que define el nombre de la cookie, el tiempo de expiración, etc.

En el guión anterior, hay tres variables que debes editar:

• cookieName – debes darle un título significativo, por ejemplo, visitorFromAdwords, affiliateID, pageviewCount, etc.
• Valor de la cookie – En el caso de visitorFromAdwords los posibles valores pueden ser verdaderos o falsos . El valor de la cookie deaffiliateID puede ser 2385437, y el de la cookie de pageviewCount – 5.
• expationTime define cuando la cookie expira. 2592000 es 30 días convertidos en segundos (30 días * 24 horas * 60 minutos * 60 segundos * 1000 milisegundos). Si quieres que la cookie expire después de que la sesión termine (cuando se cierra la ventana del navegador), entonces elimina expires=»+date+»; del final del script. Ten en cuenta que Google Chrome sigue ejecutándose en segundo plano cuando cierras la ventana del navegador, por lo que la cookie «vivirá» más tiempo.

Ahora, tienes que decidir cuándo quieres poner esa galleta. ¿Debería este guión de «establecer una cookie» dispararse cuando la URL contiene ?gclid= (lo que significa que un visitante aterrizó a través de la campaña de Adwords)?

Digamos que queremos poner cookies para los visitantes que han encontrado nuestra página web a través de Google Adwords. En ese caso, necesitamos crear un disparador con los siguientes ajustes.

Cuando una persona hace clic en cualquier anuncio de Google, una URL de destino contiene ?gclid=XXXXXX. Esa es la razón de la condición de este disparador.

Prueba la cookie

Después de crear la etiqueta HTML personalizada con el script de configuración de cookies y su disparador, lo siguiente que debes hacer es probar la implementación con el modo de vista previa y depuración. Asegúrate de que la etiqueta se dispare SÓLO cuando la URL contenga ?gclid=.

Ahora, vamos a comprobar si una cookie está configurada correctamente. Hay dos formas principales de comprobar las cookies: la función incorporada del navegador (herramientas para desarrolladores) o un plugin.

Personalmente, estoy usando un plugin de Chrome llamado EditThisCookie (también disponible para los usuarios de Opera ). Esta extensión realmente simple e intuitiva me permite comprobar rápidamente qué cookies se están utilizando actualmente y qué datos contienen.

Si aún no lo has instalado, descárgalo aquí. Si estás usando un navegador diferente, necesitarás encontrar algo por tu cuenta.

De todos modos, volvamos a EditThisCookie. Una vez que hayas instalado esta extensión, aparecerá un icono de cookie junto al icono del menú (en Chrome)

Ve al sitio web en el que estás trabajando actualmente, haz clic en el icono EditThisCookie y verás una lista ampliada de todas las cookies que se utilizan actualmente en ese sitio web. Busca una cookie llamada visitorFromAdwords. Este pequeño dato nos ayudará a hacer la magia en más capítulos de esta entrada de blog.

Leer la cookie

Ahora, tenemos que «enseñar» a Google Tag Manager a leer la cookie y hacerla disponible como una variable. Ve a tu cuenta GTM, abre la lista de variables y crea una nueva variable definida por el usuario.

Esta variable busca las cookies con el título visitorFromAdwords. Si encuentra una, el GTM leerá su valor y la hará disponible en la pestaña Variables de la consola de Vista previa y Depuración.

Esto le permite utilizar la variable visitorFromAdwords en cualquier etiqueta o disparador del GTM.

Ejemplo – Disparar una etiqueta en la vista de la 3ª página

Este es uno de los casos más populares de uso de cookies con el Google Tag Manager. Para su conveniencia, he preparado una receta de GTM con un guión preparado que cuenta el número de páginas vistas y dispara un gatillo después de 3. Pero si estás ansioso por entender los detalles, sigue leyendo.

Contemos las páginas vistas

En primer lugar, tendrás que crear una etiqueta HTML personalizada que cuente las visitas a la página. Cada vez que una página se actualiza, este script busca la cookie pageviewCount e incrementa su valor en 1.

La cookie (establecida por este Javascript) expira después de 30 días. Puedes cambiar fácilmente su duración editando setCookie(«pageviewCount», pageviewCount, 30).

Configura este HTML personalizado para que se dispare en todas las páginas. Refresca la vista previa y el modo de depuración, abre el plugin EditThisCookie y comprueba si la cookie se ha guardado correctamente. Ahora, refresca la página. El valor de la cookie debería aumentar a 2.

Si quieres que esta cookie sea válida sólo para esasesión de visitantes de , aquí tienes un script modificado (he eliminado todas las partes relacionadas con la fecha de caducidad). Ten en cuenta que Chrome maneja las cookies de forma un poco diferente (en comparación con otros navegadores). Incluso si cierras la pestaña o la ventana, Chrome podría seguir ejecutándose en segundo plano, por lo que las cookies de sesión podrían seguir siendo válidas.

Variable de la cookie y disparador en el Google Tag Manager

Ya que hemos creado la cookie de pageviewCount, ahora es el momento de «enseñar» al Administrador de Etiquetas de Google a leer la cookie y hacerla disponible como una variable. Ve a tu cuenta GTM y abre una lista de variables. Crea una nueva variable definida por el usuario con los siguientes ajustes:

Luego, ve a Triggers y crea un nuevo disparador de vista de página con los siguientes ajustes:

Este disparador se disparará cuando el valor de la cookie sea mayor o igual a 3.

Eso es todo. Ahora puedes asignar este disparador a cualquier etiqueta que desees, ya sea una etiqueta emergente o de evento de Google Analytics, o lo que sea. Depende de tu imaginación.

Eliminar una galleta

Si quieres eliminar una cookie de un tercero en particular, debes establecer su fecha de caducidad en el pasado, por ejemplo, el 1 de enero de 1970. Tales cookies no pueden existir, por lo tanto, expiran inmediatamente.

En la 3ª línea del código, cambia tuCookieName con el nombre de una cookie que quieras borrar. Este código también debe ser implementado mediante la etiqueta GTM Custom HTML y disparado cada vez que necesites eliminar una cookie (por ejemplo, después de una conversión, una exclusión voluntaria o cualquier otra cosa).

Además, si la cookie tiene un dominio y una ruta especificados, inserte los valores en las variables «ruta» y «dominio» (en el código JavaScript). Pero puedes empezar manteniendo esos campos (en las líneas 4 y 5) vacíos y ver si funciona.

Unas cuantas ideas más

Si todavía no sabes cómo aprovechar las galletas en tu pila de marketing, aquí tienes algo en lo que pensar. Espero que estos ejemplos te ayuden a romper el hielo:

• Si diriges un programa de afiliados, ya sabes que los visitantes llegan a tu sitio a través de enlaces de afiliados (que contienen un ID de afiliado único). Puedes obtener esos datos de la URL, configurarlos como una cookie y enviarlos a Google Analytics como Dimensiones Personalizadas. De esta manera verás lo bien/terrible que se está convirtiendo el tráfico de afiliados. Además, puedes identificar qué socio afiliado está dirigiendo el tráfico más comprometido.
• Si una persona hizo una compra en tu sitio, guarda este hecho como una cookie. Luego, crea un disparador de vista de página que bloquee las ventanas emergentes (irrelevante para los compradores recientes).
• Si tiene un negocio SaaS, pida a los desarrolladores que establezcan varios datos sobre el usuario en las cookies. Incluso si el usuario ha cerrado la sesión, puede identificarlo visitando su sitio web/blog/etc. y enviar esos datos a Google Analytics como dimensiones personalizadas. Pero ten en cuenta las limitaciones de la información personal.

No todas las cookies de primera parte pueden ser leídas con el Google Tag Manager

De hecho, esto se aplica no sólo a GTM sino a JavaScript del lado del cliente en general. Si ya estás familiarizado con las cookies, sabes que todas las cookies (establecidas en esa página) se pueden ver yendo a las herramientas de desarrollo de tu navegador. Estoy usando Chrome, por lo tanto, la ruta completa a esa parte es Menú de Chrome > Más herramientas > Herramientas para desarrolladores > Aplicación > Cookies.

A continuación, elige tu dominio. Deberías ver algo como esto:

Ésas son las cookies de primera parte que podrías utilizar en el Administrador de etiquetas de Google. Diversos scripts y otras funciones de tu sitio web establecen esas cookies en los navegadores de tus visitantes. Sin embargo, no todos ellos pueden ser accedidos por JavaScript en su navegador (incluyendo GTM).

Si una cookie tiene una casilla de verificación en la columna Sólo Http, GTM no podrá acceder a su valor. Esto significa que una variable de la cookie de la primera parte volverá indefinida .

Trabajando con las cookies y el Google Tag Manager: Palabras finales

Así que ahí lo tienes. Resulta que es bastante fácil administrar las cookies con el Google Tag Manager. Primero, debes disparar una etiqueta HTML personalizada que le da a la cookie un valor determinado. Luego, necesitas crear una variable de la primera cookie dentro del GTM.

El valor de esta variable puede ser transferido a otras herramientas (como Google Analytics) o usado como condición de disparo dentro de un disparador.

Si estás buscando formas de disparar una etiqueta particular después de 3 visitas a la página, o para aquellos visitantes, que han visitado una página en particular, entonces las cookies deben ser tu arma de elección. Otra solución es el almacenamiento en el navegador(localStorage y sessionStorage), pero ese es un tema para otro momento.

¿Conoces más trucos sobre cómo usar las cookies con Google Tag Manager? Házmelo saber en los comentarios.