Cómo depurar iFrame con el modo vista previa de Google Tag Manager

La capacidad de depurar y analizar datos es fundamental para cualquier profesional del marketing digital. Desde que Google Tag Manager (GTM) lanzó su nuevo modo de vista previa en octubre de 2020, se han presentado nuevas oportunidades y desafíos para los usuarios. Uno de los problemas más notables fue la dificultad para depurar iFrames, un componente común en muchas páginas web. Este artículo te guiará a través de los pasos para depurar iFrames utilizando el modo de vista previa de Google Tag Manager, proporcionando un enfoque detallado y práctico.

¿Qué es Google Tag Manager y por qué es importante?

Google Tag Manager es una herramienta de gestión de etiquetas que permite a los usuarios implementar y gestionar las etiquetas de seguimiento de diferentes plataformas sin necesidad de modificar el código fuente de la página. Esto es especialmente útil para los especialistas en marketing que buscan analizar el comportamiento del usuario y optimizar sus campañas.

La importancia de Google Tag Manager radica en su capacidad para facilitar la implementación de herramientas de análisis, como Google Analytics, así como la integración de otros servicios de terceros. A través de GTM, los usuarios pueden:

• Agregar o modificar etiquetas sin necesidad de desarrolladores.
• Realizar pruebas y depuraciones de manera más eficiente.
• Mejorar el rendimiento de la página al cargar etiquetas de forma asíncrona.

Proceso de depuración de iFrames con Google Tag Manager

A continuación, se describen los pasos necesarios para depurar iFrames utilizando el modo de vista previa de Google Tag Manager. La secuencia de estos pasos es crucial para el éxito del proceso.

• Instalar la extensión de Chrome.
• Activar el modo de vista previa en la página principal.
• Confirmar la activación del modo de vista previa en el iFrame.

Si la activación no se produce automáticamente, se proporcionarán instrucciones para habilitar el modo manualmente.

Instalación de una extensión de Chrome

El primer paso en este proceso es instalar la extensión de Google Tag Assistant. Esta herramienta mejora la funcionalidad del modo de vista previa al permitir abrir sitios web en nuevas pestañas en lugar de nuevas ventanas. Además, es esencial para facilitar la depuración de iFrames.

No es necesario activar la extensión; simplemente asegúrate de tenerla instalada en tu navegador.

Activando el modo de vista previa en la página principal

Una vez que la extensión esté instalada, abre Google Tag Manager y selecciona el contenedor correspondiente al iFrame. Haz clic en el botón de vista previa.

Introduce la URL de la página principal y presiona «Iniciar». Al abrirse el modo de vista previa, deberías recibir una notificación que ofrece activar GTM en el iFrame también. Haz clic en “Activar”.

Si todo va bien, verás que aparece un nuevo contenedor de GTM en la barra superior, comenzando a mostrar eventos y datos desde ese momento.

Activación manual del modo de vista previa en el iFrame

Si no recibes la notificación para habilitar el modo en el iFrame, puedes hacerlo manualmente. Nuevamente, abre Google Tag Manager y selecciona el contenedor del iFrame. Haz clic en «Vista previa».

Introduce la URL del iFrame y presiona «Iniciar». Si no conoces la URL, puedes hacer clic derecho en el fondo del iFrame y seleccionar Ver fuente del marco. Esto abrirá una nueva pestaña donde podrás ver la URL del iFrame. Copia esta URL y pégala en la ventana de lanzamiento del modo de vista previa (sin incluir «view-source:»).

Después de habilitar el modo de vista previa, haz clic en la X en la esquina superior izquierda. Luego, habilita la opción Mantener el dominio XXXXX habilitado para depuración y cierra el depurador.

Es importante volver a activar el modo de vista previa en la página principal. Si utilizas el mismo contenedor tanto en la página principal como en el iFrame, haz clic en Agregar dominio en tagassistant.google.com e ingresa el dominio de la página principal.

Si utilizas contenedores diferentes, accede al contenedor de la página principal en la interfaz principal de GTM, haz clic en «Vista previa», introduce la URL de la página y presiona «Iniciar». Con el modo de vista previa activado en ambos sitios, deberías comenzar a ver datos de ambos.

Si el iFrame se encuentra en el mismo hostname que la página principal, no es necesario habilitar los modos de vista previa por separado.

Contenedores separados frente a un solo contenedor

Si estás utilizando dos contenedores de Google Tag Manager distintos, es crucial recordar que deberás alternar entre ellos en el modo de vista previa y depuración para visualizar los eventos en cada uno.

Puedes cambiar entre contenedores haciendo clic en los ID de los contenedores en la interfaz.

Por otro lado, si estás utilizando el mismo contenedor en ambas páginas (principal e iFrame), todos los eventos se mostrarán en el mismo flujo, organizados por página.

Distinguir las vistas de página entre el iFrame y la página principal

Un aspecto útil de la extensión de Google Tag Assistant es que agrega formas y emojis a los títulos de las páginas en el modo de vista previa. Esto facilita la identificación de a qué página pertenece un evento específico, lo cual es especialmente útil cuando se trabaja con un contenedor único en la página padre y el iFrame.

Por ejemplo, un cuadrado puede representar el iFrame y un círculo la página principal, lo que permite a los usuarios diferenciar fácilmente entre ambos en el flujo de datos.

Ignorar el parpadeo del nombre de dominio

Durante el uso del modo de vista previa, es posible que observes que el nombre de dominio en la esquina superior izquierda parpadea constantemente. Esto ocurre porque el modo de vista previa recibe señales de ambos dominios, haciendo que cambie entre el dominio principal y el del iFrame.

Este comportamiento es normal y se espera en situaciones donde el iFrame se encuentra en un dominio diferente. Aunque puede resultar confuso, es simplemente una parte del funcionamiento actual del modo de vista previa.

Solución de problemas en el modo de vista previa de GTM

Si experimentas dificultades con el modo de vista previa, puedes consultar esta guía de resolución de problemas para identificar y corregir cualquier inconveniente. Muchas veces, pequeños errores en la configuración pueden causar problemas en la visualización de datos.

Depuración de iFrame con Google Tag Manager: Aspectos finales

La depuración de iFrames con el modo de vista previa de Google Tag Manager ha mejorado significativamente desde su lanzamiento. A través de una serie de pasos claros y eficientes, ahora es posible analizar y optimizar el rendimiento en estos componentes. La interfaz intuitiva de GTM y las herramientas adicionales, como Google Tag Assistant, permiten a los profesionales del marketing abordar los desafíos de manera efectiva.

Si tienes preguntas o necesitas más información, no dudes en dejar un comentario. La comunidad siempre está lista para ayudar y compartir experiencias.