¿No funciona el modo de vista previa del Google Tag Manager? 15 maneras de arreglarlo.

IMPORTANTE: 16 de octubre de 2023. Google acaba de lanzar una nueva versión del modo de vista previa y depuración, que funciona de forma completamente diferente. 

Actualizado: 29 de octubre de 2023. ¿No funciona el modo de vista previa del Google Tag Manager? Estoy bastante seguro de que todos hemos estado allí al menos una vez. Este problema ha causado algunos serios dolores de cabeza desde el principio, cuando empecé a usarlo. ¿Te resulta familiar? – El modo de vista previa y depuración de GTM está activado pero no aparece en su sitio web (o aparece, pero no funciona correctamente). No te enfades y lee los siguientes consejos para solucionar el modo de vista previa y depuración de Google Tag Manager. Estoy seguro de que al menos una de ellas se aplicará a tu problema.

Si logras resolver el problema por ti mismo

Si encuentras una solución a tu problema por ti mismo (y esa solución no se menciona en este artículo), por favor házmelo saber en los comentarios. Me aseguraré de actualizar la guía en consecuencia, así más gente se beneficiará de ella.

1. El recorte de GTM no se añade al sitio web

Aquí hay un ejemplo: le pediste a un desarrollador que siguiera las instrucciones del Administrador de Etiquetas y agregara un fragmento de contenedor al sitio web. Después de un tiempo, completa la tarea pero algo no está bien aquí – la consola de Previsualización y Depuración todavía no aparece después de habilitarla. Resulta que el fragmento nunca se publicó en la versión en vivo de su sitio web – un desarrollador cometió un error torpe y de alguna manera no publicó los cambios.

Hay dos maneras de verificar si la implementación del fragmento de GTM:

• Usar la extensión Chrome del Asistente de Etiquetas que comprueba los píxeles de Google en la página (por ejemplo, Google Analytics, Adwords, Google Tag Manager) y proporciona información en tiempo real.
• Compruebe el código fuente del sitio web. Haga clic en Ctrl + U (supongo que es CMD + U para los usuarios de Mac?) en su navegador y busque el código contenedor de GTM allí.

2. Recorte de contenedor erróneo o incorrecto añadido al sitio web

Aunque este consejo pueda sonar tonto, no debes ignorarlo. Para verificarlo, abra su cuenta de GTM y compruebe la esquina superior derecha de la pantalla – vea GTM container ID?. Compárelo con el que se añade al código fuente de su sitio web.

Compárelo con el que se añade al código fuente de su sitio web. El asistente de etiquetas le ayudará a hacerlo.

Además, tenga en cuenta que usted o sus desarrolladores no deben modificar el fragmento del contenedor del GTM. Debe ser agregado al sitio exactamente como lo ha copiado de la interfaz del GTM.

3. Ha habilitado el modo de vista previa y depuración del GTM en el contenedor equivocado

Cuantas más cuentas y contenedores de Google Tag Manager tengas, más posibilidades tendrás de cometer este error. He estado allí más de una vez y cada vez se vuelve más y más frustrante. Así que no olvides comprobar si el contenedor es el correcto. Puedes seguir el método descrito en el consejo #2.

4. Necesitas usar el mismo navegador

Cuando se activa el modo de vista previa y depuración, se abre una nueva pestaña/ventana con el sitio web que va a depurar. Si luego intentas abrir el modo de incógnito de Chrome (o el modo privado de otro navegador) no funcionará.

5. Recién creado contenedor? Publícalo

Si has creado recientemente un contenedor de Google Tag Manager y nunca lo has publicado, el modo de vista previa no funcionará. Puede identificar rápidamente si esto se aplica a su caso yendo a la sección Descripción general de la interfaz GTM:

Si ve el texto Contenedor no publicado , haga lo siguiente:

• Haga clic en el botón Enviar en la esquina superior derecha de la interfaz GTM
• Si ya tienes abierta la pestaña tagassistant.google.com del modo de vista previa, ciérrala y vuelve a hacer clic en el botón de vista previa de la interfaz GTM. Este paso es importante.
• Complete todos los pasos que requiere el modo de vista previa (por ejemplo, introduzca la URL de la página)

6. Intenta deshabilitar el parámetro de consulta del modo de previsualización

Cuando quieres habilitar el modo de vista previa y depuración, añade un parámetro gtm_debug=x a la URL. Este es el comportamiento predeterminado. Sin embargo, algunos sitios web no son compatibles con los parámetros de URL personalizados, por lo que es posible que no funcionen (o que arrojen cosas como errores de «Página no encontrada»).

Si ese es tu caso, intenta desactivar esta casilla de verificación (consulta la siguiente captura de pantalla):

7. Cloudflare está alterando la forma en que se carga el GTM.JS

Nota: No estoy seguro de que esto afecte al nuevo modo de previsualización del GTM, pero de todas formas me quedé con este consejo.

Este consejo viene de nuestro lector Chris.

Una Red de Entrega de Contenido o CDN está diseñada para almacenar en caché el contenido estático de los sitios a través de una amplia red geográfica. El resultado final del uso de la CDN es que el contenido estático se entregará más rápido al visitante desde el nodo de la red más cercano al visitante, acortando así el tiempo que tarda la carga de la página para los visitantes de su sitio.

El CDN también afecta a la forma en que se extrae el JavaScript y gtm.js (la biblioteca JS del Google Tag Manager) no es una excepción. Si utilizas Cloudflare (una solución de CDN muy popular), asegúrate de tener la función llamada Rocket Loader desactivada. Te recomiendo encarecidamente que consultes a tu desarrollador sobre este tema.

8. El código GTM fue modificado accidentalmente mientras lo copiaba/pegaba al desarrollador

Esta situación ocurre cuando se quiere enviar el código del contenedor GTM a un desarrollador, copiarlo de la interfaz del administrador de etiquetas, y luego pegarlo en algún archivo de Word (tal vez Google Docs o alguna otra herramienta de edición de texto) y luego enviar el código a un desarrollador.

Poco sabías que la herramienta de edición de texto «arreglaba» el código contenedor de acuerdo a ciertas reglas gramaticales, tal vez removía o agregaba algún espacio, cambiaba los apóstrofes, etc.

Aunque el código se vea igual (a primera vista), no funcionará (lo que significa que el modo de previsualización y depuración tampoco aparecerá).

Aquí tienes un ejemplo. En un sitio web, un desarrollador añadió un fragmento de contenedor GTM. Sin embargo, si miras más de cerca los apóstrofes (en la captura de pantalla de abajo), se ven mal.

En JavaScript, los apóstrofes deben ser ‘ ‘, pero en la captura de pantalla de abajo son ‘ ‘. Similares, pero no iguales.

¿Una solución para esto? Copiar el código del contenedor del GTM en la interfaz del GTM y pegarlo en el archivo .txt (por ejemplo, a través del Bloc de Notas), guardar el archivo y luego enviarlo a un desarrollador. Una solución alternativa sería copiar el código y pegarlo en pastebin.com. Guarda el pegado y luego reenvía el enlace a un desarrollador. Cuando un desarrollador abra el enlace, verá el código en bruto/sin modificar.

9. Comprueba si tu navegador no está bloqueando los popups y redirecciones

Al hacer clic en el botón de vista previa de la interfaz GTM, se abrirá una nueva pestaña o ventana que pertenece a tagassistant.google.com. A veces, un navegador puede no gustar y bloquearla.

Si utiliza el navegador Chrome, es posible que empiece a ver esto en la interfaz del GTM:

Para mí, esto sucede de manera inconsistente. A veces, Chrome bloquea la ventana, a veces no.

De todos modos, si ves que el navegador bloqueó la pestaña/ventana tagassistant.google.com , haz clic en ese icono y selecciona Permitir siempre los pop-ups y redireccionamientos… y haz clic en Listo .

Esto habilita esta configuración sólo para el Administrador de etiquetas de Google, así que no tengas miedo de abrir alguna caja de pandora.

Si estás usando un navegador diferente, esa advertencia de «bloqueado» puede parecer diferente. Tendrás que investigar más a fondo por tu cuenta.

10. Intenta publicar el contenedor (incluso si el contenedor no es nuevo)

Algunas personas mencionaron que publicaron el contenedor antes de activar el modo de vista previa y eso les ayudó. Desde ese momento, su experiencia de depuración fue fluida. No fui capaz de verificarlo pero aún así vale la pena intentarlo.

11. El tiempo de espera del modo de previsualización cuando intentas activarlo

Algunas personas se enfrentan a problemas cuando intentan activar el modo de previsualización, pero finalmente se acaba. Parece que la duración actual del tiempo de espera es de 5 segundos. Si el GTM se carga después de más de 5 segundos, se obtiene un tiempo de espera.

Incluso si el GTM se carga después del tiempo de espera, el modo de vista previa no se recupera. Este era un error conocido y el equipo del GTM ya ha implementado una solución para él. Pero mantengo este aviso (por un tiempo) en caso de que alguien siga enfrentando el problema.

¿Qué podrías hacer ahora al respecto? Pedirle a un desarrollador que mueva el fragmento del contenedor del GTM más arriba en el código fuente. Tal vez esté actualmente añadido en el? Moverlo a la de un sitio web definitivamente ayudaría.

Si el recorte del contenedor del GTM ya está en la del código fuente de su sitio web, entonces, lo más probable es que el problema esté en otro lugar.

Además, esto es lo que he notado en algunos sitios web. Cuando una ventana emergente del modo de vista previa le indica que no se pudo conectar, haga clic en el botón Reintentar y repita el mismo proceso una y otra vez. Cuando veas la barra de progreso una vez más, te mostrará un error, pero después de 3-5 segundos más, te mostrará que el modo de vista previa se conectó con éxito.

Esto me pasó en algunos proyectos. Tal vez te ayude a ti también.

12. AdBlocker, Ghostery, u otra extensión similar está bloqueando el GTM

Llámalo una característica o síntoma del comportamiento de navegación de la web de hoy en día, pero los bloqueadores de anuncios y contenidos están haciendo la vida difícil a los analistas de la web.

Extensiones de navegadores populares como Ghostery, AdGuard AdBlocker y AdBlock Plus también facilitan el bloqueo de Google Tag Manager. Así que si estás usando uno de los bloqueadores, intenta deshabilitarlo y mira si te ha ayudado. Por lo tanto, si quieres tener un modo de vista previa que funcione, tendrás que deshabilitar la extensión.

Otro plugin (que fue reportado por los lectores como interfiriendo con el modo de previsualización del GTM) es Avira Save Shopping.

13. Su sitio web está usando una solución automática que bloquea las cookies para que no se establezcan

Con los albores de la RPI y otras regulaciones relacionadas con la privacidad, algunos propietarios de sitios web decidieron utilizar soluciones de bloqueo automático de cookies conectadas a sus ventanas emergentes de consentimiento de cookies. Algunos ejemplos son:

Desafortunadamente, no tengo los pasos específicos sobre cómo resolver esto (porque cada herramienta probablemente tendrá pasos diferentes). Pero en general, tienes que asegurarte de que la cookie llamada TAG_ASSISTANT (todas las mayúsculas) se permite que se establezca.

Es necesario que el modo de previsualización funcione. Si no está seguro de si su sitio web utiliza el bloqueo automático, consulte con alguien que esté más familiarizado con su herramienta de gestión de cookies y con el sitio web con el que está trabajando.

Esto requerirá una investigación por su parte.

14. Asegúrate de que has seleccionado el contenedor GTM correcto en la esquina superior izquierda

Si hay más contenedores en un sitio (pero has activado el modo de vista previa en sólo uno de ellos), es posible que actualmente estés viendo el contenedor equivocado.

En la esquina izquierda de la herramienta del modo de previsualización, es posible que veas un pequeño icono con una flecha hacia abajo. En caso afirmativo, haz clic y comprueba si estás previsualizando el contenedor correcto. Si no, elige el correcto ahora.

15. Puede que estés previsualizando un espacio de trabajo en lugar de un entorno

Nota: intenta verificar tus entornos GTM aunque no veas la misma advertencia en el modo de previsualización y depuración (como he descrito en este capítulo).

Aquí hay una situación. Habilitas el modo de vista previa y ves el mensaje «No se evaluaron etiquetas en este contenedor». No ves ningún evento (como Container Loaded) en el lado izquierdo del modo de vista previa (todo lo que ves allí es sólo el título de la página).

Tampoco ve un icono con una flecha hacia abajo junto al ID de un contenedor GTM en la esquina superior izquierda del modo de vista previa. En ese caso, lo más probable es que estés tratando de obtener una vista previa del espacio de trabajo en lugar del entorno. Es bastante confuso, pero déjame intentar explicarlo. Llevará un tiempo explicarlo, pero es importante, de lo contrario, podrías estar aún más confundido.

Cuando se instala el GTM, normalmente los desarrolladores añaden el código del contenedor del GTM que se puede encontrar haciendo clic en el ID del contenedor en la interfaz.

Este es el fragmento de contenedor del GTM regular (no tiene ningún parámetro de entorno). Cuando se habilita el modo de vista previa haciendo clic en el botón PREVIEW en la esquina superior derecha de la interfaz del GTM, se habilita el modo de vista previa para ese fragmento en particular.

Sin embargo, el GTM ofrece la funcionalidad de los entornos. Puede crear diferentes entornos, como desarrollo, puesta en escena, algo más. Para instalarlo, el desarrollador debe obtener fragmentos separados para cada entorno y colocarlos en las versiones respectivas de su sitio web. Por ejemplo, coloca el contenedor de GTM de escenificación en staging .yourwebsite.com.

Para obtener los fragmentos de los entornos, debe ir a Admin > Entornos > Haga clic en Acciones junto a un entorno > Obtener fragmento y , a continuación, un desarrollador debe colocarlo en el sitio web. Por defecto, hay dos entornos pero puedes crear más si lo necesitas.

Aquí está el truco: si quieres crear un entorno personalizado como desarrollo o puesta en escena, crea un nuevo entorno y consigue que sus recortes se instalen en las versiones respectivas de tu sitio web. Pero, cuando se trata de un sitio web en vivo, no debes usar el fragmento del entorno en vivo. En su lugar, haga clic en el ID de la interfaz GTM y pida a un desarrollador que lo instale.

Entonces, ¿dónde está el problema después de todo?

A veces los desarrolladores agregan el fragmento del entorno de Live al sitio web de Live. Ese fragmento se ve un poco diferente comparado con el fragmento del GTM por defecto.

Si tiene un fragmento del entorno (con parámetros adicionales) implementado en el sitio en vivo Y trata de habilitar el modo de previsualización haciendo clic en el botón PREVIEW, no funcionará. Y obtendrá el mensaje «No se evaluó ninguna etiqueta en este contenedor». Esto sucede porque has habilitado el botón de vista previa del espacio de trabajo actual (pero no en un entorno específico).

Si quieres habilitar el movimiento de previsualización en el fragmento de entorno, entonces debes ir a Admin > Entornos > Elegir el entorno que quieres previsualizar (por ejemplo, podría ser el entorno Live de tu sitio web en vivo) > Acciones > Compartir Enlace y luego usar eso para acceder al entorno.

Importante: su contenedor GTM debe tener al menos una versión publicada antes de que pueda ver la opción Compartir Enlace.

Sí, esto puede sonar confuso y con suerte, el equipo GTM mejorará el flujo en el futuro. Pero si de hecho estás tratando con entornos GTM, la única manera de ver el entorno ahora es ir a Admin > Entornos > Acciones > Compartir Enlace.

Y si necesita esto incluso en el sitio web en vivo, entonces pídale a los desarrolladores que reemplacen el fragmento del entorno en vivo por el fragmento de contenedor del GTM predeterminado que puede encontrar haciendo clic en el ID del contenedor en la interfaz del GTM.

¿Cómo puede averiguar si su contenedor GTM (instalado en su sitio web en vivo) no está usando el recorte del Entorno? Tendrá que comprobar el código fuente del sitio web (utilizando la función Ver fuente de la página en el navegador) y luego comparar ese recorte con el recorte del GTM predeterminado.

¿Ninguno de los consejos funcionó?

Si ninguna de estas soluciones te ha ayudado, por favor, publica un comentario con la siguiente información:

• Una explicación detallada de lo que no funciona. Algunas personas informan que tienen un tiempo de espera, otras dicen que no pueden ver algunos eventos en el modo de vista previa, etc. Necesito que describas tu situación con gran detalle
• Enlace a la página web donde se está produciendo esta situación
• Enlaza con el modo de vista previa. Después de iniciar el modo de vista previa, se te redirige a tagassistant.google.com. Cuando introduzcas la URL de tu sitio web y comiences a obtener una vista previa, copia la URL de ese modo de vista previa y compártela en los comentarios. No te preocupes, si publicas el contenedor en algún momento del futuro, ese modo de vista previa compartida dejará de funcionar.

El modo de vista previa del GTM no funciona: Conclusión

El modo de vista previa de Google Tag Manager le permite navegar por un sitio en el que se ha implementado el código del contenedor como si se hubiera desplegado el borrador actual del contenedor.

¿No funciona el modo de vista previa de Google Tag Manager? En esta entrada de blog, he esbozado 15 consejos rápidos sobre cómo hacer que el modo de vista previa y el modo de depuración empiecen a funcionar de inmediato, desde la comprobación de la configuración de las cookies hasta el uso del Asistente para etiquetas.

Si el modo de vista previa de Google Tag Manager sigue sin funcionar (incluso después de leer esta entrada de blog), publica un comentario a continuación y encontraremos una solución.

Si ya has encontrado una solución que no se menciona aquí, compártela en los comentarios con los demás.