Heatmap: Was ist es und wie kann ich damit meine Webseite verbessern?

Ziel: Heatmaps einfügen um mehr Interaktion und Analysedaten zu erhalten. Um somit
das Nutzererlebnis und Conversionziele zu verstehen bzw. zu verbessern.

Ideales Ergebnis: Dein Unternehmen erfasst, protokolliert und analysiert nun korrekt
Heatmaps.

Voraussetzungen oder Anforderungen: Um diese Anleitung vollständig befolgen zu
können, musst du den Google Tag Manager auf deiner Webseite einrichten

Warum ist das wichtig: Die In-Page-Verhaltensanalyse gibt deinem Team zusätzliche
visuelle Einblicke, die mit herkömmlichen Analysetools wie Google Analytics nicht so
einfach erfasst oder interpretiert werden können.

Wo wird diese Aufgabe ausgeführt: In Google Tag Manager, Hotjar, and Google
Spreadsheets.

Wann wird diese Aufgabe ausgeführt: Du wist jedes Mal (Webseite) eine Heatmap
einrichten, wenn du mehr über das On-Page-Verhalten deiner Benutzer auf Seiten /
Unterseiten etc, erfahren möchtest.

 

Evaluierung des Bedarfs an einem Clickmap- oder Scrollmap-Tool

Möchtest du, quantitative Daten analysieren, bestimmte Metriken über bestimmte Zeiträume hinweg auswerten oder wichtige Ereignisse auf deiner Webseite verfolgen?

  • Wenn ja, ist ein Tool wie Google Analytics für deine Analyse besser geeignet. Auch wenn du in einigen Fällen ähnliche Indikatoren visuell durch eine Heatmap erhalten kannst, typischerweise diese Art von Ergebnissen

Wenn du Google Analytics noch nicht auf deiner Website implementiert hast, befolge erstmal diese Anleitung dazu. Google Analytics mit dem Tag Manager einbinden

Möchtest du analysieren, wie deine Benutzer innerhalb einer bestimmten Seite oder Untergruppe von Seiten interagieren?

  • Wenn ja, in einigen Fällen kannst du dies vielleicht mit Google Analytics tun. Aber meistens werden die Daten viel einfacher zu analysieren sein, indem man sich Scrollmaps und Clickmaps visuell anschaut

Entscheiden, welche Seiten aufgenommen werden sollen

 

Identifiziere die Haupt(Kern)seiten auf deiner Webseite und richte Heatmaps auf Seitenebene für diese ein. Das sind die Seiten, die die meisten Benutzer durchlaufen, bevor sie die gewünschte Aktion ausführen, z. B.

  1. Startseite
  2. Landingpage / Leadseiten
  3. Preisseite
  4. Verkaufsseite
  5. Checkout Seite bzw die einzelenen Schritte dafür

Identifiziere unterstützende Seiten, die Hinweise darauf geben, was deinem Benutzer durch den Kopf gehen könnte:

Beispiel

  • (FAQ) Häufige-Fragen-Seite - Wenn du Elemente im Akkordeon-Stil verwendest, erhältst du Einblicke darüber, welche Fragen am häufigsten gestellt werden, so dass du Landing Page-Text verbessern kannst, indem du visuell siehst, welche Fragen am häufigsten angeklickt werden
  • Kategorie Auswahlseite - Wenn du eine Seite hast, auf der Benutzer auf bestimmte Kategorien deiner Website klicken, kannst du schnell und visuell beurteilen, welche Kategorien bei dieser Gruppe von Benutzern beliebter sind.
  • Portfolio - Wenn du ein einseitiges Portfolio verwendest, überprüfe, ob die Benutzer deiner besten Projekte sehen und ob sie versuchen, auf eines davon zu klicken, um die interessantesten Projekte zu identifizieren.
  • Contentseiten - Identifiziere den Content, an denen die Benutzer am meisten interessiert sind.

 

Wenn du gerade dabei bist, eine bestimmte Seite oder eine Vorlage neu zu gestalten:

 

  • Erstelle eine Heatmap der alten Version
  • Erstelle eine Heatmap der neuen Version

 

Analysiere die Seiten mit hohem Potenzial und schlechter Performance:

 

Hohes Volumen / Hohe Absprungrate: Öffne Google Analytics Auf der Seitenleiste klicke “Verhalten” → Klicke auf "Webseitencontent" → Klicke “Alle Seiten” Ordne nach “Einzelne Seitenaufrufe” → Identifiziere
die Seiten, auf denen die Bounce Rate im Vergleich zu den anderen ungewöhnlich hoch ist.

 

Heatmap auf der Webseite installieren

 

Erstellen und Einrichten eines Kontos bei Hotjar

 

  1. Erstelle dir jetzt dein Gratis Konto bei Hotjar
  2. Gebe deine Daten ein und klicke unten auf den Button "Get Started"

 

Heatmap Account erstellen

 

   3. Wähle dein Passwort aus und klicke auf "Next"

   4. Gebe deine “Role” ein, wähle “Yes” Wenn du dieses Konto für die Verwaltung von Kunden verwenden               möchtest, oder "No", wenn dies nur für deine Website gilt, deinen Organisationsnamen, und klicke auf "Next".

   5. Gebe deine URL ein → Klicke auf “Start using hotjar”.

 

Heatmap URL Eintragen

 

     6. Schließe das Popup Fenster

     7. Das war's! Du befindest dich jetzt auf deinem Dashboard und solltest deine Tracking-Code sehen können: 

 

Heatmap Trackingcode

 

Installation von Hotjar mit dem Google Tag Manager

Hinweis: Hier erfährst du wie du den Tag Manager installierst

 

Heatmap Tag Manager

 

  • Rufe “Tags” auf:

 

Heatmap Installation Tag Manager

 

Klicke auf "Neu" und benenne deine Tag um. Es wird empfohlen, dass er einen Hinweis auf Hotjar enthält, damit du in Zukunft die gesuchten Tags leichter finden kannst.

  • Hinweis: Bei der Erstellung neuer Tags empfiehlt es sich, von Anfang an eine Namenskonvention festzulegen. So bleibt dein Google Tag Manager-Setup übersichtlich und lässt sich über viele Jahre hinweg leicht pflegen
  • Abgekürzter Name des Tools]_[Verwendung für dieses Tag] ist ein guter Anfang. z. B.: "HJ_TrackingCode"

 

Klicke auf Tag-Konfiguration und suche dann oben mit der Lupe nach "Hotjar Tracking Code"

 

Heatmap Tag Type

 

Öffne dein Hotjar Dashboard und kopiere aus der URL nach /sites/ und bevor /dashboard/ die Nummer

  • Hinweis: In diesem Beispiel wäre es die Nummer 2401676

 

Gehe zurück zum Google Tag Manager und füge die Nummer in die "Hotjar Site ID" ein:

 

Heatmap Hotjar Id

 

Auf der "Trigger” Feld klicke auf “Wählen Sie einen Trigger aus, um dieses Tag auszulösen…” → “All Pages”.

Hinweis: Wenn es aus irgendeinem Grund Seiten auf dein er Website gibt, die du nicht aufzeichnen möchtest. (z. B.: aus Sicherheits-/Datenschutz-/Leistungsgründen) möchtest du möglicherweise nicht "Alle Seiten" auswählen, sondern stattdessen eine benutzerdefinierte Auslöseregel erstellen.

Klicke auf "Speichern" oben rechts.

Heatmap speichern

Prüfe, ob HotJar korrekt implementiert wurde

 

  1. Öffne das Hotjar-Dashboard in einem neuen Tab.
  2. Klicke “I have installed the tracking code”
  3. Gebe deine Website in das Textfeld ein und klicke auf "Verify Installation".

Heatmap Installation verifizierung

 

Du solltest nun eine Erfolgsmeldung sehen:

 

Heatmap Erfolgsmeldung

 

Einrichten von Heatmaps

 

  • Öffne das Hotjar-Dashboard in einem neuen Tab
  • Klicke in der Seitenleiste auf "Heatmaps

 

Heatmap Analytics

  • Klicke auf “+New Heatmap”
  • Benenne deine Heatmap und klicke auf "Next".
  • Hinweis: Verwende von Anfang an eine Namenskonvention - das
    erleichtert die Analyse der Ergebnisse in der Zukunft sehr. Wenn du
    noch keine Benennungconversion hast, kannst du [Traffic-Segment]
    [Analysierte Seite] verwenden
  • Beispiel: [Alle Besucher] Startseite oder [Facebook Ads Traffic] Startseite oder [Headline A Variation] Startseite.
  • Wähle die Anzahl der Pageviews, die du sammeln möchtest, bevor Hotjar die Heatmap als vollständig markiert, und klicken dann auf "Next".
  • Hinweis: Der kostenlose Plan ist auf 1.000 Pageviews begrenzt. Das ist für die meisten Fälle ausreichend.

Heatmap Snapshot

Seiten Targetierung:

  • Hinweis: Diese Anleitung deckt einen Prozess ab, der für die große Mehrheit der Websites funktioniert. In seltenen Fällen kann es vorkommen, dass deine spezielle Situation oder URL-Struktur eine kleine Variation erfordert, die durchgeführt werden muss. Wenn dies der Fall ist, wird empfohlen, dass du für die Website-Verwaltung zuständige Person bittest, dich bei der Einrichtung der Heatmap zu unterstützen.

 

Wenn du eine specific page aufnehmen möchtest:

Wenn du den gesamten Traffic aufzeichnen möchtest, der auf eine bestimmte Seite geht, und deine Website nicht auf URL-Parameter angewiesen ist (z.B.: craftconversions.de/?id=1), um bestimmte Seiten anzuzeigen:

  • Hinweis: Wenn du nicht weißt, ob deine Website auf URL-Parameter angewiesen ist, öffne deine Homepage und klicken auf ein paar Links. Schaue die URL-Leiste in deinem Browser an. Wenn deine Links ein Fragezeichen am Ende der URL enthalten, ist deine Website wahrscheinlich auf Parameter angewiesen, um zu funktionieren.
  1. Wähle “A specific Page”
  2. Wähle “Simple URL match”
  3. Gebe deine URL in die Box ein:
  4. Beispiel: https://www.craftconversions.de/

 

Hinweis: Die Regel "Einfache URL-Übereinstimmung", die du gerade ausgewählt habst, funktioniert unabhängig davon, ob du http oder https eingeben und ob du ein www am Anfang der URL eingeben hast oder nicht. Sie wird auch  funktionieren, wenn du UTM-Parameter in deine URLs verwendest. Es wird alle diese
Variationen als dieselbe Seite behandeln. Dies ist die empfohlene Regel für die meisten Websites, wenn du eine bestimmte Seite aufzeichnen möchtest.

 

Heatmap spezifische Seite

 

Wenn du den gesamten Traffic aufzeichnen möchten, der auf eine bestimmte Seite geht, und deine Website auf URL-Parameter angewiesen ist (z. B.: https://www.craftconversions.de/?id=1), um bestimmte Seiten
anzuzeigen, oder du nur eine genaue URL aufzeichnen möchtest:

Hinweis 1: Wenn du nicht weißt ob deine Website auf URL-Parameter angewiesen ist, öffne deine Homepage und klicken auf ein paar Links. Schauen dann auf die URL-Leiste in deinem Browser. Wenn deine Links ein Fragezeichen am Ende der URL enthalten, ist deine Website wahrscheinlich auf Parameter angewiesen, um zu funktionieren

Hinweis 2: Wenn du diese Methode verwendst, stelle sicher, dass die UTM-Tags nicht dazu führen, dass der
Datenverkehr ungewollt nicht aufgezeichnet wird. z.b Wenn du diese Methode wählst und als URL "https://www.craftconversions.de/" als URL.

Der Traffic, der über die URL "https://www.craftconversions.de/utm_source=facebook" geht, wird von deiner Heatmap nicht erfasst.

 

Wenn du nur den Verkehr von einer bestimmten Quelle aufzeichnen möchtest, der auf eine bestimmte Seite und deiner Website geht:

 

  • Wähle “Visit one of multiple similar pages”
  • Wähle “URL Regular Expression”  In das Textfeld gebe deinen "Regular Expression" ein. Führen dazu die
    folgenden Schritte aus:
  • Notiere dir die UTM-Parameter für diese spezifische Verkehrsquelle.
  • Wenn du nur eine bestimmte Quelle und ein bestimmtes Medium (oder auch eine Kampagne)
    aufzeichnen möchtest, kannst du dies auch in diesem Schritt angeben, anstatt nur die Quelle
  • Beispiel 1: utm_source=facebook
  • Notiere dir die URL die du aufnehmen möchtest
  • Beispiel 2 : https://www.craftconversions.de/termin
  • Für die URL der Seite, die du dir gerade im oberen Schritt notiert hast: Fügen vor jedem Schrägstrich oder Punkt, den Sie in der URL haben, einen Backslash ein.
  • Beispiel 3: craftconversions\.de\/termin/
  • Setzen das Ergebnis vom Beispiel 1) und Beispiel 3) in den folgenden Code ein:
  • Hinweis: Ersetzte alles in Grün, auch die eckigen Klammern

28.^(?=.*\[Beispiel B - Deine UTM Quelle] \b)(?=.*\b[Beispiel C - Deine URL mit Backslashes]($|\?)).*$

 

Beispiel: ^(?=.*\utm_source=facebook\b)(?=.*\craftconversions\.de\/termin/($|\?)).*$

  • Füge diesen Code in das Textfeld ein

 

Heatmap ähnliche Seiten

 

Wenn du den gesamten Traffic aufzeichnen möchtest, der auf mehrere Seiten geht, und die Daten bündeln möchtest (z. B.: Du möchtest sehen, wie deine Vorlage unabhängig vom Inhalt, der
sich darin befindet, abschneidet, oder mehrere Seiten haben denselben Inhalt):

 

  • Wähle “Similiar Pages”
  • Wähle “URL Regular Expression”
  • In das Textfeld gebe deine "Regular Expression" ein. Führe dazu die folgenden
    Schritte aus:
  • Erstelle eine Liste mit allen URLs, die du auf derselben Heatmap aufgezeichnet haben möchtest.
  • Beispiel: https://www.craftconversions.de/termin, https://www.craftconversions.de/test https://www.craftconversions.de/kontakt https://www.craftconversions.de/blog
  • Füge bei jeder URL vor jedem Schrägstrich oder Punkt, den du in der URL hast, einen Backslash ein
    und füge die Symbole ($|\?) am Ende hinzu.
  • Beispiel: https:\/\/www\.craftconversions.de\/termin\/($|\?) 
  • Füge alle in einer Textzeilezusammen und trennen sie mit einem Pipe-Symbol |
  • Beispiel:

 

https:\/\/www\.craftconversions.de\/termin\/($|\?)|https:\/\/www\.craftconv
ersions.de\/($|\?)

|https:\/\/www\.craftconversions.de\/kontakt\/($|\?)

|https:\/\/www\.craftconversions.de\/blog\/($|\?)|https:\/\/www\.craftconversions.de\/test\/($|\?)

 

Füge den Code in die URL Zeile:

 

Ausschluss von internem Verkehr aus Ihren Heatmaps

 

Ausschluss Ihrer aktuellen IP-Adresse:

  1. Öffnen in deinem Browser https://insights.hotjar.com/settings/ip
  2. Klicke "Your OWN IP"
  3. Das war's! Wiederhole diesen Vorgang nun für alle Netzwerke, über die du oder Ihre Mitarbeiter möglicherweise auf deine Website zugreifen. Wichtig: Benutze keinen VPN da sich die IPS dort ständig ändern

 

Analysiere deinen Heatmap Aufnahmen

 

Klicke dafür auf die Seitenleisten "Heatmaps" -> "View Heatmap"

 

Heatmap ansehen

 

Du sieht dann eine Übersicht deiner Heatmap(s)

 

Heatmap Webseite installieren

 

Das war's du hast nun erfolgreich alle Schritte gemacht um Heatmaps sowie Recordings aufzunehmen. Somit kannst du diese Daten auswerten und deine Webseite weiter optimieren

Fragen oder Lob? Schreib mir doch einfach in den Kommentaren

 

 


ÜBER DEN AUTOR

Christopher Potthast

Christopher Potthast

Christopher Potthast (Craftconversion) ist Experte für Online-Marketing und hat bereits zahlreiche Projekte aufgebaut in denen er sein Wissen unter Beweis gestellt hat. In diesem Blog erfährst du mehr über seine Expertise.

Abonniere unseren Newsletter

Empfehlungen und Eindrücke aus der direkten Praxis - für dein Business Alltag!

Wir sind Ihr Ansprechpartner rund um das Thema Online Marketing

SEO Agentur
Online Marketing Blog