Technologie

Wie kann ich Crazy Egg auf einer Single Page Application (SPA) verwenden?

Melden
  1. Das Problem bei SPAs
  2. Wie funktioniert Crazy Egg normalerweise?
  3. Die Lösung: Manuelle Benachrichtigung über Seitenwechsel
  4. Konkretes Vorgehen
  5. Besonderheiten beachten
  6. Zusammenfassung

Crazy Egg ist ein populäres Tool zur Analyse des Nutzerverhaltens auf Webseiten. Es bietet Heatmaps, Scrollmaps und weitere visuelle Auswertungen, die helfen, das Nutzerverhalten besser zu verstehen. Während die Integration auf klassischen Multi-Page-Websites recht unkompliziert ist, stellt der Einsatz von Crazy Egg auf Single Page Applications (SPAs) eine besondere Herausforderung dar. SPAs laden die meisten Inhalte dynamisch per JavaScript, ohne die Seite komplett neu zu laden. Das hat Auswirkungen auf das Tracking, da Crazy Egg standardmäßig Seitenladeereignisse nutzt, um Heatmaps und Sitzungen zu erstellen.

Das Problem bei SPAs

In einer SPA ändert sich der sichtbare Inhalt der Seite oft ohne ein vollständiges Neuladen der URL. Stattdessen werden interne Zustände oder URLs mit dem History-API-Mechanismus (z. B. pushState oder replaceState) aktualisiert. Dadurch bekommt Crazy Egg durch das initiale Skript nur die erste Seite mit, aber keine weiteren virtuellen Seitenwechsel. Ohne zusätzliche Maßnahmen würden also Interaktionen auf Nachladeinhalten oder bei Navigation innerhalb der SPA nicht erfasst werden oder nicht in der Heatmap korrekt erscheinen.

Wie funktioniert Crazy Egg normalerweise?

Crazy Egg wird meistens per JavaScript-Snippet eingebunden, das bei jedem vollständigen Seitenaufbau geladen wird. Dieses Snippet sendet dann Daten zu Mausbewegungen, Klicks und Scrollverhalten sowie Informationen zur URL an die Crazy Egg-Server. Bei einer SPA bleibt das Skript zwar aktiv, aber es bekommt keine Signale über den virtuellen Seitenwechsel.

Die Lösung: Manuelle Benachrichtigung über Seitenwechsel

Um Crazy Egg auf SPAs korrekt einzusetzen, ist es notwendig, siaktiv mitzuteilen, wenn sich die sichtbare Seite für den Nutzer ändert. Crazy Egg stellt dafür eine Methode window.𝐂𝐫𝐚𝐳𝐲𝐄𝐠𝐠.𝐭𝐫𝐚𝐜𝐤() zur Verfügung. Diese muss aufgerufen werden, sobald die SPA ihren Status oder die angezeigte URL ändert. Das bedeutet, bei jedem virtuellen Seitenwechsel, den Sie z. B. im Router Ihrer Anwendung erkennen, sollten Sie diese Funktion ausführen, damit Crazy Egg eine neue Seite erkennt und das Tracking erneut startet.

Konkretes Vorgehen

Binden Sie zunächst das Crazy Egg Tracking-Skript wie gewohnt am Anfang Ihrer Anwendung ein, meist direkt in Ihre index.html oder das Haupt-Template. Danach implementieren Sie an der Stelle, wo Ihr Router eine Navigation bzw. einen View-Wechsel durchführt, einen Aufruf von window.CrazyEgg.track(). Dies kann in Frameworks wie React, Vue oder Angular beispielsweise im Lifecycle-Hook nach dem erfolgreichen Wechsel geschehen.

Ein Beispiel in Pseudocode könnte so aussehen: router.onRouteChange(() => {   // Update URL und interne Zustände   if(window.CrazyEgg && typeof window.CrazyEgg.track === function) {

    window.CrazyEgg.track();   } });

  if(window.CrazyEgg && typeof window.CrazyEgg.track === function) {

Besonderheiten beachten

Wichtig ist, dass das Crazy Egg-Skript beim Aufruf von CrazyEgg.track() bereits vollständig geladen und initialisiert ist. Andernfalls existiert die Funktion noch nicht und der Aufruf schlägt fehl. Daher ist es sinnvoll, den Track-Aufruf erst nach bestätigter Initialisierung auszuführen oder gegebenenfalls zeitlich verzögert. Außerdem sollte der Aufruf immer nur dann getätigt werden, wenn ein tatsächlicher virtueller Seitenwechsel erkannt wurde, um unnötige Aufrufe zu vermeiden.

Zudem kann es hilfreich sein, den Pfad der virtuellen Seite vor dem Track-Aufruf ggf. in der URL zu ändern (z. B. mit history.pushState), damit Crazy Egg die aktuelle URL korrekt erfasst und Reports eindeutiger zugeordnet werden können. Alternativ können Sie auch Parameter anhängen oder Meta-Daten setzen, je nach Ihren Anforderungen.

Zusammenfassung

Um Crazy Egg auf einer SPA korrekt einzusetzen, ist das einmalige Einbinden des Tracking-Skripts nicht ausreichend. Sie müssen auf virtuelle Seitenwechsel reagieren und Crazy Egg manuell per window.CrazyEgg.track() informieren, damit die Heatmaps und Interaktionsdaten sauber und vollständig erhoben werden. So wird Ihr Nutzerverhalten auf allen Ansichten Ihrer SPA sichtbar und Sie erhalten überzeugende Insights für Optimierungen.

0

Kommentare