Guía para el modo de vista previa del Google Tag Manager

Actualizado: 4 de noviembre de 2023.¿Por qué no se dispara mi etiqueta? ¿Qué datos puedo enviar a Google Analytics? ¿Por qué no funcionó este disparador?

Cuando se trata de Google Tag Manager, a veces nos encontramos con problemas que requieren una mayor investigación de lo que está pasando. Uno de los pasos más importantes, pero comúnmente pasado por alto en el proceso de GTM es la depuración. Nos permite asegurarnos de que cada posible escenario de experiencia de usuario sea probado y la consistencia de los datos sea validada.

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

Modo de previsualización «Viejo» vs. «Nuevo». ¿Por qué cambió?

Si has visto/leído los tutoriales de Google Tag Manager publicados antes del 16 de octubre de 2023, te darás cuenta de que la versión antigua del modo de vista previa se ve bastante diferente.

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

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

Cookies de terceros

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

Con el tiempo, toda la industria se alejará de las cookies de terceros. Lo que significa que era sólo cuestión de tiempo que la versión antigua del modo de previsualización dejara de funcionar por completo.

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

Otros bugs/inconvenientes conocidos

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

• La incapacidad de copiar desde la pestaña de la Capa de Datos
• Incapacidad de trabajar a través de múltiples ventanas
• Incapacidad de preservar los datos en la capa de datos mientras se navega entre páginas, etc.

Sí, algunos de los beneficios fueron eliminados (como la capacidad de tener una experiencia compacta de una sola ventana) pero para resumir, hay más pros que contras.

¿Qué es el modo de depuración del Administrador de etiquetas de Google?

El modo de vista previa de Google Tag Manager (también conocido como vista previa y modo de depuración, o P&D) permite navegar por un sitio en el que se ha implementado el código del contenedor GTM y ver previamente qué etiquetas se están disparando, qué tipo de datos envían a las plataformas de análisis/marketing, etc.

Cuando se activa el modo de vista previa en la interfaz del Google Tag Manager, se 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 previsualización real.
• Una nueva pestaña (o ventana) en la que ves tu sitio web y una insignia del modo de vista previa en la esquina inferior derecha de la pantalla.

¿Por qué se necesita el modo de vista previa? Porque no hay nada peor que trabajar con el GTM a ciegas y tratar de adivinar si su configuración funciona o no.

El modo de vista previa del Google Tag Manager te permite:

• Ver qué etiquetas se han disparado en las interacciones particulares del sitio web (por ejemplo, un clic en un enlace o el envío de un formulario)
• ¿Qué etiquetas no se dispararon
• Las razones por las que ciertas etiquetas se dispararon o no se dispararon
• ¿Qué tipo de variables (y sus valores) estaban disponibles en la página
• Cómo cambiaba la capa de datos en la página cuando sucedían varias interacciones, etc.

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

Siempre pruebe. Luego publica tus cambios en vivo.

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

Activar el modo de vista previa y depuración

Para activar el modo de depuración del Google Tag Manager, haga clic en el botón Vista previa en la esquina superior derecha de la interfaz 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 del GTM (cuando el modo de vista previa esté activado). Eso ya no es cierto. A partir del 16 de octubre de 2023, el banner naranja desaparece.

Una vez que haga clic en el botón de vista previa, se abrirá una nueva pestaña del navegador con tagassistant.google.com.

Una ventana emergente te pedirá que introduzcas la URL que quieres probar y depurar. Puede ser la dirección de una página principal o la URL de una página específica y, a continuación, pulsa Inicio.

Debería aparecer una nueva pestaña (o ventana) del navegador donde verás la URL que has introducido en la ventana emergente anterior. Si la página no funciona, intenta activar el modo de vista previa una vez más y luego desactiva 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 vuelves a la pestaña tagassistant.google.com, debes ver este mensaje de éxito.

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

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

1. Línea de tiempo de eventos. Muestra todos los eventos que ocurren en la Capa de Datos (por ejemplo, vistas de páginas, envíos de formularios, clics, etc.). Un elemento = un evento (también conocido como dataLayer.push). No los confundas con los eventos de Google Analytics. Son dos conceptos totalmente diferentes.
2. Etiquetas. Muestra qué etiquetas se dispararon 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, incluyendo el tipo de variable, el tipo de datos devueltos y el valor resuelto.
4. Capade datos. Muestra el objeto exacto del mensaje tal y como fue empujado a la capa de datos para el evento seleccionado, y cómo se ve la capa de datos después de que la transacción del mensaje se haya completado. Todos los puntos de datos disponibles aquí pueden ser convertidos en variables (que luego aparecerán en la pestaña Variables ). Continúe leyendo para obtener más información.
5. Errores. Si notas algún número en la pestaña (en lugar de 0), haz clic en él y mira cuál es la causa.
6. Encabezado. Aquí puedes ver el estado del modo de vista previa (si está conectado a la ventana del sitio web recién abierta o no). Además, si tienes Google Analytics universal implementado a través de gtag.js, o si estás ejecutando Google Analytics 4 en tu sitio, verás un desplegable para cambiar entre

Línea de tiempo de eventos

Todos los eventos que ocurren en la capa de datos se muestran en el lado izquierdo de la consola de Previsualización y Depuración, Línea de Tiempo de Eventos. Cada vez que una página se carga, debe haber tres eventos mostrados en la lista – Container Loaded (anteriormente conocido como Pageview), DOM ready, y Window loaded.

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

Si te falta el evento Contenedor cargado, probablemente hay un caso de la capa de datos rota. He publicado una entrada 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 se navega de una página a otra en el sitio web (que está depurando), todos los eventos en el modo de vista previa se agruparán en base a esas páginas.

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

¿Qué significan?

Container Lo aded (también conocido como gtm.js) es el momento más temprano en que el GTM comienza a cargarse y cuando nuestros scripts de rastreo pueden ser disparados. Por ejemplo, es cuando se debe disparar la etiqueta de seguimiento de la vista de página de Google Analytics. Incluso si la página no ha terminado de cargarse, su script de rastreo ya se habrá lanzado. Anteriormente, este evento se llamaba Pageview.

El eventoDOM Ready (también conocido como gtm.dom) se produce cuando se descarga el HTML del sitio web, se muestra el documento de la página y el visitante comienza a ver elementos de su sitio web.

El eventoWindow Loaded (también conocido como gtm. load) se dispara sólo cuando todo lo demás (incluyendo Javascript) termina de cargarse.

¿Qué otros posibles eventos del Administrador de etiquetas de Google son?

En realidad, la lista de eventos es interminable.

Google Tag Manager ofrece una lista de desencadenantes incorporados, como la vista de página (incluida la vista de página mencionada anteriormente , DOM ready y Window Loaded), el clic(clic de enlace y clic de cualquier elemento), el envío de formularios, el temporizador, cambio de historial, Error de Javascript.

Después de que se activa un disparador, comienza a buscar interacciones particulares en su sitio web. Por ejemplo, el disparador de envío de formularios está buscando envíos de formularios, el disparador de clic de enlace está esperando interacciones cuando un visitante hace clic en cualquier enlace.

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

Entonces, ¿por qué dije que la lista de eventos GTM es interminable? Es debido al último tipo de disparador, 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.

Al hacer clic en cualquier evento de la línea de tiempo, puedes ver qué etiquetas se dispararon y cuáles no. Ahí es donde la pestaña de etiquetas se vuelve súper importante.

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

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

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

1. Propiedades de la etiqueta.
2. Desencadenantes de la etiqueta.
3. Bloqueo de los disparadores.

Si utilizas activadores más complejos con varias condiciones, puedes ver el estado de cada condición (echa un vistazo a la siguiente captura de pantalla). La casilla de verificación verde indica que la condición se cumplió, de lo contrario, aparece una X roja.

Además, en la esquina superior derecha del modo de vista previa (mientras aún hayas hecho clic en la etiqueta, puedes cambiar entre «Nombres» y «Valores». Esto afectará a la forma en que se muestran las variables en la etiqueta.

Si eliges » Nombres«, verás sus nombres reales, pero si quieres ver sus valores en ese momento concreto, cambia a » Valores«.

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

Además, puede verificar rápidamente si los valores en su disparador coinciden con sus requerimientos.

MUY IMPORTANTE: No depure las 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 sólo después haga clic en la etiqueta para depurar.

Variables

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

Estas variables están a su servicio. Puedes insertarlas en cualquier etiqueta, disparador quedesees (o incluso en otra variable), ya sea la etiqueta de evento de Google Analytics, la etiqueta de evento de Mixpanel o cualquier otra cosa. Las variables pueden ser incluidas rodeándolas con corchetes {{ }}. Echa un vistazo al siguiente ejemplo.

Cambia entre los eventos GTM (en la línea de tiempo) y verás cómo los valores de las variables cambiaban dependiendo del contexto.

Capa de datos

La pestaña de Capa dedatos es probablemente la parte más infravalorada de la consola de previsualización del GTM entre los principiantes (y muy a menudo, también entre los usuarios intermedios frescos).

Esta pestaña muestra el objeto exacto del mensaje 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, puedes 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 lo mejor de todo: cada punto de datos (empujado a la capa de datos) puede convertirse en una variable en Google Tag Manager.

Incluso si ves alguna información útil en la pestaña de la capa de datos, no puedes usarla en el GTM hasta que crees variables para ellos.

La pestaña Variables (del panel de depuración del Google Tag Manager) muestra sólo aquellas variables que están configuradas en la interfaz del Google Tag Manager, por ejemplo, Ruta de la página, URL de la página, etc. Por lo tanto, si tienes algo interesante en la capa de datos que te gustaría pasar a Google Analytics, necesitarás crear una variable de capa de datos en la interfaz del GTM.

Digamos que quieres enviar un evento de Google Analytics cuando alguien deja un comentario. Con cada evento, también quieres enviar el nombre completo del autor del artículo. De esta manera verás qué autores son los que más atraen a los lectores.

En la cuenta de Google Tag Manager, debes ir a Variables y crear una nueva con los siguientes ajustes(dlv significa data layer variable):

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

En mi otra entrada del blog, cómo rastrear formularios AJAX con el Google Tag Manager, he explicado cómo puedes sumergirte más profundamente 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.

Pestaña de errores

No visito esta pestaña muy a menudo (porque no hay muchas etiquetas que arrojen errores que se muestran allí). Pero si notas algún número en la pestaña (en lugar de 0), haz clic en él y mira cuál es la causa. Esta pestaña muestra si una plantilla de etiquetas GTM no se disparó debido a un error. Aquí hay una guía rápida al respecto.

Actualizar el modo de vista previa

El flujo actual no es muy conveniente pero será fijado por el equipo del GTM en el futuro.

Si haces algunos cambios en el contenedor y quieres previsualizarlos en el sitio web, debes refrescar el modo de previsualización. Recargar la página web no ayudará.

Para ello, debes ir a la interfaz del Google Tag Manager y presionar Preview una vez más. A continuación, completa los pasos y el modo de vista previa se recargará.

Sí, esto no es muy conveniente pero con suerte, esto será arreglado por el equipo de GTM pronto.

Compartir el modo de vista previa del 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.

A continuación, aparecerá una ventana emergente en la que tendrás que hacerlo:

1. Ingresar el vínculo del sitio web donde se debe habilitar el modo de vista previa
2. Seleccione el contenedor que desea habilitar (si hay varios contenedores GTM o GTAG)
3. Copia el enlace y compártelo con alguien que desees

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

A continuación, verás la lista de todos los modos de vista previa que has habilitado. Junto a la vista previa que deseas compartir, haz clic en tres puntos y, a continuación, en Compartir .

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

Si has habilitado el modo de vista previa en algún momento en el pasado, sólo tienes que ir a tagassistant.google.com y realizar los mismos pasos que he descrito anteriormente.

Salir del modo de vista previa

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

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

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

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

Luego (también en tag assistant .google.com) haz clic en el icono X de la esquina superior izquierda + selecciona Mantener el dominio XXXXX habilitado para la depuración. Haz clic en Cerrar depurador. De esta forma, mantendrás el segundo sitio web en el modo de vista previa.

A continuación, pulsa el botón Vista previa en la interfaz GTM O el botón Añadir dominio en tagassistant.google.com y añade el dominio del 1er 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 establecer la cookie de primera parte de _TAG_ASSISTANT=X en ambos dominios (y esto es necesario para que funcione el modo de vista previa). Por eso ahora puedes navegar entre ambos dominios en el modo de previsualización y verás todos los eventos/datos procedentes de ambos sitios web.

Depuración de iFrames

El nuevo modo de previsualización también soporta la depuración de iFrames. Pero hay más cosas relacionadas con esto.

Depuración gtag.js

Si tienes GTAG (un código de seguimiento de Google Analytics/Google Ads más reciente) ejecutándose en tu sitio (o si has implementado Google Analytics 4), también podrás ver los hits con el nuevo modo de vista previa (porque se envían con los comandos gtag() ).

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

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

Si cambias a la depuración de GTAG, puedes ver diferentes contenidos de la línea de tiempo de los eventos, además, algunas de las pestañas habrán desaparecido (como Tags y Variables). En su lugar verás los hits que fueron enviados y, Capa de datos y Errores.

Siéntete libre de hacer clic en esos hits y ver qué tipo de parámetros fueron enviados con una solicitud gtag.js.

Mejoras con la extensión del asistente de etiquetas Chrome

Si quieres, puedes mejorar el modo de vista previa instalando una extensión del navegador llamada Google Tag Assistant. Esto es especialmente útil si odias que tu sitio web (durante la depuración) se abra en una nueva ventana (al menos esto es lo que ocurre en Google Chrome).

Con la extensión instalada, tu sitio web se abrirá en una nueva pestaña (en lugar de una ventana) cuando habilites el modo de vista previa. Esto significa que puedes usar cosas como la depuración de móviles de nuevo.

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

Además, notarás que algunas formas/emojos aparecen en la línea de tiempo del evento y en la insignia del modo de vista previa (en tu sitio web). Estos se añaden para ayudarte a distinguir rápidamente qué ventana se está depurando actualmente.

En mi video (al principio de este tutorial), también mostré que puedes ver esas formas/emojis en el título de la página. Desafortunadamente, esa característica fue rápidamente eliminada después del lanzamiento debido a las múltiples quejas de los usuarios (esta característica contaminó los informes que contenían el Título de la Página).

Además, el asistente de etiquetas te ayuda a depurar los iframes.

Excluye la referencia a tagassistant.google.com y elimina gtm_debug=x de la URL

Con el nuevo modo de vista previa, empezarás a ver algo de tráfico procedente de tagassistant.google.com (esto significa que tus propias sesiones podrían proceder de él). Además, en tus informes de GA, empezarás a ver algunas vistas de página que contienen gtm_debug=x.

En ambos casos, si esto es un problema para ti, diría que deberías excluir definitivamente tu propio tráfico de los informes de GA. Para ello, ve a Admin > Propiedades > Información de seguimiento > Lista de exclusión de referencias y añade tagassitant .google.com.

Hablando de gtm_debug=x en los informes (y de su eliminación), sigue esta guía.

Si el modo de vista previa del Google Tag Manager no funciona

Si tiene problemas con el modo de vista previa y depuración (por ejemplo, no se muestra), lea esta guía de solución de problemas. Mantengo esta entrada del blog lo más actualizada posible.

Algunos consejos más

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

• Si ves el evento «Mensaje» antes del evento de vista de página en la Línea de Tiempo de Eventos de la consola de Previsualización y Depuración, no te preocupes. Esto significa que su desarrollador, plugin o solución particular de terceros empujó algunos datos en la Capa de datos, pero que dataLayer.push no contenía una tecla de «evento». Use el modo de depuración GTM para explorar qué datos exactos fueron empujados en ese momento, ¡quizás encuentre algo útil!
• Aunque el modo de depuración de Google Tag Manager es una parte muy importante del despliegue de etiquetas, no es la única herramienta que debería usar. Aquí tienes una lista de extensiones de Google Tag Manager Chrome que te facilitarán el trabajo.
• Si estás depurando eventos de Google Analytics, compruébalo SIEMPRE en los informes en tiempo real de GA. Es la mejor manera de verificar y reaccionar a los errores sin ninguna demora.

Modo de vista previa del 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 escenarios posibles de la experiencia del usuario y que se valide la coherencia de los datos.

Nos da más transparencia a lo que está pasando bajo el capó, a los datos que se están recogiendo o empujando, por qué una determinada etiqueta no se está disparando, etc.

Pero es realmente importante entender que este no es el único lugar donde se debe comprobar/prueba la implementación de la gestión de la etiqueta. Hay muchas más cosas que debes tener en cuenta.

¿Me he perdido algo relacionado con el modo de depuración de Google Tag Manager? Si es así, envíame un comentario a continuación.