Este artigo também está disponível em:
Para que é usado o Gerenciador de tags do Google?
O Gerenciador de tags permite adicionar e atualizar as próprias tags para rastreamento de conversão, análise de site, remarketing e muito mais.

O que é iframe?
Um iframe é um frame embutido usado dentro de uma página da web para carregar outro documento HTML dentro dela. Na verdade, este é um site em outro site.

Então, como usar GTM para rastrear formulários incorporados como Iframes:
Envie dados de seu iframe para seu quadro pai.
Rastreie as interações do iframe enviando uma chamada JavaScript "postMessage" do iframe para o quadro pai.
O frame principal ouvirá a chamada com o Gerenciador de tags do Google e a encaminhará para suas ferramentas de marketing.

Aqui está uma descrição detalhada de como configurá-lo:

1. Instale o GTM em seu iframe filho:
Crie uma nova conta do Gerenciador de tags do Google para associar ao seu quadro filho.
Não há necessidade de criar um login do Google separado, mas seu frame pai deve ter sua própria conta e contêiner.

Mesmo se você já tiver o GTM instalado no site que contém o iframe, ele não será capaz de captar nenhuma interação do usuário que ocorra dentro do iframe.

2. Configure o gatilho:
Criar novo gatilho
Escolha o tipo do gatilho
Nomeie o gatilho e configure-o para acessar a página com o url do formulário
NÃO se esqueça de substituir https://mf.mfs.gg/edited pelo URL do formulário

3. Conecte este gatilho a uma tag:
Envie os dados para o frame principal com o Gerenciador de tags do Google. Para isso, crie uma etiqueta de remetente especial para postMessage.

Crie uma nova tag
Vá com a tag HTML personalizada
Digite o 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>

NÃO se esqueça de substituir https://mf.mfs.gg/edited pelo URL do formulário no código, adicione o nome do formulário.
Digite o código

O método dataLayer.push adiciona / atualiza dados armazenados na camada de dados. Você pode passar qualquer tipo de pares de valores de chave, que seriam então transmitidos para o quadro pai.
No nosso caso temos: event: 'iframeFormSubmit', form: 'Nome do formulário'.

Conecte a tag para acionar
Escolha um gatilho que foi criado na etapa 2
Agora você pode salvar, atualizar e visualizar no modo de depuração.

4. Verifique o resultado no modo de depuração:
Agora, no modo de depuração, você pode ver que GTM formSubmit aconteceu.

Conecte-se ao modo de visualização
![GTM FormSubmit em iframe(https://storage.crisp.chat/users/helpdesk/website/6394d40f722b9c00/screenshot14_188bpbo.jpg)

Os dados agora devem ser enviados para o quadro pai e, neste quadro pai, nada acontece, porque temos que construir um ouvinte para postMessages.

5. Instale o listener para postMessages no frame pai:
Na conta do site pai, crie a tag HTML personalizada novamente.

Tags =&gt; New =&gt; Choose a tag type...=&gt; Custom HTML

Digite o 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 apenas escuta este postMessage, pega o que está neste postMessage e envia para o dataLayer.
Agora, para que isso funcione, temos que implantá-lo na página certa.
Crie um novo acionador para esta tag
Trigger type = Page view
Você pode ir com Todas as páginas se quiser, também pode configurá-lo para ouvir apenas as mensagens na página Iframe.
Escolha as páginas para ouvir
Agora você pode atualizar a página e visualizá-la no modo de depuração, para testar o formulário, envie-o para disparar postMessage.
Agora ouvinte para postMessages criado.

6. Então, agora vá em frente no Gerenciador de tags do Google e crie uma tag de evento do Google Analytics para FormSubmits:

Configurações do Google Analytics 4:
Crie uma nova tag em sua conta de quadro pai para o Google Analytics (para ouvir eventos, a tag de evento GA4 pode ser criada):

Tags =&gt; New =&gt; Choose a tag type...=&gt; Google Analytics: GA4 Configuration

Vá para sua conta do Google Analytics, encontre seu MeasmentID, cole-o nas configurações:
Para encontrar o ID de medição na conta do Google Analytics, vá para Admin, certifique-se de que você selecionou a conta e a propriedade desejadas. Na coluna Propriedade, clique em Fluxos de dados e, em seguida, clique em seu fluxo de dados da web. Seu ID de medição “G-” aparece na parte superior direita do painel.

Configurando a tag de configuração do GA 4

Adicionar gatilho:
Criar novo acionador de tipo de visualização de página

Execute seu quadro pai no modo de depuração (visualização) para ver se as tags disparam:
GTM debug mode

Go to your Google Analytics 4 account debug mode to inspect date which are received from our Parent frame:
Modo de depuração GTM


Configurações do Google Analytics Universal:
Crie uma nova tag em sua conta do frame principal para o Google Analytics:
Tags =&gt; New =&gt; Choose a tag type...=&gt; Google Analytics: Universal Analytics

Adicionar parâmetros
Adicionar gatilho
Adicionar evento para disparar

Agora o Google Analytics está configurado. O evento do Google Analytics é disparado. Verifique no modo de depuração.
Este artigo foi útil?
Cancelar
Obrigado!