Single Page Applications (SPAs) ermöglichen es Ihren Nutzern, verschiedene Seiten auf Ihrer Website zu besuchen, ohne die Seite komplett neu laden zu müssen. In den meisten Fällen ändert eine SPA-Website die URL im Browser, auch wenn die Seite nicht neu geladen wird.
Standardmäßig ist Hotjar in der Lage, diese SPA-URL-Änderungen automatisch zu erkennen und zu verfolgen. Wenn jedoch ein Benutzer eine neue Seite auf Ihrer SPA-Site besucht und sich die URL nicht ändert oder Fragmente zur URL hinzugefügt werden, die von Hotjar verfolgt werden müssen, müssen Sie möglicherweise Ihre Hotjar-Einstellungen aktualisieren, um sicherzustellen, dass Hotjar Änderungen des Seitenstatus korrekt verfolgt.
In diesem Artikel werden die folgenden Punkte behandelt:
- Installation von Hotjar auf einer einseitigen Anwendung
- Welche Optionen gibt es für die Verfolgung von URL-Änderungen?
- Wie passe ich die Einstellungen für die Verfolgung von URL-Änderungen an?
- Tipps zur Fehlerbehebung für Single Page Applications
Installieren von Hotjar in Node.js
Es gibt nur ein offizielles Hotjar-Paket, das von unseren Entwicklern erstellt und gepflegt wird. Es heißt @hotjar/browser und ist über NPM verfügbar.
Eine vollständige Dokumentation zur Verwendung des NPM-Pakets und einige Demonstrationen seiner Funktionen finden Sie auf unserer GitHub-Seite.
Welche Optionen gibt es für die Verfolgung von URL-Änderungen?
Es gibt drei Optionen für die Behandlung von URL-Änderungen:
- Änderungen automatisch verfolgen, ohne Fragmente (Standard)
- Änderungen automatisch verfolgen, einschließlich Fragmente
- Änderungen manuell verfolgen
Änderungen automatisch verfolgen, ohne Fragmente (Standardeinstellung)
Mit dieser Einstellung überwacht Hotjar die URL-Adressleiste auf Änderungen an der Seiten-URL, mit Ausnahme von Fragmenten oder Query-Strings.
Wenn ein Benutzer zum Beispiel von www.example.com zu www.example.com/about wechselt, würde Hotjar dies als Seitenwechsel zählen. Wenn der Benutzer von www.example.com zu www.example.com#heading1 wechselt, würde Hotjar dies nicht als Änderung erfassen.
Änderungen automatisch verfolgen, einschließlich Fragmente
Viele Websites verwenden Fragmente (dargestellt durch ein #-Zeichen), um Änderungen des Seitenstatus anzuzeigen. Dies ist bei Single-Page Applications (SPAs) üblich.
Nehmen wir zum Beispiel an, Sie hätten eine Anwendung, die verschiedene Seiten mit einem Fragment darstellt. Die URL könnte etwa so aussehen: app.example.com#profile. Standardmäßig würde Hotjar den Wechsel zu #profile nicht als URL-Änderung erkennen. In diesem Fall sollten Sie die Option Änderungen automatisch verfolgen, einschließlich Fragmente, auswählen.
Die beiden folgenden Änderungen würden mit dieser Einstellung nachverfolgt:
Änderungen manuell verfolgen
Einige Single-Page-Apps ändern die URL-Adressleiste überhaupt nicht, haben aber dennoch unterschiedliche Seiten. In diesem Fall müssen Sie Hotjar manuell mitteilen, wenn eine Routenänderung stattgefunden hat, indem Sie Ereignisse mit JavaScript an Hotjar weitergeben.
Wenn diese Option aktiviert ist, registriert Hotjar diese JavaScript-Ereignisse als Seitenwechsel. Außerdem werden URL-Änderungen durch Neuladen der Seite weiterhin verfolgt.
Nachfolgend finden Sie einige Beispiele für Code-Schnipsel, die zum Erzeugen eines manuellen Seitenwechsels erforderlich sind. Jeder Seitenpfad sollte eindeutig sein, je nachdem, welche "Seite" dem Benutzer angezeigt wird:
hj('stateChange', 'example/page1');hj('stateChange', 'beispiel/seite2');hj('stateChange', 'beispiel/pfad/seiteA');
Der Code muss zu jeder Seite hinzugefügt werden, die im Routing-Code Ihrer Anwendung als neue Seite betrachtet wird. Das zweite Argument kann eine relative oder vollständige URL sein.
Manuelle Zustandsänderungen sollten mit jeder Front-End-JavaScript-Bibliothek kompatibel sein. Hier ist ein Beispiel für den Code in AngularJS (1.X) ui-router:
angular.module('yourApp', []).run([
'$rootScope',
function ($rootScope, ...) {
...
// Richtet den Router ein, um Zustandsänderungen an das Hotjar-Skript zu melden.
$rootScope.$on('$stateChangeSuccess',function () {
hj('stateChange', $location.url());
});
...
}
]);Der obige Code ist nur ein Beispiel. Da verschiedene SPAs mit unterschiedlichen Frameworks erstellt werden, ist es nicht möglich, Beispielcode für alle möglichen Websites zu verwenden. Wir empfehlen, mit einem Entwickler zusammenzuarbeiten, um alle Codeänderungen auf Ihrer Website zu implementieren.
Wie kann ich die Einstellungen für die Verfolgung von URL-Änderungen anpassen?
Die folgenden Schritte zeigen, wie Sie die Einstellungen für die Nachverfolgung von URL-Änderungen aktualisieren können.
Klicken Sie auf Einstellungen, dann auf Websites & Organisationen.
Klicken Sie auf das Einstellungssymbol, um die Site-Einstellungen für die Site zu öffnen, die Sie ändern möchten.
Wählen Sie unter Session Targeting & Tracking die Tracking-Option, die für Ihre Site am besten geeignet ist.
Klicken Sie auf Änderungen speichern.
Tipps zur Fehlerbehebung für Single Page Applications
Fast alle Probleme, die bei Single Page Application (SPA) Sites auftreten, lassen sich mit einer oder mehreren der folgenden Lösungen beheben:
- Senden Sie Zustandsänderungen manuell an Hotjar und schalten Sie das URL-Tracking auf Änderungen manuell verfolgen um.
- Wenn Sie Ereignisse oder Benutzerattribute für das Targeting verwenden, senden Sie das Ereignis oder Benutzerattribut an jede Route, auf der es wirksam werden soll (eine Route ist im Wesentlichen dasselbe wie eine "Seite" auf SPAs).
- Wenn Sie irgendeine Art von automatischem URL-Tracking verwenden, stellen Sie sicher, dass Sie Ihre Tools nur auf der Grundlage von URLs ausrichten (anstatt auf der Grundlage von Ereignissen oder Benutzerattributen), oder führen Sie einen der oben genannten Schritte aus.
- Ziehen Sie die Einstellung Änderungen automatisch verfolgen, einschließlich Fragmente in Betracht, wenn Ihre Website Fragmente oder Abfragen für URL-Änderungen verwendet. Dies ist besonders wichtig, wenn Sie diese Abfragen/Fragmente in Ihre Targeting-Kriterien aufnehmen.