Artigos nessa seção

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

Single Page Applications (SPAs) permitem que seus usuários naveguem por diferentes páginas em seu site sem ter que recarregar a página completamente. Na maioria dos casos, um site SPA alterará a URL no navegador, mesmo que a página não seja recarregada.

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

Este artigo discutirá o seguinte:

Instalando o Hotjar no Node.js

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

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

Voltar ao topo

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

Há três opções disponíveis para lidar com alterações de URL:

Rastrear alterações automaticamente, excluindo fragmentos (padrão)

Com essa configuração, o Hotjar monitorará a barra de endereço URL em busca de alterações na URL da página, exceto fragmentos ou strings de consulta.

Por exemplo, se um usuário passar de www.exemplo.com > www.exemplo.com/sobre, o Hotjar contará isso como uma mudança de página. Se o usuário passar de www.exemplo.com para www.exemplo.com#secao1, o Hotjar não rastreará isso como uma mudança.

Rastrear alterações automaticamente, incluindo fragmentos

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

Por exemplo, digamos que você tenha um aplicativo que represente diferentes páginas com um fragmento. A URL pode se parecer com app.exemplo.com#perfil. Por padrão, o Hotjar não reconheceria a mudança para #perfil como uma alteração de URL. Nesse caso, você gostaria de selecionar Rastrear alterações automaticamente, incluindo fragmentos.

Ambas as seguintes alterações seriam rastreadas usando essa configuração:

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

Rastrear alterações manualmente

Alguns aplicativos de página única não alteram a barra de endereço URL, mas ainda têm páginas distintas. Nesse caso, você precisará instruir manualmente o Hotjar quando uma mudança de rota ocorrer usando eventos que você passa para o Hotjar usando JavaScript.

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

Abaixo estão alguns exemplos do trecho de código necessário para gerar uma mudança de página manual. Cada caminho da página deve ser único, com base 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 considerada uma nova página no código de roteamento de sua aplicação. O segundo argumento pode ser um URL relativo ou completo.

Mudanças de estado manuais 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('suaApp', []).run([
    '$rootScope',
    function ($rootScope, ...) {
        ...

    // Configura o roteador para reportar mudanças de estado para o script do 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 ajustar as configurações para rastrear alterações de URL?

Os passos descritos abaixo mostram como você pode atualizar as configurações de 'Rastreamento de Alterações de URL'.

Clique em sua imagem de perfil e selecione Configurações da organização.

O menu de configurações da organização aberto sob o ícone do perfil do usuário.

Selecione a aba Organização e sites.

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

Ícone de Configurações do Site

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

O menu de opções disponíveis de configurações de rastreamento de URL.

Clique em Salvar alterações.

Voltar ao topo

Dicas de solução de problemas para Aplicativos de Página Única

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

  • Enviar manualmente as alterações de estado para o Hotjar e alternar a segmentação de rastreamento de URL para Rastrear alterações manualmente.
  • Ao usar Eventos para segmentação, envie o Evento em todas as rotas onde deseja que ele tenha efeito.
  • Os Atributos do Usuário são baseados em sessão, portanto, não precisam ser enviados em todas as rotas quando usados para segmentação (uma rota é essencialmente o mesmo que uma 'página' em SPAs).
  • Ao usar qualquer tipo de rastreamento automático de URL, certifique-se de segmentar suas ferramentas com base apenas em URLs (em vez de segmentar com base em Eventos ou Atributos do Usuário), ou faça um dos passos acima.
  • Considere usar a configuração Rastrear alterações automaticamente, incluindo fragmentos se o seu site usar 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