Cayman Sistemas
PRECISO DE UM SITE
MENU
INÍCIO
SOBRE NÓS
PROJETOS
CONTATO
X
SOLICITAR ORÇAMENTO
Foto Blog

Como fazer um mapa de calor no seu site com o Hotjar

06/08/2020 - Curso de SEO para iniciantes

O mapa de calor é uma ferramenta fundamental para descobrir como os usuários interagem com seus site e o que você pode fazer para melhorar essa interação. Nesse guia, vamos te explicar o funcionamento dessa ferramenta, além de uma passo a passo para fazer o seu primeiro mapa de calor com o Hotjar. Confira!

O que é um mapa de calor?

O mapa de calor é - como o nome já diz - um mapa que descreve os pontos “quentes” (com alta interação) e os pontos “frios” (com baixa interação) do seu site.

mapa de calor no hotjar

Tradicionalmente, o mapa de calor registra os cliques, movimento do mouse e rolagem de página no seu site. Essas informações são combinadas em um gráfico colorido que revela os pontos da página que os usuários mais engajam.

E por que essa informação é importante? Bem, se você planeja fechar vendas e adquirir clientes pelo seu site, então é desejável que o foco da atenção do usuário sejam as ações de conversão.

“Compre aqui”, “Faça um orçamento agora”, “Fale com um representante”. Independente da ação de conversão, o objetivo é atrair os olhos do usuário para instiga-lo a clicar.

O mapa de calor permite visualizar se o usuário realmente está sendo direcionado de maneira eficiente para a conversão, além de outros insights sobre o seu comportamento no site.

O que é o Hotjar?

Para criar um mapa de calor – geralmente – precisamos de uma plataforma de marketing digital. A mais comum para esse propósito é a Hotjar.

Além de gerar mapas de calor, o Hotjar possui outras funcionalidades para gerar dados de navegação.

Como destaque, a capacidade do Hotjar de gravar a navegação dos usuários no site é uma das ferramentas mais poderosas para otimização de conversão.

Para utilizar o Hotjar, é necessário criar uma conta. A versão básica da ferramenta é gratuita, mas dependendo da sua necessidade existem planos pagos.

Crie a conta no site da Hotjar clicando em “Sign Up” ou “Try it free”. Escolha o seu plano e preencha o cadastro com seus dados.

Com a conta criada, você precisa incluir um código tag no html do seu site. Faremos isso utilizando o Google Tag Manager.

IMPORTANTE: Se você ainda não utiliza o Tag Manager, eu recomendo começar pelo nosso guia de instalação do Tag Manager, onde eu mostro o passo a passo para criar e instalar tags.

Fazendo o seu primeiro mapa de calor no Hotjar

No painel inicial do Hotjar – no canto direito superior – clique em Settings > Sites & Organizations.

Lá você vai encontrar o seu site cadastrado – ou vai precisar cadastrar seu site no botão +New Site. Feito isso, clique no botão Tracking Code.

Uma janela vai se abrir com o código que precisamos incluir no seu site para gerar o mapa de calor.

trancking code hotjar

Agora abra uma nova janela e entre no Google Tag Manager. Lá, acesse o seu Espaço de Trabalho e:

  1. Clique Tags > Nova;
  2. Clique em Configurações da Tag;

A aba de “Escolha o tipo de tag” vai se abrir. Aqui você tem duas opções: você pode instalar o código manualmente, ou pode usar a tag configurada do Hotjar.

Eu vou ensinar os dois métodos. Começando pela tag configurada.

Como instalar o hotjar em uma Landing Page do RD Station.

Role para baixo até encontrar a tag Hotjar Tracking Code. Selecione essa tag.

hotjar tracking code

A configuração de tag vai abrir uma caixa com o título Hotjar Site ID.

Volte à página do Hotjar, com a janela do tracking code aberta. No topo do cartão, você vai encontrar um número “Site ID”. Copie esse número e cole na caixa do Tag Manager.

Feito isso, clique em Acionadores. Selecione All Pages.

Dê um nome a tag e clique Salvar.

Antes de finalizar precisamos testar se a tag está funcionando corretamente. No Tag Manager clique em Visualisar. Agora, abra o seu site em uma nova aba.

A aba Debugger vai estar aberta. Lá você pode conferir se a tag do Hotjar foi disparada com sucesso.

debugger hotjar

Se estiver tudo certo, volte ao Tag Manager, pare o modo de visualização e clique em Enviar. Dê um nome à versão o conclua o envio.

Agora, para a verificação final, volte ao Hotjar.

No topo cartão tracking code, clique em Verify installation. Depois confirme clicando no botão verde Verify installation.

Uma janela com o site vai se abrir com o cartão de verificação do Hotjar.

verificar instalação do hotjar

Pronto, a instalação está feita! Agora, precisamos configurar o mapa de calor.

Criando o mapa de calor

Volte ao painel inicial do Hotjar (dashboard). Na aba esquerda clique em Heatmaps > +New Heatmap.

Preencha o formulário com as configurações. Eu recomendo começar pela página inicial do seu site, mas você pode fazer da forma que achar melhor.

Depois de finalizado, o mapa de calor vai começar a registrar os dados dos usuários. Esse processo vai demorar dependo do número de visitas que o seu site recebe.

Quanto mais tráfego o seu site receber, mais rápido você vai colher dados para avaliar o seu mapa de calor.

Na hora de avaliar os seus resultados, sempre leve em consideração quais são as ações que são importantes para conversão dos seus leads e compare se os usuários são realmente atraídos para essas ações.

Você vai notar logo de cara que os usuários interagem com o site de maneiras inesperadas. Avalie esse comportamento e tente se colocar no lugar do usuário.

Ao descobrir problemas no layout (botões que não geram conversão, conteúdo que não gera engajamento) você pode executar experimentos com o Google Optimize para encontrar soluções por teste A/B.

No nosso caso, nós criamos uma página inicial inteiramente nova, avaliando os resultados do nosso mapa de calor pelo Hotjar.

É importante lembrar que o mapa de calor sozinho, não vai ser suficiente para otimizar a sua conversão.

Você vai precisar combinar esses dados com outros relatórios de comportamento e outras ferramentas de marketing digital para realmente extrair informações confiáveis.

Como instalar o Hotjar em uma Landing Page do RD Station

Como as Landing Pages do RD Station não fazem parte do seu site, você precisa instalar o código tag do Hotjar manualmente.

O procedimento é bem parecido com o que fizemos no Tag Manager. Lá na aba Tracking Code do Hotjar, você vai encontrar o código html do Hotjar. Copie esse código.

Agora, entre no RD Station, e acesse a Landing Page que planeja usar.

Clique em Editar > Landing Page > Edição avançada. Uma caixa de edição avançada vai se abrir.

edição avançada da landing page do rd station

Clique em Javascript HEAD e cole o código html do Hotjar. Depois clique em Aplicar.

Lembre-se de publicar a Landing Page novamente.

Para finalizar, volte ao Hotjar e verifique a instalação.

Pronto! Agora você já está captando dados comportamentais na sua Landing Page. Aproveite para testar as outras funcionalidades do Hotjar como a gravação de navegação e os formulários.

Em caso de dúvidas, deixe um comentário nessa publicação que vamos tentar te ajudar. Até a próxima!

Está precisando de um site?