Métricas Boss

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

Postado há 2 anos.

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 ? Nesse caso como falamos acima, esse iframe junto de seu atributo "src" realiza a chamada de uma url ou caminho de um diretório dentro do seu servidor para carregar o site que será incorporado dentro do seu documento root. Beleza, mas como fica o código de dentro do iframe?

<!-- 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 temos quase todos os mesmos elementos porém, além dos elementos padrões , , também temos uma tag que é responsável por carregar o formulário que vemos na página quando é apresentado o conteúdo para o usuário final. Mas e agora, como envio informações de dentro do iframe para o documento root. Um simples acionador de Envio de formulário do Google Tag Manager não resolveria?

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 nesse caso gritou e de acordo com o que ele gritou enviamos as informações para o GTM. Vamos ver na prática e parar com esse papo de maluco kkk?

Começando pelo onde adicionaremos o envio dos dados:

<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

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

O que é um "iframe" ?

Como instalar o Google Tag Manager nesse caso?

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

Notícias de Digital Analytics para quem não tem tempo de ler notícias.

Junte-se a turma de 9000 leitores ativos