Les applications monopages (SPA) permettent à vos utilisateurs de naviguer sur différentes pages de votre site sans avoir à recharger complètement la page. Dans la plupart des cas, un site web SPA changera l'URL dans le navigateur, même si la page n'est pas rechargée.
Par défaut, Hotjar est généralement capable de détecter et suivre ces changements d'URL SPA automatiquement. Cependant, si un utilisateur visite une nouvelle page sur votre site SPA et que l'URL ne change pas, ou si des fragments sont ajoutés à l'URL qui doivent être suivis par Hotjar, vous devrez peut-être mettre à jour vos paramètres Hotjar pour vous assurer que Hotjar suivra correctement les changements d'état de la page.
Cet article abordera les points suivants :
- Installation de Hotjar sur une application monopage
- Quelles sont les options pour suivre les changements d'URL ?
- Comment ajuster les paramètres de suivi des changements d'URL ?
- Conseils de dépannage pour les applications monopages
Installation de Hotjar dans Node.js
Il n'existe qu'un seul package officiel Hotjar créé et maintenu par nos développeurs. Il s'appelle @hotjar/browser, et il est disponible sur NPM.
Pour une documentation complète sur l'utilisation du package NPM et des démonstrations de ses fonctionnalités, veuillez consulter notre page GitHub.
Quelles sont les options pour suivre les changements d'URL ?
Il existe trois options disponibles pour gérer les changements d'URL :
- Suivre les changements automatiquement, en excluant les fragments (par défaut)
- Suivre les changements automatiquement, en incluant les fragments
- Suivre les changements manuellement
Suivre les changements automatiquement, en excluant les fragments (par défaut)
Avec ce paramètre, Hotjar surveillera la barre d'adresse URL pour les changements d'URL de la page à l'exception des fragments ou des chaînes de requête.
Par exemple, si un utilisateur passait de www.example.com > www.example.com/about, Hotjar compterait cela comme un changement de page. Si l'utilisateur passait de www.example.com à www.example.com#heading1, Hotjar ne le suivrait pas comme un changement.
Suivre les changements automatiquement, en incluant les fragments
De nombreux sites utilisent des fragments (représentés par un caractère #) pour afficher les changements d'état de la page. C'est courant avec les applications monopages (SPA).
Par exemple, imaginons que vous ayez une application qui représente différentes pages avec un fragment. L'URL pourrait ressembler à quelque chose comme app.example.com#profile. Par défaut, Hotjar ne reconnaîtrait pas le passage à #profile comme un changement d'URL. Dans ce cas, vous voudriez sélectionner Suivre les changements automatiquement, en incluant les fragments.
Les deux changements suivants seraient suivis avec ce paramètre :
Suivre les changements manuellement
Certaines applications monopages ne modifient pas du tout la barre d'adresse URL mais ont tout de même des pages distinctes. Dans ce cas, vous devrez informer manuellement Hotjar lorsqu'un changement de route s'est produit en utilisant des événements que vous transmettez à Hotjar en utilisant JavaScript.
Avec cette option sélectionnée, Hotjar enregistrera ces événements JavaScript comme des changements de page. Il continuera également à suivre les changements d'URL à partir des rechargements de page.
Voici quelques exemples de l'extrait de code nécessaire pour générer un changement de page manuel. Chaque chemin de page doit être unique, en fonction de la 'page' affichée à l'utilisateur :
hj('stateChange', 'exemple/page1');hj('stateChange', 'exemple/page2');hj('stateChange', 'exemple/chemin/pageA');
Le code devra être ajouté à toute page considérée comme une nouvelle page dans le code de routage de votre application. Le deuxième argument peut être une URL relative ou complète.
Les changements d'état manuels doivent être compatibles avec n'importe quelle bibliothèque JavaScript côté client. Voici un exemple de code en AngularJS (1.X) ui-router:
angular.module('votreApp', []).run([
'$rootScope',
function ($rootScope, ...) {
...
// Configure le routeur pour signaler les changements d'état au script Hotjar.
$rootScope.$on('$stateChangeSuccess',function () {
hj('stateChange', $location.url());
});
...
}
]);Le code ci-dessus est juste un exemple. Étant donné que les différentes applications monopages sont construites avec différents frameworks, il n'est pas possible de partager un code d'exemple pour tous les sites possibles. Nous vous recommandons de travailler avec un développeur pour implémenter tout changement de code sur votre site web.
Comment ajuster les paramètres de suivi des changements d'URL ?
Les étapes ci-dessous montrent comment vous pouvez mettre à jour les paramètres de 'Suivi des changements d'URL'.
Cliquez sur votre image de profil, puis sélectionnez Paramètres de l'organisation.
Sélectionnez l'onglet Organisation & sites.
Cliquez sur l'icône de roue dentée des paramètres pour ouvrir les Paramètres du site du site que vous souhaitez modifier.
Sous Ciblage de session & suivi, sélectionnez l'option de suivi qui convient le mieux à votre site.
Cliquez sur Enregistrer les modifications.
Conseils de dépannage pour les applications monopages
Presque tous les problèmes rencontrés sur les sites d'applications monopages sont résolus par une ou plusieurs des solutions suivantes :
- Envoyez manuellement les changements d'état à Hotjar et activez le suivi des URL sur Suivre les changements manuellement.
- Lorsque vous utilisez des Événements pour le ciblage, envoyez l'Événement sur chaque route où vous souhaitez qu'il prenne effet.
- Les Attributs Utilisateur sont basés sur la session, donc ils n'ont pas besoin d'être envoyés sur chaque route lorsqu'ils sont utilisés pour le ciblage (une route est essentiellement la même qu'une 'page' sur les SPAs).
- Lorsque vous utilisez un suivi d'URL automatique, assurez-vous de cibler vos outils uniquement en fonction des URLs (au lieu de cibler en fonction des Événements ou des Attributs Utilisateur), ou suivez l'une des étapes ci-dessus.
- Envisagez d'utiliser le paramètre Suivre les changements automatiquement, y compris les fragments si votre site utilise des fragments ou des requêtes pour les changements d'URL. Ceci est particulièrement important lorsque vous incluez ces requêtes/fragments dans vos critères de ciblage.