Lerne / Leitfäden / Heatmaps-Leitfaden
Wie man eine Heatmap erstellt (kostenlos)
Eine Heatmap ist eine farbkodierte Datenvisualisierung, in der Regel mit einem Farbverlauf von blau (kalt) nach rot (heiß). Sie können eine Daten-Heatmap mit Tabellenkalkulationstools wie Excel erstellen oder eine Website-Heatmap mit einem kostenlosen Heatmapping-Tool wie Hotjar generieren.
In diesem Tutorial zeigen wir Ihnen, wie Sie mit Hotjar eine Heatmap erstellen, die Ihnen dabei hilft, zu verstehen, wie Besucher Ihre Website nutzen - was sie anklicken oder ignorieren und was sie frustriert -, damit Sie die Konversionen, die Benutzerfreundlichkeit (UX) und die für Ihr Unternehmen wichtigen Kennzahlen optimieren können.
Zuletzt aktualisiert
21 Aug 2023Richte 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.
So erstellen Sie eine kostenlose Website-Heatmap mit Hotjar
Um eine Heatmap einer beliebigen Website oder Produktseite zu erstellen, müssen Sie ein ausgefeiltes Heatmapping-Tool wie Hotjar verwenden. Das Sammeln und Darstellen von Heatmap-Daten hilft Ihnen zu verstehen, wie Besucher Ihre Website nutzen - worauf sie klicken, was sie frustriert und wo auf der Seite ihre Aufmerksamkeit nachlässt.
Wenn Sie neu bei Hotjar sind, ist das kein Problem: Es gibt einen kostenlosen Plan für immer oder eine kostenlose Testversion für die Pläne Plus und Business, um Ihnen den Einstieg zu erleichtern:
Gehen Sie zu unserer Website Heatmap Tool Seite und melden Sie sich für ein kostenloses Konto an (oder schauen Sie sich die Preisseite an, wenn Sie den Plan Plus oder Business ausprobieren möchten)
Folgen Sie den Anweisungen, um den Hotjar Tracking-Code auf Ihrer Website zu installieren
Sobald Ihr Tracking-Code installiert und verifiziert ist, folgen Sie diesen fünf einfachen Schritten, um Ihre erste Heatmap zu erstellen:
1. Prüfen Sie, ob die Sitzungserfassung aktiviert ist
Um eine Hotjar-Heatmap zu erstellen, muss die Sitzungserfassung aktiviert sein.
Wenn Sie sie manuell aktivieren müssen, sehen Sie die Meldung "Sitzungserfassung: DISABLED' oben rechts.
Klicken Sie auf den Link Site Settings und schalten Sie die Sitzungserfassung ein.
Jetzt sehen Sie oben rechts eine neue Meldung über die Traffic-Abdeckung: Klicken Sie darauf, um zu sehen, wie viele Sitzungen Sie mit Ihrem aktuellen Plan pro Tag erfassen können.
💡Profitipp: Die Schlussfolgerungen, die Sie aus Ihren Heatmaps ziehen, sind aussagekräftiger, wenn Sie Daten ohne Stichprobe sammeln. Durch die Verfolgung aller Interaktionen können Sie sicher sein, dass jede Entscheidung, die Sie treffen, auf einer vollständigen Erfassung und nicht auf Datenfragmenten beruht.
2. Erstellen Sie eine neue Heatmap
Klicken Sie auf das Heatmap-Symbol im linken Menü und dann auf die Schaltfläche '+ Neue Heatmap' .
3. Geben Sie die URL Ihrer Heatmap-Seite ein
Verwenden Sie den URL-Filter , um eine Heatmap für eine beliebige Seite Ihrer Website anzuzeigen. Sie können Folgendes anzeigen:
Eine Heatmap einer einzelnen Seite, z. B. mystore.com/product-category/item1
Eine kombinierte Heatmap mehrerer Seiten, z. B. mystore.com/product-category
Wenn Sie nicht sicher sind, wo Sie anfangen sollen, klicken Sie auf das Kästchen und Sie erhalten eine Liste von URL-Vorschlägen auf der Grundlage der beliebtesten Seiten Ihrer Website.
4. Klicken Sie auf "Heatmap anzeigen"
Und das war's! Ihre Heatmap sollte in 90 Sekunden oder weniger erscheinen.
Es braucht nur eine Person, die die Seite besucht, damit Hotjar-Heatmaps funktionieren - aber Sie müssen möglicherweise auf ein paar mehr Besucher warten, um Muster auf Ihrer Heatmap zu sehen.
Die Standardansicht zeigt Ihnen eine Desktop-Klickkarte; klicken Sie auf die Symbole, um zwischen Desktop-, Mobil- und Tablet-Sitzungen zu wechseln und um Klick- (oder Tippen auf Mobilgeräten), Bewegungs- und Scrollkarten anzuzeigen.
So sehen die drei verschiedenen Arten von Heatmaps aus:
5. Filtern Sie Ihre Heatmap-Daten
Sie können viel mehr aus Ihrer Heatmap herausholen, wenn Sie die Sitzungsdaten so filtern, dass nur ein relevanter Zeitraum oder eine bestimmte Nutzerkohorte angezeigt wird.
Um Ihre Heatmap nach Datum zu filtern, klicken Sie auf das Dropdown-Menü des Kalendersymbols und wählen Sie einen voreingestellten Zeitraum (von 24 Stunden bis 12 Monaten) oder geben Sie einen benutzerdefinierten Datumsbereich ein.
Klicken Sie auf die Schaltfläche '+ Filter hinzufügen' und wählen Sie einen oder mehrere Filter aus. Einige Ideen für den Anfang:
Filter nach Wutklick, um zu sehen, wo Besucher aus Frust klicken
Filter nach Neue Benutzer, um zu sehen, wie sich Erstbesucher verhalten
Filter nach Browser oder Betriebssystem, um technische Probleme zu beheben
Sie können die Dinge einfach halten oder so fortgeschritten sein, wie Sie möchten: 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 Sie technische Fragen oder Zweifel an Heatmaps haben, lesen Sie unsere umfassendeHeatmap-Hilfedokumentation xml-p
5. Filter your heatmap data
You can get a lot more value from your heatmap if you filter the session data to only show a relevant time period or specific user cohort.
To filter your heatmap by date, click the calendar icon drop-down menu and select a preset time period (from 24 hours to 12 months) or enter a custom date range.
Click the ‘+ Add Filter’ button and pick one or multiple filters. Some ideas to get you started:
Filter by Rage click to see where visitors click in frustration
Filter by New users to see how first-time visitors behave
Filter by Browser or Operating system to troubleshoot tech-specific issues
You can keep things simple or get as advanced as you like: it’s even possible to set up user attributes to filter heatmaps by custom metrics such as ‘users who signed up in the last 30 days’ or ‘customers who spent more than $200’.
If you have any technical questions or doubts about heatmaps, check out our comprehensive heatmap help documentation.
💡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 Ihnen einen tieferen Einblick in jede Ihrer Website-Seiten, aber es ist logisch sinnvoll, mit den Seiten zu beginnen, die für Sie in Bezug auf Besucherzahlen, Benutzerfreundlichkeit und Geschäftsziele am wichtigsten sind.
1. Homepage und Landingpages
Ihre Homepage und die Hauptlandingpage (s) sind die Haupteinstiegspunkte in Ihre Website. Sie sind oft verantwortlich für den ersten Eindruck Ihrer Website-Besucher und ihre Entscheidung, weiterzusurfen oder die Website zu verlassen.
Eine Heatmap auf diesen Seiten hilft Ihnen festzustellen, wie viele Informationen Ihre Benutzer sehen oder mit ihnen 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: Eye-Tracking mit einer Heatmap kann Ihnen helfen zu verstehen, was gut funktioniert, damit Sie den Erfolg an anderer Stelle wiederholen können.
3. Schlecht laufende Seiten
Ihre schlecht laufenden Seiten sind genauso wichtig wie die vorherigen, aber aus dem umgekehrten Grund: Wahrscheinlich stimmt mit ihnen etwas nicht, und eine Heatmap kann Ihnen helfen zu verstehen, was Ihre Besucher (nicht) sehen oder mit ihnen interagieren, damit Sie Maßnahmen ergreifen können.
Wir setzen Hotjar auf allen unseren Seiten ein. Wenn unsere Konversionsrate 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 Kunden noch besser zu machen.
4. Neue Seiten
Für Ihre neuesten Webseiten gibt es noch nicht viele Daten: Wenn Sie Ihrer Website kürzlich eine Produktseite hinzugefügt haben, könnte eine Heatmap eine gute Möglichkeit sein, um erste Informationen zu erhalten, die Leistung der Seite zu messen und sie zu optimieren, sobald die Nutzer Einblicke erhalten.
💡Pro-Tipp: Wenn Sie A/B-Tests durchführen, um die Konversionsrate oder andere für Ihr Unternehmen wichtige Metriken zu verbessern, können Sie mit Hotjar Heatmaps Heatmaps Ihrer A/B-Testvariationen anzeigen. So können Sie alte und neue Versionen vergleichen und sehen, warum eine Variante besser funktioniert und Ideen für zukünftige Tests erhalten.
Hier sind einige Ressourcen, die Ihnen helfen, noch mehr aus Heatmaps herauszuholen:
Wie Sie Heatmaps verwenden, um die UX Ihrer Website zu verbessern
Wie Sie E-Commerce-Heatmaps verwenden, um die Konversionen zu erhöhen
Erstellen einer Heatmap in Excel vs. Hotjar
Sie können eine Heatmap-Visualisierung aus jedem numerischen Datensatz mit gängigen Tabellenkalkulationsprogrammen wie Microsoft Excel, Google Sheets oder LibreOffice erstellen. Am schnellsten geht es, wenn Sie die entsprechenden Zellwerte auswählen und eine bedingte Formatierung anwenden.
Gehen Sie in Google Sheets auf Format > Bedingte Formatierung, wählen Sie dann Farbskala und wählen Sie Ihre bevorzugte Farbpalette - im folgenden Beispiel wird "Grün bis Gelb bis Rot" verwendet. Bei Bedarf können Sie auch den Minimal-, Mittel- und Maximalpunkt anpassen.
Excel-Heatmaps können hilfreich sein, wenn Sie versuchen, Muster und Trends in numerischen Daten zu erkennen, wohingegen ein Website-Heatmap-Tool wie Hotjar einen Schritt weiter geht, indem es echte Nutzeraktivitäten auf einem Screenshot der eigentlichen Seite überlagert. Auf diese Weise ist es viel einfacher zu sehen, wo Besucher tatsächlich klicken und scrollen - ohne Pivot-Tabellen oder Dialogfelder!
Nächste Schritte
Heatmaps sind eine schnelle, visuelle Methode, um zu verstehen, was auf Ihrer Website passiert. Die gute Nachricht: Sie wissen jetzt genau, wie Sie mit Hotjar eine kostenlose Heatmap für Ihre Website erstellen können.
Die noch bessere Nachricht: Wenn Sie die Sitzungserfassung einrichten, erhalten Sie auch Hotjar Recordings, damit Sie einzelne Nutzer beim Surfen auf Ihrer Website über mehrere Seiten hinweg beobachten können. Und wenn Sie bereit sind, Ihre Optimierungsbemühungen auf die nächste Stufe zu heben, sind Sie bestens gerüstet, um Nutzer um Feedback zu bitten, Umfragen durchzuführen und Nutzerinterviews zu führen, und das alles über dasselbe Hotjar-Konto.
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.
