Como implemento o Google Tag Manager em um site que usa IFRAME ?


A idéia desse post veio de uma duvida la do youtube de um aulão que fiz sobre Google Tag Manager, da uma olhada na dúvida:


WhatsApp Image 2022-01-13 at 12.59.57.jpeg


O que é um "iframe" ?


Por definição um iframe é uma tag HTML representa um contexto de navegação aninhado, efetivamente incorporando outra página HTML para a página atual. Fonte: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/iframe?utm_source=metricasboss&utm_medium=post


Ou seja, uma tag iframe carrega dentro de um site um outro site trazendo todo o corpo de seu documento para dentro desse documento principal que normalmente chamamos de "root".


Como instalar o Google Tag Manager nesse caso?


Normalmente indicamos a instalação do Google Tag Manager nesse documento "root", é extremamente proibido nesse caso instalar o Google Tag Manager dentro dos dois documentos, beleza?


Ou você implementa dentro do root, ou dentro do iframe, instalar nos 2 vai gerar duplicidade de todas as requisições realizadas dentro do Google Tag Manager bons indicativos disso são taxa de rejeição muito baixa, e auto referência nos relatórios. Então fica de olho ;)


Como funciona o processo de comunicação entre iframe e o root?


Vamos imaginar o seguinte cenário, você tem um site que tem um formulário dentro dele, para um usuário comum não existe algo que deixe explicito que esse formulário esteja dentro de um iframe. Porém, no código facilmente conseguimos identificar da uma olhada nesse código.


<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Este é o index</title>
</head>
<body>
    <iframe src="iframe.html"></iframe>
</body>
</html>


Percebeu que dentro da tag existe uma declaração de um elemento

<!-- iframe.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Este é o iframe</title>
</head>
<body>
    <form action="POST" id="myForm" onsubmit="">
        <input type="text" name="email" />
        <input type="submit" value="Cadastre-se na newsletter" />
    </form>
</body>
</html>


Dentro do

A resposta é bem simples não! De maneira bem leiga por uma questão de segurança não é possível via código puxar as informações assim de maneira direta. Para esses casos utilizamos o MessageEvent.


Para quem não conhece, essa interface representa uma mensagem enviada por um objeto alvo O link ta aí em cima para quem quiser se aprofundar no assunto.


A comunicação dos dois documentos é realizada através de um sistema de escuta, onde temos o formulário "GRITA" que o formulário foi enviado com sucesso e no documento root "ESCUTAMOS" o que o

Começando pelo

<script type="text/javascript">
    document.getElementById("myForm").onsubmit = (e) => {
       e.preventDefault()
       parent.postMessage({"event": 'test'}, "http://localhost:8080")
    }
</script>


O que está acontecendo meu Deus kkkk😱


Vamos lá 😎


  • Primeiro ele cria uma escuta interna para interceptar quando o formulário é enviado;
  • Dentro dessa escuta bem nesse trecho
    parent.postMessage({"event": 'test'}, "http://localhost:8080")
    ele envia a informação para o root;
  • No disparo enviado pelo método "postMessage" enviamos um objeto com a chave "event" e o valor "test".

Agora na escuta do documento root:


<script>
        var dataLayer = window.dataLayer || [];
        window.addEventListener("message", receiveMessage, false);

        function receiveMessage(event) {
            if (event.origin !== "http://localhost:8080") // Verificando domínio
                return;
            
            dataLayer.push(event.data)
        }
    </script>

  • Na primeira linha declaramos a variável dataLayer;
  • Logo abaixo nesse trecho
    window.addEventListener("message", receiveMessage, false);
    criamos uma escuta na camada de mensagem e atribuímos as informações recebidas por esse evento a função "receiveMessage";
  • Na funciona "receiveMessage" verificamos a origem do dominio (mera formalidade) e realizamos um disparo para a camada de dados através do metodo push presente na variável "dataLayer".

Perceba que dentro da função "receiveMessage" recebemos um argumento chamado "event" que é responsável por trazer todas as informações presentes no momento do disparo la dentro do

E ai o que acharam? Curtiram? Aproveitei para deixar esse conteúdo mastigado criei um material no github para ajudar a exemplificar como funciona o processo, da uma olhada e se possível umas estrelinhas https://github.com/metricasboss/iframe.com.br


Dúvidas? Comentários? Sugestões?


Mande um e-mail para gente contato@metricasboss.com.br, até a próxima 😄


Nos siga no Instagram @metricasboss

Inscreva-se aqui no nosso canal do Youtube

Notícias de Digital Analytics para quem não tem tempo de ler notícias.
Junte-se a turma de 9000 leitores ativos

Métricas Boss: © 2021 - Versão 4.0 - Web Analytics é mais que um gráfico bonitinho!