Las aplicaciones de página única (SPA) permiten a sus usuarios navegar por diferentes páginas de su sitio sin tener que recargar la página por completo. 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 su sitio SPA y la URL no cambia, o se añaden fragmentos a la URL que necesitan ser rastreados por Hotjar, entonces puede que tenga que actualizar la configuración de Hotjar para asegurarse de que Hotjar rastreará correctamente los cambios de estado de la página.
Este artículo tratará lo siguiente:
- Instalación de Hotjar en una Aplicación de Página Única
- ¿Cuáles son las opciones para rastrear los cambios de URL?
- ¿Cómo puedo ajustar la configuración para el seguimiento de los cambios de URL?
- Consejos para la resolución de problemas en aplicaciones de una sola página
Instalación de Hotjar en Node.js
Sólo hay un paquete oficial de Hotjar creado y mantenido por nuestros desarrolladores. Se llama @hotjar/browser, y está disponible en NPM.
Para una documentación completa sobre el uso del paquete NPM y algunas demostraciones de sus características, por favor consulta nuestra Página GitHub.
¿Cuáles son las opciones para el seguimiento de los cambios de URL?
Hay tres opciones disponibles para gestionar los cambios de URL:
- Seguir los cambios automáticamente, excluyendo fragmentos (por defecto)
- Rastrear cambios automáticamente, incluyendo fragmentos
- Seguir los cambios manualmente
Rastrear cambios automáticamente, excluyendo fragmentos (por defecto)
Con esta opción, Hotjar monitorizará 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 pasa de www.example.com > www.example.com/about, Hotjar lo contará como un cambio de página. Si el usuario pasara de www.example.com a www.example.com#heading1, Hotjar no lo contabilizaría como un cambio.
Seguimiento automático de cambios, incluyendo fragmentos
Muchos sitios utilizan fragmentos (representados por un carácter #) para mostrar los cambios de estado de la página. Esto es común con las 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 ser 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, debería seleccionar Rastrear cambios automáticamente, incluyendo fragmentos.
Ambos de los siguientes cambios serían rastreados usando esta configuración:
Seguimiento manual de los cambios
Algunas Single-Page Apps no cambian la barra de direcciones URL en absoluto pero siguen teniendo páginas distintas. En este caso, necesitará indicar manualmente a Hotjar cuándo se ha producido un cambio de ruta mediante eventos que pase a Hotjar utilizando JavaScript.
Con esta opción seleccionada, Hotjar registrará estos eventos JavaScript como cambios de página. También continuará rastreando los cambios de URL de 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, basada en qué 'página' se está mostrando al usuario:
hj('stateChange', 'example/page1');hj('cambioEstado', 'ejemplo/página2');hj('stateChange', 'ejemplo/ruta/páginaA');
El código tendrá que añadirse a cualquier página que se considere una nueva página en el código de enrutamiento de su aplicación. El segundo argumento puede ser una URL relativa o completa.
Los cambios de estado manuales deberían ser compatibles con cualquier biblioteca JavaScript de front-end. Aquí hay un ejemplo del código en AngularJS (1.X) ui-router:
angular.module('tuApp', []).run([
'$rootScope',
function ($rootScope, ...) {
...
// Configura el router para reportar cambios de estado al script Hotjar.
$rootScope.$on('$cambioEstadoSucceso',function () {
hj('stateChange', $location.url());
});
...
}
]);El código anterior es sólo un ejemplo. Dado que las diferentes SPA 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 su sitio web.
¿Cómo puedo ajustar la configuración para el seguimiento de los cambios de URL?
Los pasos que se describen a continuación muestran cómo puede actualizar la configuración de "Seguimiento de cambios de URL".
Haga clic en Configuración y, a continuación, en Sitios y organizaciones.
Haga clic en el icono de engranaje de configuración para abrir la configuración del sitio que desea modificar.
En Orientación y seguimiento de la sesión, seleccione la opción de seguimiento que mejor se adapte a su sitio.
Consejos para la solución de problemas en aplicaciones de una sola página
Casi todos los problemas que se producen en los sitios de aplicaciones de página única (SPA) se resuelven con una o varias de las siguientes soluciones:
- Envíe manualmente los cambios de estado a Hotjar y cambie el seguimiento de URL a Realizar un seguimiento manual de los cambios.
- Cuando utilice Eventos o Atributos de Usuario para la segmentación, envíe el Evento o Atributo de Usuario en cada ruta donde desee que tenga efecto (una ruta es esencialmente lo mismo que una 'página' en SPAs).
- Cuando utilice cualquier tipo de seguimiento automático de URL, asegúrese de orientar sus herramientas basándose sólo en URLs (en lugar de orientarlas basándose en Eventos o Atributos de Usuario), o realice uno de los pasos anteriores.
- Considere el uso de la opción Rastrear cambios automáticamente, incluyendo fragmentos si su sitio utiliza fragmentos o consultas para los cambios de URL. Esto es especialmente importante cuando incluya esas consultas/fragmentos en sus criterios de selección.