So installierst du eine Heatmap auf deine Website

Ziel: Heatmaps auf deine Website 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 Analytics nicht 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.

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. Check-out Seite bzw. die einzelnen 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, sodass 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.

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“

   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”.

     6. Schließe das Pop-up-Fenster

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

Installation von Hotjar mit dem Google Tag Manager

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

• Rufe die URL http://tagmanager.google.com und logge dich mit deinen Daten ein.
• Wähle den passenden Container aus

• Rufe “Tags” auf:

Klicke auf „Neu“ und benenne deinen 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“

Ö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:

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.

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“.

Du solltest nun eine Erfolgsmeldung sehen:

Einrichten von Heatmaps

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

• 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.

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 hast, 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.

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 verwendest, 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

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“

Du sieht dann eine Übersicht deiner Heatmap(s)

Fertig, du hast nun erfolgreich alle Schritte gemacht, um Heatmaps sowie Recordings aufzunehmen. Somit kannst du diese Daten auswerten und deine Webseite weiter optimieren