Website-Heatmaps: Was sie sind und wie du sie liest
Website-Heatmaps
Was ist eine Heatmap? Klick- und Scroll-Maps für Websites erklärt | We.Inc
Was eine Website-Heatmap ist, wie Klick-, Scroll- und Attention-Maps erfasst werden, was du bei Datenschutz und Einwilligung beachten musst, und eine Live-Demo, die aus deinen eigenen Klicks eine Heatmap zeichnet.
Eine Website-Heatmap ist ein Bild deiner Seite mit einer Farbschicht darüber, die zeigt, wo Besucher geklickt haben, wie weit sie gescrollt haben oder wo sie Zeit verbracht haben. Warme Farben bedeuten viele Besucher, kühle Farben wenige. Ein kleines Skript auf der Seite erfasst Interaktionen, und das Tool summiert sie über viele Besuche.
Gängige Arten von Heatmaps
Art
Was sie zeigt
Welche Frage sie beantwortet
Klick-Map
Wo Leute geklickt oder getippt haben
Drückt überhaupt jemand meinen Hauptbutton?
Scroll-Map
Den Anteil der Besucher, der jede Tiefe der Seite erreicht hat
Sehen die Leute jemals meine Preise?
Bereichs-Map
Alle Klicks innerhalb eines Bereichs, den du auswählst
Wie stark wird das ganze Menü genutzt?
Attention-Map
Verweildauer auf jedem Teil der Seite
Welcher Abschnitt hält die Leute?
Bewegungs-Map
Wohin sich der Mauszeiger bewegt hat, bei manchen Tools verfügbar
Was zieht Desktop-Besucher an?
Analytics sagt dir, wie viele Leute eine Seite besucht haben. Eine Heatmap zeigt, was sie dort getan haben. Bei der Website eines kleinen Unternehmens löst das oft auf einen Blick das Rätsel: der Button, den niemand klickt, das Foto, das alle antippen, weil sie einen Link erwarten, das Angebot, das unterhalb der Stelle liegt, an der die meisten aufhören zu scrollen. Probier die Demo aus, um zu sehen, wie eine Heatmap entsteht.
Wähle ein Heatmap-Tool und leg ein Projekt für deine Website an.
Füge das Tracking-Skript des Tools auf jeder Seite ein oder installiere sein Plugin für deinen Website-Builder.
Richte eine Einwilligung ein, wenn du Besucher aus Regionen hast, die das verlangen, und lege fest, wie viel Seitentext das Tool erfassen darf.
Warte auf einige hundert Besuche der Seite, die dich interessiert, bevor du Schlüsse ziehst.
Öffne die Heatmap für diese Seite, prüfe Mobil und Desktop getrennt und notiere eine Änderung, die du testen willst.
Betrachte Smartphones und Computer getrennt. Dieselbe Seite wird unterschiedlich dargestellt, sodass gemischte Maps verschwimmen.
Klicks auf Elemente, die keine Links sind, etwa Fotos oder fetten Text, bedeuten, dass die Leute erwarten, dass etwas passiert.
Wenn die meisten Besucher vor deinem Call-to-Action aufhören zu scrollen, schieb ihn nach oben, statt ihn größer zu machen.
Rage Clicks, bei denen jemand immer wieder auf dieselbe Stelle tippt, deuten oft auf ein defektes oder langsames Element hin.
Betrachte eine Heatmap als Ideenquelle und bestätige die Änderung dann mit einem A/B-Test oder Conversion-Daten.
Häufige Fragen
Gibt es kostenlose Heatmap-Tools?
Ja. Die Dokumentation von Microsoft beschreibt Clarity als dauerhaft kostenlosen Dienst mit Klick-, Scroll-, Bereichs-, Conversion- und Attention-Maps sowie Sitzungsaufzeichnungen. Andere Tools wie Hotjar bieten ebenfalls Heatmaps; prüfe ihre aktuellen Tarife auf ihren eigenen Websites.
Wie viele Besucher brauche ich für eine aussagekräftige Heatmap?
Eine offizielle Zahl gibt es nicht. Manche Tools zeichnen eine Map schon aus sehr wenig Traffic, aber eine Handvoll Besuche zeigt meist nur individuelle Gewohnheiten. Warte, bis sich das Muster mit weiteren Besuchen nicht mehr ändert, bevor du etwas umgestaltest.
Brauchen Heatmaps eine Cookie-Einwilligung?
Das hängt vom Tool und vom Recht am Ort deiner Besucher ab. Clarity zum Beispiel setzt seit dem 31. Oktober 2025 Einwilligungssignale für Besuche aus dem EWR, dem Vereinigten Königreich und der Schweiz durch. Dies ist keine Rechtsberatung; prüfe die Regeln, die für dich gelten.
Zeichnen Heatmap-Tools auf, was Leute eintippen?
Gute Tools verbergen das. Die Dokumentation von Clarity sagt, dass Inhalte in Eingabefeldern und Dropdowns in jedem Modus maskiert werden, und der Standardmodus Balanced maskiert außerdem Zahlen und E-Mail-Adressen.
Was ist der Unterschied zwischen einer Heatmap und einer Sitzungsaufzeichnung?
Eine Heatmap fasst viele Besuche zu einem Bild einer Seite zusammen. Eine Sitzungsaufzeichnung spielt den Weg eines einzelnen Besuchers über mehrere Seiten ab. Heatmaps zeigen Muster; Aufzeichnungen helfen, einen einzelnen Ausreißer zu erklären.
Wie die Daten erfasst werden
Ein Skript auf deiner Seite registriert Klicks, Tippen und Scrollen und sendet kleine Datensätze an das Tool: welches Element gedrückt wurde, die Seitenbreite, wie weit der Besucher nach unten gekommen ist. Das Tool gruppiert die Datensätze dann nach Seite und Gerät und färbt die Seite ein.
Bessere Tools ordnen Klicks Seitenelementen zu statt reinen Bildschirmpositionen. Die Dokumentation von Clarity sagt, dass seine Klick-Maps Elemente statt absoluter Mauspositionen nutzen, sodass die Maps über Bildschirmgrößen und responsive Layouts hinweg genau bleiben.
Datenschutzeinstellungen, die du am ersten Tag wählen solltest
Lege fest, wie viel Seitentext das Tool speichern darf. Clarity bietet Strict, das alle Inhalte maskiert, Balanced, das sensible Inhalte wie Zahlen und E-Mail-Adressen maskiert, und Relaxed, das nur Formularfelder und Dropdowns maskiert.
Du kannst auch einzelne Teile einer Seite als privat markieren. In Clarity ist das das Attribut data-clarity-mask, das im Code unten gezeigt wird. Clarity sagt außerdem, dass es nicht auf Websites eingesetzt werden sollte, die sich an Nutzer unter 18 richten.
Code, den du vielleicht brauchst
Zwei kurze Snippets für Websites, die Clarity nutzen. Beide folgen der veröffentlichten API von Microsoft; die Werte hier sind Beispiele.
Einen Teil einer Seite in Aufzeichnungen verbergen
Mit data-clarity-mask und dem Wert True wird dieses Element samt allem darin maskiert, unabhängig von der Einstellung für die ganze Website.
Clarity mitteilen, dass der Besucher zugestimmt hat
Ruf dies aus deinem Cookie-Banner auf, nachdem der Besucher zugestimmt hat. Lehnt er ab, läuft Clarity ohne Cookies, es ist also kein Aufruf nötig.
Wie die Demo die Hitze zeichnet
Jeder Klick wird zu einem weichen Kreis aus createRadialGradient. Überlappende Kreise stapeln sich, sodass stark genutzte Stellen dunkler werden.
Erstelle eine Heatmap aus deinen eigenen Klicks
Klicke oder tippe irgendwo auf die Beispielseite unten. Jeder Klick fügt Hitze hinzu. Nichts wird irgendwohin gesendet: Die Klicks bleiben in diesem Browser-Tab.
Beispielseite. Klicke, um an dieser Stelle Hitze hinzuzufügen.
Erfasste Klicks: {n}
Klicks löschen
Seite unter der Heatmap anzeigen
Speisekarte
Bestellen
Besuchen
Frisches Sauerteigbrot, gebacken um 5 Uhr morgens
Bestell bis 10 Uhr abends und hol es am nächsten Morgen ab.