Single Page Applications (SPAs) ermöglichen es Ihren Benutzern, verschiedene Seiten auf Ihrer Website zu durchsuchen, ohne die Seite vollständig 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 kann Hotjar in der Regel diese SPA-URL-Änderungen automatisch erkennen und verfolgen. Wenn jedoch ein Benutzer eine neue Seite auf Ihrer SPA-Website 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 Seitenzustandsänderungen korrekt verfolgt.
In diesem Artikel werden folgende Themen behandelt:
- Hotjar in einer Single Page Application installieren
- Welche Optionen gibt es für die Verfolgung von URL-Änderungen?
- Wie passe ich die Einstellungen für die Verfolgung von URL-Änderungen an?
- Problembehandlungstipps für Single Page Applications
Hotjar in Node.js installieren
Es gibt nur ein offizielles Hotjar-Paket, das von unseren Entwicklern erstellt und gepflegt wird. Es heißt @hotjar/browser und ist auf NPM verfügbar.
Für eine ausführliche Dokumentation zur Verwendung des NPM-Pakets und einigen Demonstrationen seiner Funktionen, besuchen Sie bitte unsere 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, Fragmente ausschließen (Standard)
- Änderungen automatisch verfolgen, Fragmente einschließen
- Änderungen manuell verfolgen
Änderungen automatisch verfolgen, Fragmente ausschließen (Standard)
Mit dieser Einstellung überwacht Hotjar die URL-Adressleiste auf Änderungen der Seiten-URL, jedoch nicht von Fragmenten oder Abfragezeichenfolgen.
Wenn ein Benutzer beispielsweise von www.beispiel.com > www.beispiel.com/about geht, würde Hotjar dies als Seitenwechsel zählen. Wenn der Benutzer von www.beispiel.com zu www.beispiel.com#heading1 geht, würde Hotjar dies nicht als Änderung verfolgen.
Änderungen automatisch verfolgen, Fragmente einschließen
Viele Websites verwenden Fragmente (dargestellt durch ein # Zeichen), um Seitenzustandsänderungen anzuzeigen. Dies ist bei Single-Page Applications (SPAs) üblich.
Angenommen, Sie haben eine App, die verschiedene Seiten mit einem Fragment darstellt. Die URL könnte etwas wie app.beispiel.com#profil aussehen. Standardmäßig würde Hotjar den Wechsel zu #profil nicht als URL-Änderung erkennen. In diesem Fall möchten Sie die Option "Änderungen automatisch verfolgen, einschließlich Fragmente" auswählen.
Beide der folgenden Änderungen würden mit dieser Einstellung verfolgt werden:
- www.seite.com/seite/ -> www.seite.com/eine-andere-seite/
- www.seite.com/#seite -> www.seite.com/#eine-andere-seite
Ä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 anweisen, wenn ein Routenwechsel stattgefunden hat, indem Sie Ereignisse an Hotjar übergeben, die Sie mit JavaScript übergeben.
Bei Auswahl dieser Option registriert Hotjar diese JavaScript-Ereignisse als Seitenwechsel. Es wird auch weiterhin URL-Änderungen durch Seitenaktualisierungen verfolgen.
Nachfolgend finden Sie einige Beispiele für den Code-Schnipsel, der benötigt wird, um einen manuellen Seitenwechsel zu generieren. Jeder Seitenpfad sollte eindeutig sein, basierend darauf, welche 'Seite' dem Benutzer angezeigt wird:
hj('stateChange', 'beispiel/seite1');
hj('stateChange', 'beispiel/seite2');
hj('stateChange', 'beispiel/pfad/seiteA');
Der Code muss zu jeder Seite hinzugefügt werden, die in Ihrem Anwendungs-Routingcode 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('deineApp', []).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 teilen. Wir empfehlen, mit einem Entwickler zusammenzuarbeiten, um etwaige Codeänderungen auf Ihrer Website zu implementieren.
Wie passe ich die Einstellungen für das Tracking von URL-Änderungen an?
Die unten aufgeführten Schritte zeigen, wie Sie die Einstellungen für 'Tracking URL-Änderungen' aktualisieren können.
Klicken Sie auf Ihr Profilbild und wählen Sie dann Organisationseinstellungen aus.
Wählen Sie den Tab Organisation & Sites aus.
Klicken Sie auf das Einstellungs-Zahnrad-Symbol, um die Site-Einstellungen für die Site zu öffnen, die Sie ändern möchten.
Wählen Sie unter Sitzungszielgruppenausrichtung & -verfolgung die Tracking-Option aus, die am besten für Ihre Website geeignet ist.
Klicken Sie auf Änderungen speichern.
Problembehandlungstipps für Single-Page-Anwendungen
Fast alle Probleme, die auf Single-Page-Application-(SPA)-Websites auftreten, werden durch eine oder mehrere der folgenden Lösungen gelöst:
- Senden Sie Zustandsänderungen manuell an Hotjar und schalten Sie das URL-Tracking auf Änderungen manuell verfolgen um.
- Wenn Sie Events zur Ausrichtung verwenden, senden Sie das Event auf jeder Route, auf der es wirksam sein soll.
- Benutzerattribute sind sitzungsbasiert, daher müssen sie nicht auf jeder Route gesendet werden, wenn sie zur Ausrichtung verwendet werden (eine Route entspricht im Wesentlichen einer 'Seite' auf SPAs).
- Wenn Sie automatisches URL-Tracking verwenden, stellen Sie sicher, dass Sie Ihre Tools nur basierend auf URLs ausrichten (anstatt basierend auf Events oder Benutzerattributen) oder führen Sie eine der oben genannten Schritte aus.
- Erwägen Sie die Verwendung der Einstellung Änderungen automatisch verfolgen, einschließlich Fragmente, wenn Ihre Website Fragmente oder Abfragen für URL-Änderungen verwendet. Dies ist besonders wichtig, wenn Sie diese Abfragen/Fragmente in Ihren Ausrichtungskriterien einschließen.