Wie man eine kostenlose Google-Analytics-Heatmap erstellt

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.

Was ist eine Google-Analytics-Heatmap?

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.

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.

Warum brauchen GA-Nutzende eigentlich Heatmaps?

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

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.

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.

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.

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.

Für welche Seiten sollte man eine Heatmap erstellen?

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.