Soluções para iFrames

O que são iFrames? (+ Explicações)

Solução usando o DOM (HTML da página) - Solução mais fácil

Solução usando LocalStorage/SessionStorage

Solução usando Messages (PostMessage e Message Listeners)

Solução usando instalação de Google Tag Manager / Analytics / JS Personalizado no iFrame.

Considerações Finais

Referências

O que são iFrames? (+ Explicações)

Um iFrame é um código em HTML que permite que um elemento seja exibido dentro de outro elemento. Somente possível em páginas HTML, permite incorporar documentos, vídeos e mídia interativa em uma página.

Ao fazer isso, você pode exibir uma página secundária da web na sua página principal.

O elemento desse tipo permite incluir um conteúdo de outras origens (cross domain). Ele pode integrar o conteúdo em qualquer lugar da sua página sem precisar incluí-los na estrutura do layout do seu site, como se fosse um elemento tradicional.

Ou seja, em resumo, um iFrame é como se fosse uma nova página HTML sendo emulada dentro de outra página HTML, o maior exemplo disso é a incorporação de elementos, como por exemplo um vídeo no Youtube ou um pedaço de código, conforme exemplo abaixo (usamos o JSFiddle pra esse exemplo).

O bloco de código acima poderia ter sido escrito direto no código, mas para ficar mais bonito e legível, usamos o incorporador de iFrame do JSFiddle para incorporar da forma como foi inserido acima.

Caso você nunca tenha enfrentado um iFrame ou quebrado a cabeça pra resolver uma implementação desse tipo, você deve estar se perguntando: "Mas onde eu usaria alguma solução pra isso?"

Iremos usar uma situação de exemplo simples pra isso:

Imagine um botão de WhatsApp que você precise captar o clique nele para disparar uma conversão normal.

Você criou o código para pegar o botão usando "document.querySelector('a[href="api.whatsapp"]')" e testou, porém, a tag não dispara de forma alguma, não importe o quanto você procure você não encontra o erro. Até que você resolve abrir o inspetor de código e vê esta imagem:

Ou seja, é um botão de WhatsApp feito em iFrame! E ocorre bem mais do que você imagina. Muitos anunciantes/desenvolvedores podem não querer usar um botão convencional ou plugin e acaba usando ferramentas de iFrame para incorporar chats personalizados/botões do WhatsApp.

Nem sempre um iFrame será um botão de WhatsApp, pode ocorrer com formulários (muito comum) também e alguns outros elementos que o anunciante possa querer implementar alguma tag, e, nessas situações usar document.querySelector padrão e o acionamento do Google Tag Manager não vai funcionar, de fato.

Mas pra isso, a implementação ainda pode ter salvação! Existem algumas técnicas para que você consiga salvar alguns casos e não precise mudar o status do caso para o tão temido Inactive.

Soluções para iFrames

Agora vamos partir pra hora do "vamo ver".

Temos aqui algumas soluções para iFrames + exemplos de quando utilizar cada maneira e por onde começar os testes.

Solução usando o DOM (HTML da página) - Solução mais fácil

Como falado acima, iFrames são janelas do navegador rodando (sendo emuladas) dentro da própria página HTML, portanto, em alguns casos podemos acessar os conteúdos que estão dentro do iFrame, como botões de enviar, campos input de formulários e outros elementos HTML que estejam dentro de um iFrame.

No exemplo abaixo, temos o iFrame de WhatsApp normal de um site comum de advocacia, em alguns casos, essa solução a seguir irá funcionar de forma excelente, mas em outros, não tem jeito de fazer usando ela.

Como podemos ver no print acima, o elemento em vermelho chamado "iframe" tem o ID chamado "callbell-iframe", e como sabemos, no JavaScript podemos pegar qualquer elemento da página usando o famoso "document.querySelector".

Quando utilizamos o "document.querySelector" pra um iFrame, temos a possibilidade de usar uma propriedade chamada "contentWindow" dentro desse iFrame pra saber se o iFrame está liberado ou bloqueado para encontrarmos os elementos HTML dentro dele (botões, campos de formulário, etc).

Portanto, tem 2 caminhos possíveis: Ou o contentWindow está liberado e eu posso seguir com a implementação normalmente OU o contentWindow está bloqueado pela política de CORS (Cross Domain) e eu não vou poder seguir com a implementação.

Então, para matar essa dúvida se o iFrame está acessível ou não, irei abrir o meu console para testar.

Antes de qualquer passo, esse será o primeiro teste que você terá que fazer:

1º Abra o console no site do anunciante.

2º Digite no console o seguinte código: "document.querySelector('SeletorDoiFrameAqui').contentWindow.document" e aperte enter.

Caso o retorno seja esse que está marcado em vermelho no print acima (#document) significa que o iFrame está liberado para utilizar diretamente no DOM, ou seja, você pode seguir para os próximos passos.

Agora caso no console apareça o seguinte erro marcado em vermelho:

Aí significa que essa solução NÃO funcionará pro seu caso e você deverá tentar a próxima solução.

Mas caso o seu caso tenha sido o #document no retorno do console, ou seja, sem erros, você pode seguir adiante.

Feito o teste e retornado o #document, podemos utilizar o iFrame como qualquer outro elemento HTML normal.

No caso do iFrame do CallBell que estamos utilizando de exemplo, quando clico no ícone do WhatsApp, ele abre um novo botão do WhatsApp acima, que se for clicado, ele levará quem estiver clicando ao link do WhatsApp do anunciante, ou seja, o botão do print abaixo que marquei em vermelho que eu irei rastrear o clique.

Ao usar o inspecionar elemento para verificar se o botão dentro do iFrame tem alguma classe, encontrei a classe "whatsapp-message".

Irei usar esse seletor para captar o clique nesse botão ('div.whatsapp-message') ou seja, traduzindo, a DIV com a class "whatsapp-message".

Agora você terá que decidir por qual caminho fazer, o que também vai depender do anunciante, caso ele tenha Google Tag Manager, iremos usar a tag de HTML Personalizado.

Caso ele tenha as tags por código (Global Site Tag) podemos usar Gtag mesmo.

Em ambos os códigos, iremos enfrentar um pequeno problema: geralmente iFrames demoram alguns segundos para carregar na página, ou seja, a página principal carrega, e alguns segundos depois o iFrame carrega, portanto, deveremos utilizar um temporizador para detectar e disparar o código somente quando o iFrame já existir na página, ou seja, estiver carregado.

Código exemplo para Gtag

Para Gtag é bem mais simples, basta colocar o rótulo da conversão do anunciante no código abaixo, copiá-lo e colar na tag <head> da página do Advertiser e estará tudo pronto.

Lembrando: O código abaixo foi criado para o exemplo acima, ou seja, do iFrame de WhatsApp Callbell. Caso seu iFrame seja diferente você terá que criar um código diferenciado com alguns outros eventos para que funcione.

Código exemplo para Google Tag Manager

Para o Google Tag Manager você precisará os seguintes passos:

1º Crie uma nova Tag de HTML Personalizado e coloque o acionamento DOM Pronto.

2º Cole o código dentro da Tag criada.

Lembrando: O código abaixo foi criado para o exemplo acima, ou seja, do iFrame de WhatsApp Callbell. Caso seu iFrame seja diferente você terá que criar um código diferenciado com alguns outros eventos para que funcione.

Agora basta configurar o acionamento da Tag de Conversão do Whatsapp com o "Evento Personalizado" e colocar no nome do evento "whatsapp-click", assim como no código acima adiciona ao dataLayer.

Solução usando LocalStorage/SessionStorage

Caso a solução do DOM não tenha dado certo para você por alguma razão, você pode seguir adiante com essa segunda solução.

Alguns iFrames inserem informações dentro do localStorage do navegador, por exemplo, quando ele abriu ou fechou. Pode ser útil quando a task seja somente um "WhatsApp" ou seja, o anunciante deseja rastrear se o chat foi aberto (clicado) ou não.

A primeira coisa a se fazer é abrir o iFrame ou interagir com ele e verificar se ele manda algum dado pro localStorage. Qualquer dado pode ajudar, até um simples aviso de que o formulário ou chat foi iniciado/finalizado.

Veja no exemplo abaixo:

LocalStorage antes de qualquer interação com o iFrame:

LocalStorage após abri o (clicar no) iFrame:

Note que o iFrame enviou diversos dados para o localStorage para controlar a sessão do iFrame, ou seja, verificar quando o iFrame está aberto ou fechado para controlar a aplicação do iFrame. Iremos utilizar desse mecanismo para nos beneficiar e assim disparar a conversão.

Neste exemplo, iremos focar na chave (key) do localStorage com nome de "widgetContakoAtendimentoAberto" que na primeira interação terá o valor (value) "false", porém após clicar no botão "Entrar" do iFrame, o valor (value) da chave (key) muda para "true".

Valor alterado para "true" da chave "widgetContakoAtendimentoAberto":

Resumindo, como ficou a solução do código

Detectar no localStorage quando a chave "widgetContakoAtendimentoAberto" existir e a mesma tiver o valor "true" e assim que todas as opções forem verdadeiras eu disparo o código (se for Global Site Tag, disparo a função gtag, se for Google Tag Manager, disparo o dataLayer.push).

Segue código exemplo abaixo:

Código exemplo para Gtag

Código exemplo para Google Tag Manager

Agora é só decidir como você vai utilizar o código:

DataLayer - Google Tag Manager ou Gtag para Global Site Tag

Temos um exemplo de utilização no primeiro tópico dessa documentação em "Solução usando o DOM (HTML da página) - Solução mais fácil".

Observação: Lembrando que os códigos usados nesses exemplos são para fins didáticos e não irão funcionar em todos os casos possíveis, a ideia aqui é para você aprender a lógica e entender do funcionamento de um iFrame e aplicar uma solução com seus próprios códigos.

Solução usando Messages (PostMessage e Message Listeners)

Os métodos de troca de mensagens são muito comuns para comunicação no navegador. Embora esse método seja o mais complexo entre os que aqui estão, ele funciona de maneira simples: dentro do navegador, enquanto uma aba, janela ou iFrame fala, outra janela, aba ou iFrame escuta. É literalmente uma troca de mensagens onde esses elementos do navegador irão conversar.

A maioria dos iFrames tem essa solução como a mais provável de funcionar, visto que a maioria dos iFrames que funcionam as conversões, enviam mensagens pra janela (window) do navegador que poderemos escutar.

Mas, como que funciona essa troca de mensagens?

É um mecanismo simples de comunicação, como um SMS, porém pra comunicação no navegador.

Imagine que você tem uma landing page, e, dentro da landing page tem um iFrame de formulário. Ou seja, a landing page é o elemento pai, e o iFrame de formulário, o elemento filho.

O formulário tem um botão chamado "iniciar" que, ao ser clicado, mostra os campos do formulário para serem preenchidos.

Toda vez que o botão "Iniciar" do formulário é clicado, ou seja, no momento que começa o preenchimento do formulário, o formulário avisa o elemento pai (landing page) sobre esse evento, ou seja, é a primeira troca de mensagem entre os dois elementos (janelas).

O formulário também avisa quando o mesmo é finalizado, ou seja, quando o formulário é enviado.

Em resumo, a comunicação entre a landing page e o formulário, ocorre em duas mensagens, quando o formulário inicia seu preenchimento e quando finaliza.

Agora imagine que você precisa instalar uma conversão de formulário simples (sem conversões otimizadas) nesse formulário.

O mais lógico, seria você ouvir o evento de "finalização", ou seja, a segunda mensagem enviada pelo formulário no iFrame.

Resumindo, a solução teórica é: Quando o formulário enviar a mensagem de finalização, eu disparo a conversão de formulário enviado.

Agora vamos pra solução prática.

postMessage e Message listener - JavaScript

Ao traduzir do inglês, esses dois mecanismos do JavaScript ficam mais claros:

Post Message significa "Postar mensagem" ou "enviar mensagem".

Message Listener significa "Escutar mensagem".

Assumindo essas duas afirmações, basicamente poderemos utilizar esses eventos pra testar se mensagens estão sendo enviadas/ouvidas no navegador.

O método JavaScript window.postMessage() envia a mensagem e o window.addEventListener('message', function(){}) escuta a mensagem enviada.

Caso você queira se aprofundar no entendimento desses métodos, sugiro que leia a documentação do MDN sobre eles:

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage - Post Message

https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event - Message Listener

No caso aqui iremos focar na solução do iFrame pra nossa task de forma simples.

Iremos utilizar o seguinte site de exemplo: https://www.davinagasparini.com.br/intencao-de-vaga

Ao abrir a página, o formulário aparece da maneira do print acima.

Ao abrir o inspetor, consegui confirmar que realmente era um iFrame feito pela powr.io, como no exemplo abaixo:

Sendo assim, o primeiro teste que irei fazer para usar o message é rodar o seguinte código no console:

window.addEventListener('message', function(e) {console.log(e)});

Assim que eu digitar esse código acima no console e pressionar a tecla "Enter", o console irá escutar as mensagens enviadas para a janela e retornar os logs caso tenha alguma mensagem sendo enviada pelo iFrame. Após rodar o código, eu começarei a interagir com o iFrame e testar o envio do formulário. Após preencher todos os campos e enviar o formulário, obtive o seguinte retorno no console do navegador:

Se os retornos dos logs tiver a palavra MessageEvent, igual no print acima, significa que o iFrame está enviando mensagens para a página e você pode utilizar esse método.

Caso mesmo após várias interações NÃO apareça nenhum log, provavelmente o iFrame não está enviando nenhuma mensagem e não funcionará esse método.

Dentro das várias mensagens que apareceram, uma me chamou atenção: a mensagem "form enviado"

Como podemos ver, o iFrame está avisando na mensagem que o formulário foi enviado pela mensagem "form enviado".

Assim, eu posso gerar o seguinte código para disparar a tag de formulário enviado:

Lembrando que nem sempre o iFrame irá enviar uma mensagem tão clara como foi nesse exemplo acima, as vezes ele pode enviar somente os MessageEvents como objetos JavaScript e ficar um pouco mais complexo.

Mas caso você conheça objetos em JavaScript (se ainda não conhece, deveria aprender) você já saberá o que fazer, os logs estão retornando objetos com várias informações dentro que o iFrame está enviando para a janela.

a letra "e" dentro do evento carrega um objeto cheio de informações e propriedades, e como sabemos em JavaScript, podemos acessar as propriedades de dentro dos objetos usando o "."

Então ao atualizar a página, rodei o seguinte código novamente no console:

window.addEventListener('message', function(e) {console.log(e.data)});

Ou seja, estou solicitando para meu código dar um log na propriedade "data" do MessageEvent.

Então recebi os seguintes dados:

Ou seja, dentro do e.data eu recebi um objeto com mais informações que eu também posso acessar utilizando o ponto (.)

Resumindo, nesse ponto de troca de mensagens entre o iFrame e a página, você deverá utilizar a sua criatividade para bolar uma solução.

Não tem um padrão de mensagens, muitos iFrames enviam mensagens mais quebradas, outros enviam mais estruturadas, vai depender da sua sorte e criatividade para criar um código que funcione bem e que seja objetivo.

Solução usando instalação de Google Tag Manager / Analytics / JS Personalizado no iFrame.

Uma outra solução possível para resolver problemas de iFrame é a instalação direta de recursos dentro do iFrame.

Conforme explicado anteriormente, os iFrames incorporados na página são como navegadores rodando dentro da página pai, sendo assim, instalar o Google Tag Manager ou qualquer outro tipo de ferramenta dentro desse outro "navegador" é totalmente possível em alguns iFrames.

O maior exemplo são os formulários feitos usando a ferramenta do TypeForm.

Os iFrames da TypeForm permitem que o usuário instale o Google Tag Manager ou algum código JS Personalizado.

A ferramenta TypeForm gera formulários e outros elementos interativos em iFrames pra você colocar diretamente no seu site, sem precisa fazer uma construção do formulário ou elemento por conta própria.

Além disso, os formulários ficam bem interativos e bonitos. Nos últimos meses, alguns casos de clientes com algum formulário TypeForm chegou no nosso time e pode parecer não ter uma solução muito clara, mas é possível.

Em resumo, alguns iFrames também tem essa mesma solução, não só TypeForm.

"Mas como eu consigo ver qual tecnologia um iFrame utiliza?"

Bom, isso é simples, basta usar o famoso Inspetor de Elementos!

Todo iFrame tem uma propriedade chamada "src". Bem iguais os elementos "img" ou até mesmo os elementos "a" no HTML.

O "src" basicamente mostra a URL que o iFrame está emulando, ou seja, de onde o iFrame está carregando as informações e elementos dele.

Como você pode ver no print acima, a URL no atributo "src" do iFrame é do TypeForm.

Agora, para você saber se o tipo do iFrame contém essa integração com o Google Tag Manager, por exemplo, você deverá pesquisar a documentação de cada iFrame, para o caso do TypeForm eles deixam isso bem nítido, como por exemplo no link abaixo:

https://www.typeform.com/help/a/add-google-tag-manager-to-a-typeform-360029583611/

Caso você mesmo assim não encontre nada na documentação do iFrame ou em qualquer outro lugar, você pode perguntar para o anunciante se ele tem acesso a plataforma do iFrame e fazer um doublecheck pelas integrações/funcionalidades no painel da plataforma.

Integração Tag Manager - TypeForm:

Após instalar o Google Tag Manager no iFrame, você pode usar o botão "Visualizar" dentro do Tag Manager e debugar a página do iFrame com o Tag Assistant (você pode até mesmo copiar o "src" do iFrame e abrir numa nova aba do navegador se preferir).

No caso do TypeForm, o preview deve ter uma visualização semelhante a essa abaixo:

E assim, mais uma vez, você deverá exercer sua criatividade para utilizar esses eventos no dataLayer e a integração pra gerar sua solução personalizada pro seu caso. Essa pode ser considerada até mesmo a solução mais complicada, pois exige uma solução bem bolada pra que a conversão dispare bem. Portanto, sugiro que tente utilizar apenas como uma última opção.

A ideia é que você tenha consciência de que é possível implementar um Google Tag Manager dentro do iFrame e assim salvar algum caso que você poderia dar Inactive sem saber dessa possibilidade!

Lembrando que varia de iFrame pra iFrame, nem todos são iguais, portanto as soluções também não.

O que funciona pra TypeForm, nem sempre vai funcionar pra Powr.io e por aí vai, por isso, analise com cautela e não faça nada precipitadamente.

Em print acima, um exemplo de conversão otimizada rodando em iFrame TypeForm!

Considerações Finais

É uma coisa inevitável, iFrames sempre vão gerar dores de cabeça e esse documento não vai salvar a pátria.

Mas, caso você queira realmente aprender sobre como agir quando pegar um pela frente pra não fritar a cabeça correndo pra lá e pra cá e acabar perdendo o caso, esse documento é pra você.

Repito que a ideia aqui é apresentar a maior parte de soluções possíveis para que você saiba o que fazer quando tiver que fazer esse tipo de implementação.

Sobre código ou complexidade, sabemos que nem todos vão entender o conteúdo nessa documentação, no entanto, a ideia é que você pegue um iFrame e diga: "Opa, esse daqui eu consigo adicionar um Tag Manager ou acessar via DOM" e não que você reaja assim: "Vish maria, é iFrame!"

Referências

O que são iFrames - https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/iframe

ContentWindow - https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow

Post/Listen Messages - https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event

Page updated

Google Sites

Report abuse