Las aplicaciones de página única (SPAs) permiten a los usuarios navegar por diferentes páginas de su 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 completo.
Por defecto, Hotjar generalmente puede detectar y rastrear estos cambios de URL de SPA automáticamente. Sin embargo, si un usuario visita una nueva página en su sitio SPA y la URL no cambia, o se agregan fragmentos a la URL que deben ser rastreados por Hotjar, es posible que deba actualizar la configuración de Hotjar para asegurarse de que Hotjar rastree correctamente los cambios de estado de la página.
Este artículo discutirá lo siguiente:
- Instalación de Hotjar en una Aplicación de Página Única
- ¿Cuáles son las opciones para rastrear cambios de URL?
- ¿Cómo ajusto la configuración para rastrear cambios de URL?
- Consejos de solución de problemas para Aplicaciones de Página Única
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 características, consulte nuestra Página de GitHub.
¿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)
- Rastrear cambios automáticamente, incluyendo fragmentos
- Rastrear cambios manualmente
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 los fragmentos o cadenas de consulta.
Por ejemplo, si un usuario pasara de www.ejemplo.com a www.ejemplo.com/acerca-de, Hotjar contaría esto como un cambio de página. Si el usuario pasara de www.ejemplo.com a www.ejemplo.com#encabezado1, Hotjar no rastrearía esto como un cambio.
Rastrear cambios automáticamente, incluyendo fragmentos
Muchos sitios utilizan fragmentos (representados por el carácter #) para mostrar cambios en el estado de la página. Esto es común en las Aplicaciones de Página Única (SPAs).
Por ejemplo, supongamos que tiene una aplicación que representa diferentes páginas con un fragmento. La URL podría verse algo como app.ejemplo.com#perfil. Por defecto, Hotjar no reconocería el cambio a #perfil como un cambio de URL. En este caso, querría seleccionar Rastrear cambios automáticamente, incluyendo fragmentos.
Ambos cambios siguientes se rastrearían 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 página única no cambian la barra de direcciones URL en absoluto, pero aún tienen páginas distintas. En este caso, deberás instruir manualmente a Hotjar cuando se produce un cambio de ruta utilizando eventos que pasas a Hotjar mediante JavaScript.
Con esta opción seleccionada, Hotjar registrará estos eventos de JavaScript como cambios de página. También seguirá rastreando los cambios de URL desde las 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, según la 'página' que se muestre al usuario:
hj('stateChange', 'ejemplo/pagina1');hj('stateChange', 'ejemplo/pagina2');hj('stateChange', 'ejemplo/ruta/paginaA');
El código deberá agregarse 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 en el front-end. 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 las 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.
¿Cómo ajusto la configuración para rastrear cambios de URL?
Los pasos a continuación muestran cómo puedes actualizar la configuración de 'Rastrear cambios de URL'.
Haz clic en tu imagen de perfil y luego selecciona Configuración de la organización.
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 deseas cambiar.
Bajo Segmentación y seguimiento de sesiones, selecciona la opción de seguimiento que mejor funcione para tu sitio.
Consejos de solución de problemas para aplicaciones de página única
Casi todos los problemas que ocurren en los sitios de aplicaciones de página única (SPA) se resuelven mediante 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 la segmentación, envía el Evento en cada ruta donde quieras 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 usan para la segmentación (una ruta es básicamente lo mismo que una 'página' en SPAs).
- Cuando uses cualquier tipo de seguimiento automático de URL, asegúrate de dirigir tus herramientas basándote solo en las URL (en lugar de basarte en Eventos o Atributos de Usuario), o realiza uno de los pasos anteriores.
- Considera utilizar la configuración Seguir cambios automáticamente, incluyendo fragmentos si tu sitio utiliza fragmentos o consultas para los cambios de URL. Esto es especialmente importante cuando incluyes esas consultas/fragmentos en tus criterios de segmentación.