Una guía para el modo de vista previa de Google Tag Manager

¿Por qué no se dispara mi etiqueta? ¿Qué datos puedo enviar a Google Analytics? ¿Por qué no funcionó este activador?

Cuando se trata de Google Tag Manager, a veces nos encontramos con problemas que requieren una mayor investigación de lo que está sucediendo. Uno de los pasos más importantes, aunque comúnmente pasado por alto, en el proceso de GTM es la depuración. Nos permite asegurarnos de que se prueben todos los posibles escenarios de experiencia del usuario y se valide la coherencia de los datos.

En esta guía, le mostraré cómo utilizar el modo de vista previa de Google Tag Manager (también conocido como modo de vista previa y depuración ) y compartiré algunas prácticas recomendadas.

Modo de vista previa “Antiguo” vs “Nuevo”. ¿Por qué cambió?

Si vio / leyó los tutoriales de Google Tag Manager publicados antes del 16 de octubre de 2023, notará que la versión anterior del modo Vista previa se ve bastante diferente.

Además, es posible que te encuentres con debates en los que algunas personas odien el nuevo modo de vista previa y se pregunten por qué diablos Google intentó «arreglar algo que no está roto».

En esta situación, solo quería señalar algunas cosas por las que el modo de vista previa (que ven actualmente) fue un paso necesario en su evolución.

Cookies de terceros

El modo de vista previa anterior dependía de la cookie de terceros configurada en el dominio googletagmanager.com . Si la cookie no se almacena en su navegador, el modo de vista previa nunca funciona. Esto se convierte en un problema / desafío predeterminado si intenta depurar con Safari, el modo incógnito de Chrome o cualquier otro navegador que bloquee las cookies de terceros.

Eventualmente, toda la industria se alejará de las cookies de terceros. Lo que significa que era solo cuestión de tiempo que la versión anterior del modo de vista previa hubiera dejado de funcionar por completo.

El equipo de Google Tag Manager tuvo que alejarse de las cookies de terceros y cambiar al almacenamiento de origen. Y lo hicieron con el nuevo modo de vista previa en 2023. A partir de ahora, depende de la cookie de origen y localstorage .

Otros errores / inconvenientes conocidos

Junto con ese cambio, han solucionado muchos problemas que nos irritaban en el pasado, como:

• No se puede copiar desde la pestaña Capa de datos
• Incapacidad para trabajar en varias ventanas
• Incapacidad para conservar los datos en la capa de datos mientras se navega entre páginas, etc.

Sí, se quitaron algunos de los beneficios (como la capacidad de tener una experiencia de ventanilla única compacta), pero en resumen, hay más ventajas que desventajas.

¿Qué es el modo de depuración de Google Tag Manager?

El modo de vista previa del Administrador de etiquetas de Google (también conocido como modo de vista previa y depuración, también conocido como P&D) le permite navegar por un sitio en el que se implementa el código del contenedor GTM y obtener una vista previa de las etiquetas que se activan, qué tipo de datos envían a las plataformas de análisis / marketing , etc.

Cuando habilita el modo de vista previa en la interfaz de Google Tag Manager, terminará con tres pestañas del navegador (o dos pestañas y una ventana adicional):

• Una pestaña con la interfaz de Google Tag Manager
• Una nueva pestaña para tagassistant.google.com donde se muestra la consola de vista previa real
• Una nueva pestaña (o ventana) donde ve su sitio web y una insignia del modo de vista previa en la esquina inferior derecha de la pantalla.

¿Por qué es necesario el modo de vista previa? Porque no hay nada peor que trabajar con GTM a ciegas y tratar de adivinar si su configuración está funcionando o no.

El modo de vista previa de Google Tag Manager le permite:

• Vea qué etiquetas se activaron en interacciones específicas del sitio web (por ejemplo, un clic en un enlace o el envío de un formulario)
• Qué etiquetas no se activaron
• Las razones por las que ciertas etiquetas se activaron o no
• Qué tipo de variables (y sus valores) estaban disponibles en la página
• Cómo Capa de datos estaba cambiando en la página cuando ocurrían varias interacciones, etc.

Personalmente, por lo general, nunca confío en mi instinto cuando se trata de modificar las configuraciones de mi GTM. Siempre los pruebo, incluso los más pequeños. Porque es lo peor descubrir (después de varios días (o quizás semanas)) que su cambio reciente rompió algo en la configuración de análisis.

Siempre pruebe. Luego publique sus cambios en vivo.

Ahora, echemos un vistazo a cómo funciona el modo de vista previa y cómo trabajar con él.

Habilitar el modo de vista previa y depuración

Para habilitar el modo de depuración de Google Tag Manager, haga clic en el botón Vista previa en la esquina superior derecha de la interfaz de GTM (cerca del botón Enviar ).

Si alguna vez te encuentras con tutoriales de GTM más antiguos (publicados antes del 16 de octubre de 2023), te dirán que debe aparecer un banner naranja en la interfaz de GTM (cuando el modo de vista previa está habilitado). Eso ya no es cierto. A partir del 16 de octubre de 2023, la pancarta naranja desapareció.

Una vez que haga clic en el botón Vista previa, se abrirá una nueva pestaña del navegador con tagassistant.google.com . Si no es así, lea esta guía .

Una ventana emergente le pedirá que ingrese la URL que desea probar y depurar. Puede ser la dirección de una página de inicio o puede ser la URL de una página específica y luego presione Inicio .

Debería aparecer una nueva pestaña (o ventana) del navegador donde verá la URL que ingresó en la ventana emergente anterior. Si la página no funciona, intente habilitar el modo de vista previa una vez más y luego deshabilite esta casilla de verificación en la ventana emergente de la vista previa:

En la parte inferior de esa página / pestaña, debe ver la siguiente insignia:

Y si vuelve a la pestaña tagassistant.google.com , debe ver este mensaje de éxito.

Si no ve el mensaje de éxito o si la insignia de vista previa muestra que el depurador no está conectado.

El diseño de la página de vista previa de Google Tag Manager

El modo de depuración de Google Tag Manager (también conocido como Google Tag Manager Console o simplemente la consola de GTM ) consta de seis partes principales:

1. Cronograma del evento . Muestra todos los eventos que ocurren en la capa de datos (por ejemplo, visitas a páginas, envíos de formularios, clics, etc.). Un elemento = un evento (también conocido como dataLayer.push). No los confunda con eventos de Google Analytics. Estos son dos conceptos totalmente diferentes, que he discutido en otra publicación de blog .
2. Etiquetas . Muestra qué etiquetas se activaron en el evento de capa de datos seleccionado y cuáles no.
3. Variables . Muestra información detallada sobre las variables en el evento seleccionado, incluido el tipo de variable, el tipo de datos devueltos y el valor resuelto.
4. Capa de datos . Muestra el objeto de mensaje exacto tal como se envió a la capa de datos para el evento seleccionado y cómo se ve la capa de datos una vez que se completa la transacción del mensaje. Todos los puntos de datos disponibles aquí se pueden convertir en variables (que luego aparecerán en la pestaña Variables ). Continúa leyendo para aprender más.
5. Errores . Si nota algún número en la pestaña (en lugar de 0), haga clic en él y vea cuál es la causa.
6. Encabezado. Aquí puede ver el estado del modo Vista previa (si está conectado a la ventana del sitio web recién abierta o no). Además, si ha implementado Universal Google Analytics a través de gtag.js o está ejecutando Google Analytics 4 en su sitio, verá un menú desplegable para cambiar entre

Cronograma del evento

Todos los eventos que ocurren en la capa de datos se muestran en el lado izquierdo de la consola Preview and Debug, Event Timeline. Cada vez que se carga una página, se deben mostrar tres eventos en la lista: Contenedor cargado (anteriormente conocido como Vista de página ), DOM listo y Ventana cargada .

Si ve más eventos (por ejemplo, Mensaje ), está bien. Pero es importante que los tres eventos mencionados anteriormente aparezcan en la lista de cada página.

Si falta el evento Container Loaded , probablemente haya un caso de capa de datos rota. He publicado una publicación en el blog, que explica tanto el problema como la solución cuando el evento Container Loaded no aparece en el modo GTM P&D .

Además, cuando navega de una página a otra en su sitio web (que está depurando), todos los eventos en el modo de vista previa se agruparán según esas páginas.

¿Por qué siempre hay tres eventos en cada página?

¿Qué quieren decir?

Contenedor cargado (también conocido como gtm.js ) es el momento más temprano en el que GTM comienza a cargarse y cuando se pueden activar nuestros scripts de seguimiento. Por ejemplo, es entonces cuando debe activar la etiqueta de seguimiento de vistas de página de Google Analytics. Incluso si la página no ha terminado de cargarse, su secuencia de comandos de seguimiento ya se habrá iniciado. Anteriormente, este evento se llamaba Vista de página .

DOM Ready evento (también conocido como gtm.dom ) ocurre cuando se descarga el HTML del sitio web, se procesa el documento de la página y un visitante comienza a ver elementos de su sitio web.

El evento Window Loaded (también conocido como gtm.load ) se activa solo cuando todo lo demás (incluido Javascript) termina de cargarse.

¿Cuáles son otros posibles eventos de Google Tag Manager?

En realidad, la lista de eventos es interminable.

Google Tag Manager ofrece una lista de activadores integrados, como vista de página (incluida la vista de página mencionada anteriormente, DOM listo y ventana cargada ).

Una vez que se habilita un activador, comienza a buscar interacciones particulares en su sitio web. Por ejemplo, el activador Envío de formularios está buscando envíos de formularios, el activador Clic en enlace está esperando interacciones cuando un visitante hace clic en cualquier enlace.

Cuando ocurre la interacción deseada, ese evento aparece en la Línea de tiempo del evento.

Entonces, ¿por qué dije que la lista de eventos de GTM es interminable? Es por el último tipo de activador, llamado Personalizado.

Un evento personalizado es un evento definido por usted, su desarrollador o una solución de terceros que se implementa en su sitio web.

Si desea obtener más información sobre el seguimiento de eventos personalizado, eche un vistazo al siguiente video (pero tenga en cuenta que en este video, estaba usando la versión anterior del modo de vista previa):

Cuando hace clic en cualquier evento en la línea de tiempo, puede ver qué etiquetas se activaron y cuáles no. Ahí es donde la pestaña Etiquetas se vuelve muy importante.

Esta pestaña muestra todas las etiquetas disponibles divididas en dos grupos: las que se activaron en el evento seleccionado y las que no. Lo que hace que esta sección sea realmente asombrosa es la capacidad de descubrir la razón exacta por la que una etiqueta en particular se activó o no.

Elija cualquier evento en la Línea de tiempo del evento (1) y luego haga clic en la etiqueta que le interese (2).

Lo que verá es una vista mucho más detallada de lo que sucede con esa etiqueta:

1. Propiedades de la etiqueta.
2. Activadores de la etiqueta.
3. Bloqueo de activadores.

Si usa activadores más complejos con varias condiciones, puede ver el estado de cada condición (observe la captura de pantalla a continuación). La casilla de verificación verde indica que se cumplió la condición; de lo contrario, aparece una X roja.

Además, en la esquina superior derecha del modo de vista previa (aunque todavía haya hecho clic en la etiqueta, puede cambiar entre «Nombres» y «Valores». Esto afectará la forma en que se muestran las variables en su etiqueta.

Si elige Nombres , verá sus nombres reales, pero si desea ver sus valores en ese momento en particular, cambie a Valores .

Para mí, cambiar a «Valores» es más conveniente, me permite identificar rápidamente qué valores se enviaron a mis herramientas de análisis / marketing.

Además, puede verificar rápidamente si los valores de su activador coinciden con sus requisitos.

MUY IMPORTANTE: No depure etiquetas individuales mientras tenga un Resumen seleccionado sobre la línea de tiempo del evento. Esta es una forma incorrecta de hacerlo. Siempre, seleccione primero el evento en el flujo de eventos y solo luego haga clic en la etiqueta para depurar.

Variables

OK, vayamos a la pestaña Variables . Muestra información detallada sobre las variables en el evento seleccionado , incluido el tipo de variable, el tipo de datos devueltos y el valor resuelto.

Estas variables están a su servicio. Puede insertarlos en cualquier etiqueta, activar que desee (o incluso otra variable) , ya sea una etiqueta de evento de Google Analytics, una etiqueta de evento de Mixpanel o cualquier otra cosa. Las variables se pueden incluir rodeándolas con llaves {{}}. Eche un vistazo al siguiente ejemplo.

Cambie entre eventos de GTM (en la línea de tiempo) y verá cómo cambiaban los valores de las variables según el contexto.

Capa de datos

La pestaña Data Layer es probablemente la parte más infravalorada de la consola de vista previa de GTM entre los principiantes (y, con bastante frecuencia, también entre los nuevos usuarios intermedios).

Esta pestaña muestra el objeto de mensaje exacto que fue empujado a la capa de datos para el evento seleccionado, y cómo se ve la capa de datos después de que se completa la transacción del mensaje.

En otras palabras, puede ver todos los datos que están disponibles actualmente en la capa de datos y qué valores estaban disponibles después de cada evento de Google Tag Manager. Y la mejor parte: cada punto de datos (enviado a la capa de datos) se puede convertir en una variable en Google Tag Manager.

Incluso si ve información útil en la pestaña Capa de datos, no puede usarla en GTM hasta que cree variables para ellos.

La pestaña Variables (del panel de depuración de Google Tag Manager) muestra solo las variables que están configuradas en la interfaz de Google Tag Manager, p. Ej. Ruta de la página, URL de la página, etc. Entonces, si tiene algo interesante en la capa de datos que le gustaría pasar a Google Analytics, deberá crear una variable de capa de datos en la interfaz de GTM.

Digamos que desea enviar un evento de Google Analytics cuando alguien deja un comentario. Con cada evento, también desea insertar el nombre completo del autor del artículo. De esta manera, verá qué autores generan la mayor participación de los lectores.

En la cuenta de Google Tag Manager, debe ir a Variables y crear una nueva con la siguiente configuración ( dlv significa variable de capa de datos ):

Después de actualizar el modo P&D Y su sitio web en la ventana del navegador , debería ver una nueva variable en la pestaña Variables con cada nueva carga de página. Más adelante, puede incluir esa variable {{dlv – Autor de la publicación}} en las etiquetas de Google Analytics (o cualquier otra).

En mi otra publicación de blog, cómo rastrear formularios AJAX con Google Tag Manager , he explicado cómo puede profundizar en la capa de datos, extraer valores anidados y convertirlos en variables GTM. Esa simple técnica ya ha sido útil tantas veces que apenas puedo imaginar cómo solía trabajar sin ella.

Ficha Errores

No visito esta pestaña con mucha frecuencia (porque no muchas etiquetas arrojan errores que se muestran allí). Pero si nota algún número en la pestaña (en lugar de 0), haga clic en él y vea cuál es la causa. Esta pestaña se muestra si una plantilla de etiqueta GTM no se activó debido a un error.

Actualizar el modo de vista previa

El flujo de corriente no es muy conveniente, pero lo arreglará el equipo de GTM en el futuro.

Si realiza algunos cambios en el contenedor y desea obtener una vista previa en el sitio web, debe actualizar el modo de vista previa. Simplemente recargar el sitio web no ayudará.

Para hacerlo, debe ir a la interfaz de Google Tag Manager y presionar Vista previa una vez más. Luego complete los pasos y se recargará el modo de vista previa.

Sí, esto no es muy conveniente, pero con suerte, el equipo de GTM lo solucionará pronto.

Compartir modo de vista previa de GTM

Para compartir el modo de vista previa con alguien, primero debe habilitar el modo de vista previa usted mismo y luego, en la esquina superior derecha, haga clic en tres puntos> Compartir .

Luego aparecerá una ventana emergente donde deberá:

1. Ingrese el enlace del sitio web donde se debe habilitar el modo de vista previa
2. Seleccione qué contenedor habilitar (si hay varios contenedores GTM o GTAG)
3. Copia el enlace y compártelo con quien desees

Otra opción es hacer clic en el ícono X en la esquina superior izquierda (mientras está en el modo de vista previa), luego habilitar la casilla de verificación Mantener el dominio … habilitado para depuración y hacer clic en Cerrar depurador .

Luego verá la lista de todos los modos de vista previa que ha habilitado. Junto a la vista previa que desea compartir, haga clic en tres puntos y luego haga clic en Compartir.

Después de hacer clic en él, aparecerá la ventana emergente mencionada anteriormente.

Si ha habilitado el modo de vista previa en el pasado, vaya a tagassistant.google.com y complete los mismos pasos que describí anteriormente.

Salir del modo de vista previa

Si desea salir del modo de vista previa, la mejor manera es hacer clic en el icono X en la insignia del modo de vista previa (que se muestra en la esquina inferior derecha de su sitio web).

Si eso no ayudó y sigue viendo esa insignia en cada visita de página del sitio web.

Depuración de varios dominios (con el mismo contenedor)

Si trabaja con varios dominios (que forman parte del mismo recorrido del cliente) y esos dominios utilizan el mismo contenedor de Google Tag Manager, deberá habilitar el modo de vista previa en ambos dominios.

Primero, abra tagassistant.google.com (o simplemente haga clic en el botón Vista previa en la interfaz de GTM) e ingrese el dominio del segundo sitio web. Complete todos los pasos necesarios para habilitar el modo de vista previa.

Luego (también en tagassistant.google.com ) haga clic en el ícono X en la esquina superior izquierda + seleccione Mantener el dominio XXXXX habilitado para depuración . Haga clic en Cerrar depurador. De esa forma, mantendrá el segundo sitio web en modo de vista previa.

Luego presione el botón Vista previa en la interfaz de GTM O Botón Agregar dominio en tagassistant.google.com y agregue el dominio del primer sitio web. Complete todos los pasos necesarios hasta que el sitio web 1 se abra en una nueva pestaña o ventana.

Lo que hemos hecho aquí es que configuramos la cookie de origen _TAG_ASSISTANT = X en ambos dominios (y esto es necesario para que funcione el modo de vista previa). Es por eso que ahora puede navegar entre ambos dominios en el modo de vista previa y verá todos los eventos / datos provenientes de ambos sitios web.

Depuración de iFrames

El nuevo modo de vista previa también admite la depuración de iFrames. Pero hay más cosas relacionadas con esto, por lo tanto he publicado una entrada de blog separada .

Depurando gtag.js

Si tiene GTAG (un código de seguimiento de Google Analytics / Google Ads más reciente) ejecutándose en su sitio (o si ha implementado Google Analytics 4), también podrá ver los hits con el nuevo modo de vista previa (porque son enviar con gtag () comandos).

Después de habilitar el modo de vista previa y depuración en un dominio determinado, puede cambiar a algún ID de GTAG en el menú desplegable (en la esquina superior izquierda).

Además, si está trabajando con Zonas (esa es una función de GTM360), también podrá encontrar contenedores de zona allí.

Si cambia a depurar GTAG, es posible que vea un contenido diferente en la línea de tiempo del evento, además, algunas de las pestañas desaparecerán (como Etiquetas y Variables). En su lugar, verá los resultados que se enviaron y, la capa de datos y los errores.

Siéntase libre de hacer clic en esos resultados y ver qué tipo de parámetros se enviaron con una solicitud gtag.js.

Mejoras con la extensión de Chrome Tag Assistant

Si lo desea, puede mejorar el modo Vista previa instalando una extensión de navegador llamada Asistente para etiquetas de Google . Esto es especialmente útil si odia cuando su sitio web (durante la depuración) se abre en una nueva ventana (al menos esto es lo que sucede en Google Chrome).

Con la extensión instalada, su sitio web se abrirá en una nueva pestaña (en lugar de una ventana) cuando habilite el modo de vista previa. Esto significa que puede usar cosas como la depuración móvil nuevamente.

Además, podrá depurar varias pestañas al mismo tiempo.

Además, notará que aparecen algunas formas / emojis en la línea de tiempo del evento y en la insignia del modo Vista previa (en su sitio web). Estos se agregan para ayudarlo a distinguir rápidamente qué ventana se está depurando actualmente.

Excluya la referencia de tagassistant.google.com y elimine gtm_debug = x de la URL

Con el nuevo modo de vista previa, comenzará a ver algo de tráfico proveniente de tagassistant.google.com (eso significa que sus propias sesiones podrían provenir de él). Además, en sus informes de GA, comenzará a ver que algunas páginas vistas contienen gtm_debug = x.

En ambos casos, si esto es un problema para usted, le diría que definitivamente debería excluir su propio tráfico de los informes de GA. Para hacerlo, vaya a Administrador> Propiedad> Información de seguimiento> Lista de exclusión de referencias y agregue tagassitant.google.com.

Hablando de gtm_debug = x en los informes (y eliminándolo).

Si el modo de vista previa del Administrador de etiquetas de Google no funciona

Aquí hay algunos consejos rápidos más que no encajan en ningún capítulo anterior de esta publicación de blog:

• Si ve el evento «Mensaje» antes del evento de vista de página en la línea de tiempo de eventos de la consola de vista previa y depuración, no se preocupe. Esto significa que su desarrollador, complemento o solución particular de terceros insertó algunos datos en la capa de datos, pero que dataLayer.push no contenía una clave de «evento». Utilice el modo de depuración de GTM para explorar qué datos exactos se enviaron en ese momento, ¡tal vez encuentre algo útil!
• Aunque el modo de depuración de Google Tag Manager es una parte muy importante de la implementación de etiquetas, no es la única herramienta que debería utilizar. Aquí hay una lista de extensiones de Chrome de Google Tag Manager que harán su trabajo mucho más fácil.
• Si está depurando eventos de Google Analytics, SIEMPRE verifíquelos en los informes de GA en tiempo real. Es la mejor manera de verificar los errores y reaccionar ante ellos sin demora.

Modo de vista previa de Google Tag Manager: Conclusión

El modo de vista previa de Google Tag Manager (también conocido como modo de depuración de Google Tag Manager o simplemente modo de vista previa y depuración ) es una parte esencial de la implementación de etiquetas que nos ayuda a garantizar que se prueben todos los posibles escenarios de experiencia de usuario se valida la coherencia.

Nos brinda más transparencia sobre lo que sucede bajo el capó, qué datos se obtienen o se envían, por qué una determinada etiqueta no se activa, etc.

Pero es realmente importante entender que este no es el único lugar donde debe verificar / probar su implementación de administración de etiquetas. Hay muchas más cosas que debe tener en cuenta .

¿Me perdí algo relacionado con el modo de depuración de Google Tag Manager? Si es así, déjame un comentario a continuación.