Logotipo Sergio Canales

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:

  • Te permite analizar qué etiquetas se ejecutan y bajo qué condiciones.
  • Te permite descrubrir por qué motivo no se ejecutan algunas etiquetas.
  • Qué tipo de variables están disponibles en la página.

¡No te quedes atrás en Google!

Únete a mi lista y recibe tips de SEO periódicamente.

¿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).

Activar vista previa Google Tag Manager

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

Modo debug GTM

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:

Esta última te la muestro aquí abajo:

Preview Mode Google Tag Manager GTM

Vamos a analizarlo en más detalle.

Analizando la vista previa de GTM en detalle

Cuando accedemos al modo preview encontramos el siguiente panel:

Vista previa GTM

Y en ella podemos encontrar las siguientes pestañas:

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:

Etiquetas vista previa Google Tag Manager

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).

qué es la vista previa de GTM

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.

Variables en GTM vista previa

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.

Compartir modo vista GTM

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:

Compartir modo vista Google Tag Manager

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *