Marketing Digital
Conversion Rate
Der Prozentsatz der Nutzer, die eine gewünschte Aktion ausführen – vom Klick über die Anmeldung bis zum Kauf. Zentrale Metrik für die Bewertung von Marketing-Kampagnen und UX-Optimierung.
Einfach erklärt
Eine Heatmap visualisiert, wie Nutzer mit deiner Website interagieren. Statt Zahlen in Tabellen siehst du farbcodiert, wo die Action ist – und wo nicht.
Die Farbskala:
🔴 Rot/Orange = Hohe Aktivität (viele Klicks/Aufmerksamkeit)
🟡 Gelb = Mittlere Aktivität
🟢 Grün = Geringe Aktivität
🔵 Blau = Sehr geringe Aktivität
⬜ Keine Farbe = Keine InteraktionHeatmap-Typen:
| Typ | Zeigt | Nutzen |
|---|---|---|
| Click Heatmap | Wo wird geklickt | CTA-Effektivität, Rage Clicks |
| Scroll Heatmap | Wie weit wird gescrollt | Content-Platzierung |
| Move Heatmap | Mausbewegungen | Aufmerksamkeits-Proxy |
| Attention Heatmap | Verweildauer pro Bereich | Content-Engagement |
Beispiel – Scroll Heatmap:
┌─────────────────────┐
│ Header │ 100% sehen das
├─────────────────────┤
│ Hero Section │ 95%
├─────────────────────┤
│ Features │ 70%
├─────────────────────┤
│ Testimonials │ 45%
├─────────────────────┤
│ Pricing │ 30% ← Problem: Zu wenige sehen Preise
├─────────────────────┤
│ CTA │ 25%
├─────────────────────┤
│ Footer │ 15%
└─────────────────────┘Technischer Deep Dive
Click Heatmap Analyse
Was du suchst:
| Muster | Bedeutung | Aktion |
|---|---|---|
| Klicks auf nicht-klickbare Elemente | Nutzer erwarten Link/Button | Klickbar machen |
| Wenig Klicks auf CTA | CTA nicht sichtbar/überzeugend | Redesign, Platzierung |
| Klicks auf Bilder | Nutzer wollen vergrößern | Lightbox hinzufügen |
| ”Rage Clicks” | Frustration, etwas funktioniert nicht | Bug fixen |
Rage Clicks erkennen:
Mehrere schnelle Klicks auf dieselbe Stelle
→ Nutzer ist frustriert
→ Element reagiert nicht wie erwartet
→ Dringend untersuchenScroll Heatmap Analyse
Die “Fold Line”:
Above the Fold: Was ohne Scrollen sichtbar ist
─────────────────────────────────────────────
Below the Fold: Erfordert ScrollenScroll Depth Benchmarks:
| Scroll Depth | Typisch | Gut |
|---|---|---|
| 25% | 80-90% | 90%+ |
| 50% | 50-70% | 75%+ |
| 75% | 30-50% | 60%+ |
| 100% | 10-30% | 40%+ |
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-Heatmap oft völlig anders als Desktop:
- Thumb Zone wichtig
- Weniger Scroll-Tiefe
- Andere Klick-MusterIntegration 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 verwirrtHeatmap + A/B-Test:
1. Heatmap identifiziert Problem
2. Hypothese formulieren
3. A/B-Test durchführen
4. Heatmap der Gewinner-Variante analysierenTechnische Implementierung
Hotjar 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._hjSettings={hjid:XXXXXX,hjsv:6};
// ...
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>Datenschutz-Einstellungen:
- IP-Anonymisierung aktivieren
- Formularfelder maskieren
- Sensible Seiten ausschließen
- Consent-Banner integrieren
Häufige Fehler
| Fehler | Problem | Lösung |
|---|---|---|
| Zu wenig Daten | Nicht aussagekräftig | Mehr Traffic sammeln |
| Nur Desktop analysieren | Mobile ignoriert | Alle Geräte prüfen |
| Keine Segmentierung | Durchschnitt verwässert | Nach Segmenten filtern |
| Nur Klicks betrachten | Scroll/Attention ignoriert | Alle Heatmap-Typen nutzen |