Lerne / Leitfäden / Heatmaps-Leitfaden
Wie du eine Heatmap erstellst (kostenlos)
Eine Heatmap („Hitzekarte“ oder „Wärmebild“) ist eine farbkodierte Datenvisualisierung, in der Regel mit einem Farbverlauf von blau (kalt) bei niedrigen Werten nach rot (heiß) bei hohen Werten. Du kannst eine Daten-Heatmap mit Tabellenkalkulations-Tools wie Excel erstellen oder eine Website-Heatmap mit einem kostenlosen Heatmapping-Tool wie Hotjar generieren.
In diesem Tutorial zeigen wir dir, wie du mit Hotjar eine Heatmap erstellst, anhand derer du das Besucherverhalten auf deiner Website analysieren kannst.. Finde heraus, was deine User anklicken, was sie ignorieren und was sie frustriert, um so die Conversion Rate, die Benutzerfreundlichkeit (UX) und die für dein Unternehmen wichtigen Kennzahlen zu optimieren.
Registriere dich für ein kostenloses Hotjar-Konto, füge den Tracking-Code zu deiner Website hinzu und beginne noch heute mit der Nutzung von Heatmaps.
So erstellst du eine kostenlose Website-Heatmap mit Hotjar
Um eine Heatmap einer beliebigen Website oder Produktseite zu erstellen, brauchst du ein ausgefeiltes Heatmapping-Tool wie Hotjar. Das Sammeln und Darstellen von Heatmap-Daten gibt dir Hinweise darauf, wie Besuchende deine Website nutzen – worauf sie klicken, was sie frustriert und wo auf der Seite ihre Aufmerksamkeit nachlässt.
🔥 Nutzen Sie bereits Hotjar?
Wenn du Hilfe bei der Einrichtung deiner ersten Hotjar-Heatmap benötigst, besuche unser Hilfe-Center und schau dir unsere Seite zur Einrichtung von Heatmaps an.
Du bist neu bei Hotjar? Kein Problem: Es gibt einen dauerhaft kostenlosen Tarif oder eine kostenlose Testversion der Pläne Plus und Business, um dir den Einstieg zu erleichtern:
Gehe auf unsere Website-Heatmap-Tool-Seite und melde dich kostenlos an (oder schau dir unsere Preise an, falls du den Plus- oder Business-Plan ausprobieren möchtest)
Folge den Anweisungen, um den Hotjar-Tracking-Code auf deiner Website zu installieren
Sobald dein Tracking-Code installiert und verifiziert ist, erstelle deine erste Heatmap mit diesen fünf einfachen Schritten:
1. Prüfen Sie, ob die Sitzungserfassung aktiviert ist
Um eine Hotjar-Heatmap zu erstellen, muss die Sitzungserfassung (‚session capture‘) aktiviert sein.
Falls du sie manuell aktivieren musst, erscheint die Meldung ‚Session capture: DISABLED‘ oben rechts.
Klicke auf den Link ‚Site Settings‘ (Seiteneinstellungen) und schalte die Sitzungserfassung ein.
Jetzt erscheint oben rechts eine neue Meldung zur Traffic-Abdeckung: Klicke darauf, um zu sehen, wie viele Sitzungen du mit deinem aktuellen Plan pro Tag erfassen kannst.
💡Pro-Tipp: Die Schlussfolgerungen, die du aus deinen Heatmaps ziehst, sind aussagekräftiger, wenn du die kompletten Daten und nicht nur Stichproben sammelst. Durch das Tracking aller Interaktionen hast du die Sicherheit, dass all deine Entscheidungen auf einer vollständigen Erfassung beruhen und nicht auf einzelnen Datenfragmenten.
2. Erstelle eine neue Heatmap
Klicke auf das Heatmap-Symbol im linken Menü und dann auf die Schaltfläche ‚+ Neue Heatmap‘ .
3. Gib die URL deiner Heatmap-Seite ein
Verwende den URL-Filter, um eine Heatmap für eine beliebige Seite deiner Website anzuzeigen. Du kannst folgende Ansichten auswählen:
Eine Heatmap einer einzelnen Seite, z. B. mystore.com/product-category/item1
Eine kombinierte Heatmap mehrerer Seiten, z. B. mystore.com/product-category
Wenn du nicht sicher bist, wo du anfangen sollst, klicke auf das Eingabefeld und du erhältst eine Liste von URL-Vorschlägen basierend auf den beliebtesten Seite deiner Website.
4. Klicke auf ‚Heatmap anzeigen‘
Und das war's schon! Deine Heatmap sollte nun in maximal 90 Sekunden erscheinen.
Hotjar-Heatmaps funktionieren schon, wenn nur eine Person deine Website aufruft, aber um auf deiner Heatmap wirklich ein Muster erkennen zu können, solltest du schon auf ein paar mehr Besuchende warten.
Die Standardansicht zeigt dir eine Desktop-Clickmap Klicke auf die Symbole, um zwischen Desktop-, Mobile- und Tablet-Sessions zu wechseln und um Clickmaps (oder Tippmaps auf Mobilgeräten), Movemaps und Scrollmaps anzuzeigen.
So sehen die drei verschiedenen Arten von Heatmaps aus:
5. Filtere deine Heatmap-Daten
Du kannst noch viel mehr aus deiner Heatmap herausholen, wenn du die Sitzungsdaten so filterst, dass nur ein relevanter Zeitraum oder eine bestimmte Nutzerkohorte angezeigt wird.
Um deine Heatmap nach Datum zu filtern, klicke auf das Dropdown-Menü des Kalendersymbols und wähle einen voreingestellten Zeitraum (von 24 Stunden bis 12 Monaten) oder gib einen benutzerdefinierten Datumsbereich ein.
Klicke auf die Schaltfläche ‚+ Filter hinzufügen‘ und wähle einen oder mehrere Filter aus. Einige Ideen für den Anfang:
Filter nach Wutklick, um zu sehen, wo Besuchende aus Frust klicken
Filter nach neue Benutzenden, um zu sehen, wie sich Erst-User verhalten
Filter nach Browser oder Betriebssystem, um technische Probleme zu beheben
Du kannst die Analyse einfach halten oder maximal detailliert gestalten: Es ist sogar möglich, Benutzerattribute einzurichten, um Heatmaps nach benutzerdefinierten Metriken zu filtern, z. B. „Benutzer, die sich in den letzten 30 Tagen angemeldet haben“ oder „Kunden, die mehr als 200 € ausgegeben haben“.
Wenn du technische Fragen zu Heatmaps hast, schau dir unsere umfassende Heatmap-Hilfe an.
💡Pro tip: click on “Engagement zone” in the panel on the right to display a grid on top of the page.
This is a visual representation of the aggregated data points from click, move, and scroll heatmaps, all in a single view. The different shades (or opacity) highlight which elements of the page users most engage with (darker color) or neglect (no cell or lighter color).
Engagement zones make it easy to spot which areas of your page don’t get the love they deserve at a glance, so you can improve them.
Richte deine Heatmap noch heute ein
Registriere dich für ein kostenloses Hotjar-Konto, füge den Tracking-Code zu deiner Website hinzu und beginne noch heute mit der Nutzung von Heatmaps.
Die besten Seiten zum Sammeln von Heatmap-Daten
Heatmaps ermöglichen dir einen tieferen Einblick in jede deiner Website-Seiten, es ist jedoch sinnvoll, mit den Seiten zu beginnen, die für dich hinsichtlich der Besucherzahlen, Benutzerfreundlichkeit und Geschäftsziele am wichtigsten sind.
1. Homepage und Landing Pages
Deine Homepage und die zentrale(n)Landing Page(s) sind die wichtigsten Einstiegspunkte in deine Website. Sie entscheiden darüber, welchen ersten Eindruck deine Website-Besucher haben und ob sie weitersurfen oder die Website verlassen.
Eine Heatmap auf diesen Seiten zeigt dir, wie viele Informationen deine User sehen bzw. mit welchen Informationen sie interagieren und welche Elemente angeklickt oder ignoriert werden.
2. Top-Seiten
Die Seiten mit den besten Ergebnissen (die meistbesuchte Produktseite, der Blogbeitrag mit den meisten Kommentaren usw.) machen offensichtlich etwas richtig: Durch Eye-Tracking mit einer Heatmap kannst du herausfinden, was gut funktioniert, damit du den Erfolg an anderer Stelle wiederholen kannst.
3. Leistungsschwache Seiten
Deine leistungsschwachen Seiten sind genauso wichtig wie die Top-Seiten, aber aus dem umgekehrten Grund: Wahrscheinlich stimmt mit ihnen etwas nicht. Anhand einer Heatmap kannst du identifizieren, was deine Website-Besucher (nicht) sehen oder mit was sie (nicht) interagieren, und so entsprechende Maßnahmen ergreifen
Wir setzen Hotjar auf allen unseren Seiten ein. Wenn unsere Conversion Rate nach einer Änderung sinkt, helfen uns unsere Heatmaps, das Problem zu identifizieren und zu lösen. Hotjar hat uns geholfen, unsere Website-Strategie zu definieren und das Erlebnis für unsere Kund:innen noch besser zu machen.
4. Neue Seiten
Für neue Seiten gibt es noch nicht viele Daten: Wenn du deiner Website kürzlich eine Produktseite hinzugefügt hast, ist eine Heatmap eine gute Möglichkeit, um erste Informationen zu erhalten, die Leistung der Seite zu messen und sie zu optimieren, sobald die ersten Einblicke zum Nutzerverhalten vorliegen.
💡Pro-Tipp: Wenn du A/B-Tests durchführst, um die Conversion Rate oder andere für dein Unternehmen wichtige Kennzahlen zu verbessern, kannst du mit Hotjar Heatmaps deiner A/B-Testvarianten anzeigen. Auf diese Weise kannst du alte und neue Versionen vergleichen und sehen, warum eine Variante besser funktioniert als die andere – so weißt du auch, was du in Zukunft testen könntest.
Hier sind einige Ressourcen, mit denen du noch mehr aus deinen Heatmaps herausholen kanst:
Erstellen einer Heatmap: in Excel vs. mit Hotjar
Du kannst eine Heatmap-Visualisierung aus jedem numerischen Datensatz mit gängigen Tabellenkalkulationsprogrammen wie Microsoft Excel, Google Sheets oder LibreOffice erstellen. Am schnellsten geht das, indem du die entsprechenden Zellwerte auswählst und eine bedingte Formatierung anwendest.
Gehe in Google Sheets auf Format > Bedingte Formatierung, wähle dann Farbskala sowie deine bevorzugte Farbpalette – im folgenden Beispiel wird „grün über gelb bis rot“ verwendet. Bei Bedarf kannst du auch den Minimal-, Mittel- und Maximalpunkt anpassen.
Excel-Heatmaps sind nützlich, um Muster und Trends in numerischen Daten zu erkennen, wohingegen ein Website-Heatmap-Tool wie Hotjar einen Schritt weiter geht und Nutzeraktivitäten auf einem Screenshot der Seite abbildet. Auf diese Weise ist es viel einfacher, zu sehen, wo Besuchende tatsächlich klicken und scrollen – ohne Pivot-Tabellen oder Dialogfelder!
Nächste Schritte
Heatmaps sind eine schnelle, visuelle Methode, um herauszufinden, was auf deiner Website passiert. Die gute Nachricht: Du weißt jetzt genau, wie du mit Hotjar eine kostenlose Heatmap für deine Website erstellen kannst.
Die noch bessere Nachricht: Wenn du die Sitzungserfassung einrichtest, erhältst du auch Hotjar Recordings, mit denen du einzelne User beim Navigieren auf allen Seiten deiner Website beobachten kannst. Und wenn du deinen Optimierungseifer auf das nächste Level bringen möchtest, hast du sogar das Werkzeug, um deine User um Feedback zu bitten, Umfragen durchzuführen und Userinterviews zu führen – und das alles über dasselbe Hotjar-Konto.
Registriere dich für ein kostenloses Hotjar-Konto, füge den Tracking-Code zu deiner Website hinzu und beginne noch heute mit der Nutzung von Heatmaps.
