Heatmap

Heatmap im Überblick

Eine Heatmap visualisiert, wie Nutzer mit deiner Website interagieren. Statt nur Zahlen in Tabellen siehst du farbcodiert, wo Aktivität gemessen oder Aufmerksamkeit vermutet wird.

Die Farbskala:

Rot/Orange = hohe relative Aktivität
Gelb       = mittlere relative Aktivität
Grün       = geringere relative Aktivität
Blau       = sehr geringe relative Aktivität
Keine Farbe = keine oder kaum gemessene Interaktion

Heatmap-Typen:

Beispiel – Scroll Heatmap:

┌─────────────────────┐
│ Header              │ hohe Sichtbarkeit
├─────────────────────┤
│ Hero Section        │ hohe Sichtbarkeit
├─────────────────────┤
│ Features            │ mittlere Sichtbarkeit
├─────────────────────┤
│ Testimonials        │ sinkende Sichtbarkeit
├─────────────────────┤
│ Pricing             │ prüfen: relevante Inhalte zu weit unten?
├─────────────────────┤
│ CTA                 │ prüfen
├─────────────────────┤
│ Footer              │ niedrige Sichtbarkeit
└─────────────────────┘

Technisch betrachtet

Click Heatmap Analyse

Was du suchst:

Rage Clicks erkennen:

Mehrere schnelle Klicks auf dieselbe Stelle
→ Nutzer könnte frustriert sein
→ Element reagiert möglicherweise nicht wie erwartet
→ Mit Session Recordings oder Logs untersuchen

Scroll Heatmap Analyse

Die “Fold Line”:

Above the Fold: Was ohne Scrollen sichtbar ist
─────────────────────────────────────────────
Below the Fold: Erfordert Scrollen

Scroll Depth einordnen:

Optimierung:

• Wichtigste Inhalte nach oben
• “Scroll Cues” einbauen (Pfeile, angeschnittene Elemente)
• Lange Seiten in Abschnitte teilen

Segmentierung

Heatmaps nach Segmenten:

• Neue vs. wiederkehrende Besucher
• Traffic-Quelle (Organic, Paid, Social)
• Gerät (Desktop, Mobile, Tablet)
• Land/Region

Mobile-Heatmaps können deutlich anders aussehen als Desktop:
- Thumb Zone berücksichtigen
- Scroll-Tiefe separat prüfen
- andere Klick- und Tap-Muster erwarten

Integration mit anderen Tools

Heatmap + Session Recording:

1. Heatmap zeigt: Wenig Klicks auf CTA
2. Session Recording zeigt: Warum?
   → Nutzer scrollen daran vorbei
   → Nutzer lesen, klicken aber nicht
   → Nutzer sind verwirrt

Heatmap + A/B-Test:

1. Heatmap identifiziert Problem
2. Hypothese formulieren
3. A/B-Test durchführen
4. Heatmap der Gewinner-Variante analysieren

Technische Implementierung

Tool-Snippet Beispiel:

<!-- Im <head> -->
<script>
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._toolSettings={siteId:SITE_ID,version:VERSION};
    // ...
  })(window,document,'https://example-tracking-script.invalid/','.js?sv=');
</script>

Datenschutz-Einstellungen:

• IP-Anonymisierung aktivieren
• Formularfelder maskieren
• Sensible Seiten ausschließen
• Consent-Banner integrieren

Häufige Fehler