(6 votos, promedio: 4,00 de 5)
Cargando...Cómo medir iframe
Antes de entrar en materia sobre cómo medir un iframe es importante tener muy presente que llevar a cabo su configuración requiere de conocimientos de código. Como bien es sabido, uno de los problemas más habituales con el que nos podemos encontrar es que si el iframe carga contenido entre sitios, el navegador ha de permitir el acceso a cookies a terceros.
Es decir, que si el navegador bloquea las cookies de los terceros, el iframe no puede escribir la cookie, y ello se traduce en que el seguimiento multidominio con iframes de Google Analytics y GTM no funcionará correctamente y fallará. Para evitar este problema en Google Tag Manager con iframes tan común nos podemos encontrar principalmente con dos soluciones:
- Solución 1: Enviar el ID de cliente de Google Analytics al iframe principal empleando window.postMessage. El marco secundario se encargará de sondear dicha información en cada página, de modo que no se necesitan cookies para almacenar el ID de cliente.
- Solución 2: La segunda alternativa es que el marco secundario envía cada mensaje del dataLayer al iframe padre o principal, por lo que el marco secundario no debe rastrear nada. La página principal es que quien maneja el seguimiento para el marco secundario.
¿Cuál es exactamente el problema existente?
Para saber cómo medir un iframe, primero hay que conocer el problema principal que existe. En el momento que una página carga un Iframe desde un origen de sitios cruzados, dicho marco se carga en un contexto de terceros. En otras palabras, cualquier acceso al almacenamiento del navegador desde ese Iframe necesitará que el navegador permita los cookies de terceros para el sitio Iframe.
En este sentido, un aspecto fundamental es el cross-site. Esto significa que el nombre de dominio controlado de forma privada del Iframe no es igual al de la página principal. Aunque Google anuncio que eliminarán de forma gradual las cookies de terceros de cara al año 2022, Google Chrome complicará las cosas mucho antes de tiempo.
Chrome v80, el cual fue lanzado el pasado 4 de febrero, aplica las restricciones de cookies de SameSite, es decir, que si una cookie debe ser accesible en un contexto de terceros, será preciso que se establezca SameSite = None y Secure flags. Normalmente éstos no están configurados.
Lamentablemente, la cookie _ga que es empleada por Google Analytics no cuenta con dichos indicadores establecidos, por lo que no existe una línea de tiempo cuando añade soporte para dichos indicadores. Ese es precisamente el problema existente. En prácticamente todos los navegadores, la cookie _ga no funciona o bien dejará de funcionar en un contexto de terceros. Si deseas saber como medir iframe con Google Tag Manager, no dejes de leer.
¿Cómo evitar esta situación?
Se pueden ignorar las cookies por completo.
Solución 1. Pasar el ID de cliente principal a secundario
- La página principal escucha los mensajes del iframe tras cargarse el Administrador de etiquetas de Google.
- Cuando la página principal recibe el mensaje childReady, sondea el rastreador de Google Analytics hasta que alcanza un tiempo de espera máximo.
- En el momento en el que el rastreador de Google Analytics se encuentre disponible, la página principal envía el ID de cliente nuevamente al iframe.
La página del iframe reacciona de la siguiente manera:
- La página del iframe envía el mensaje childReady una vez cargado en el Administrador de etiquetas de Google.
- Cuando la página principal responde con el ID de cliente (o bien cuando se alcanza un tiempo de espera), la página secundaria dejará de enviar dicho mensaje.
- La página secundaria escribe la ID del cliente en el dataLayer.
- Aunque ahora se conoce cómo pasar el ID de cliente al iframe, no es suficiente.
Has de tener en cuenta que cada una de las etiquetas de Google Analytics en el Iframe han de ser configuradas para que funcione correctamente. Ambos campos deben ser establecidos, preferiblemente en una variable de configuración de Google Analytics:
- ClientId ha de ser establecido en el valor de dataLayer
- El almacenamiento debe ser establecido en ‘none’ para evitar que el rastreador tenga fallos si no puede escribir la cookie de ID de cliente.
Solución 2. Reenviar todos los mensajes de la capa de datos del hijo al padre
En el supuesto de que no desees realizar ningún seguimiento dentro del iframe siempre se puede delegar el seguimiento al padre o principal enviando todos los mensajes dataLayer al mismo para su procesamiento.
Por lo tanto, la página principal administraría las etiquetas tanto para las interacciones nativas de la página principal como para las que ocurren dentro del iframe. La página principal funcionaría de la siguiente manera (el proceso es similar a la primera solución que se ha mencionado):
- La página principal escucha los mensajes del Iframe al carga el Administrador de etiquetas de Google.
- Cuando la página principal recibe el mensaje childReady, responde con un mensaje parentReady.
- Si el marco secundario envía un mensaje en formato compatible con dataLayer, la página principal inserta dicho mensaje en su propio dataLayer.
Mientras que en el iframe:
- La página Iframe envía el mensaje childReady tras cargarse el Administrador de etiquetas de Google.
- Cuando página principal responde con parentReady, el marco secundario «secuestra» el método dataLayer.push (), de tal modo que envía todos los mensajes a la página principal.
Configuración de la pagina principal
Ambas soluciones se combinan en un solo conjunto de etiquetas HTML personalizadas, una de ellas para la página principal, mientras que la segunda es para el Iframe secundario.
La página que envía la ID del cliente al Iframe ha de crear una etiqueta HTML personalizada que se active en un activador de Vista de página.
Puede emplearse el activador de Todas las páginas, pero también se podría crear un activador de Vista de página que sólo se active en páginas donde sabe que existe el Iframe.
Configuración
El trackingId tendrá que establecerse en el ID de seguimiento de Google Analytics del rastreador cuya cookie _ga se desea emplear. Se deberá establecer maxGATime en la cantidad máxima de tiempo que la página espera a que Google Analytics se cargue.
Después se tendrá que establecer childOrigin en el origen del Iframe al cual se desean enviar los datos. El origen es todo en la URL hasta la primera barra diagonal. Resulta muy importante no tener barra diagonal al final.
El ‘oyente’ ; Listener
En la última línea del bloque de código principal se deberá añadir:
window.addEventListener(‘message’, postCallback);
Es decir, cuando un iframe envía un mensaje a la página principal, el oyente dispara y ejecuta la función postCallback.
En esencia, la página principal ha de ser capaz de esperar dos cosas:
- Que la página secundaria indique que está lista para recibir mensajes.
- Que el rastreador de Google Analytics se encuentre disponible para poder obtener el ID de cliente.
Configurar el sistema para reenviar mensajes
A través de la página principal se escuchan los mensajes dataLayer que han sido reenviados desde el Iframe incrustado. Se pueden crear etiquetas, disparadores, así como variables que se encarguen de reaccionar a los mensajes.
Indicar que los desencadenantes serán de tipo desencadenador de evento personalizado debido a que los eventos enviados desde el marco se añaden con el Iframe Prefijo: incluyendo todos aquellos que no cuentan con un valor de evento (enviándose como iframe.Message).
Como se decía al inicio de este texto, será necesario algunos conocimientos para poder realizar la configuración manual y conseguir que todo funcione sin inconvenientes. Los mensajes enviados desde el Iframe serán mejorados de manera automática empleando información de nivel de página. Después de esto se estará listo para poder configurar la página GTM Iframe
Configuración de página incrustada (secundaria)
En el contenedor del GTM Iframe deberán seguirse tres pasos:
- Crear una etiqueta HTML personalizada que se comunique con la página principal.
- Actualizar la configuración de las etiquetas de Universal Analytics
- Actualizar los desencadenantes de las etiquetas de Universal Analytics para evitar que se activen hasta que hayan recibido el ID de cliente principal
Crear nueva etiqueta HTML personalizada
Será necesario crear una nueva etiqueta HTML personalizada y deberá ser configurada para que se active en el activador Todas las páginas. Si Iframe es una aplicación de una sola página, únicamente se deberá activar la etiqueta HTML personalizada en el activador Todas las páginas, y no con cada cambio de página SPA.
Configuración
Si la pagina no se carga en un Iframe, el código no se ejecuta. No habrá página principal con la que comunicarse. Se podrá establecer sendDataLayerMessages en falso en el supuesto de que no se deseen reenviar los mensajes dataLayer de secundario a principal.
Ello te será de gran ayuda si te sientes cómodo con el seguimiento dentro del Iframe en sí mismo y no quieres molestarte en configurar las etiquetas de la página principal. La página principal deberá ser establecida como el origen a la cual se envían los mensajes.
Listener
A la vez que empieza a sondear, también se inicia un escucha postMessage. En este sentido, el listener espera básicamente dos cosas:
- Comienzo del reenvio de sus mensajes dataLayer al padre o principal.
- Devolver una cadena de ID de cliente, para que el Iframe utilice esto en las etiquetas de Google Analytics.
Si la principal envía un mensaje clientId, la página insertará dichos datos en dataLayer, y las etiquetas de Google Analytics que se activan en el Iframe podrán emplear dicha información para su configuración. Si la principal envía un mensaje parentReady, el iframe dejará de enviar el mensaje childReady.
Reenviar mensajes
El reenviador de mensajes se centra en dos métodos:
- createMessage (obj)
- startDataLayerMessageCollection ()
Para llevar a cabo la configuración deberás tener en cuenta los siguientes pasos:
- El método createMessage () envuelve el mensaje dataLayer de la página Iframe con el prefijo configurado al inicio de la etiqueta HTML personalizada de forma predeterminada. El prefijo se emplea con el nombre del evento.
- Además, el método createMessage () también agrega automáticamente un objeto pageData que cuenta tanto con la URL como con el título de la página en Iframe.
- El método startDataLayerMessageCollection () envía todo a la matriz dataLayer.
- Después, reescribe la función dataLayer.push para enviar lo insertado en dataLayer a la página principal.
Etiquetas de Google Analytics
Si deseas recopilar datos en Google Analytics desde la página del iframe tendrás que llevar a cabo la configuración de todas las etiquetas de Google Analytics. Como el iframe no usará cookies para conservar la ID del cliente, el valor del campo de almacenamiento se tendrá que establecer en ninguno. Posteriormente, se tendrá que actualizar el campo clientId para usar una variable de capa de datos para clientId.
Debe tenerse presente que ninguna de las etiquetas se deberá activar en el supuesto de que el ID cliente no se encuentre aún disponible. Podrás actualizar los desencadenadores existentes para evitar que se activen hasta que clientId posee un valor válido.
Contenedor multipropósito
Si configuras todas sus etiquetas tal y como se ha reflejado en las instrucciones del capítulo anterior, el contenedor que se ejecuta no funcionará correctamente si la página se visita directamente como si se tratara de una página de nivel superior.
Aconsejo evitar mezclar demasiados casos de uso en un solo contenedor. Es más acertado crear un contenedor distinto para aquellos escenarios donde la página se visita directamente y que sean los desarrolladores quienes se encarguen de actualizar el código del sitio para cargar el contenedor correcto, en función de si la página se encuentra o no incrustada en un iframe.
En cambio, si lo que buscas es que el contenedor se amolde a los diferentes casos de uso, se tendrá que crear un conjunto separado de etiquetas. Se podrá emplear una variable de utilidad con el objetivo de verificar si se accede a la página como iframe o no.
Espero y deseo que a pesar de la complejidad de este texto, el mismo os haya sido de gran ayuda y os haya permitido resolver algunas de las dudas que pudieseis tener. Lógicamente, siempre estoy a vuestra completa disposición para recibir cualquier clase de comentario al respecto. Ahora que ya sabes cómo medir un iframe te invito a probar y seguir estas indicaciones!
Tags :
Deja una respuesta