Inscreva-se em minha Newsletter
O que são iframes?
Um iframe (abreviação de “inline frame”) é efetivamente um site que carrega dentro de outro site.
Você já usou o PayPal para cobrar clientes em seu site? Ou adicionou um botão de compartilhamento do Facebook à sua postagem no blog?
Esses alguns exemplos de iframes que você já deve ter usado em algum momento.
O iframe é uma maneira segura de os usuários interagirem com sites de terceiros sem sair do seu site.
Como é que isso funciona?
O HTML do iframe inclui o site de origem e as dimensões do iframe, além de qualquer código adicional de estilo ou funcionalidade.
Por exemplo, um iframe pode ser escrito assim:
<iframe src="https://reulison.com.br/" height="300px" width="900px"></iframe>
O problema com o rastreamento de iframes
O iframe contém outro site, portanto, a menos que você seja o proprietário do site em seu iframe, não poderá fazer nenhum rastreamento. Tempos tristes.
Se você quiser rastrear um iframe, certifique-se de ter acesso de desenvolvedor ao site dentro do seu iframe. Se você já tem o Google Tag Manager instalado, melhor ainda.
🚨 Obs: Para reiterar, você precisa de acesso ao servidor do iframe em questão. Isso significa o código-fonte do site , não é a mesma coisa que o HTML do iframe em seu site. 80% dos casos que vejo em que as pessoas estão lutando para rastrear iframes simplesmente não são possíveis. Sem acesso ao iframe em questão, você não pode instalar nenhum código de rastreamento.
Inspecionando iframes
Não tem certeza se o elemento da sua página é um iframe? Você pode fazer uma verificação simples no frontend do seu site.
Para inspecionar um elemento de página, clique com o botão direito do mouse sempre que suspeitar que há um iframe. Se você vir a opção View Frame Source, então o elemento é um iframe.
Se você clicar em Exibir código-fonte, verá o código HTML do iframe, que será diferente do código do site em que você está.
Como enviar dados do seu iframe
Se o iframe não está em seu domínio mas você tem acesso ao código-fonte do mesmo.
Você pode rastrear interações de iframe enviando uma chamada Javascript chamada postMessage do iframe para o site principal. O site ouve a chamada com o Gerenciador de tags do Google e a encaminha para suas ferramentas de marketing.
Se isso parece complicado, prometo que não é. Aqui está uma visão geral de como isso funciona com mais detalhes.
Instale o GTM no seu iframe
Mesmo que você já tenha o GTM instalado no site que contém o iframe, ele não poderá detectar nenhuma interação do usuário que ocorra dentro do iframe.
Portanto, se você deseja rastrear envios de formulários, cliques em botões ou visibilidade de elementos em seu iframe, também precisa instalar o GTM em seu frame.
A parte importante aqui é que você deve criar uma nova conta do Gerenciador de tags do Google para associar ao seu frame.
Isso não significa que você precisa de um login do Google separado, mas vai querer uma conta GTM e um contêiner específicos para seu frame. Seu site principal deve ter sua própria conta e contêiner.
Inspecione seus elementos do iframe
Em seguida, você terá que decidir quais ações do usuário deseja rastrear dentro do seu iframe.
Lembra como verificamos nosso código iframe anteriormente? Aqui é onde isso vem a calhar. Clique com o botão direito do mouse em seu iframe e selecione View Frame Source.
Aqui, você poderá encontrar qualquer informação de identificação sobre o elemento que deseja rastrear. Se você quiser acompanhar o envio de um formulário, poderá procurar um ID de formulário. Se for um clique de botão, você pode procurar por um id ou uma classe.
Depois de encontrar um identificador que o ajudará a rastrear esse elemento, copie-o. Vamos precisar dele para construir um Trigger.
Crie um trigger para seu elemento iframe
Na conta do GTM do seu frame, você criará um novo acionador usando o identificador de elemento que acabou de encontrar.
O tipo de gatilho que você usa dependerá do que você deseja rastrear. Selecione o tipo de acionador que melhor se adapta ao elemento do seu iframe.
Existem outras opções de tipo que você terá que decidir, mas a parte importante aqui é garantir que o trigger seja acionado quando sua variável corresponde ao identificador do elemento.
Neste exemplo, o iframe contém um formulário, portanto, queremos que o gatilho seja acionado quando a seguinte condição for verdadeira: ID do formulário é igual a ninja_forms_form_1.
Isso garante que o trigger sempre será acionado quando um usuário fizer a ação que você deseja rastrear, mas não será acionado quando o usuário interagir com o iframe de outras maneiras.
Enviar dados do iframe para o site principal
O próximo passo é conectar este trigger a um Tag.
No entanto, não queremos enviá-lo diretamente para o Google Analytics ou outras ferramentas.
Por quê? Porque a interação seria rastreada como proveniente do site de origem do iframe, não de nosso site principal.
Se você usar seu novo trigger para enviar dados diretamente para sua ferramenta de rastreamento, não poderá diferenciar os usuários que converteram no iframe do site principal.
Isso é importante para rastrear o caminho do usuário até a conversão. Para fins de marketing, deve ser importante para você onde o usuário estava no seu funil quando ele converteu.
E é por isso que vamos enviar os dados para o site principal com a ajuda do Google Tag Manager.
Para fazer isso, precisamos de uma tag especial para nosso postMessage que encaminha os dados de rastreamento para o site principal.
Isso requer uma tag HTML personalizada. Eu construí um que você pode baixar e importar diretamente para o seu contêiner GTM aqui.
Basicamente, esse script consiste em um push do Data Layer para quaisquer pares de chave-valor que você deseja rastrear. Se você estiver familiarizado com HTML, poderá personalizar isso o quanto quiser.
Crie um listener na conta GTM principal
Portanto, agora nosso iframe enviará dados de rastreamento para o site, mas esses dados serão totalmente perdidos se o site não souber ouvir esses dados.
O que nos leva à nossa próxima etapa: criar uma tag listener na conta do GTM do seu site.
A ideia aqui é que uma Tag em seu site que dispare uma Tag em conjunto com a Tag do iframe.
O Tag do site basicamente apenas escuta o Tag do iframe, extrai as informações no postMessage e envia essas informações para o Data Layer.
Novamente, isso requer um HTML personalizado, para o qual tenho um modelo aqui.
Quanto ao acionador, você normalmente escolherá uma visualização de página apenas para a página com este iframe. É menos um script para carregar em seu site.
Enviando os dados do iframe para o Google Analytics
Agora que tudo o que você deseja acompanhar está disponível no Data Layer de seu site, você pode enviar seus dados de iframe para ferramentas como o Google Analytics.
No contêiner GTM do site, você pode criar uma tag de evento que identifica a ação do usuário no iframe usando os parâmetros mais adequados à sua configuração de rastreamento.
Certifique-se de que quaisquer novas variáveis que você criar para seus parâmetros correspondam às variáveis em seu Data Layer com o código correto.
Você também precisará de um novo trigger personalizado que será acionado quando o nome do evento do elemento no iframe aparecer no Data Layer.
É assim que podemos enviar dados de um iframe em outro domínio para o site principal e, em seguida, enviar esses dados para nossas ferramentas de marketing, como o Google Analytics.
Parabéns! Depois que isso for implantado, você poderá acompanhar com êxito as conversões por meio de iframes com o Gerenciador de tags do Google.
Se o iframe estiver dentro de domínio
Por exemplo, um banner em HTML5, CSS3 e JavaScript.
<iframe frameborder="0" width="300" height="250" src="../banners/300x250/index.html" class="iframeBannerAds"></iframe>
Nesse caso, você não precisará instalar o GTM no iframe. Mas também não é possível rastrear os eventos que acontecem nesse iframe com o GTM, mesmo ele estando dentro do seu domínio.
Aqui é que entra um pouco de conhecimento de JavaScript que todo o web analytics deve saber. Existe a propriedade contentWindow do JavaScript .
A propriedade contentWindow retorna o objeto Window de um HTMLIFrameElement. Você pode usar este objeto Window para acessar o documento do iframe e seu DOM interno. Este atributo é somente leitura, mas suas propriedades podem ser manipuladas como o objeto global Window.
Por exemplo, queremos rastrear todos os cliques dentro de um banners em iframe.
var iframe = document.getElementsByClassName("iframeBannerAds");
for (var i = 0, len = iframe.length; i < len; i++) {
iframe[i].onmouseover = function() {
elmnt = this.contentWindow.document.querySelector('a');
elmnt.onclick = function() {
dataLayer.push({
'event': 'ClickOnBannerHTML5'
});
}
}
}
Sabemos que banners em iframes podem ter animações, esse código rastreia se o usuário passa o mouse no banner, depois rastreia os links existentes no banner e se usuário clicar no banner dispara o evento ClickOnBannerHTML5 para o Data Layer.
O código que vimos no código é um evento customizado do GTM:
dataLayer.push({
'event': 'ClickOnBannerHTML5'
});
E você não precisa inserir esse código no iframe, basta deixar ele no site principal direto no código fonte ou criar uma Tag no GTM usando o recurso HTML Customizado e disparar somente nas páginas que contenham esses banners em iframes.