Wie man WordPress Heatmaps einrichtet (2 einfache Wege)

Als ich anfing, an meinen WordPress-Websites zu arbeiten, habe ich meist nur vermutet, was die Besucher wollten. Erst als ich anfing, Heatmaps zu verwenden, verstand ich wirklich, wie die Leute mit meiner Website interagierten – wo sie klickten, wie weit sie scrollten und was tatsächlich ihre Aufmerksamkeit erregte.

Wenn Sie versuchen, Ihre WordPress Website zu verbessern, aber nicht sicher sind, was funktioniert und was nicht, dann können Heatmaps Ihnen einige Antworten geben.

Nachdem ich im Laufe der Jahre mehrere Werkzeuge getestet habe, habe ich mich auf 2 einfache Möglichkeiten beschränkt, Heatmaps in WordPress einzurichten: Microsoft Clarity und UserFeedback.

In diesem Leitfaden werde ich jeden Einrichtungsprozess Schritt für Schritt durchgehen. Am Ende haben Sie die Werkzeuge, die Sie brauchen, um datengesteuerte Änderungen an Ihrer Website vorzunehmen. 🔥

Warum müssen Sie WordPress-Heatmaps einrichten?

Eine Heatmap ist ein visuelles Werkzeug, das Ihnen genau zeigt, wie Besucher mit Ihrer WordPress-Website interagieren. Es verwendet eine Farbcodierung, um die am meisten und am wenigsten aktiven Bereiche einer Seite hervorzuheben:

• Rote, orange und gelbe (“heiße”) Bereiche zeigen, wo Besucher klicken, tippen oder die meiste Zeit verbringen.
• Blaue und grüne (“kalte”) Bereiche zeigen Flecken, die wenig oder keine Aufmerksamkeit erhalten.

Durch die Darstellung dieser Aktivitäten können Sie aufhören zu raten, was funktioniert und was nicht. Mit anderen Worten: Heatmaps helfen dabei, das Rätselraten zu beenden, indem sie Ihnen klare Einblicke in das Besucherverhalten geben.

Sie helfen Ihnen bei der Beantwortung wichtiger Fragen, wie zum Beispiel:

• Klicken die Leute auf Ihre CTA Buttons?
• Scrollen sie weit genug nach unten, um Ihren Inhalt zu sehen?
• Klicken sie auf Dinge, die gar nichts bewirken?

Mit diesen Informationen können Sie intelligente Änderungen an Ihrer Website vornehmen. Sie werden wissen, was zu reparieren, was zu verschieben und was zu verbessern ist.

Sie können diese Erkenntnisse nutzen, um mehr Besucher zu gewinnen, den Umsatz zu steigern oder die Zahl der Anfragen potenzieller Kunden zu erhöhen – und das alles durch einfache Änderungen, die darauf basieren, wie Ihre Website tatsächlich genutzt wird.

In den folgenden Abschnitten zeige ich Ihnen, wie Sie WordPress-Heatmaps mit 2 der besten Werkzeuge zum Hinzufügen von Heatmaps einrichten können. Das eine ist völlig kostenlos, das andere ist eine Premium Option mit zusätzlichen Funktionen.

Nutzen Sie die unten stehenden Links, um zu Ihrer bevorzugten Methode zu gelangen:

Schritt 0: Vorbereiten Ihrer WordPress Website für Heatmaps

Bevor Sie Heatmaps zu Ihrer WordPress Website hinzufügen, sollten Sie sicherstellen, dass Ihre Website richtig vorbereitet ist. Wenn Sie einige Vorsichtsmaßnahmen ergreifen, können Sie Probleme vermeiden, wenn Sie anfangen.

Wenn Sie zum ersten Mal Heatmaps zu Ihrer Website hinzufügen, ist es ratsam, alles zunächst auf einer Staging Website zu testen.

Eine Staging-Website ist im Wesentlichen ein Duplikat Ihrer Live-Website, auf der Sie Änderungen vornehmen und neue Funktionen testen können, ohne dass Ihre echte Website beeinträchtigt wird. So können Sie neue Werkzeuge wie Heatmaps auf sichere Weise ausprobieren, ohne dass der Benutzer gestört wird.

Dann können Sie die Änderungen einfach live schalten, um sie auf Ihrer echten Website anzuwenden.

Wenn Sie Bluehost nutzen, können Sie dank der schnellen 1-Klick-Lösung problemlos eine Website erstellen.

Wenn Sie jedoch keinen Zugang zu Staging über Ihr Hosting haben, können Sie auch Plugins wie WP Stagecoach verwenden, um Websites zu erstellen.

Eine vollständige Anleitung zum Erstellen einer Website für WordPress finden Sie in unserem Leitfaden.

Erstellen Sie außerdem immer eine Sicherungskopie Ihrer Website, bevor Sie größere Änderungen vornehmen. Eine Sicherungskopie stellt sicher, dass Sie Ihre Website im Falle eines Fehlers während des Einrichtungsprozesses problemlos wiederherstellen können, ohne dass wichtige Daten verloren gehen.

Und schließlich sollten Sie daran denken, dass Heatmaps am besten funktionieren, wenn sie zusammen mit anderen analytischen Werkzeugen und dem Feedback der Benutzer verwendet werden.

Betrachten Sie sie als Ausgangspunkt für die Aufdeckung potenzieller Probleme oder Möglichkeiten, nicht als einzige Informationsquelle. Wenn Sie die Erkenntnisse aus Heatmaps mit umfassenderen Daten kombinieren, erhalten Sie ein klareres, genaueres Bild davon, wie Besucher mit Ihrer Website interagieren.

Methode 1: WordPress-Heatmaps mit Microsoft Clarity einrichten

Microsoft Clarity ist ein kostenloses, benutzerfreundliches Tool für Heatmaps und Sitzungsaufzeichnungen, das sich nahtlos in WordPress integrieren lässt. Es eignet sich am besten für die Analyse der gesamten Website und ist ideal für Anfänger, Blogger und Kleinunternehmer, die das Besucherverhalten verstehen möchten.

Deshalb verwenden wir es auf einigen unserer Partner-Websites, um Heatmaps zu verfolgen und Einblicke in die Interaktionen der Benutzer zu gewinnen.

Schritt 1: Erstellen Sie ein kostenloses Microsoft Clarity Konto

Um WordPress-Heatmaps mit Microsoft Clarity einzurichten, benötigen Sie zunächst ein Konto.

Rufen Sie die Microsoft Clarity-Website auf und klicken Sie auf “Erste Schritte”.

In dem daraufhin angezeigten Popup sehen Sie, dass Sie sich mit einem Microsoft-, Facebook- oder Google-Konto anmelden können. Klicken Sie einfach auf das Konto, das Sie bevorzugen.

Für dieses Tutorial wähle ich “Bei Google anmelden”.

Danach können Sie den Anmeldeprozess durchlaufen, indem Sie das entsprechende Konto auswählen.

Klicken Sie dann auf der Bestätigungsseite auf “Weiter”.

Bei der Anmeldung werden Sie aufgefordert, Ihre E-Mail-Adresse zu bestätigen.

Vergessen Sie nicht, die Clarity-Nutzungsbedingungen zu überprüfen und das Kontrollkästchen anzuklicken, bevor Sie fortfahren.

Sie werden dann 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.

Damit sind Sie bereit, das Microsoft Clarity WordPress Plugin zu installieren, um Heatmaps auf Ihrer Website einzurichten.

Schritt 2: Installieren Sie Microsoft Clarity auf Ihrer WordPress Website

In diesem Schritt installieren Sie das Microsoft Clarity Plugin und verbinden es mit dem Konto, das Sie gerade erstellt haben.

Gehen Sie in Ihrem WordPress-Dashboard auf Plugins ” Add New Plugin.

Verwenden Sie die Suchleiste, um das Microsoft Clarity Plugin schnell zu finden.

Klicken Sie einfach auf dem entsprechenden Suchergebnis auf “Jetzt installieren” und dann noch einmal auf “Aktivieren”, wenn es erscheint.

Eine schrittweise Anleitung finden Sie in unserem Leitfaden zur Installation eines WordPress Plugins.

Nach der Aktivierung des Plugins wird im nächsten Schritt ein Clarity-Projekt ausgewählt, um beide Werkzeuge zu verbinden.

Sie können von Ihrem WordPress-Administrationsbereich zu Clarity navigieren und das gerade erstellte Projekt aus dem Dropdown-Menü auswählen.

In den nächsten Sekunden sollten Sie die Meldung “Projekt erfolgreich integriert” erhalten.

Weitere Details finden Sie in unserer Anleitung zur Installation von Microsoft Clarity Analytics in WordPress.

Hinweis: Wenn Sie ein WordPress Plugin zum Zwischenspeichern verwenden, müssen Sie den WordPress Cache löschen, nachdem Sie Microsoft Clarity mit Ihrer Website verbunden haben. Dies ist wichtig, da Microsoft sonst Ihre Website einige Stunden lang nicht verifizieren kann.

Schritt 3: Heatmaps in Microsoft Clarity einrichten

Sobald Sie Microsoft Clarity angeschlossen haben, beginnt es automatisch mit dem Tracking Ihrer Besucher – Sie müssen keinen Code manuell einfügen oder mit Themes-Dateien herumspielen.

In Ihrem Clarity-Dashboard finden Sie nützliche Berichte, die Ihnen einen Überblick darüber verschaffen, wie Menschen mit Ihrem WordPress-Blog oder Ihrer Website interagieren.

Einige der Schlüsselkennzahlen sind:

• Sitzungen – Hier wird angezeigt, wie viele individuelle Besuche Ihre Website erhalten hat.
• Seiten pro Sitzung – Gibt an, wie viele Seiten ein Besucher während einer Sitzung angezeigt hat.
• Scrolltiefe – Zeigt an, wie weit die Benutzer auf jeder Seite nach unten scrollen.
• Aktive Zeit – Verfolgt, wie lange sich Benutzer aktiv mit Ihrer Seite beschäftigen (und sie nicht nur in einem Tab im Hintergrund geöffnet lassen).

Sie finden auch vorgefertigte Widgets wie die “Benutzerübersicht”, die die Besuchertypen und Geräte hervorhebt.

Darüber hinaus gibt es Einblicke in das Verhalten der Benutzer, wie z. B. Wutklicks (wenn Benutzer wiederholt aus Frustration klicken) und übermäßiges Scrollen (wenn Benutzer zu viel scrollen, möglicherweise auf der Suche nach etwas).

Um Ihre Heatmaps zu sehen, wechseln Sie auf den 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 Hauptaufrufe: Klicks, Blättern und Aufmerksamkeit.

Sie können auf “Klick” umschalten, um zu sehen, wo die Besucher am häufigsten klicken.

Um Ihre Bildlauftiefe zu ermitteln, wechseln Sie einfach zum Tab “Bildlauf”.

Hier zeigt Clarity an, wie weit die Benutzer auf Ihrer Seite nach unten scrollen. So können Sie feststellen, ob sie Ihre wichtigsten Inhalte verpassen.

Klicken Sie abschließend auf den Button‘Aufmerksamkeit‘, um die durchschnittliche Verweildauer der Besucher auf den verschiedenen Teilen der Seite zu sehen.

Rote Zonen bedeuten höhere Aufmerksamkeit, 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 von MonsterInsights kombiniert Heatmap-ähnliches Feedback mit Befragungen und erweitertem Targeting. Es ist eine leistungsstarke Option für wachsende Websites, Online-Shops und Agenturen, die tiefere Einblicke und mehr Kontrolle darüber benötigen, wie sie Besucher-Feedback sammeln.

Bei WPBeginner haben wir UserFeedback genutzt, um Einblicke in die Wünsche und Erwartungen unserer Webdesign-Kunden zu gewinnen. Wir haben großartige Erfahrungen damit gemacht. Lesen Sie unsere vollständige UserFeedback Rezension, um zu sehen, warum wir es empfehlen!

Schritt 1: UserFeedback installieren und aktivieren

Zunächst müssen Sie ein UserFeedback Konto einrichten. Besuchen Sie dazu die UserFeedback-Website und melden Sie sich für einen Plan an.

Sobald Sie sich für ein Konto angemeldet haben, werden Sie auf das Dashboard Ihres UserFeedback-Kontos weitergeleitet, wo Sie den Link zum Herunterladen der UserFeedback-Zip-Datei und Ihren Lizenzschlüssel finden.

Jetzt ist es an der Zeit, das Plugin zu installieren.

Gehen Sie in Ihrem WordPress-Dashboard auf Plugins ” Neu hinzufügen.

In der nächsten Ansicht suchen wir nach UserFeedback.

Sie können das Plugin dann wie jedes andere WordPress Plugin installieren und aktivieren.

Sind Sie neu in der Installation von Plugins? Hier finden Sie eine detaillierte Anleitung zur Installation eines WordPress Plugins.

Nach der Aktivierung können Sie Ihren Lizenzschlüssel eingeben, um alle Funktionen freizuschalten, die in Ihrem Tarif enthalten sind.

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 den Button “Verifizieren”, um den Verifizierungsprozess zu starten.

In wenigen Sekunden sollten Sie eine Erfolgsmeldung zur Verifizierung sehen.

Schritt 2: Aktivieren Sie das Heatmaps Add-on

Gehen wir nun zu UserFeedback ” Add-ons, um das Heatmaps Add-on zu installieren.

Scrollen Sie einfach auf der Seite nach unten, um das Heatmaps Add-on zu finden, und klicken Sie in der entsprechenden Box auf “Add-on installieren”.

Vergewissern Sie sich nach der Installation, dass die Anwendung aktiviert ist, indem Sie auf den Button “Aktivieren” klicken.

Schritt 3: Erstellen Sie eine neue Heatmap

Wenn das Add-on Heatmaps aktiviert ist, können Sie jetzt die Heatmap Ihrer Website erstellen.

Gehen Sie in Ihrem WordPress-Dashboard auf UserFeedback ” Heatmaps und klicken Sie auf den Button “Neue Heatmap”.

Erweitern Sie in dem daraufhin angezeigten Popup das Dropdown-Menü, um die Seite auszuwählen, die Sie verfolgen möchten. Sie können zum Beispiel eine Heatmap für Ihre Homepage, Ihre Landing Page oder Ihren Blog-Beitrag erstellen.

Klicken Sie auf den Button “Erstellen”, um die Heatmap zu erstellen.

Schritt 4: Anzeigen der Heatmap-Ergebnisse

Nachdem Sie eine Heatmap erstellt haben, beginnt UserFeedback sofort mit der Erfassung von Benutzerdaten.

Gehen wir zu UserFeedback ” Heatmaps und klicken wir auf eine Heatmap, um detaillierte visuelle Einblicke zu erhalten.

Auf der nächsten Ansicht können Sie detaillierte Informationen über Ihre Besucher anzeigen, darunter auch Aufrufe:

• Device Filter – Vergleichen Sie das Verhalten der Benutzer auf Desktop, Tablet und Handy.
• Klicks – Sehen Sie genau, wo die Besucher auf Ihrer Seite klicken.
• Mausbewegungen – Verfolgen Sie, wie Benutzer ihre Maus über die Ansicht bewegen.

Wenn Sie Ihre Website über mehrere Kanäle bewerben, können Sie die Daten auch nach UTM-Kampagne, Quelle oder Medium filtern. So können Sie nachvollziehen, wie Besucher aus verschiedenen Marketingmaßnahmen mit Ihrer Website interagieren.

Und das war’s auch schon – Sie haben WordPress-Heatmaps mit UserFeedback erfolgreich eingerichtet!

Bonus-Schritte: Maximieren Sie Ihre Heatmap-Einblicke 🔥.

Heatmaps sind nur dann nützlich, wenn Sie wissen, wie Sie auf das, was sie Ihnen sagen, reagieren können. Hier erfahren Sie, wie Sie die Erkenntnisse aus Ihren Heatmaps in echte Verbesserungen für Ihre WordPress Website umsetzen können.

Festlegen, wo Besucher absteigen

Mithilfe von Bildlaufkarten können Sie sehen, wie weit Ihre Besucher auf einer Seite nach unten gehen. Wenn wichtige Inhalte zu weit unten auf der Seite vergraben sind, werden sie von den meisten Besuchern nicht gesehen.

Sie können versuchen, Schlüsselelemente wie CTAs oder Angebote weiter oben auf der Seite zu platzieren und lange Seiten durch kleinere Abschnitte und klare Überschriften aufzulockern. Sie können auch Datumsfilter verwenden, um zu verfolgen, wie diese Änderungen das Besucherverhalten im Laufe der Zeit beeinflussen.

Diese kleine Änderung kann die Absprungrate senken und Ihre Besucher länger bei der Stange halten.

Erkennen und Lösen von Verwirrungen bei Benutzern

Manchmal versuchen Besucher, auf Bilder, Icons oder Text zu klicken, die nicht anklickbar sind. Das zeigt, dass sie verwirrt sind oder etwas anderes erwartet haben.

Sie können Ihre Klickkarten und Mausbewegungen überprüfen, um diese Bereiche zu erkennen. Falls nötig, können Sie diese Bilder verlinken oder Buttons in der Nähe hinzufügen, um es den Benutzern leichter zu machen.

Sie können auch eine schnelle Befragung mit UserFeedback einrichten, um zu erfahren, was die Benutzer zu finden erwartet haben.

Identifizieren und Beheben von Problemen bei der Navigation

Wenn Sie feststellen, dass Besucher häufig zwischen Seiten hin- und herspringen, ohne eine klare Richtung zu erkennen, ist das ein Zeichen dafür, dass Ihre Navigation verwirrend sein könnte.

Vereinfachen Sie Ihre Navigation, indem Sie sicherstellen, dass die Informationen leicht zu finden sind, und korrigieren Sie alles, was Verwirrung stiften könnte. Sie können auch wichtige Schritte auf Ihrer Website wie ein Erstbesucher durchgehen, um sicherzustellen, dass alles richtig funktioniert.

Vielleicht interessiert Sie auch unsere Anleitung zum Erstellen eines individuellen Navigationsmenüs in WordPress.

Machen Sie Ihre CTA Buttons unübersehbar

Wenn Ihre CTAs (Call-to-Action Buttons) nicht genügend Klicks erhalten, empfehle ich Ihnen, die Farbe, den Text oder die Platzierung anzupassen, damit sie besser zur Geltung kommen.

Nutzen Sie Ihre Erkenntnisse über die Mausbewegungen, um ein Zögern vor dem Klicken zu erkennen, und überprüfen Sie Gerätefilter, um sicherzustellen, dass Ihre CTAs auf allen Geräten, insbesondere auf Mobilgeräten, sichtbar und leicht anklickbar sind.

Ich hoffe, dieser Artikel hat Ihnen geholfen, WordPress-Heatmaps einzurichten. Als Nächstes sollten Sie sich unsere von Experten kuratierten Tipps für Landing Pages ansehen, um die Konversionsrate von WordPress in die Höhe zu treiben, sowie unseren ultimativen Leitfaden zum Geolocation-Targeting.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.