Wie kann ich Hotjar in React- oder Angular-Anwendungen implementieren?
Einführung
Hotjar ist ein weitverbreitetes Tool zur Analyse des Nutzerverhaltens auf Websites. Es ermöglicht
unter anderem Heatmaps, Nutzeraufnahmen und Feedback-Umfragen. Die Integration von Hotjar in moderne
Frontend-Frameworks wie React oder Angular erfolgt meist durch das Einfügen des Hotjar-Tracking-Codes.
Aufgrund ihrer komponentenbasierten Architektur und häufigen Nutzung von Client-Side-Routing muss dabei
besonders darauf geachtet werden, Hotjar korrekt zu initialisieren und ggf. bei Seitenwechseln zu
Integration in React
In React-Anwendungen ist der beste Weg, Hotjar zu integrieren, den offiziellen Tracking-Code in die
index.html im public-Verzeichnis einzufügen. Dieser Code wird beim ersten Laden
Allerdings reicht das Einfügen in index.html nicht aus, wenn Ihr React-Projekt Single Page Application (SPA) mit Client-Side-Routing ist (z. B. React Router). Hotjar muss in diesem Fall über den Router
Um Hotjar nach einem Seitenwechsel zu informieren, können Sie einen kleinen Wrapper verwenden und die
hj(stateChange, url)-Funktion aufrufen. Beispiel: In der Hauptkomponente, die Ihre Routen rendert,
können Sie mit einem Effekt (z. B. useEffect) auf Routenänderungen reagieren und diesen
import { useEffect } from react;import { useLocation } from react-router-dom;function HotjarTracker() { const location = useLocation(); useEffect(() => { if (window.hj) { window.hj(stateChange, location.pathname + location.search); } }, ); return null;}export default HotjarTracker;Anschließend können Sie diese Komponente z. B. im Wurzel-Layout oder direkt unter dem Router einbinden. So stellen Sie sicher, dass Hotjar jedes Mal über die aktuelle URL informiert wird.
Integration in Angular
Bei Angular-Anwendungen wird der Hotjar-Code ebenfalls im Allgemeinen in der index.html im
Analog zu React ist es erforderlich, Hotjar auch bei Navigationsereignissen innerhalb der SPA über Änderungen zu informieren, da Angular ebenfalls Client-Side-Routing verwendet.
Eine Möglichkeit besteht darin, den Hotjar-StateChange-Aufruf im Haupt- oder App-Komponenten-Code zu implementieren
und dort auf Routing-Ereignisse über den Angular-Router zu reagieren. Sie können dazu einen Service oder die
App-Komponente nutzen, um auf NavigationEnd-Events zu hören und dann den Hotjar-Befehl auszuführen.
import { Component, OnInit } from @angular/core;import { Router, NavigationEnd } from @angular/router;declare global { interface Window { hj: any; }}@Component({ selector: app-root, templateUrl: ./app.component.html})export class AppComponent implements OnInit { constructor(private router: Router) {} ngOnInit(): void { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { if (window.hj) { window.hj(stateChange, event.urlAfterRedirects); } } }); }}Dabei wird im ngOnInit der App-Component auf alle Navigation-End-Events reagiert. Sobald eine Navigation abgeschlossen ist, ruft man die Hotjar-Funktion auf, um Hotjar darüber zu informieren.
Zusammenfassung und wichtige Hinweise
Grundsätzlich sollte der Hotjar-Skript-Code in der statischen index.html oder einer entsprechenden Hosting-Vorlage eingebunden werden, damit das Tool einmalig geladen wird. Weil moderne Frameworks wie React und Angular Single Page Applications sind und die URL oft dynamisch mit dem Router geändert wird, ist ein automatisches Erkennen des Seitenwechsels durch Hotjar nicht gewährleistet.
Darum ist es wichtig, bei jeder relevanten URL-Änderung den Hotjar-Befehl hj(stateChange, url) zu triggern. Dazu reagiert man in React auf location-Änderungen via useEffect oder in Angular auf NavigationEnd-Events des Routers.
Durch diese Maßnahmen werden Heatmaps, Session Recordings und andere Hotjar-Metriken korrekt auf die jeweiligen Seiten innerhalb Ihrer SPA gebunden und nicht nur auf die Initialladung.