Vista previa de Google Tag Manager (GTM Preview Mode): como utilizarla

Creo una etiqueta, pinta bien, la publico y no se ejecuta. ¿Qué ha pasado? o mejor dicho, ¿Qué no ha pasado? la mejor forma de encontrar el error es debugeando con la vista previa que nos ofrece Google Tag Manager (GTM Preview Mode).

Vamos a ver esto en más detalle.

¿Qué es la vista previa de Google Tag Manager?

La vista previa de GTM (también llamada modo debug) nos permite analizar que etiquetas se están ejecutando, con toda la información que éstas contienen (sus parámetros y esas cosas).

Esta herramienta es de gran utilidad y deberíamos ejecutarla antes de implementar cualquier cambio en nuestra web. Y es que, publicar una nueva versión en Google Tag Manager si antes probarla conlleva el riesgo potencial de cargarnos alguna funcionalidad de nuestra web.

Por qué deberías usar el modo preview de GTM

Soy consciente de que puede parecer un poco tedioso usar la vista previa de GTM, pero para intentar convencerte de su importancia aquí te dejo un par de razones de peso:

¿Cómo activar el modo debug de Google Tag Manager?

Para activar la vista previa basta con acceder al contenedor de nuestra página web y hacer clic en Vista previa (si esto no lo entiendes, aquí te explico cómo configurar un contenedor en GTM).

Cuando hagas clic en ella te aparecerá una nueva ventana en la que debes incluir la URL a inspeccionar y hacer clic en Connect:

Llegados a este punto, verás en una ventana emergente una previsualización de tu página web en la que puedes hacer todas las pruebas que quieras sin destrozarla.

Así pues, en este momento debes de tener 2 ventanas:

• Ventana emergente (popup): con la previsualización de tu URL.
• Ventana resumen: con las etiquetas ejecutadas y no ejecutadas.

Esta última te la muestro aquí abajo:

Vamos a analizarlo en más detalle.

Analizando la vista previa de GTM en detalle

Cuando accedemos al modo preview encontramos el siguiente panel:

Y en ella podemos encontrar las siguientes pestañas:

• Línea de tiempo (Event Timeline): muestra todos los eventos del Datal Layer.
• Etiquetas (tags): muestra que eventos se ejecutan o no en el Data Layer.
• Variables: muestra las variables del evento que selecciones.
• Data Layer: muestra los datos que están disponible para ser leídos, recogido y enviados.
• Errores (Errors): muestras los posibles errores que se puedan dar.

Vamos a verlo en más detalle.

Etiquetas de la vista previa de GTM

Como he comentado anteriormente, en esta pestaña podemos encontrar las etiquetas disponibles en Google Tag Manager. En la parte superior vemos las que ya han sido ejecutadas y las que todavía no lo han hecho.

De momento, en mi caso solo se ha lanzado aquella que ejecuta la medición de Google Analytics 4. De igual forma, en la parte inferior podemos encontrar 2 etiquetas que no se han ejecutado.

Si hacemos clic, por ejemplo, en la etiqueta de Button Clic podremos ampliar la información sobre ella:

Así pues, tenemos una etiqueta de Google Analytics 4, que recoge 2 parámetros (la URL y el anchor text) y que se ejecuta cuando se hace clic en un elemento con la clase su-button, es decir, en un botón.

Voy a hacer clic en dicho elemento en la ventana emergente para ver que pasa. Y lo que pasa es que se ejecuta el evento (junto con el otro, llamado button click).

Variables del modo vista previa de GTM

Si hacemos clic en un evento específico, podemos ir a la pestaña de variables para ver todas las disponibles en dicho evento.

En esta sección podemos encontrar información valiosa, como el tipo de variable, qué valor tiene o el tipo que devuelve. Con ella podemos configurar eventos que se ejecuten en GTM.

Compartir la vista previa de GTM

Y ya para terminar un consejo. Puedes compartir tu vista previa si haces clic en los 3 botones verticales que tienes en la zona superior derecha y seleccionas Share.

Tras ello, en la ventana que te aparece debes de seguir 3 pasos:

1. En ella, tienes que indicar la URL de la página donde está habilitado el modo de vista previa.
2. Seleccionar el contenedor.
3. Hacer clic en Copy Link

Otra forma de compartirlo es desde la ventana de dominios: