Wie kann ich Hotjar in einer Single-Page-App korrekt einbinden?
- Einbindung des Hotjar-Skripts
- Nachladen von Seitenaufrufen innerhalb der SPA
- Beispiel in Verbindung mit gängigen Frameworks
- Wichtiges zur Performance und Datensicherheit
- Zusammenfassung
Hotjar ist ein leistungsfähiges Tool zur Analyse des Nutzerverhaltens auf Websites. In klassischen Multi-Page-Websites erfolgt die Initialisierung von Hotjar typischerweise einmalig beim Laden jeder Seite. In Single-Page-Applications (SPAs), wo die Seite nicht komplett neu geladen wird, sondern Inhalte dynamisch über JavaScript ausgetauscht werden, ist jedoch eine spezielle Vorgehensweise erforderlich, damit Hotjar die Nutzerinteraktionen und Seitenänderungen richtig erkennt und aufzeichnet.
Einbindung des Hotjar-Skripts
Grundsätzlich wird das Hotjar-Skript einmalig beim initialen Laden Ihrer SPA in den Header oder unmittelbar vor dem schließenden <body>-Tag eingefügt. Dies stellt sicher, dass der Hotjar Tracking-Code vollständig geladen wird und für die gesamte Laufzeit der Anwendung aktiv ist. Der typische Einbettungscode sieht so aus:
(function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q|| ).push(arguments)}; h._hjSettings={hjid:IHRE_HJID,hjsv:6}; a=o.getElementsByTagName(head) ; r=o.createElement(script);r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,https://static.hotjar.com/c/hotjar-,.js?sv=);Ersetzen Sie IHRE_HJID mit Ihrer tatsächlichen Hotjar-ID.
Nachladen von Seitenaufrufen innerhalb der SPA
Weil eine SPA in der Regel keine veränderte URL in Form eines klassischen Seitenreloads erzeugt, muss Hotjar explizit über Seitenwechsel informiert werden. Dazu wird die Hotjar-Funktion hj(stateChange, url) verwendet. Diese Methode übergibt Hotjar die Information, dass sich der Anwendungszustand beziehungsweise die "Seite" geändert hat – idealerweise mit der URL des neuen Views oder einer vergleichbaren Kennung.
Dies funktioniert folgendermaßen: Immer wenn Ihre SPA eine neue "Seite" bzw. Ansicht rendert (z.B. über einen Router oder manuelle Zustandsänderung), rufen Sie hj(stateChange, window.location.pathname) oder eine entsprechende URL-Variante auf. Damit weiß Hotjar, dass es eine neue Session-Seite gibt und kann Heatmaps, Recordings und weitere Analysen korrekt zuordnen.
Beispiel in Verbindung mit gängigen Frameworks
Bei Frameworks wie React, Vue oder Angular kann man in der Regel den Hook bzw. die Lifecycle-Methode nutzen, die bei einem Routenwechsel ausgelöst wird. In React mit React Router könnten Sie beispielsweise in einem Effekt beim Routenwechsel folgendes ausführen:
import { useLocation } from react-router-dom; import { useEffect } from react; function useHotjarPageView() { const location = useLocation(); useEffect(() => { if (window.hj) { window.hj(stateChange, location.pathname); } }, ); }Dies stellt sicher, dass Hotjar bei jedem Navigationswechsel innerhalb der SPA informiert wird.
Wichtiges zur Performance und Datensicherheit
Da Hotjar Skripte asynchron geladen werden, hat dies normalerweise minimalen Einfluss auf die Ladezeiten. Dennoch sollten Sie das Skript möglichst nur auf den Seiten aktivieren, auf denen Analyse notwendig ist, um die Performance zu optimieren und unnötige Datenübertragungen zu vermeiden.
Beachten Sie auch den Datenschutz: Informieren Sie Nutzer transparent über die Verwendung von Hotjar und legen Sie gegebenenfalls eine Opt-Out-Möglichkeit bereit, um den rechtlichen Anforderungen, beispielsweise der DSGVO, nachzukommen.
Zusammenfassung
Die korrekte Einbindung von Hotjar in einer Single-Page-App erfolgt durch das einmalige Laden des Tracking-Skripts bei App-Start und der expliziten Benachrichtigung von Hotjar über virtuelle Seitenwechsel mit hj(stateChange, url). So kann Hotjar die SPA-typischen dynamischen Seitenbewegungen nachvollziehen und weiterhin Heatmaps, Session Recordings und andere Funktionen zuverlässig bereitstellen.