Neste artigo, explicaremos como o Hotjar interage com iframes, as limitações que existem e as configurações/recursos disponíveis.
- Compreendendo iframes dentro do Hotjar
- Quais são as minhas opções para rastrear conteúdo de iframes com o Hotjar?
- O que significa permitir iframes dentro do Hotjar?
- Quais são as limitações após permitir um iframe?
Compreendendo iframes dentro do Hotjar
Um iframe pode ser descrito como uma página da web que aparece dentro de outra página da web. Eles são frequentemente usados para incorporar conteúdo de sites de terceiros, como chatbots, vídeos ou formulários. No entanto, também podem ser usados para exibir conteúdo do mesmo domínio do site.
Para determinar de onde vem o conteúdo de um iframe, podemos olhar para a URL de origem do iframe (src=""), que é mostrada no código da seguinte forma:
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe> No exemplo acima, a URL de origem do iframe vem do YouTube.
Você pode saber mais sobre iframes na documentação da Mozilla Developer Network.
Para aproveitar ao máximo este artigo, é importante conhecer esses termos:
-
página 'pai' do iframe - Esta é a página onde o código do <iframe> foi adicionado. Esta página geralmente tem seu próprio conteúdo, mas também inclui o conteúdo do iframe incorporado. É a página que seus usuários visitarão em seus navegadores.
Exemplo de uma página pai do iframe (https://www.hotjar.com). -
página 'fonte' do iframe - Esta é a página de onde vem o conteúdo do iframe. A URL da página fonte geralmente não é uma página que seus usuários acessariam diretamente.
Exemplo da página fonte correspondente do iframe. (https://Hotjar.eu.ada.support)
O Hotjar não rastreia iframes incorporados em sua página por padrão
Por padrão, os mapas de calor e as gravações bloquearão elementos de iframe que estão incluídos nos dados da sessão e impedirão que eles representem conteúdo. Em vez do conteúdo do iframe, ao assistir a uma gravação ou visualizar um mapa de calor, você verá uma mensagem informando que o Hotjar não pode rastrear iframes incorporados em sua página:
Quais são as minhas opções para rastrear conteúdo de iframes com o Hotjar?
O Hotjar só é capaz de rastrear páginas da web onde o código de rastreamento do Hotjar (código de rastreamento) está instalado. Se o código de rastreamento estiver instalado na página pai do iframe, então o código de rastreamento rastreará essa página, mas não rastreará ou exibirá interações dentro do iframe (o conteúdo da página fonte do iframe).
O mesmo vale vice-versa. Se o código de rastreamento estiver instalado dentro da página de origem do iframe, ele irá rastrear e exibir interações para a página de origem, mas não irá rastrear ou exibir interações na página pai do iframe.
O Hotjar pode ser usado para rastrear conteúdo de iframes das seguintes maneiras, vamos detalhar cada uma nos parágrafos abaixo:
- Instale o código de rastreamento apenas na página pai do iframe
- Instale o código de rastreamento apenas na página de origem do iframe
- Instale o mesmo código de rastreamento em ambas as páginas do iframe, pai & de origem
Considerações ao tentar instalar o código de rastreamento do Hotjar dentro de um iframe.
Para rastrear interações dentro de um iframe, você precisará ter acesso para editar o código da página de origem do iframe. Se estiver usando um iframe de terceiros, isso pode não ser possível. Se o terceiro permitir que você adicione seu código de rastreamento à página de origem do conteúdo do iframe deles, eles também precisarão considerar o rastreamento do Hotjar em suas políticas de privacidade e cookies.
Instale o código de rastreamento apenas na página pai do iframe
Com essa abordagem, o Hotjar irá rastrear o conteúdo da página pai, mas nenhuma interação será rastreada dentro do iframe.
Nas gravações e mapas de calor, o iframe será bloqueado por padrão e, se você permitir que o iframe apareça, verá uma versão estática do conteúdo da página de origem do iframe, mas o Hotjar não irá rastrear nenhuma interação dentro do iframe. Aprenda como permitir um iframe.
Instale o código de rastreamento apenas na página de origem do iframe
Com essa abordagem, o Hotjar irá rastrear o conteúdo da página de origem do iframe, mas nenhuma interação será rastreada na página pai.
Nas gravações e mapas de calor, você verá a página pai que foi realmente visitada pelo usuário, mas verá apenas a coleta de dados com base em interações que ocorreram dentro do elemento iframe. Qualquer interação que o usuário teve com a página pai fora do iframe não será rastreada.
Instale o mesmo código de rastreamento em ambas as páginas do iframe pai & de origem
Com essa abordagem, o Hotjar será capaz de detectar dados tanto da página pai quanto da página de origem do iframe. No entanto, isso só é possível se sua equipe puder editar o código da página de origem do iframe diretamente (isso raramente é possível ao usar um iframe fornecido por um terceiro).
Se você puder adicionar o código de rastreamento à página de origem do seu iframe e à página pai, é importante saber que o conteúdo do iframe será tratado como uma página separada nas gravações do Hotjar. Em vez de ver as interações das páginas pai e de origem ao mesmo tempo, o Hotjar tratará as interações com o iframe como outra aba na sessão do usuário.
Isso fará com que a gravação pareça que o usuário está clicando de um lado para o outro entre a página pai do iframe e a página de origem do iframe, em vez de vê-las ao mesmo tempo. Devido às limitações em torno dos iframes, não é possível evitar esse comportamento quando o código de rastreamento é adicionado tanto nas páginas pai quanto de origem ao mesmo tempo.
Como permitir um iframe no Hotjar
O Hotjar oferece a capacidade de 'permitir' iframes aparecerem dentro de mapas de calor e gravações. Na maioria dos casos, isso significa que o Hotjar só pode carregar a página do iframe, mas não pode rastrear interações do usuário dentro dos iframes, a menos que você tenha a capacidade de adicionar o código de rastreamento tanto na página de origem quanto no iframe. Se o JavaScript for necessário para carregar o conteúdo do iframe, permitir o iframe pode resultar no iframe sendo exibido como um espaço vazio em gravações e mapas de calor.
Antes de permitir iframes em seu Site do Hotjar, revise a próxima seção deste artigo que descreve as limitações que podem impedir os iframes de serem exibidos no Hotjar.
Adicione data-hj-allow-iframe como um atributo HTML ao seu iframe.
Você pode fazer isso adicionando um atributo HTML, data-hj-allow-iframe, ao iframe que deseja exibir.
<iframe src="https://example.com/page.html" data-hj-allow-iframe=""></iframe> Isso pode ser escrito como data-hj-allow-iframe="", data-hj-allow-iframe="true", ou apenas data-hj-allow-iframe. De qualquer forma, o valor será exibido como "true" nos bastidores.
Este atributo deve ser colocado no próprio elemento <iframe> e não pode ser colocado no elemento pai do iframe. Muitas ferramentas de terceiros não permitem que você edite seus elementos <iframe>, o que significa que eles não podem ser permitidos.
Uma página de origem do iframe será recarregada toda vez que for exibida no Hotjar
A URL para a qual o iframe aponta é armazenada em nossos servidores e recarregada toda vez que uma gravação é reproduzida. Isso significa que se o carregamento da página de origem do iframe desencadear algum comportamento adicional, isso poderá causar resultados inesperados e adversos.
Visite sua Página de Sites e Organizações.
Clique no ícone de engrenagem de configurações do site 
para visitar a página de configurações do seu site.
Expanda o menu Segmentação e rastreamento de sessão.
Digite o nome de domínio de nível superior que deseja permitir sob o título DOMÍNIOS DE IFRAME PERMITIDOS.
Apenas insira o nome de domínio de nível superior ao inserir nomes de domínio no campo DOMÍNIOS DE IFRAME PERMITIDOS. O nome de domínio de nível superior é o domínio sem www, http://, ou https:// conectado a ele. Por exemplo, se você deseja permitir https://www.hotjar.com/ neste campo, o nome de domínio de nível superior seria hotjar.com
Quais limitações existem após permitir um iframe?
Antes de permitir um iframe, considere as limitações que persistirão mesmo após permitir o iframe:
- O iframe deve ter um atributo src.
- O Hotjar não pode permitir um iframe se o atributo src usar um caminho de página relativo (Exemplo: src=“/page”) em vez da URL completa (Exemplo: src=“https://hotjar.com/page”).
- O JavaScript será bloqueado dentro do iframe se estiver gravando a página pai.
- As interações (eventos de clique e rolagem, digitação, animações CSS, mutações DOM, etc.) não serão rastreadas no iframe se estiver gravando a página pai.
Essas limitações significam que a maioria dos iframes de terceiros pode não ser exibida porque dependem de JavaScript, mesmo após permitir o iframe. Alguns exemplos de tipos de conteúdo que não funcionarão com um iframe permitido incluem:
- Chatbots
- Players de vídeo de terceiros (incluindo YouTube e Vimeo)
- Formulários de terceiros (incluindo formulários Typeform)
- A maioria dos aplicativos da web de terceiros carregados via iframes
- A maioria dos sistemas de pagamento de terceiros
Isso significa que o Hotjar só pode exibir os seguintes aspectos de um iframe permitido:
- Conteúdo estático da página (sem JavaScript) carregando através de um iframe.
- O comportamento do cursor é rastreado em relação à página pai.