Als ich anfing, an meinen WordPress-Websites zu arbeiten, habe ich meistens geraten, was die Besucher wollten. Erst als ich anfing, Heatmaps zu verwenden, verstand ich wirklich, wie die Leute mit meiner Website interagierten – wohin sie klickten, wie weit sie scrollten und was ihre Aufmerksamkeit erregte.
Wenn Sie versuchen, Ihre WordPress-Site zu verbessern, aber nicht sicher sind, was funktioniert und was nicht, können Heatmaps Ihnen einige Antworten geben.
Nach dem Testen mehrerer Tools habe ich zwei einfache Möglichkeiten zur Einrichtung von Heatmaps in WordPress eingegrenzt: Microsoft Clarity und UserFeedback.
In dieser Schritt-für-Schritt-Anleitung führe ich Sie durch die Einrichtung beider Methoden, damit Sie die Tools haben, die Sie benötigen, um datengesteuerte Verbesserungen an Ihrer Website vorzunehmen. 🔥
Warum müssen Sie WordPress-Heatmaps einrichten?
Heatmaps zeigen Ihnen genau, wie Menschen mit Ihrer Website interagieren, sodass Sie Ihre Inhalte, Ihr Layout und Ihre Conversions basierend auf dem tatsächlichen Besucher-Verhalten verbessern können. Sie verwenden eine Farbkodierung, um die aktivsten und am wenigsten aktiven Bereiche einer Seite hervorzuheben:
- Rote, orange und gelbe („heiße“) Bereiche zeigen an, wo Besucher klicken, tippen oder die meiste Zeit verbringen.
- Blaue und grüne („kalte“) Bereiche zeigen Stellen an, die wenig oder gar keine Aufmerksamkeit erhalten.
Indem Sie diese Aktivität auf Ihrer WordPress-Website abgebildet sehen, können Sie aufhören zu raten, was funktioniert und was nicht. Mit anderen Worten, Heatmaps helfen, das Rätselraten zu beseitigen, indem sie Ihnen klare Einblicke in das Besucher-Verhalten geben.
Heatmaps helfen Ihnen, wichtige Fragen zu beantworten, wie zum Beispiel:
- Klicken die Leute auf Ihre CTA-Buttons?
- Scrollen sie weit genug nach unten, um Ihre Inhalte zu sehen?
- Klicken sie auf Dinge, die nichts bewirken?
Mit diesen Informationen können Sie intelligente Änderungen an Ihrer Website vornehmen. Sie wissen, was Sie reparieren, verschieben und verbessern müssen.
Sie können diese Erkenntnisse nutzen, um mehr Leser zu gewinnen, Verkäufe zu steigern oder Anfragen von potenziellen Kunden zu erhöhen. Alles durch einfache Änderungen, basierend darauf, wie Menschen Ihre Website tatsächlich nutzen.
In den folgenden Abschnitten zeige ich Ihnen, wie Sie Heatmaps in WordPress mit zwei der besten Heatmap- und Session-Recording-Tools einrichten. Eines ist ein komplett kostenloses Analyse-Tool, während das andere eine Premium-Option mit zusätzlichen Funktionen ist.
Nutzen Sie gerne die Sprunglinks unten, um zu Ihrer bevorzugten Methode zu gelangen:
- Schritt 0: Vorbereitung Ihrer WordPress-Website für Heatmaps
- Method 1: Set Up WordPress Heatmaps Using Microsoft Clarity (Free)
- Method 2: Set Up WordPress Heatmaps Using UserFeedback (Best for Heatmaps + User Surveys)
- Bonus Steps: Maximize Your Heatmap Insights 🔥
- Verwandte Anleitungen zur Optimierung von WordPress-Conversions
Schritt 0: Vorbereitung Ihrer WordPress-Website für Heatmaps
Bevor Sie Heatmaps zu Ihrer WordPress-Website hinzufügen, ist es wichtig, Ihre Website richtig vorzubereiten. Einige Vorsichtsmaßnahmen helfen, Probleme zu vermeiden und sicherzustellen, dass Sie die genauesten Daten erhalten.
Wenn Sie zum ersten Mal Heatmaps zu Ihrer Live-Website hinzufügen, ist es eine gute Idee, alles zuerst auf einer Staging-Website zu testen.
Eine Staging-Website ist eine private Kopie Ihrer Live-Website, auf der Sie neue Funktionen wie Heatmaps sicher testen können, ohne das Benutzererlebnis Ihrer echten Besucher zu beeinträchtigen.
Sobald Sie mit den Änderungen zufrieden sind, können Sie sie auf Ihrer echten Website live schalten.
Wenn Sie Bluehost verwenden, können Sie mit ihrem integrierten Tool mit nur einem Klick eine Staging-Website erstellen.
Wenn Ihr Hoster jedoch kein Staging unterstützt, können Sie Plugins wie WP Stagecoach verwenden, um eine Staging-Website zu erstellen.
Eine vollständige Anleitung finden Sie in unserem Leitfaden zum Thema Erstellung einer Staging-Umgebung für WordPress.
Erstellen Sie außerdem immer ein vollständiges Backup Ihrer Website, bevor Sie größere Änderungen vornehmen. Dies stellt sicher, dass Sie Ihre Website im Falle eines Problems ohne Datenverlust in ihren vorherigen Zustand zurückversetzen können.
Heatmaps sind ein mächtiges Werkzeug, aber für ein vollständiges Bild des Besucher-Verhaltens sollten Sie sie zusammen mit anderen Analyse-Tools und Benutzer-Feedback verwenden.
Betrachten Sie sie als Ausgangspunkt, um potenzielle Probleme oder Chancen aufzudecken, nicht als einzige Informationsquelle. Die Kombination von Erkenntnissen aus Heatmaps mit breiteren Daten liefert Ihnen ein klareres und genaueres Bild davon, wie Besucher mit Ihrer Website interagieren.
Methode 1: WordPress Heatmaps mit Microsoft Clarity einrichten
Microsoft Clarity ist ein kostenloses, einfach zu bedienendes Heatmap- und Session-Recording-Tool, das sich in WordPress integrieren lässt. Es eignet sich am besten für die allgemeine Website-Analyse und ist ideal für Anfänger, Blogger und kleine Unternehmen, die automatisch verstehen möchten, wie Besucher mit ihrer Website interagieren.
Deshalb wird es auf vielen Partner-Websites verwendet, um Heatmaps zu verfolgen und Einblicke in Benutzerinteraktionen zu gewinnen.
📌 Wichtig: Clarity sammelt anonymisierte Nutzungsdaten zur Verbesserung seiner Dienste, und dies kann Ihnen helfen, die DSGVO und andere Datenschutzgesetze einzuhalten. Weitere Details finden Sie in unserem Leitfaden zu WordPress und DSGVO.
Schritt 1: Erstellen Sie ein kostenloses Microsoft Clarity-Konto
Um WordPress-Heatmaps mit Microsoft Clarity einzurichten, benötigen Sie zuerst ein Konto.
Gehen Sie zur Microsoft Clarity-Website und klicken Sie auf „Get Started“.
Im erscheinenden Popup sehen Sie, dass Sie sich mit einem Microsoft-, Facebook- oder Google-Konto anmelden können. Klicken Sie einfach auf das, das Sie bevorzugen.
Für dieses Tutorial wähle ich „Bei Google anmelden“ aus.
Danach können Sie den Anmeldeprozess fortsetzen, indem Sie das entsprechende Konto auswählen.
Klicken Sie dann auf der Bestätigungsseite auf „Weiter“.
Nach der Anmeldung werden Sie aufgefordert, Ihre E-Mail-Adresse zu bestätigen.
Vergessen Sie nicht, die Nutzungsbedingungen von Clarity zu prüfen und das Kontrollkästchen anzuklicken, bevor Sie fortfahren.
Anschließend werden Sie aufgefordert, ein neues Projekt für Ihre WordPress-Website zu erstellen.
Sie müssen Ihrem Projekt nur einen Namen geben, die URL Ihrer Website eingeben und Ihre Branche aus dem Dropdown-Menü auswählen.
Wenn das erledigt ist, klicken Sie auf „Neues Projekt hinzufügen“, um die Einrichtung abzuschließen.
Wenn das erledigt ist, sind Sie nun bereit, das Microsoft Clarity WordPress-Plugin zu installieren, um Heatmaps auf Ihrer Website einzurichten.
Schritt 2: Microsoft Clarity auf Ihrer WordPress-Website installieren
In diesem Schritt installieren Sie das Microsoft Clarity Plugin und verbinden es mit dem gerade erstellten Konto.
Gehen wir von Ihrem WordPress-Dashboard zu Plugins » Neues Plugin hinzufügen.
Verwenden Sie die Suchleiste, um das Microsoft Clarity-Plugin schnell zu finden.
Klicken Sie einfach auf „Jetzt installieren“ im entsprechenden Suchergebnis und erneut auf „Aktivieren“, wenn es erscheint.
Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.
Nach der Plugin-Aktivierung besteht der nächste Schritt darin, ein Clarity-Projekt auszuwählen, um beide Tools zu verbinden.
Sie können von Ihrem WordPress-Adminbereich zu Clarity navigieren und das gerade erstellte Projekt aus dem Dropdown-Menü auswählen.
In den nächsten Sekunden sollten Sie eine Benachrichtigung „Projekt erfolgreich integriert“ sehen.
Für weitere Details können Sie unseren Leitfaden zum Installieren von Microsoft Clarity Analytics in WordPress unter Installieren von Microsoft Clarity Analytics in WordPress einsehen.
💡 Hinweis: Wenn Sie ein WordPress-Caching-Plugin verwenden, müssen Sie Ihren WordPress-Cache leeren, nachdem Sie Microsoft Clarity mit Ihrer Website verbunden haben. Dies ist wichtig, da Microsoft Ihre Website andernfalls einige Stunden lang nicht verifizieren kann.
Schritt 3: Heatmaps in Microsoft Clarity einrichten
Sobald Sie Microsoft Clarity verbinden, beginnt es automatisch mit der Verfolgung Ihrer Besucher – Sie müssen keinen Code manuell einfügen oder sich mit Theme-Dateien herumschlagen.
In Ihrem Clarity-Dashboard finden Sie nützliche Berichte, die Ihnen einen Überblick darüber geben, wie Besucher mit Ihrem WordPress-Blog oder Ihrer Website interagieren.
Einige der wichtigsten Kennzahlen sind:
- Sitzungen – Dies zeigt an, wie viele einzelne Besuche Ihre Website erhalten hat.
- Seiten pro Sitzung – Zeigt Ihnen an, wie viele Seiten ein Besucher während einer Sitzung aufgerufen hat.
- Scrolltiefe – Zeigt an, wie weit Benutzer auf jeder Seite nach unten scrollen.
- Aktive Zeit – Verfolgt, wie lange Nutzer aktiv mit Ihrer Seite interagieren (nicht nur, dass sie sie in einem Hintergrund-Tab offen lassen).
Sie finden auch vorgefertigte Widgets wie die 'Benutzerübersicht', die Besuchertypen und Geräte hervorhebt.
Außerdem gibt es Verhaltensanalysen wie Wutklicks (wenn Benutzer frustriert wiederholt klicken) und übermäßiges Scrollen (wenn Benutzer zu viel scrollen, möglicherweise auf der Suche nach etwas).
Um Ihre Heatmaps anzuzeigen, wechseln Sie zum Tab „Heatmaps“.
Dort sehen Sie eine Liste aller Seiten-Heatmaps, die Clarity automatisch aufgezeichnet hat.
Klicken Sie einfach auf eine Seite, die Sie analysieren möchten.
Sobald Sie eine Heatmap öffnen, sehen Sie drei Hauptansichten: Klicks, Scrollen und Aufmerksamkeit.
Sie können zu 'Klicks' wechseln, um zu sehen, wo die Besucher am häufigsten klicken.
Um Ihre Scrolltiefe herauszufinden, wechseln Sie einfach zum Tab „Scroll“.
Hier zeigt Clarity an, wie weit Benutzer auf Ihrer Seite scrollen. Dies hilft zu erkennen, ob sie Ihre wichtigsten Inhalte verpassen.
Klicken Sie abschließend auf die Schaltfläche „Attention“, um die durchschnittliche Zeit zu sehen, die Besucher auf verschiedenen Teilen der Seite verbringen.
Rote Zonen deuten auf höhere Aufmerksamkeit hin, während blaue Bereiche weniger Aufmerksamkeit erhalten.
Das war's – Sie haben erfolgreich WordPress Heatmaps mit Microsoft Clarity eingerichtet!
Methode 2: WordPress-Heatmaps mit UserFeedback einrichten
UserFeedback by MonsterInsights ermöglicht es Ihnen, Umfragen zu erstellen, die eine visuelle Heatmap-Frage enthalten, mit der Benutzer auf ein Bild klicken können, um Feedback zu geben.
Es ist eine großartige Option für wachsende Websites, Online-Shops und Agenturen, die tiefere Einblicke und mehr Kontrolle über das Sammeln von Besucherfeedback wünschen.
Bei WPBeginner haben wir UserFeedback genutzt, um Einblicke zu gewinnen, was unsere Webdesign-Kunden von uns wollen und erwarten. Wir hatten eine großartige Erfahrung damit, und Sie können unseren vollständigen UserFeedback-Testbericht lesen, um zu sehen, warum wir es empfehlen.
Schritt 1: UserFeedback installieren und aktivieren
Zuerst müssen Sie ein UserFeedback-Konto einrichten. Dies können Sie tun, indem Sie die UserFeedback-Website besuchen und sich für einen Plan anmelden.
💡 Hinweis: Es gibt eine kostenlose Version von UserFeedback, um seine Funktionen zu erkunden, aber Sie benötigen den Elite-Plan, um die Heatmaps-Funktion freizuschalten.
Sobald Sie sich für ein Konto angemeldet haben, werden Sie zu Ihrem UserFeedback-Kontodashboard weitergeleitet, wo Sie den Download-Link für die UserFeedback-Zip-Datei und Ihren Lizenzschlüssel finden.
Nun ist es an der Zeit, das Plugin zu installieren.
Von Ihrem WordPress-Dashboard aus müssen Sie zu Plugins » Neues hinzufügen gehen.
Suchen wir auf dem nächsten Bildschirm nach UserFeedback.
Sie können das Plugin dann wie jedes andere WordPress-Plugin installieren und aktivieren.
Neu bei der Installation von Plugins? Hier ist eine detaillierte Anleitung, wie Sie ein WordPress-Plugin installieren.
Nach der Aktivierung können Sie Ihren Lizenzschlüssel eingeben, um alle Pro-Funktionen freizuschalten, die mit Ihrem Plan geliefert werden.
Dazu können Sie zu UserFeedback » Einstellungen navigieren. Kopieren Sie dann einfach Ihren Lizenzschlüssel von Ihrem UserFeedback-Dashboard und fügen Sie ihn in das Feld 'Lizenzschlüssel' ein.
Klicken Sie auf die Schaltfläche „Überprüfen“, um den Verifizierungsprozess zu starten.
In wenigen Sekunden sollten Sie eine Erfolgsmeldung zur Verifizierung sehen.
Schritt 2: Das Heatmaps-Addon aktivieren
Gehen wir nun zu UserFeedback » Addons, um das Heatmaps-Addon zu installieren.
Sie können einfach nach unten auf der Seite scrollen, um das Heatmaps-Addon zu finden und im entsprechenden Feld auf 'Addon installieren' zu klicken.
Stellen Sie nach der Installation sicher, dass sie aktiviert ist, indem Sie auf die Schaltfläche „Aktivieren“ klicken.
Schritt 3: Eine neue Heatmap erstellen
Mit aktiviertem Heatmaps-Addon können Sie nun die Heatmap Ihrer Website erstellen.
Gehen wir in Ihrem WordPress-Dashboard zu UserFeedback » Heatmaps und klicken Sie auf die Schaltfläche „Neue Heatmap“.
Im erscheinenden Popup-Fenster erweitern Sie das Dropdown-Menü, um die spezifische Seite auszuwählen, die Sie verfolgen möchten. Sie können beispielsweise eine Heatmap für Ihre Homepage, eine Landingpage oder einen Blogbeitrag erstellen.
Klicken Sie auf die Schaltfläche „Erstellen“, um die Heatmap einzurichten.
Schritt 4: Heatmap-Ergebnisse anzeigen
Nachdem Sie eine Heatmap erstellt haben, beginnt UserFeedback sofort mit dem Sammeln von Benutzerdaten.
Gehen wir zu UserFeedback » Heatmaps und klicken auf eine Heatmap, um detaillierte visuelle Einblicke zu erhalten.
Auf dem nächsten Bildschirm können Sie detaillierte Einblicke in Ihre Besucher anzeigen, einschließlich:
- Gerätefilter – Vergleichen Sie das Nutzerverhalten auf Desktop, Tablet und Mobilgeräten.
- Klicks – Sehen Sie genau, wohin die Leute auf Ihrer Seite klicken.
- Mausbewegungen – Verfolgen Sie, wie Benutzer ihre Maus über den Bildschirm bewegen.
Wenn Sie Ihre Website über mehrere Kanäle bewerben, können Sie die Daten auch nach UTM-Kampagne, Quelle oder Medium filtern. Dies hilft Ihnen zu verstehen, wie Besucher aus verschiedenen Marketingbemühungen mit Ihrer Website interagieren.
Und das war's schon – Sie haben erfolgreich WordPress Heatmaps mit UserFeedback eingerichtet!
Bonusschritte: Maximieren Sie Ihre Heatmap-Einblicke 🔥
Heatmaps sind nur dann nützlich, wenn Sie wissen, wie Sie auf das reagieren, was sie Ihnen sagen. Hier erfahren Sie, wie Sie diese Erkenntnisse in praktische Verbesserungen für Ihre WordPress-Site umwandeln können.
Wo Besucher abspringen – Beheben
Sie können Scroll-Karten verwenden, um zu sehen, wie weit Ihre Besucher auf einer Seite nach unten scrollen. Wenn wichtige Inhalte zu weit unten auf der Seite vergraben sind, sehen die meisten Leute sie möglicherweise nie.
Sie können versuchen, wichtige Elemente wie CTAs oder Angebote weiter oben auf der Seite zu platzieren und lange Seiten mit kleineren Abschnitten und klaren Überschriften aufzuteilen. Sie können auch Datumsfilter verwenden, um zu verfolgen, wie sich diese Änderungen im Laufe der Zeit auf das Besucherverhalten auswirken.
Diese kleine Änderung kann Absprungraten reduzieren und Ihre Besucher länger binden.
Nutzerverwirrung erkennen und beheben
Manchmal versuchen Besucher, auf Bilder, Symbole oder Text zu klicken, die nicht klickbar sind. Dies zeigt, dass sie verwirrt sind oder etwas anderes erwarten.
Sie können Ihre Klickkarten und Mausbewegungen überprüfen, um diese Bereiche zu identifizieren. Bei Bedarf können Sie diese Bilder verknüpfen oder Schaltflächen in der Nähe hinzufügen, um den Benutzern die Arbeit zu erleichtern.
Sie können auch eine schnelle UserFeedback-Umfrage einrichten, um zu fragen, was die Benutzer erwartet haben zu finden.
Navigationsprobleme identifizieren und beheben
Wenn Sie häufig Besucher sehen, die ohne klare Richtung zwischen Seiten springen, ist dies ein Zeichen dafür, dass Ihre Navigation verwirrend sein könnte.
Vereinfachen Sie Ihre Navigation, indem Sie sicherstellen, dass Informationen leicht zu finden sind, und passen Sie alles an, was Verwirrung stiften könnte. Sie können auch wichtige Schritte auf Ihrer Website wie ein Erstbesucher durchlaufen, um sicherzustellen, dass alles ordnungsgemäß funktioniert.
Möglicherweise möchten Sie auch unseren Leitfaden lesen, wie Sie ein benutzerdefiniertes Navigationsmenü in WordPress erstellen.
Machen Sie Ihre CTA-Buttons unübersehbar
Wenn Ihre CTAs (Call-to-Action-Buttons) nicht genügend Klicks erhalten, versuchen Sie, ihre Farbe, ihren Text oder ihre Platzierung zu ändern, damit sie besser hervorstechen.
Nutzen Sie Ihre Mausbewegungs-Einblicke, um Zögern vor dem Klicken zu erkennen, und überprüfen Sie die Gerätefilter, um sicherzustellen, dass Ihre CTAs auf allen Geräten, insbesondere auf Mobilgeräten, sichtbar und einfach zu klicken sind.
🧑💻 Pro-Tipp: Änderungen an Ihrem Inhalt und Design sind nur der Anfang. Ich empfehle außerdem dringend, A/B-Tests einzurichten, um verschiedene Versionen einer Seite oder eines Elements zu vergleichen, z. B. Schaltflächenplatzierung, Farben oder Schlagzeilentexte, um zu sehen, was am besten funktioniert.
Detaillierte Anweisungen finden Sie in unserem Leitfaden zum Thema A/B-Split-Testing in WordPress.
Verwandte Anleitungen zur Optimierung von WordPress-Conversions
Wir hoffen, dieser Artikel hat Ihnen geholfen, WordPress Heatmaps einzurichten.
Als Nächstes möchten Sie vielleicht unsere von Experten zusammengestellte Liste mit fortgeschrittenen Landingpage-Tipps zur Steigerung von Conversions oder unseren ultimativen Leitfaden zur Geolocation-Targeting in WordPress ansehen:
- Landingpage-Tipps zur Steigerung von WordPress-Conversions
- CTA-Best Practices für bessere Landingpage-Conversions
- Wie man A/B-Split-Tests in WordPress durchführt
- So führen Sie visuelle Regressionstests in WordPress ganz einfach durch
- Ultimativer Leitfaden zum Geolocation-Targeting in WordPress
- Die besten Conversion-Optimierungs-Tools für WordPress
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Haben Sie eine Frage oder einen Vorschlag? Hinterlassen Sie bitte einen Kommentar, um die Diskussion zu beginnen.