Cómo depurar el iFrame con el modo de vista previa del Google Tag Manager
En octubre de 2023, el equipo detrás de Google Tag Manager lanzó una versión completamente nueva del modo de vista previa de Google Tag Manager. Ese fue un paso necesario en su evolución (porque la industria se está alejando de las cookies de terceros).
Poco después del lanzamiento, uno de los principales desafíos del nuevo modo de vista previa fue la incapacidad de depurar los iFrames. Por suerte, el equipo de GTM trabajó duro y finalmente también mejoró esa parte.
En esta guía rápida, les mostraré cómo depurar el iFrame con el modo de vista previa de Google Tag Manager (el que se lanzó en 2023).
El proceso
Aquí están los pasos que vamos a completar (el orden importa):
- Instalar la extensión de cromo
- Habilitar el modo de vista previa en la página principal
- El modo de previsualización del GTM ofrecerá habilitar el modo de previsualización en el iFrame también
Si eso no funciona, habilitaremos manualmente el modo de previsualización en el iFrame
Instalar una extensión de cromo
Primero, debes instalar la extensión del asistente de Google Tag Chrome. Añadirá algunas mejoras al modo de vista previa (por ejemplo, la apertura de los sitios web en nuevas pestañas en lugar de en nuevas ventanas). Además, ayudará con la depuración del iFrame.
No es necesario que lo actives (ni ninguna otra cosa). Sólo tienes que tener la extensión instalada en tu navegador.
Habilitar el modo de vista previa en la página principal
En el Administrador de etiquetas de Google, abre el contenedor que has insertado en el iFrame y haz clic en el botón Vista previa.
Introduce la URL de la página principal y pulsa Iniciar. Cuando se abra el modo de vista previa, es posible que vea una notificación que le ofrezca habilitar el GTM también en el iFrame. Haga clic en Habilitar.
Lo que sucederá a continuación es que verá aparecer un nuevo contenedor de GTM en la barra superior. Si ya lo ha visto, a partir de este momento, comenzará a mostrar eventos y datos también.
Si no ves la oferta de habilitar el modo de previsualización en el iFrame
En caso de que no veas la notificación mencionada, aquí tienes una opción alternativa sobre cómo puedes habilitar el modo de vista previa en el iFrame.
En el Administrador de etiquetas de Google, abre el contenedor que has insertado en el iFrame y haz clic en el botón Vista previa.
Introducela URL del i Frame y pulsa el botón Iniciar. ¿No sabes cuál es la URL del iFrame? Una de las formas es hacer clic con el botón derecho del ratón en el fondo del iframe y seleccionar Ver fuente del marco. Cuando se abra una nueva pestaña, verás la URL del iFrame. Cópiala y pégala en la ventana emergente de lanzamiento del modo de vista previa (no pegues la «fuente de la vista:»).
Cuando habilites el modo de vista previa, haz clic en el icono X de la esquina superior izquierda. Luego habilita la casilla Mantener el dominio XXXXX habilitado para la depuración y pulsa Cerrar depurador.
Luego necesitas habilitar el modo de vista previa en la página principal. Si utilizas el mismo contenedor en la página principal y en el iframe, pulsa Añadir dominio en tagassistant.google.com y entra en el dominio de la página principal.
Si está usando diferentes contenedores, vaya al contenedor de la página principal (en la interfaz principal del GTM), presione Vista previa, ingrese la URL de la página principal y luego presione Inicio.
Dado que el modo de vista previa está ahora habilitado en ambos sitios web, entonces debería comenzar a ver los datos que llegan de ambos sitios web.
Si el iframe está en el mismo nombre de host que la página principal, no es necesario habilitar los modos de vista previa por separado (porque al final, todo sucede en el mismo nombre de host).
Dos contenedores separados vs. un contenedor
Si utilizas dos contenedores distintos de Google Tag Manager, no olvides que tendrás que cambiar entre ellos en el modo de vista previa y de depuración para ver qué está pasando.
Puedes cambiar haciendo clic en los ID de los contenedores aquí.
Si utilizas el mismo contenedor en ambas páginas (padre e iframe), todos los eventos se mostrarán en el mismo feed (pero se agruparán por páginas).
Distinga las vistas de página entre el iframe y una página padre
Ahí es donde otra útil función del Asistente de etiquetas de Google (extensión de Chrome) resulta útil: los emoticonos y las formas. Cuando se instala la extensión del Asistente de Etiquetas, se añade una forma o un emoji al widget del depurador…
…y a los títulos de las páginas en el modo de vista previa:
Gracias a eso, puedes distinguir fácilmente a qué página pertenece ese evento en particular. Esto es especialmente útil si se trabaja con un solo contenedor en una página padre e hijo.
Ignorar el parpadeo
En algún momento, notará que en la esquina superior izquierda del modo de previsualización y depuración, el nombre de dominio parpadea cada segundo. Estará cambiando entre ambos dominios (el dominio padre y el dominio iframe). Esto se aplica a situaciones en las que el iframe está en un nombre de host/dominio diferente.
Por el momento, se espera ese comportamiento porque el modo de previsualización sigue recibiendo señales de ambos dominios, por lo que están cambiando constantemente.
Tal vez en el futuro esto cambie, pero por el momento, no te preocupes. Así es como se muestra.
Depurar el iFrame con el Google Tag Manager: Palabras finales
Y así es como se depura el iFrame con el modo de previsualización del Google Tag Manager (me refiero al nuevo). Me alegra ver que eventualmente, el equipo de GTM actualizó su nueva característica e incluyó la posibilidad de depurar una de las cosas más molestas de la web 🙂
¿Tienes preguntas? La sección de comentarios está a su servicio.