Artículos en esta sección

Hotjar en aplicaciones de una sola página

Las Aplicaciones de Página Única (SPAs) permiten a tus usuarios navegar por diferentes páginas en tu sitio sin tener que recargar completamente la página. En la mayoría de los casos, un sitio web SPA cambiará la URL en el navegador, aunque la página no se esté recargando.

Por defecto, Hotjar suele ser capaz de detectar y rastrear estos cambios de URL de SPA automáticamente. Sin embargo, si un usuario visita una nueva página en tu sitio SPA y la URL no cambia, o se agregan fragmentos a la URL que necesitan ser rastreados por Hotjar, entonces es posible que necesites actualizar la configuración de Hotjar para asegurarte de que Hotjar rastree correctamente los cambios de estado de la página.

Este artículo discutirá lo siguiente:

Instalación de Hotjar en Node.js

Solo hay un paquete oficial de Hotjar creado y mantenido por nuestros desarrolladores. Se llama @hotjar/browser, y está disponible en NPM.

Para obtener documentación completa sobre cómo usar el paquete NPM y algunas demostraciones de sus funciones, por favor consulta nuestra página en GitHub.

Volver arriba

¿Cuáles son las opciones para rastrear cambios de URL?

Hay tres opciones disponibles para manejar cambios de URL:

Rastrear cambios automáticamente, excluyendo fragmentos (predeterminado)

Con esta configuración, Hotjar monitoreará la barra de direcciones URL en busca de cambios en la URL de la página excepto fragmentos o cadenas de consulta.

Por ejemplo, si un usuario pasara de www.ejemplo.com > www.ejemplo.com/acerca, Hotjar contaría esto como un cambio de página. Si el usuario pasara de www.ejemplo.com a www.ejemplo.com#seccion1, Hotjar no rastrearía esto como un cambio.

Rastrear cambios automáticamente, incluyendo fragmentos

Muchos sitios utilizan fragmentos (representados por un carácter #) para mostrar cambios de estado de la página. Esto es común en Aplicaciones de Página Única (SPAs).

Por ejemplo, supongamos que tienes una aplicación que representa diferentes páginas con un fragmento. La URL podría verse algo así como app.ejemplo.com#perfil. Por defecto, Hotjar no reconocería el cambio a #perfil como un cambio de URL. En este caso, querrías seleccionar Rastrear cambios automáticamente, incluyendo fragmentos.

Ambos cambios siguientes serían rastreados utilizando esta configuración:

  • www.sitio.com/pagina/ -> www.sitio.com/otra-pagina/
  • www.sitio.com/#pagina -> www.sitio.com/#otrapagina

Rastrear cambios manualmente

Algunas aplicaciones de una sola página no cambian en absoluto la barra de direcciones URL pero aún tienen páginas distintas. En este caso, deberás instruir manualmente a Hotjar cuando haya ocurrido un cambio de ruta utilizando eventos que pasas a Hotjar usando JavaScript.

Con esta opción seleccionada, Hotjar registrará estos eventos de JavaScript como cambios de página. También seguirá rastreando cambios de URL desde recargas de página.

A continuación se muestran algunos ejemplos del fragmento de código necesario para generar un cambio de página manual. Cada ruta de página debe ser única, basada en qué 'página' se está mostrando al usuario:

hj('stateChange', 'ejemplo/pagina1');
hj('stateChange', 'ejemplo/pagina2');
hj('stateChange', 'ejemplo/ruta/paginaA');

El código deberá ser agregado a cualquier página que se considere una nueva página en el código de enrutamiento de tu aplicación. El segundo argumento puede ser una URL relativa o completa.

Los cambios de estado manuales deben ser compatibles con cualquier biblioteca de JavaScript del lado del cliente. Aquí tienes un ejemplo del código en AngularJS (1.X) ui-router:

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

    // Configura el enrutador para informar los cambios de estado al script de Hotjar. 
        $rootScope.$on('$stateChangeSuccess',function () {
            hj('stateChange', $location.url());
        });
        
        ...
    }
]);

El código anterior es solo un ejemplo. Dado que diferentes SPAs se construyen con diferentes frameworks, no es posible compartir código de ejemplo para todos los sitios posibles. Recomendamos trabajar con un desarrollador para implementar cualquier cambio de código en tu sitio web.

Volver arriba

¿Cómo ajusto la configuración para rastrear cambios de URL?

Los pasos descritos a continuación muestran cómo puedes actualizar la configuración de 'Rastreo de cambios de URL'.

Haz clic en tu imagen de perfil y luego selecciona Configuración de la organización.

El menú de configuración de la organización se abre bajo el icono de perfil de usuario.

Selecciona la pestaña Organización y sitios.

Haz clic en el icono de engranaje de configuración para abrir la Configuración del sitio del sitio que te gustaría cambiar.

Ícono de Configuración del sitio

Bajo Segmentación y rastreo de sesiones, selecciona la opción de rastreo que funcione mejor para tu sitio.

Menú de opciones disponibles de configuración de rastreo de URL.

Haz clic en Guardar cambios.

Volver arriba

Consejos de solución de problemas para Aplicaciones de una sola página

Casi todos los problemas que ocurren en sitios de Aplicaciones de una sola página (SPA) se resuelven con una o más de las siguientes soluciones:

  • Envía los cambios de estado manualmente a Hotjar y cambia el seguimiento de URL a Seguir cambios manualmente.
  • Cuando uses Eventos para segmentar, envía el Evento en cada ruta donde desees que tenga efecto.
  • Los Atributos de Usuario se basan en la sesión, por lo que no es necesario enviarlos en cada ruta cuando se utilizan para segmentar (una ruta es esencialmente lo mismo que una 'página' en SPAs).
  • Cuando uses algún tipo de seguimiento automático de URL, asegúrate de dirigir tus herramientas basadas solo en URLs (en lugar de dirigirte en base a Eventos o Atributos de Usuario), o realiza uno de los pasos anteriores.
  • Considera utilizar la configuración Seguir cambios automáticamente, incluidos los fragmentos si tu sitio utiliza fragmentos o consultas para cambios de URL. Esto es especialmente importante al incluir esas consultas/fragmentos en tus criterios de segmentación.

Volver arriba

Artículos relacionados