Artigos nessa seção

Hotjar em Aplicações de Página Única

Aplicações de Página Única (SPAs) permitem que seus usuários naveguem por diferentes páginas do seu site sem ter que recarregar a página completamente. Na maioria dos casos, um site SPA alterará o URL no navegador, mesmo que a página não esteja sendo recarregada.

Por padrão, o Hotjar geralmente é capaz de detectar e rastrear essas mudanças de URL de SPA automaticamente. No entanto, se um usuário visita uma nova página em seu site SPA e o URL não muda, ou fragmentos são adicionados ao URL que precisam ser rastreados pelo Hotjar, então você pode precisar atualizar suas configurações do Hotjar para garantir que o Hotjar rastreará corretamente as mudanças de estado da página.

Este artigo discutirá o seguinte:

Instalando o Hotjar em Node.js

Existe apenas um pacote oficial do Hotjar criado e mantido por nossos desenvolvedores. Ele se chama @hotjar/browser, e está disponível no NPM.

Para a documentação completa sobre o uso do pacote NPM e algumas demonstrações de seus recursos, por favor consulte nossa Página do GitHub.

Voltar ao topo

Quais são as opções para rastrear mudanças de URL?

Existem três opções disponíveis para lidar com mudanças de URL:

Rastrear mudanças automaticamente, excluindo fragmentos (padrão)

Com essa configuração, o Hotjar monitorará a barra de endereços URL para mudanças no URL da página, exceto para fragmentos ou strings de consulta.

Por exemplo, se um usuário passou de www.exemplo.com para www.exemplo.com/sobre o Hotjar contaria isso como uma mudança de página. Se o usuário passou de www.exemplo.com para www.exemplo.com#titulo1 o Hotjar não rastrearia isso como uma mudança.

Rastrear mudanças automaticamente, incluindo fragmentos

Muitos sites usam fragmentos (representados por um caractere #) para exibir mudanças de estado da página. Isso é comum com Aplicações de Página Única (SPAs).

Por exemplo, vamos supor que você tinha um aplicativo que representava diferentes páginas com um fragmento. O URL pode parecer algo como app.exemplo.com#perfil. Por padrão, o Hotjar não reconheceria a mudança para #perfil como uma mudança de URL. Neste caso, você gostaria de selecionar Rastrear mudanças automaticamente, incluindo fragmentos.

Ambas as seguintes mudanças seriam rastreadas usando esta configuração:

  • www.site.com/pagina/ -> www.site.com/outra-pagina/
  • www.site.com/#pagina -> www.site.com/#outrapagina

Rastrear mudanças manualmente

Algumas Aplicações de Página Única não alteram a barra de endereços URL de forma alguma, mas ainda possuem páginas distintas. Neste caso, você precisará instruir manualmente o Hotjar quando uma mudança de rota ocorreu usando eventos que você passa para o Hotjar usando JavaScript.

Com esta opção selecionada, o Hotjar registrará esses eventos JavaScript como alterações de página. Ele também continuará a rastrear alterações de URL a partir de recargas de página

Abaixo estão alguns exemplos do trecho de código necessário para gerar uma alteração de página manual. Cada caminho de página deve ser único, baseado em qual 'página' está sendo mostrada ao usuário:

hj('stateChange', 'exemplo/pagina1');
hj('stateChange', 'exemplo/pagina2');
hj('stateChange', 'exemplo/caminho/paginaA');

O código precisará ser adicionado a qualquer página que seja considerada uma nova página no código de roteamento do seu aplicativo. O segundo argumento pode ser uma URL relativa ou completa.

As alterações de estado manual devem ser compatíveis com qualquer biblioteca JavaScript de front-end. Aqui está um exemplo do código em AngularJS (1.X) ui-router:

angular.module('seuApp', []).run([
    '$rootScope',
    function ($rootScope, ...) {
        ...

    // Configura o roteador para reportar alterações de estado para o script Hotjar. 
        $rootScope.$on('$stateChangeSuccess',function () {
            hj('stateChange', $location.url());
        });
        
        ...
    }
]);

O código acima é apenas um exemplo. Como diferentes SPAs são construídos com diferentes frameworks, não é possível compartilhar código de exemplo para todos os sites possíveis. Recomendamos trabalhar com um desenvolvedor para implementar quaisquer alterações de código em seu site.

Voltar ao topo

Como ajusto as configurações para rastrear alterações de URL?

As etapas descritas abaixo mostram como você pode atualizar as configurações de 'Rastreamento de Alterações de URL'.

Clique em Configurações, depois em Sites & Organizações.

Opção de menu Sites e Organizações

Clique no ícone de engrenagem de configurações para abrir as Configurações do site para o Site que você gostaria de alterar.

Ícone de Configurações do Site

Em Seleção de sessão & rastreamento, selecione a opção de rastreamento que funciona melhor para o seu site.

Essas configurações estão disponíveis em Sites e Organizações clicando no botão Configurações do site ao lado do nome de um site.

Clique em Salvar Alterações.

Voltar ao topo

Dicas de solução de problemas para Aplicações de Página Única

Quase todos os problemas que ocorrem em sites de Aplicação de Página Única (SPA) são resolvidos por uma ou mais das seguintes soluções:

  • Envie alterações de estado manualmente para o Hotjar e altere o rastreamento de URL para Rastrear alterações manualmente.
  • Ao usar Eventos ou Atributos de Usuário para segmentação, envie o Evento ou Atributo de Usuário em cada rota onde você deseja que ele tenha efeito (uma rota é essencialmente a mesma coisa que uma 'página' em SPAs).
  • Ao usar qualquer tipo de rastreamento automático de URL, certifique-se de direcionar suas ferramentas com base apenas em URLs (em vez de segmentar com base em Eventos ou Atributos de Usuário), ou faça uma das etapas acima.
  • Considere usar a configuração Rastrear alterações automaticamente, incluindo fragmentos se o seu site usa fragmentos ou consultas para alterações de URL. Isso é especialmente importante ao incluir essas consultas/fragmentos em seus critérios de segmentação.

Voltar ao topo

Artigos relacionados