Hallo! Hotjar gibt es jetzt auch auf Deutsch 🇩🇪 Jetzt gratis starten.

Lerne / Blog / Artikel

Zurück zum Blog

Wie man eine kostenlose Google-Analytics-Heatmap erstellt

Wenn du hierhergekommen bist, um mehr über Google-Analytics-Heatmaps zu erfahren, haben wir eine gute und eine schlechte Nachricht für dich.

Die schlechte Nachricht 😥: Google hat sein kostenloses Heatmap-Add-on 2017 eingestellt. Aktuelle Bewertungen bestätigen, dass es nicht mehr funktioniert und nicht mit GA4 kompatibel ist. 

Die gute Nachricht 🤗: Es gibt eine andere Möglichkeit, kostenlose Heatmaps zu erstellen, indem du Google-Analytics-Daten mit Hotjar kombinierst – und wir garantieren, dass das funktioniert.

Zuletzt aktualisiert

23 Jan 2024

Lesezeit

5 Min.

Teilen

In diesem Artikel erfährst du, was GA-Heatmaps sind, warum sie nützlich sind und wie du sie in fünf einfachen Schritten einrichten kannst.

Schnell und einfach Heatmaps erstellen 🔥

Melde dich für eine kostenlose Hotjar-Testversion an und finde mit Heatmaps heraus, wie Nutzende auf deiner Website navigieren, klicken und scrollen.

Was ist eine Google-Analytics-Heatmap?

#Google-Analytics-Heatmap in Aktion – die orangefarbenen Tags zeigen den prozentualen Anteil der Klicks
Google-Analytics-Heatmap in Aktion – die orangefarbenen Tags zeigen den prozentualen Anteil der Klicks

Eine Google-Analytics-Heatmap ist eine visuelle Darstellung, die zeigt, wo Besuchende auf deiner Website klicken. Sie basiert auf Daten, die GA über sein Tracking-Snippet sammelt. Vor 2019 konnten GA-Nutzende eine kostenlose Heatmap mit der Google-Erweiterung Page Analytics (by Google) erstellen.

Leider wurde Page Analytics (by Google) 2017 eingestellt und seit 2019 nicht mehr aktualisiert. Es wird von GA4 nicht unterstützt und viele Nutzende (uns eingeschlossen!) haben Probleme, es zum Laufen zu bringen, was zu mehreren Ein-Stern-Bewertungen im Chrome Web Store geführt hat.

#Sehr schlechte Bewertungen der Google-Analytics-Heatmap-Chrome-Erweiterung
Sehr schlechte Bewertungen der Google-Analytics-Heatmap-Chrome-Erweiterung

Selbst wenn du es hinbekommst (viel Glück! 😮‍💨), haben GA-Heatmaps nur eine begrenzte Funktionalität – du bekommst nur eine einfache Klick-Heatmap mit Prozentangaben und nicht die bunte Datenvisualisierung, die du vielleicht erwartest.

#Unterschied zwischen einer einfachen Google-Analytics-Heatmap (links) und einer bunten Hotjar-Move-Heatmap (rechts)
Unterschied zwischen einer einfachen Google-Analytics-Heatmap (links) und einer bunten Hotjar-Move-Heatmap (rechts)

Warum brauchen GA-Nutzende eigentlich Heatmaps?

#Wichtiges Meeting, bei dem es um eine Hotjar-Heatmap ging
Wichtiges Meeting, bei dem es um eine Hotjar-Heatmap ging

Heatmaps sind nicht nur spannend, sondern geben dir auch einen leicht verständlichen Überblick über die Performance einer Website. Sie helfen dir:

👩‍💻 das Nutzerverhalten schnell zu visualisieren;

🖱 zu erkennen, was Nutzende anklicken (und ignorieren);

📈 Seitenbereiche mit hohem Engagement zu identifizieren;

⬇️ zu sehen, wie weit Nutzende auf einer Seite nach unten scrollen;

🐞 Bugs und defekte Seitenelemente zu finden und zu beheben;

🤝 die Zustimmung von Stakeholder:innen für Website-Optimierungen einzuholen;

📊 die Ergebnisse Manager:innen und Kund:innen zu präsentieren;

💡 Ideen für die Conversion Rate Optimization (CRO) zu entwickeln;

🔎 die Ergebnisse von A/B-Tests zu analysieren und Verbesserungen vorzunehmen.

Zum Glück bedeutet das Ende der Google-Analytics-Erweiterung nicht, dass du auf diese großartigen Heatmap-Vorteile verzichten musst. Hotjar Heatmaps ist eines der beliebtesten Heatmap-Tools der Welt – und wir lassen dich so viele Heatmaps erstellen, wie du möchtest. Lies weiter und finde heraus, wie. 👇

Wie man mit Hotjar eine kostenlose Heatmap für eine Website einrichtet

#Scroll-Heatmap (links) und Click-Heatmap (rechts) von Hotjar
Scroll-Heatmap (links) und Click-Heatmap (rechts) von Hotjar

Hotjar (das sind wir, 👋 hallo!) ist eine erstklassige Plattform zur Analyse von Product Experience Insights, die auf über 1 Million Websites eingesetzt wird. Neben unseren erweiterten Plänen für wachsende Unternehmen bietet Hotjar auch einen kostenlosen Plan mit unbegrenzten Heatmaps an. Du hast richtig gelesen: unbegrenzte Heatmaps.

Wenn du Hotjar Heatmaps statt Googles altem Heatmap-Tool verwendest, kannst du:

  • automatisch mehrere Arten von Heatmaps auf einmal erstellen. Dazu gehören

    • Klick-Heatmaps: Visualisiere die Anzahl der Klicks auf ein beliebiges Element;

    • Scroll-Heatmaps: Erkenne, wie weit Besuchende auf einer Seite nach unten scrollen;

    • Move-Heatmaps: Erkenne, wie Nutzende ihre Maus beim Browsen bewegen;

    • Wutklick-Heatmaps: Finde fehlerhafte oder verwirrende Elemente;

    • Engagement-Zonen-Heatmaps: Kombiniere Klick-, Scroll- und Move-Heatmaps, um Elemente anzuzeigen, die die meiste Aufmerksamkeit und Interaktion auf sich ziehen.

  • dir Heatmaps ansehen, die nach Besucherdaten wie Land, Gerät und Traffic-Quelle segmentiert sind.

  • einen Link zu einer Heatmap mit deinem Team, Stakeholder:innen und Kund:innen teilen.

  • Heatmap-Daten als Bild oder .jpg-Datei herunterladen und sie für weitere Datenanalysen exportieren.

  • dich durchklicken, um Session Recordings von einzelnen Nutzenden zu sehen.

Und da sich Hotjar mit Google Analytics integrieren lässt (ab Business-Plan), kannst du Heatmaps auch nach GA-Ereignissen segmentieren.

Wir setzen Hotjar auf allen unseren Seiten ein. Wenn unsere Conversion-Rate nach einer Änderung sinkt, helfen uns unsere Heatmaps, das Problem zu erkennen und zu lösen. Hotjar hat uns geholfen, unsere Website-Strategie zu definieren und die Experience für unsere Kund:innen noch besser zu machen.

Anna Grunanger
Head of Acquisition, Vimcar

Kann’s losgehen? Hier erfährst du, wie du mit Hotjar in fünf Schritten eine Heatmap einrichtest.

Schritt 1: Bei Hotjar anmelden

Melde dich mit deinem Google-Konto oder deiner E-Mail-Adresse an. Hotjar bietet einen kostenlosen Basic-Plan an, der für immer kostenlos ist, sowie kostenlose Testversionen für Premium-Pläne. Du erhältst einen Bestätigungscode per E-Mail, um deine Adresse zu verifizieren. Lege dann ein sicheres Passwort fest und beantworte die Einrichtungsfragen. Gib die URL deiner Website ein (z. B. meinewebsite.de) und klicke auf „Hotjar verwenden“.

Schritt 2: Hotjar-Tracking-Code einfügen und in GA integrieren

Hotjar trackt die Besuchenden deiner Website auf ähnliche Weise wie Google Analytics. Du kannst den Tracking-Code von Hotjar auf verschiedene Arten installieren, z. B. über den Google Tag Manager und das WordPress-Plugin oder indem du das JavaScript-Snippet manuell in den <head> jeder Webseite kopierst, die du tracken möchtest.

Du kannst auch die Google-Analytics-Integration (ab Business-Plan) einrichten, um Heatmaps nach Google-Analytics-Ereignissen zu segmentieren (mehr dazu in Schritt 5 👇).

Schritt 3: Heatmaps-Tool öffnen

Nachdem du dem Tracking-Code etwas Zeit gegeben hast, um ein paar Besuchende zu tracken, klicke im linken Navigationsmenü auf das Heatmaps-Tool.

Get started with heatmaps

Schritt 4: Heatmap-URL eingeben oder aus der Liste der beliebten Seiten auswählen

Verwende die Suchleiste oben auf der Heatmaps-Seite, um eine Heatmap für eine beliebige Seite auf deiner Website anzuzeigen. Gib dazu die URL ein oder wähle aus den vorgeschlagenen beliebten Seiten aus.

Continuous heatmaps

Schritt 5: Zwischen verschiedenen Heatmap-Typen wechseln und nach Google-Analytics-Ereignissen filtern

Klicke auf die Kartentypen-Symbole, um verschiedene Heatmap-Typen anzuzeigen. 

Da Hotjar ähnliche Daten wie Google Analytics erfasst, kannst du deine Heatmaps nach verschiedenen Kategorien filtern, z. B. nach Zeitraum, Gerät oder Exit Page.

Und wenn du GA4 mit Hotjar integriert hast, kannst du die Heatmaps auch nach Google-Analytics-Ereignissen filtern.

Weitere Infos zur Interpretation von Heatmap-Daten findest du in unserem Leitfaden zur Analyse von Heatmaps

Für welche Seiten sollte man eine Heatmap erstellen?

#Ein E-Commerce-Report in Google Analytics, der ein Produkt mit vielen Seitenaufrufen, aber keinen Käufen zeigt
Ein E-Commerce-Report in Google Analytics, der ein Produkt mit vielen Seitenaufrufen, aber keinen Käufen zeigt

Hier ist GA in Verbindung mit Hotjar nützlich: Logge dich in dein Google-Analytics-Konto ein und suche nach Bereichen mit niedriger Performance, z. B. Seiten mit einer hohen Bounce Rate (Absprungrate) oder Exit Rate (Ausstiegsrate) und einer niedrigen Conversion-Rate. Erstelle in Hotjar Heatmaps für diese Seiten, um zu sehen, was die Nutzenden verwirrt und sie zum Verlassen der Seite veranlasst: Gibt es Wutklicks auf defekte Elemente? Scrollen sie nicht weit genug, um den Call-to-Action (CTA) zu sehen?

Gleichzeitig zeigt dir eine Heatmap auf den Seiten mit der besten Conversion-Rate, welche Elemente Aufmerksamkeit auf sich ziehen, sodass du mehr davon hinzufügen kannst.

Du kannst auch die offizielle Google-Analytics-Hotjar-Integration nutzen, um GA-Ereignisse direkt an Hotjar weiterzuleiten und nach Kategorien wie „add_to_cart“ oder „begin_checkout“ zu filtern. So siehst du schnell Heatmaps von Nutzenden, die (nicht) konvertieren.

Ergänze deine Heatmaps und GA-Website-Daten mit qualitativen Insights

Die Verwendung von Heatmaps zusammen mit Google-Analytics-Daten wird die User Experience (UX) auf deiner Website zwar nicht über Nacht verbessern. Aber sie zeigt dir, wo Änderungen nötig sind und worauf du dich konzentrieren solltest. 

Mit quantitativen Webanalysedaten allein kannst du jedoch nicht herausfinden, was deine Kund:innen wirklich motiviert, bei deinem Unternehmen zu kaufen, dir treu zu bleiben und deine Produkte weiterzuempfehlen. 

Mach dir ein umfassendes Bild, indem du GA und Heatmaps mit anderen Hotjar-Tools wie Session Recordings, Umfragen und Nutzerinterviews kombinierst, die alle auf der Hotjar-Plattform verfügbar sind. Das ist dein erster Schritt, um datengestützte Business-Entscheidungen zu treffen, deine Website zu optimieren und deinen Umsatz zu steigern – und eine bessere UX zu bieten als deine Konkurrenz.

Schnell und einfach Heatmaps erstellen 🔥

Melde dich für eine kostenlose Hotjar-Testversion an und finde mit Heatmaps heraus, wie Nutzende auf deiner Website navigieren, klicken und scrollen.

FAQs zu Google-Analytics-Heatmaps