Administrador de etiquetas de Google Haz clic en Seguimiento: Todo lo que necesitas saber

Como característica, el rastreo de clicks en el Google Tag Manager es un cebo perfecto para un principiante. Es bastante fácil empezar: leer una o dos entradas de blog, tal vez ver un video y listo! Puedes rastrear botones, clics de enlaces salientes, etc. Sin embargo, lo que he notado entre los principiantes de GTM es que no se dan cuenta del flujo de configuración del seguimiento de clics en Google Tag Manager y por qué es necesario completar una cosa u otra.

Además, los usuarios intermedios de Google Tag Manager no siempre son conscientes de algunas técnicas de seguimiento de clics más serias que abren posibilidades totalmente nuevas en la gestión de etiquetas.

Por eso he decidido publicar esta (una vez más) guía extendida/definitiva/tu-nombre en el rastreo de clics de Google Tag Manager, que cubre no sólo lo básico sino también algunas cosas avanzadas.

Nota: esta entrada de blog enseña cómo rastrear eventos con Universal Analytics. Si desea familiarizarse con el seguimiento de eventos en Google Analytics 4.

Aprenda a rastrear los clics de los enlaces en el curso Fundamentos de GTM

Si estás empezando con el Google Tag Manager, todo puede parecer un poco abrumador. Lo entiendo perfectamente. Lo más probable es que todos hayan estado aquí en algún momento. Para su conveniencia, he creado un curso gratuito de Fundamentos de Google Tag Manager que también da una introducción al seguimiento de los clics de los enlaces.

Así que si te encuentras siendo una persona de «contenido de video», echa un vistazo a mi curso.

Tabla de contenidos

#1. ¿Por qué es tan importante el seguimiento de los clics?

No te daré ninguna estadística aquí, pero piensa en cuáles son las interacciones más comunes que haces en cualquier sitio web. Es cargar la página, desplazarse y hacer clic. Haces clic en los enlaces y los botones para navegar de una página a otra, para alcanzar un objetivo determinado.

Por eso es crucial hacer un seguimiento de estas interacciones, para entender mejor el comportamiento del usuario/visitante. Captura los clics, envía sus datos a herramientas de terceros, como Google Analytics, y analiza los datos.

Con el Google Tag Manager los casos de uso más populares de rastreo son:

• Seguimiento de clicsde botones (por ejemplo, clics del botón «Añadir al carrito»)
• Clicsde enlaces salientes (seguimiento de cuando un visitante hace clic en un enlace que lleva a un recurso externo (sitio web de un tercero))
• Clics en los enlaces decontacto (por ejemplo, clics en direcciones de correo electrónico o números de teléfono)

#2. Dos tipos de disparadores de clic

Hay dos tipos de disparadores de clic en el Google Tag Manager: Todos los elementos y Sólo enlaces.

Como sus títulos lo indican, Todos los elementos activan los clics de cualquier elemento (enlace, imagen, botón, etc.), mientras que Sólo los enlaces activan los clics de los enlaces solamente.

#3. ¿Cuál es el plan?

De todos modos, la mejor manera de dominar el seguimiento de clics del Google Tag Manager es haciendo. Y eso es exactamente lo que vamos a hacer en esta guía. Pero antes de eso, vamos a revisar el flujo de trabajo que tendrás que seguir cada vez que quieras hacer un seguimiento de los clics.

• Paso 0. Decide qué quieres rastrear, los enlaces o cualquier elemento.
• Paso 1. Ten al menos un disparador de clics habilitado en la página (el tipo de disparador depende del paso 0).
• Paso 2. Habilitar todas las variables incorporadas relacionadas con el clic
• Paso 3. Crear una etiqueta (por ejemplo, la etiqueta de evento de Google Analytics)
• Paso 4. Actualizar el disparador de clics para que rastree sólo determinados clics y luego asignarle la etiqueta.
• Paso 5. Prueba.

El mismo flujo de trabajo se aplica tanto a los disparadores de Sólo enlaces como a los de Todos los elementos. Veámoslo en acción.

#4. Seguimiento de enlaces del Administrador de etiquetas de Google

De forma predeterminada, el Administrador de etiquetas de Google no realiza un seguimiento de los clics. Puedes comprobarlo activando el modo de vista previa y de depuración y actualizando la página web en la que estás trabajando. Verás tres eventos en el panel de depuración: Vista de página, DOM Ready y Ventana cargada.

Ahora, haga clic en cualquier elemento de la página (no en el panel de depuración del GTM) y vea lo que sucede en el lado izquierdo del panel. Nada. Seguirá teniendo esos 3 eventos (a menos que, por supuesto, haya implementado alguna otra funcionalidad de rastreo en su contenedor GTM algunas veces antes).

Esto sucede porque, por defecto, el Google Tag Manager no rastrea los clics. Necesitas configurarlo por ti mismo. Comencemos, ¿sí?

¿Recuerda el flujo de trabajo de 5 pasos del capítulo anterior? Bueno, 6 pasos, si cuentas el paso 0. En esta guía, lo mencionaré varias veces porque quiero que lo memorices. Ese flujo de trabajo es crucial para dominar el seguimiento de los clics. De hecho, se aplica incluso a más desencadenantes, por ejemplo, Youtube.

De acuerdo, pensemos qué enlaces de clicks debemos rastrear primero. ¿Qué tal los clics de los enlaces salientes?

#4.1. Cómo rastrear los clics de los enlaces salientes

Según nuestro flujo de trabajo de seguimiento de clicks de Google Tag Manager, el paso 0 es decidir qué queremos seguir. Este paso ya está completo porque elegimos el seguimiento de enlaces salientes. Procedamos al paso 1.

Paso 1. Habilitar un disparador de clicks de enlace en GTM

Para habilitar el seguimiento de los clics de enlace, necesitamos habilitar una cosa llamada escuchador de clics de enlace (también conocido como escuchador de eventos automáticos de clics de enlace). Es una característica en el GTM que escucha los clicks de enlace en una página. Si detecta uno, mostrará ese evento en el modo de previsualización y depuración (P&D) del GTM y podremos usarlo como condición para disparar etiquetas. Para ser más precisos, el oyente empuja los datos del clic a la Capa de Datos.

De hecho, hay muchos oyentes de eventos automáticos en el Gestor de Etiquetas de Google. Hablando de oyentes incorporados, hay oyentes de Youtube, oyentes de desplazamiento, oyentes de visibilidad de elementos, etc. También, hay un montón de oyentes de eventos automáticos personalizados, por ejemplo, oyente de Vimeo, oyente del reproductor Mixcloud, etc. Algunos de ellos están disponibles en la biblioteca de recetas de GTM.

¿Cómo podemos habilitar el enlace «click auto-event listener»? – puede preguntarse. La respuesta es teniendo al menos un disparador de clicks de enlace habilitado en una página.

En el Google Tag Manager, vaya a Triggers > Trigger Configuration > New > Just Links. Deja todas las configuraciones como están y nombra al disparador All Link Clicks (o cualquier otra cosa).

Hablando de dos casillas de verificación, aquí hay un resumen rápido:

Esperarpor las etiquetas es útil si el enlace se abre en la misma pestaña del navegador. Si tienes alguna etiqueta vinculada al disparador de clics de enlace y la opción Esperar por etiquetas está activada (digamos que durante 2023 milisegundos), el Administrador de etiquetas de Google pondrá la redirección temporalmente en espera (durante un máximo de 2023 milisegundos) para dar a las etiquetas la oportunidad de dispararse correctamente. Una vez que las etiquetas se hayan disparado correctamente o hayan pasado 2023 milisegundos, el usuario continuará navegando hacia otra página. Puede cambiar la duración de esa pausa, no limitada a 2023 milisegundos.

ComprobarLa validación comprueba si el clic fue realmente válido. Muy a menudo dejo esta casilla de verificación sin marcar.

===

Volvemos a nuestro enlace genérico «click trigger». Guárdalo y actualiza la vista previa y el modo de depuración. Vaya a la página donde desea realizar el seguimiento de los enlaces. Haz clic en cualquier enlace de una página.

Si el enlace se abre en la misma pestaña del navegador, asegúrate de hacer clic en el enlace manteniendo pulsadas las teclas CTRL o CMD del teclado (para abrir el enlace en la nueva pestaña). ¿Por qué? Porque si la página se actualiza, el modo de vista previa y depuración también se reinicia, por lo que no podrá comprobar qué datos de clic están disponibles una vez que el GTM capture ese clic. Y eso será muy importante en el paso 2.

Así que una vez que hayas hecho clic en el enlace, echa un vistazo más de cerca al panel de Vista Previa y Depuración. Verán un nuevo evento, Link Click. Eso es lo que hizo nuestro oyente del auto-evento Link Click. Escuchaba los clics de enlace en una página y una vez que veía uno, empujaba un evento de Clic de Enlace a la Capa de Datos y, por lo tanto, se hacía visible en la consola de depuración.

Si no ves este evento, asegúrate de haber actualizado el modo de vista previa y depuración (haciendo clic en el enlace Actualizar en el banner naranja) y luego actualiza la página web (en la que estás trabajando) una vez más.

Para resumir rápidamente, creamos un disparador genérico de clics de enlace porque necesitábamos que el enlace hiciera clic en el auto-evento de escucha habilitado en una página. Si al menos un disparador de clicks de enlace está habilitado en una página (no activado, sino esperando un momento para disparar), el escuchador de clicks de enlace se habilita en segundo plano.

Gracias a esto, podemos ver los eventos de clicks de enlace en el modo P&D e inspeccionar qué datos están disponibles con cada click.

Paso 2. Habilitar las variables de clic incorporadas

Para crear desencadenantes más precisos, necesitamos un ingrediente más, las variables. ¿Qué son esas?

Son pequeños trozos de información que pueden ser usados tanto en las etiquetas como en los disparadores (y, de hecho, en otras variables también). Por ejemplo, Click ID. Puedes usarlo como una condición de disparo (por ejemplo, disparar el código de Evento de Google Analytics cuando el ID del botón pulsado es igual a «main-cta-botón»).

Gracias al modo de vista previa y depuración del GTM podemos ver qué variables están disponibles en cada evento. Haga clic en el evento Link Click y vaya a la pestaña Variables. Sigan buscando cualquier cosa relacionada con los clics. Si estás trabajando en un nuevo contenedor, probablemente no encuentres nada.

No te preocupes, eso es lo que se espera. Ahora ve a la pestaña Capa de datos (mientras el evento Clic en enlace sigue estando seleccionado). Allí, verás algunos parámetros relacionados con el enlace clic, como gtm.elementId o gtm .elementClasses, por ejemplo:

Aunque los datos de clic son rastreados por el Google Tag Manager, no están disponibles en la pestaña Variables de la consola de P&D. ¿Por qué? Porque las variables de clic incorporadas no están habilitadas en la interfaz del Google Tag Manager. ¿Y por qué? Si algunos datos no están disponibles como una variable en el GTM, no puedes usarlos en tus disparadores.

Vamos a activarlos.

En su cuenta del GTM, vaya a Variables, y en la sección Variables incorporadas haga clic en Configurar. Aparecerá un panel a la izquierda. Desplácese hacia abajo hasta encontrar las variables de clic y actívelas TODAS una por una, incluyendo ID de clic, URL de clic, etc

Después de eso, actualiza el modo de vista previa y depuración, actualiza la página web en la que estás trabajando y vuelve a hacer clic en un enlace (si se abre en la misma tabla, mantén pulsadas las teclas CTRL o CMD mientras haces clic).

Un evento de Link Click aparecerá en la lista de eventos de la consola P&D, haz clic en él. Ahora ve a la pestaña Variables y sigue buscando variables relacionadas con los clics. Bingo! Ahora puedes ver variables como Clases de Clic, URL de Clic, etc.

Paso 3. Crear una etiqueta

Digamos que queremos enviar clics de enlaces salientes como eventos a Google Analytics. Para hacerlo, vaya a Tags (en su interfaz GTM) > Configuración de etiquetas > Universal Analytics. e introduce tu configuración.

De hecho, puedes introducir cualquier cosa que sea significativa para ti en los campos Categoría de eventos, Acción de eventos y Etiqueta de eventos. La captura de pantalla anterior es sólo para el propósito de demostración.

Si todavía no tienes ninguna variable de configuración de Google Analy tics en el contenedor, crea una haciendo clic en la lista desplegable y eligiendo Nueva variable.

Al menos por ahora, introduce el ID de seguimiento GA de tu propiedad (se parece a este UA-XXXXXXX-XX) y pulsa Guardar.

Si quieres usar otras características de GA, como dimensiones personalizadas, rastreo entre dominios, necesitarás hacer una configuración adicional en la Variable de Configuración de GA.

Con la variable de configuración de GA podrás reutilizar la misma configuración de GA en varias etiquetas de Google Analytics. Cada etiqueta GA requiere un ID de seguimiento y, opcionalmente, otros ajustes para configurar. Una vez que tengas 20, 50 o incluso más etiquetas de Google Analytics, la gestión a nivel individual se vuelve insoportable.

Ahí es donde las Variables de Configuración GA guarda el día: después de hacer un solo cambio en la variable, todas las etiquetas que están usando la variable heredarán automáticamente el cambio.

Paso 4. Actualizar el disparador de clic

El siguiente paso en este flujo de trabajo es actualizar nuestro disparador y luego asignarlo a la etiqueta de Google Analytics. Queremos que nuestra etiqueta se dispare no en todos los clics, sino sólo en aquellos que son externos (salientes).

¿Qué es un enlace saliente? ¿Qué variable del Administrador de etiquetas de Google debería utilizarse como parte de la condición de activación? Revisemos la consola de P&D y veamos qué tenemos.

Una vez que tengas la consola de Previsualización y Depuración abierta, haz clic en cualquier enlace saliente de una página y luego haz clic en el evento Link Click en el flujo de eventos. Ve a la pestaña Variables. ¿Qué variable debemos utilizar para distinguir un enlace externo de uno interno?

El dominio (nombre de host de la página) de la página actual es example.com (ver la captura de pantalla anterior). Todos los enlaces (Click URL) que se consideran internos si también pertenecen al Page Hostname, por lo tanto, todos los enlaces externos (Click URL) son los que no pertenecen al ejemplo.com.

Y esto es exactamente lo que tenemos que hacer: crear un disparador de clicks de enlace que escuche sólo aquellos clicks que no pertenezcan al hostname de nuestra página web (por ejemplo, example.com).

Además, necesitamos excluir los clics de enlace que sí lo son:

Esto puede evitarse si reducimos nuestro disparador para rastrear sólo aquellos enlaces que comienzan con http. Todos los enlaces salientes comienzan con http o https.

Ve a Google Tag Manager > Triggers y abre el disparador «Todos los clics de enlace» creado previamente. Lo editaremos para rastrear sólo los clics de los enlaces salientes. Cámbiale el nombre y la configuración como en la siguiente captura de pantalla (por supuesto, sustituye example.com por el dominio real al que pertenece tu sitio web):

ACTUALIZACIÓN : en octubre de 2023, GTM publicó una solución alternativa de cómo rastrear los clics de los enlaces salientes.

Después de que guardes el disparador de clic, abre la etiqueta de Evento GA y asigna el disparador. Como en la captura de pantalla de abajo.

Paso 5. Prueba

Habilita (o actualiza) el modo de vista previa y depuración, ve a tu sitio web y actualiza la página. Aquí hay escenarios que deberías probar:

• Haz clic en un enlace interno (por ejemplo, el que abre una página de «Contáctenos»). El enlace saliente GA etiqueta no debe disparar.
• Haz clic en un enlace externo (saliente). La etiqueta GA debe dispararse. Si la etiqueta no se disparó, haz clic en ella en el modo P&D.
  y baja a la sección Disparos y comprueba si no se cumplieron todas las condiciones (se marcarán con una X roja).
• A continuación, comprueba los informes de eventos en tiempo real de GA y mira si estás obteniendo los datos.
  En Google Analytics, ve a Tiempo Real > Eventos, y deberías ver los datos de clic que acabas de rastrear con el Google Tag Manager.

Esta vez, hagamos un resumen más rápido porque el flujo de trabajo es prácticamente el mismo (sólo las condiciones del disparador de clics son diferentes. Y una etiqueta GA, por supuesto).

¿Qué son los enlaces de contacto, dices? Son números de teléfono (un enlace comienza con «tel:») y direcciones de correo electrónico (un enlace comienza con «mailto:») en un sitio web en el que un usuario puede hacer clic.

• Paso 0. Decide qué quieres rastrear: enlaces u otros elementos. Hecho. Queremos rastrear los clics de los enlaces de contacto, por lo tanto, estamos usando el disparador de » Just Links «.
• Paso 1. Tener al menos un disparador de clicks (el tipo (Sólo Enlaces o Todos los Elementos ) depende del paso 0) habilitado en la página. Hecho. Ya lo tenemos desde el caso de uso de los clics de enlace salientes. No importa que el disparador de clicks de enlace saliente no rastree los clicks de enlace de contacto. Lo que importa es que el auto-escucha de clicks de enlace está habilitado en la página y podemos ver todos los clicks de enlace en el modo de vista previa y depuración. Esto es útil porque podemos inspeccionar esos clics y ver qué datos relacionados con los clics están disponibles.
• Paso 2. Habilitar todas las variables incorporadas relacionadas con los clics. Hecho. También lo hemos hecho en el caso del seguimiento de los clics del enlace saliente.
• Paso 3. Crear una etiqueta (por ejemplo, la etiqueta de evento de Google Analytics). Crear una etiqueta que enviará los datos del evento cada vez que un visitante/usuario haga clic en un enlace de contacto. Puedes copiar la etiqueta de Google Analytics que usamos en el ejemplo de clic en el enlace saliente y cambiar la categoría del evento y la etiqueta del evento. En la siguiente captura de pantalla, acabo de cambiar la acción del evento.
• Paso 4. Actualizar el disparador de clics para rastrear sólo determinados clics y luego asignarle la etiqueta. En este caso, no será necesario actualizar un disparador, sino crear uno nuevo. Con la siguiente configuración:
  La condición es Click URL coincide con Regex (ignorar caso) tel:|mailto:. Esto significa que si un URL (enlace) pulsado contiene «tel:» o «mailto:», se disparará una etiqueta.
• Paso 5. Prueba.

Mucho más rápido, ¿verdad? Una vez que tengas este flujo de trabajo, las cosas serán mucho más fáciles para ti con GTM. Lo mismo se aplica a Youtube, el seguimiento de desplazamiento, etc. (pero definitivamente no se limita a). Hagamos una rápida recapitulación:

• En caso de seguimiento de clicks de enlaces, necesitamos tener al menos un disparador de clicks de enlaces habilitado en una página. Las condiciones de activación no importan, pueden ser Todos los clicks de enlace, pueden ser Algunos clicks de enlace. Esto habilita el auto-escucha de los clicks de enlace y comienza a funcionar en segundo plano. Cada vez que el oyente capta el clic, empuja los datos del clic a la capa de datos. No podemos usar esos datos hasta que le indiquemos al GTM que los lea (creando variables).
• Habilitar las variables de clic. Ellos leerán los datos relacionados con el clic de la Capa de Datos y los pondrán a disposición en sus etiquetas, disparadores e incluso otras variables.
• Crear una etiqueta que desea disparar en cada clic de enlace. En esta guía, creamos las etiquetas de Google Analytics.
• Crea un nuevo disparador (o actualiza el existente) para que se dispare solo cuando realmente lo necesites (por ejemplo, en los clics de enlaces salientes).

#4.3. Crear un objetivo de Google Analytics basado en un evento de clic

Obviamente, algunos clics en una página son más importantes que otros. Si quieres crear un objetivo de Google Analytics basado en un evento de clicks que acabas de enviar a GA (vía GTM), esto es lo que tienes que hacer:

#1. En Google Analytics, ve a Admin y bajo la vista de GA (en la que estás trabajando) selecciona Objetivos.

#2. Luego haz clic en NUEVO OBJETIVO, y luego elige:

• Configuración del objetivo: Personalizar. Haz clic en Continuar.
• Introduce el nombre del objetivo, elige el ID de la ranura del objetivo y elige Tipo: Evento. Haz clic en Continuar.  Por lo general, el ID del goal slot no me importa, por lo tanto, no pongo mucho énfasis en él. Está perfectamente bien elegir la ranura que Google ofrece automáticamente.
• Introduce los valores de un evento que consideres como un objetivo completado. En la siguiente captura de pantalla, he configurado que si un visitante hace clic en cualquier enlace de contacto en mi sitio web, será considerado como un objetivo completado.
  Varias cosas importantes a tener en cuenta:
  • Se debe introducir al menos un campo de evento en la configuración del objetivo. NO es obligatorio introducir valores en todos los campos.
  • Los campos de la captura de pantalla anterior distinguen entre mayúsculas y minúsculas. Esto significa que «clic de enlace de contacto» NO es lo mismo que «clic de enlace de contacto». Por lo tanto, si está siguiendo la categoría de eventos con todas las letras minúsculas, asegúrese de introducir también un valor en minúsculas en los ajustes del objetivo de GA.

#3. Pruebe su objetivo. Una vez que completes el objetivo, ve a Google Analytics > Tiempo Real > Conversiones y debería aparecer allí casi instantáneamente. Si no es así, entonces la configuración de tu objetivo es incorrecta (lo más probable es que hayas introducido un valor de categoría, acción o etiqueta incorrecto). Una vez más, esos campos distinguen entre mayúsculas y minúsculas.

#5. Botón del Administrador de etiquetas de Google Seguimiento de clics

Probablemente pienses que usaremos el disparador de Todos los Elementos en este caso. Y tienes razón. Pero eso no significa que los botones siempre requieran este gatillo. Muchos botones son sólo enlaces con el estilo de un botón. Así que siempre puedes intentar usar el disparador de Sólo Enl aces primero antes de intentar el disparador de Todos los Elementos.

Sin embargo, quiero mostrarte lo que es el disparador de clicks de Todos los Elementos y por qué es diferente del de Sólo Enlaces .

Como puedes adivinar por su título, Todos los elementos registra los clics de todos los elementos de una página web (incluyendo los enlaces). Si haces clic en el título, la imagen o el fondo de una página, todos los clics serán rastreados por el oyente de clics y verás esos eventos en el modo de vista previa y depuración del GTM.

Entonces, ¿cómo se rastrea un clic de un botón?

Paso 1. Crear un disparador de todos los elementos de clic en el GTM

Al igual que con el disparador de Just Links, necesitas tener al menos un disparador de Todos los Elementos activado en una página para poder ver los eventos de clic en la consola de P&D. Puedes probarlo por ti mismo. Si has activado el activador Sólo enlaces e intentas hacer clic en una imagen de una página, no obtendrás nada en la consola de depuración.

Por eso necesitamos seguir el mismo flujo de trabajo (tal como hicimos con el seguimiento de los clics de los enlaces). Ve a la interfaz GTM > Triggers > Nuevo > Todos los elementos. Deja todos los ajustes como están y guarda el disparador. Actualiza el modo de vista previa y depuración, y luego a una página web en la que estés intentando trabajar. Empiece a hacer clic en cualquier cosa (excepto en la consola de P&D) y observe: empezará a ver los eventos de clic en la consola de vista previa del GTM.

Esto significa que la escucha automática de eventos de clic de todos los elementos se ha habilitado y todos los clics están siendo rastreados.

Paso 2. Habilitar las variables de clic en el GTM

Si hace clic en cualquiera de estos eventos de clic en la consola de vista previa y va a la pestaña de la capa de datos, verá qué datos relacionados con el clic están disponibles con ese clic en particular. Definitivamente podríamos hacer uso de algunos parámetros aquí, por ejemplo, gtm.elementId (que significa Click ID). Si queremos usarlo en la etiqueta GTM, el disparador, u otra variable, necesitamos convertir este punto de datos(gtm.elementId) en una variable.

Por suerte, todas las variables de clic incorporadas ya estaban habilitadas en uno de los capítulos anteriores (clics de enlace salientes). Sólo los enlaces y los disparadores de Todos los elementos comparten el mismo conjunto de variables de clic.

Paso 3. Crear una etiqueta

Sigamos algún elemento (no enlace) como ejemplo, ¿sí?

Tengo algo útil, un botón de » Añadir al carro». Cada vez que un visitante añade un producto a un carrito, podemos enviar un evento a Google Analytics.

Este botón no tiene ningún enlace, por lo tanto, el disparador de Sólo Enlaces no ayudará. Tendremos que usar un disparador de Todos los Elementos.

Pero antes de crear/actualizar un disparador de clicks para el botón Add To Cart , vamos a crear un evento de Google Analytics que enviará los datos de los clicks a GA. En GTM, ve a Tags > New > Tag Configuration y elige Google Analytics – Universal Analytics.

Ingrese la siguiente configuración:

Siéntase libre de agregar cualquier otro valor en los campos Categoría de evento, Acción de evento y Etiqueta de evento. Esta vez, incluso he dejado el campo Etiqueta de Evento vacío (ya que no es obligatorio).

Si no sabes qué debes elegir en el campo Configuración de Google Analytics, lee esta entrada de blog sobre la variable de configuración de Google Analytics.

Por ahora, guarda esta etiqueta sin un disparador. Sigamos adelante.

Paso 4. Crear/actualizar el disparador de clics

Para crear un disparador preciso que rastree los clics de sólo el botón Add To Cart, primero, tenemos que hacer clic en ese botón e inspeccionar qué tipo de datos están disponibles en el modo de vista previa y depuración. Basándonos en esos datos (variables), crearemos (o actualizaremos) el disparador de clics.

Así que hagamos clic en el botón y abramos la pestaña Variables en la consola de P&D. Desplácese hacia abajo y siga buscando todas las variables relacionadas con el clic.

Genial, ¡ese botón tiene una identificación! Podemos usar eso en nuestro disparador. Sin embargo, no te apresures demasiado. Hay una cosa más que debes saber. En la captura de pantalla de arriba, hago clic en un botón de texto, por lo tanto, el ID de clic es AddToCartText. Pero si pincho en algún lugar del fondo del botón (no en un texto), el ID del Click sería diferente, AddToCart.

¿Por qué?

Porque este botón no está desarrollado como un elemento único. En realidad, consta de dos elementos, el texto y la forma/bloque del botón.

Eso también se puede ver en la siguiente captura de pantalla:

El disparador de clicks detodos los elementos funciona de forma muy sencilla aquí. Rastrea el clic del elemento real, sin importar si ese elemento es parte de algún elemento más grande. Si haces clic en un fondo, el oyente seguirá el clic de un fondo. Si haces clic en un texto, el oyente seguirá el clic de un texto.

Como resultado, en este caso, en realidad hay dos elementos de los que hay que hacer un seguimiento para capturar con precisión los clics de Añadir al carro.

Si ese botón tuviera un enlace, el desarrollador probablemente habría envuelto ambos elementos con un solo enlace, por lo tanto, el disparador de Just Links habría tratado ese botón como un solo elemento.

En tal caso, después de hacer clic en el botón, el oyente de los clics de enlace sube al documento de una página y sigue buscando un enlace. No importa en qué parte del botón se haga clic, el oyente sube y encuentra el mismo enlace. Pero con el disparador de clic en todos los elementos es diferente, necesitamos ser más precisos.

Entonces, ¿qué deberíamos hacer ahora? El botón no tiene ningún vínculo, por lo tanto, el disparador de Sólo Vínculos no nos ayudará. El botón consiste en dos elementos, por lo tanto necesitamos rastrearlos a ambos, preferentemente, con un solo disparador.

¿Qué tienen en común estos elementos (el texto del botón y el fondo del botón)? Sus IDde clic son bastante similares. Ambos comienzan con el AddToCart. Esa podría ser nuestra condición de disparador de clicks.

Hagamos exactamente eso. En el GTM, ve a Triggers > Nuevo > Todos los elementos e introduce los siguientes ajustes:

Ten en cuenta que esta regla no es universal y probablemente no se aplique a tu proyecto/sitio web. Necesitarás encontrar una forma de crear un disparador unificador por tu cuenta.

De hecho, hay otra forma de rastrear los clics de varios elementos con una sola regla de disparo (que yo personalmente también uso) pero es más avanzada. Lo explicaré un poco más tarde. Alerta de spoilerdos palabras, la primera es «CSS», y la segunda es «Selectores».

Volvemos a nuestro disparador de clicks de AddToCart. Guárdalo. A continuación, abre la etiqueta de evento de Google Analytics que has creado previamente y asigna este disparador.

Paso 5. Prueba

Habilita (o actualiza) el modo de vista previa y depuración, ve a tu sitio web y actualiza la página. Aquí hay escenarios que deberías probar:

• Haz clic en el texto del botón Añadir al carro. La etiqueta GA debe disparar.
• Haz clic en el fondo del botón Add To Cart. La etiqueta GA también debe dispararse.
• Haz clic en cualquier elemento aleatorio de tu sitio web, la etiqueta GA no debe dispararse.

#6. Trabajar más rápido con las recetas de GTM

Si no estás familiarizado con las recetas del GTM, son plantillas de contenedores de GTM que pueden ser importadas y crear automáticamente etiquetas, disparadores y/o variables. En mi librería gratuita de recetas de GTM, actualmente, puedes encontrar dos recetas relacionadas con los clics (ambas creadas por el equipo de Lunametrics):

En lugar de crear manualmente etiquetas/triggers y variables para cada proyecto, puedes simplemente importar el contenedor y ahorrar algo de tiempo.

#7. Profundizar en el seguimiento de clics con el Google Tag Manager

Genial, ahora ya sabes lo básico del seguimiento de clics de Google Tag Manager y cómo utilizarlo en tu pila de gestión de etiquetas.

#7.1. Obtener datos de clic adicionales con la variable Auto-evento

Las Variables de Auto-Evento se utilizan para acceder al elemento objetivo de una acción de auto-evento (por ejemplo, Click). Por ejemplo, cuando haces clic en un enlace, puedes acceder al texto del enlace.

Entonces, ¿cuál es el problema?

El asunto es que en el GTM, puedes crear variables de auto-evento personalizadas y usarlas en etiquetas, disparadores y/u otras variables. Digamos que quieres rastrear los clics de una imagen en particular. Esa imagen contiene algún parámetro adicional (por ejemplo, «alt») que puedes ver al inspeccionarla con las herramientas de desarrollo de tu navegador (por ejemplo, en Chrome, haz clic con el botón derecho del ratón en una imagen y elige Inspeccionar elemento).

¿Qué pasaría si quisieras usar el valor del parámetro «alt» en tus etiquetas, disparadores y/o variables? Tendrías que buscarlo de alguna manera.

Ahí es donde una variable de auto-event, se vuelve muy útil. Con ella, podrías leer el valor del parámetro «alt» cuando un usuario interactúa con un elemento HTML (en este caso, esa interacción podría ser un clic).

¿Cómo se crea esa variable? Vaya a GTM > Variables > Nuevo > Vari ables definidas por el usuario y elija Variable de evento automático. Introduce los ajustes tal y como los he mostrado en la siguiente captura de pantalla.

Eso es todo. Ahora puedes usar esta variable en tus etiquetas, disparadores y otras variables. Sólo recuerda que el valor de ese parámetro se accede cuando un usuario interactúa con un elemento web en particular.

¿Cómo probar si la variable fue creada correctamente? Guarda la variable, luego actualiza el modo de vista previa y depuración y, por último, haz clic en el elemento del parámetro «alt» al que deseas acceder. Ahora, ve a la pestaña Variables del modo Vista previa y depuración y comprueba si el valor se obtiene correctamente.

#7.2. Usando selectores CSS en los disparadores de clic

Si acabas de empezar con el seguimiento de clics de Google Tag Manager, pronto empezarás a ver la limitación del conjunto de habilidades de los principiantes. Pronto tus disparadores donde las Clasesde Clic contienen XXXXX no serán suficientes. Querrás más.

Querrás realizar un seguimiento de un conjunto concreto de elementos que no tengan clases u otro parámetro en común. Volvamos a nuestro ejemplo de seguimiento del botón Añadir al carro. Resultó que un botón en realidad consiste en dos elementos: texto del botón y fondo/rectángulo del botón.

Tuvimos suerte y pudimos crear un disparador con una sola condición( El ID del clic comienza con «AddToCart»). Sin embargo, a veces, las cosas se complican cuando no hay ID o Clases de Clic útiles (léase: Clases CSS) disponibles. ¿Qué pasa si un elemento de la página se compone de 5 o más elementos?

Podrías crear múltiples variables para cada elemento y asignar esos disparadores a una sola etiqueta, pero no es la forma en que deberías hacerlo. Tu contenedor debe ser lo más óptimo posible, por lo que debemos hacer frente a eso creando un disparador de clicks y usando selectores CSS.

Selectores CSS son patrones que se comprueban en cualquier elemento HTML. En CSS, los selectores permiten a los desarrolladores seleccionar uno o varios elementos del sitio web y asignarles un estilo/diseño particular. Por ejemplo, un desarrollador puede establecer que todos los elementos HTML que pertenezcan a la clase «red-button» sean de color rojo. Esta es una explicación muy simplificada, pero esa es generalmente la idea detrás de ella.

Los selectores CSS pueden ser bastante complejos y podemos usarlos en nuestros gatillos GTM. Para ello, tendrás que elegir un operador especial en tus condiciones de disparo. Por lo general, es probable que uses los operadores «contains», » equals», «matches» Regex (caso de ignorar). Pero esta vez, usaremos Matches CSS Sel ector (o Does not match CSS Selector).

Veamos cómo funciona esto en acción. Aplicaremos los selectores CSS para rastrear los clics del botón Add To Cart (del capítulo No. 4 de esta guía). Echa un vistazo al código de ese botón (en la captura de pantalla de abajo).

El botón se crea con un elemento HTML llamado button (con el ID AddToCart) y su hijo directo es un elemento que contiene el texto del botón. Con un único selector CSS, podríamos instruir al gestor de etiquetas de Google que queremos hacer un seguimiento de los clics de un elemento cuyo ID es AddToCart y también de todos sus hijos (descendientes).

En GTM, ve a Triggers > New > Clicks > All Elements e introduce los siguientes ajustes:

Tenga en cuenta que estamos usando Click Element como una variable porque estamos comprobando todo el elemento HTML al que se le ha dado clic con nuestro selector CSS.

El selector CSS#AddToCart significa que estamos interesados en los clics de TODOS los elementos que tienen AddToCart ID (coincidencia exacta).

Una coma significa «O».

El selector de CSS #AddToCart* significa que nos interesan los clics de TODOS los descendientes de los elementos que tienen AddToCart ID (coincidencia exacta). En nuestro caso, el texto del botón es un descendiente directo del botón que tiene un ID AddToCart. Simo Ahava ha publicado una guía que explica la técnica de los selectores Wildcard CSS, así que ve a comprobarlo.

Será todo un reto dominar los Selectores CSS para un no-desarrollador, pero es bastante sencillo empezar y aprender al menos algunos aspectos muy básicos. Aquí hay guías adicionales para que te sumerjas:

¿Los Selectores CSS en el Google Tag Manager parecen demasiado confusos? Aquí tienes una idea

He preparado un curso intermedio de Google Tag Manager que da una introducción a los selectores CSS y qué papel juegan en el GTM. Además, comparto una forma divertida de aprender los selectores CSS.

Google Tag Manager Click Tracking: Palabras finales

En esta guía bastante extensa, he explicado los aspectos básicos del seguimiento de clics de Google Tag Manager y el flujo de trabajo que debes seguir para realizar un seguimiento adecuado de los clics (realiza todos los pasos siguientes):

• Tener habilitado al menos un activador concreto en una página. Si piensas realizar un seguimiento de los clics de los enlaces, ten al menos un activador de Sólo enlaces habilitado en una página (independientemente de cuáles sean las condiciones de dicho activador). Si planeas rastrear cualquier elemento, entonces Todos los Elementos es el camino a seguir.
• Habilite las variables de clic incorporadas. Después de que el disparador y las variables estén intactas, haga clic en el elemento que desea rastrear e inspeccione ese evento en el modo de vista previa y depuración del GTM. Necesitarás pensar qué variables y condiciones usarás en un disparador de clic.
• Crea una etiqueta que quieras disparar cuando un usuario haga clic en un enlace/otro elemento.
• Actualiza el disparador de clic (si creaste un disparador de clic genérico en el primer paso del flujo) o crea un nuevo disparador con las condiciones precisas y asígnalo al disparador o disparadores que quieras.

Si desea llevar el seguimiento de clics de su Google Tag Manager al siguiente nivel, considere la posibilidad de aprender a utilizar los selectores de variables de eventos automáticos y CSS en GTM.

¿Me he perdido algo del seguimiento de clics del Google Tag Manager? ¿Tiene alguna pregunta adicional? Hágamelo saber en los comentarios.