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:
- ¿Cuáles son las opciones para el seguimiento de los cambios de URL?
- ¿Cómo puedo ajustar la configuración para el seguimiento de los cambios de URL?
- Consejos para solucionar problemas en aplicaciones de una sola página
¿Cuáles son las opciones de 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)
- Seguimiento automático de los cambios, incluidos los 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.
El código necesario para generar un cambio de página manual es el siguiente:
hj('stateChange', 'some/relative/path');El código deberá añadirse a cualquier página que se considere nueva 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 focalizació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 manual idealmente.
- Si utiliza Eventos o Atributos de Usuario para la segmentación, envíe el Evento o Atributo de Usuario en cada ruta en la que desee que tenga efecto (una ruta es esencialmente lo mismo que una 'página' en SPAs).
- Si va a utilizar cualquier tipo de seguimiento automático de URL, dirija sus herramientas basándose sólo en URLs (en lugar de dirigirlas basándose en Eventos o Atributos de Usuario), o realice uno de los pasos anteriores.
- Considere la posibilidad de utilizar el seguimiento automático con fragmentos si su sitio utiliza fragmentos o consultas para los cambios de URL. Utilícelo definitivamente si incluye esas consultas/fragmentos en sus criterios de focalización.