28 consejos para depurar y probar Google Tag Manager

Actualizado: 1 de marzo de 2024

El proceso de depuración en Google Tag Manager (GTM) es una habilidad esencial para cualquier profesional de marketing digital o analista que busque optimizar la implementación de etiquetas y asegurar que los datos se recopilen correctamente. Si bien verificar el modo de vista previa y depuración para ver si una etiqueta se ha activado correctamente es solo el comienzo, hay una serie de técnicas y herramientas que son cruciales para garantizar que todo funcione como se espera. En este artículo, exploraremos diversas estrategias para mejorar tu experiencia de depuración en Google Tag Manager.

La recopilación de información a continuación incluye una variedad de consejos y técnicas de depuración que te permitirán comprender mejor qué verificar dentro de tu contenedor. Algunos de estos consejos pueden superponerse, así que al final, dependerá de ti decidir cuáles son más adecuados para tus necesidades. ¡Comencemos!

Importancia de la comunidad en la depuración

Es importante señalar que esta lista de consejos no es exhaustiva. La depuración en GTM es un campo en constante evolución, y siempre hay nuevas técnicas por descubrir. Si tienes sugerencias útiles o técnicas que crees que faltan, no dudes en compartirlas en los comentarios o a través de otros canales de contacto como redes sociales o correo electrónico. Tu contribución puede ser invaluable para otros en la comunidad.

Tutorial en video

Algunos de los consejos de depuración que cubriremos en este artículo también se explican en mi video de YouTube. Aunque algunas partes pueden estar desactualizadas, la mayoría del contenido sigue siendo relevante y útil para profundizar en las técnicas de depuración.

Consejos de depuración de Google Tag Manager

He recopilado una serie de consejos y sugerencias, organizándolos en categorías para una mejor comprensión:

• Técnicas de depuración relacionadas con el modo de vista previa y depuración de GTM
• Sugerencias relacionadas con las herramientas integradas en el navegador
• Consejos de depuración de Google Tag Manager vinculados a extensiones de navegador
• Otras técnicas de depuración de GTM

Part I: Depuración de GTM con el modo de vista previa y depuración

En esta sección, profundizaremos en la funcionalidad estándar de GTM y cómo puedes aprovecharla al máximo.

Existen dos razones principales por las cuales podrías querer compartir tu modo de vista previa y depuración:

• Para mostrar a alguien cómo implementaste cambios en el contenedor (por ejemplo, para propósitos de aseguramiento de calidad)
• Para obtener ayuda de alguien para depurar un problema específico.

Para compartir el modo de vista previa con alguien, primero necesitas habilitarlo. Luego, haz clic en los tres puntos en la esquina superior derecha y selecciona Compartir. En el cuadro de diálogo que aparece, ingresa la URL del sitio web donde deseas habilitar el modo de vista previa y selecciona el contenedor adecuado. Es importante que selecciones el contenedor de GTM correcto antes de copiar y enviar el enlace.

Salir del modo de vista previa

En ocasiones, puedes parecer que has salido del modo de vista previa, pero aún puedes ver el widget en la parte inferior de tu sitio web. Esto puede suceder por varias razones, como no haber eliminado correctamente las cookies de primera parte o tener habilitada la extensión GA Debugger. Consulta un artículo específico que detalla varias soluciones para este problema.

Causas de fallos en el modo de vista previa

A veces, el modo de vista previa y depuración de GTM puede no funcionar en tu sitio. Las razones pueden incluir un contenedor incorrecto, bloqueadores de anuncios y otras configuraciones erróneas. Es esencial reconocer estos problemas comunes para solucionarlos rápidamente.

Observación de cambios en el Data Layer

El lado izquierdo del modo de vista previa y depuración muestra los cambios en el Data Layer. Al hacer clic en cualquier interacción, puedes inspeccionar qué datos estaban disponibles en ese momento. Cada dataLayer.push es visible en esta secuencia, y si incluye una clave event, ese nombre aparecerá en la secuencia.

Eventos mostrados de manera diferente

Algunos eventos en el modo de vista previa se presentan de manera más amigable para el usuario, aunque esto puede resultar confuso. Por ejemplo, en lugar de ver un evento técnico como gtm.click, verás simplemente «Click». Esto puede llevar a malentendidos sobre la activación de tus etiquetas.

• gtm.click = Click
• gtm.linkClick = Click de enlace
• gtm.video = Video de YouTube
• gtm.triggerGroup = Grupo de activadores
• gtm.js = Contenedor cargado
• gtm.dom = DOM listo
• gtm.load = Ventana cargada

Mejorando el modo de vista previa con Tag Assistant Companion

La extensión de navegador Tag Assistant Companion puede mejorar significativamente tu experiencia en el modo de vista previa. Esta herramienta permite abrir tu sitio en una nueva pestaña, facilitando la depuración móvil y la supervisión simultánea de múltiples pestañas.

Depurando iframes

La depuración de iframes es más compleja de lo que parece. Tag Assistant Companion puede ser útil en este caso, permitiéndote ver qué sucede dentro de los iframes y asegurando que los eventos se registren correctamente.

Depuración de múltiples dominios

Cuando trabajas con múltiples dominios que forman parte de la misma experiencia del usuario, necesitarás habilitar el modo de vista previa en cada dominio por separado. Esto garantiza que puedas rastrear eventos y datos a lo largo de la totalidad del recorrido del cliente.

Uso de datos específicos del Data Layer

Si deseas utilizar datos específicos del Data Layer en una etiqueta de GTM, asegúrate de que esos datos estén disponibles como una variable en el evento del Data Layer. Esto es crucial para la correcta transmisión de datos a herramientas de terceros como Google Analytics.

1. Selecciona el evento correspondiente en el modo de vista previa.
2. Verifica que la variable contenga un valor real en la pestaña de Variables.

Monitoreo de errores

El nuevo panel de errores en GTM no siempre es utilizado, pero puede ser crucial para identificar problemas en la activación de etiquetas. Si ves un número diferente de cero en este panel, haz clic para identificar la causa del error.

Verificación de valores enviados a herramientas de terceros

Al seleccionar un evento en el modo de vista previa, haz clic en la etiqueta que se activó para verificar qué datos se enviaron a herramientas de terceros. Cambiar a «Valores» te mostrará la salida de cada variable, lo que es mucho más informativo.

Resumen de activaciones de etiquetas

El resumen te muestra cuántas veces se activó cada etiqueta, lo que es útil para identificar si una etiqueta que debería dispararse una vez se ha activado varias veces por diferentes disparadores.

Condiciones de activación de etiquetas

Para entender por qué una etiqueta se activó o no, selecciona un evento en la consola de vista previa y haz clic en la etiqueta correspondiente. Esto te permitirá ver los datos enviados, los disparadores activadores y los disparadores bloqueantes.

Limitaciones del modo de vista previa

Ten en cuenta que no todas las condiciones relacionadas con la activación de etiquetas se muestran en el modo de vista previa. La secuenciación de etiquetas y las opciones de activación pueden no ser visibles, lo que puede llevar a confusiones sobre por qué una etiqueta se activó cuando no debería.

Eventos de carga del contenedor

Al cargar una página, deberías ver al menos cinco eventos relacionados en el modo de vista previa. Si no ves el evento de carga del contenedor, esto puede indicar un problema con la implementación del Data Layer en tu sitio.

Part II: Depuración de GTM con herramientas integradas del navegador

Las herramientas de desarrollo del navegador son fundamentales para una depuración efectiva. Aquí te mostramos cómo usarlas.

Revisar la consola de JavaScript del navegador

Abre la consola de JavaScript en tu navegador y revisa si hay errores. Si ves errores en relación con gtm.js, es un indicativo de que hay problemas con la implementación de GTM.

Ver el Data Layer desde la consola

Aun sin acceso al contenedor de GTM, puedes revisar el Data Layer ingresando dataLayer en la consola. Esto te mostrará qué información se ha añadido al Data Layer.

Revisar datos enviados

Recuerda que una etiqueta que se muestra como «disparada» en el modo de vista previa no necesariamente significa que los datos se hayan enviado correctamente. Siempre verifica las herramientas de informe en tiempo real o la pestaña de red del navegador para asegurarte de que los datos se están transmitiendo correctamente.

Verificación de selectores CSS

Si utilizas selectores CSS para rastrear interacciones, asegúrate de que no haya más elementos en la página que coincidan con el mismo selector. Usa la consola para verificar cuántos elementos coinciden con tus selectores y ajusta tus disparadores según sea necesario.

Métodos del Data Layer de Google Tag Manager

Para acceder a valores del Data Layer desde fuera de GTM, puedes usar el objeto google_tag_manager. Esto te permite establecer, obtener y restablecer valores dentro del modelo de datos de GTM.

Part III: Depuración de GTM con extensiones de navegador

Las extensiones pueden ser grandes aliadas en la depuración de GTM, facilitando diversas tareas.

Inyección de contenedores con extensiones

Las extensiones como dataLayer Inspector+ te permiten inyectar temporalmente tu contenedor de GTM en cualquier sitio, lo que es especialmente útil si el desarrollador encargado aún no ha añadido el código al sitio.

Funcionalidades avanzadas de dataLayer Inspector+

Además de inyectar contenedores, esta extensión ofrece múltiples características útiles que pueden mejorar tu flujo de trabajo. Desde la visualización de datos hasta la manipulación del Data Layer, es una herramienta potente para los usuarios de GTM.

Bloqueo de contenedores GTM existentes

Si necesitas depurar un sitio que ya tiene su propio contenedor de GTM y no tienes acceso, puedes usar la función de bloqueo de dataLayer Inspector+ para evitar que el contenedor original interfiera con tu trabajo.

Google Analytics Debugger

Esta extensión es invaluable para aquellos que desean profundizar en los datos transmitidos a Google Analytics. Activa el modo de depuración de GA, mostrando claramente todos los eventos y parámetros en la consola de JavaScript.

Analytics Debugger

Desarrollada por David Vallejo, esta extensión añade una pestaña adicional a las herramientas de desarrollo de Chrome, haciendo más accesible la información del Data Layer y los eventos activados.

Uso de extensiones específicas para herramientas

Las extensiones como Meta Pixel Helper y Twitter Pixel Helper facilitan la depuración de datos transmitidos a plataformas de terceros, permitiendo verificar que la información enviada esté bien formateada y correctamente capturada.

Part IV: Otras técnicas de depuración de GTM y GA

Aquí se presentan otros consejos que no encajaron en las secciones anteriores.

Datos no visibles en informes en tiempo real de GA4

Si no ves datos en tus informes en tiempo real, hay varias razones posibles, como un ID de seguimiento incorrecto, filtros activos, extensiones de exclusión, bloqueadores de anuncios o problemas de publicación en tu contenedor de GTM.

Pruebas de implementación de GTM en dispositivos móviles

Para probar la implementación de GTM en dispositivos móviles, habilita el modo de vista previa en tu escritorio, copia el enlace de vista previa compartido y ábrelo en un dispositivo móvil. Esto te permitirá ver cómo funcionan las etiquetas en un entorno real.