Este artículo también está disponible en:
¿Para qué se utiliza Google Tag Manager?
Tag Manager brinda la capacidad de agregar y actualizar etiquetas propias para el seguimiento de conversiones, análisis de sitios, remarketing y más.

¿Qué es el iframe?
Un iframe es un marco en línea que se usa dentro de una página web para cargar otro documento HTML en su interior. En realidad, este es un sitio web en otro sitio web.

Entonces, cómo usar GTM para el seguimiento de Forms Embed como Iframes:
Envíe los datos de su iframe a su marco principal.
Realice un seguimiento de las interacciones de iframe enviando una llamada de JavaScript "postMessage" desde el iframe al marco principal.
El marco principal escuchará la llamada con Google Tag Manager y luego la reenviará a sus herramientas de marketing.

Aquí hay una descripción detallada de cómo configurarlo:

1. Instale GTM en su iframe secundario:
Cree una nueva cuenta de Google Tag Manage para asociarla con su marco secundario.
No es necesario crear un inicio de sesión de Google por separado, pero su marco principal debe tener su propia cuenta y contenedor.

Incluso si ya tiene GTM instalado en el sitio web que contiene el iframe, no podrá detectar ninguna interacción del usuario que se produzca dentro del iframe.

2. Configure el disparador:
Crear nuevo activador
Elija el tipo de activador
Asigne un nombre al activador y configúrelo para acceder a la página con la URL de su formulario
NO olvide reemplazar https://mf.mfs.gg/edited con la URL de su formulario.

3. Conecte este activador a una etiqueta:
Envíe los datos al marco principal con Google Tag Manager. Para eso, cree una etiqueta de remitente especial para postMessage.

Crear una nueva etiqueta
Ir con etiqueta HTML personalizada
Introduzca el código:
<script>
try {
var postObject = JSON.stringify({
event: 'iframeFormSubmit',
form: 'Form name'/
});
parent.postMessage(postObject, 'https://mf.mfs.gg/edited');
} catch(e) {
window.console && window.console.log(e);
}
</script>

NO olvide reemplazar https://mf.mfs.gg/edited con la URL de su formulario en el código, agregue su Nombre de formulario.
Introduzca el código

El método dataLayer.push agrega / actualiza datos que se almacenan en la capa de datos. Puede pasar cualquier tipo de pares clave-valor, esto luego se transmitirá al marco principal.
En nuestro caso tenemos: event: 'iframeFormSubmit', formulario: 'Nombre del formulario'.

Conectar etiqueta al disparador
Elija un activador que se creó en un paso 2
Ahora puede guardar esto, actualizar y obtener una vista previa en modo de depuración.

4. Verifique el resultado en modo de depuración:
Ahora, en el modo de depuración, puede ver que se realizó el envío del formulario de GTM

Conectarse al modo de vista previa
FormSubmit de GTM en iframe

Los datos ahora deben enviarse al marco principal, y en este marco principal no sucede nada, porque tenemos que construir un oyente para postMessages.

5. Instale el oyente para postMessages en el marco principal:
En la cuenta del sitio web principal, vuelva a crear una etiqueta HTML personalizada.

Etiquetas =&gt; Nuevo =&gt; Elija un tipo de etiqueta ... =&gt; HTML personalizado

Introduzca el código:
<script type="text/javascript">
(function(window) {

addEvent(window, 'message', function(message) {
try{
var data = JSON.parse(message.data);
var dataLayer = window.dataLayer || (window.dataLayer = []);
if (data.event) {
dataLayer.push({
'event': data.event,
'postMessageData': data
});
}
}catch(e){}
});

// Cross-browser event listener
function addEvent(el, evt, fn) {
if (el.addEventListener) {
el.addEventListener(evt, fn);
} else if (el.attachEvent) {
el.attachEvent('on' + evt, function(evt) {
fn.call(el, evt);
});
} else if (typeof el['on' + evt] === 'undefined' || el['on' + evt] === null) {
el['on' + evt] = function(evt) {
fn.call(el, evt);
};
}
}

})(window);
</script>


Este código solo escucha este postMessage, recoge lo que hay en este postMessage y lo envía al dataLayer.
Ahora, para que esto funcione, tenemos que implementarlo en la página correcta.
Crear un nuevo activador para esta etiqueta
Tipo de activador = Vista de página
Puede ir con Todas las páginas si lo desea, también puede configurarlo para escuchar solo los mensajes en la página Iframe.
Elija páginas para escuchar
Ahora puede actualizar la página y obtener una vista previa en el modo de depuración, para probar el formulario, envíelo para activar postMessage.
Ahora se ha creado el oyente de postMessages.

6. Así que ahora continúe en Google Tag Manager y cree una etiqueta de evento de Google Analytics para FormSubmits:

Configuración para Google Analytics 4:
Cree una nueva etiqueta en su cuenta de marco principal para Google Analytics (para escuchar eventos, se puede crear una etiqueta de evento GA4):

Etiquetas =&gt; Nuevo =&gt; Elija un tipo de etiqueta ... =&gt; Google Analytics: Configuración GA4

Vaya a su cuenta de Google Analytics, busque su ID de medida, péguelo en la configuración:
Para encontrar el ID de medición en la cuenta de Google Analytics, vaya a Administrador, asegúrese de tener la cuenta y la propiedad deseadas seleccionadas. En la columna Propiedad, haga clic en Flujos de datos, luego haga clic en su flujo de datos web. Su ID de medición “G-” aparece en la parte superior derecha del panel.

Configuración de la etiqueta de configuración de GA 4

Agregar disparador:
Crear nuevo activador de tipo de vista de página

Ejecute su marco principal en modo de depuración (vista previa) para ver si las etiquetas se activan:
Modo de depuración de GTM

Vaya al modo de depuración de su cuenta de Google Analytics 4 para inspeccionar la fecha que se recibe de nuestro marco principal:
Vista de depuración de GA4


Configuración para Google Analytics Universal:
Cree una nueva etiqueta en su cuenta de marco principal para Google Analytics:
Tags =&gt; New =&gt; Choose a tag type...=&gt; Google Analytics: Universal Analytics

Agregar parámetros
Agregar disparador
Agregar evento para dispara

Ahora Google Analytics está configurado. Se activa el evento de Google Analytics. Compruébelo en el modo de depuración.
¿Este artículo te resultó útil?
Cancelar
¡Gracias!