Microsoft Clarity für PrestaShop: Sehen Sie, wie Kunden Ihren Shop wirklich nutzen

Clarity ist weiterhin kostenlos und ohne Sitzungsbegrenzung; die unten beschriebenen Schritte zur Einwilligungssteuerung und PrestaShop-Maskierung entsprechen der aktuellen DSGVO-Praxis.

Ihre Analytics können Ihnen sagen, dass 40% der Besucher eine bestimmte Produktseite verlassen. Sie können Ihnen aber nicht sagen, dass sie abspringen, weil der Warenkorb-Button unter einem hohen Block aus Attributauswahlen liegt und dadurch auf dem Smartphone aus dem ersten Bildschirm rutscht. Zahlen beschreiben das Leck; sie zeigen Ihnen nicht das Loch. Microsoft Clarity ist das Tool, das Ihnen dieses Loch zeigt, es zeichnet echte Sitzungen auf und bündelt Klicks zu Heatmaps, sodass Sie sehen, wie sich Kunden tatsächlich durch Ihren PrestaShop-Shop bewegen, statt aus einer Absprungrate zu raten. Es ist kostenlos, ohne Sitzungsbegrenzung, und genau das macht das Argument "warum eigentlich nicht?" schwer zu widerlegen.

Dieser Leitfaden dreht sich konkret darum, Clarity in PrestaShop sauber zum Laufen zu bringen und die Daten wie ein Shopbetreiber zu lesen, wo Sie das Skript einfügen, damit ein Theme-Update es nicht löscht, was die Aufzeichnungen auf den typischen PrestaShop-Seitentypen zuverlässig sichtbar machen und welche DSGVO-Maskierung Sie wirklich konfigurieren müssen. Die grundsätzlichere Frage, welche Kennzahlen Ihre Aufmerksamkeit überhaupt verdienen, ist ein eigenes Thema, siehe Analytics für Onlineshops: Was Sie messen sollten und was nicht.

Was Clarity Ihnen zeigt, was GA4 nie zeigen wird

Es hilft, die Arbeitsteilung genau zu verstehen, denn Händler verlieren Wochen damit, von einem Tool die Aufgabe des anderen zu erwarten. Google Analytics 4 ist quantitativ und aggregiert: Zahlen, Raten, Segmente, Funnels. Clarity ist qualitativ und individuell: Es zeigt Ihnen einen einzelnen Menschen, der mit einem einzelnen Bildschirm kämpft. Sie brauchen beides, aber für unterschiedliche Fragen.

Der praktische Ablauf ist: Lassen Sie GA4 Ihnen zeigen, welche Seite leckt, und öffnen Sie dann Clarity, um herauszufinden, warum. Eine Absprungrate ist eine Taschenlampe, die in einen Raum leuchtet; eine Sitzungsaufzeichnung ist, als würden Sie hineingehen.

Die drei Dinge, die Clarity erfasst

Sitzungsaufzeichnungen

Clarity spielt echte Besuche als Video ab, Cursorbewegungen, Scrollen, Klicks, Zögern. In einem PrestaShop-Shop sind die wiederkehrenden Aha-Momente banal und behebbar: Ein Kunde fährt wiederholt mit der Maus über ein Produktbild, weil er einen Zoom erwartet, den das Theme nicht eingebunden hat; jemand scrollt auf dem Smartphone am Warenkorb-Button vorbei, weil die Attribut-Dropdowns ihn nach unten gedrückt haben; ein Käufer öffnet das Gutscheinfeld und kommt nicht mehr zurück (er ist losgezogen, um nach einem Code zu suchen). Nichts davon taucht in aggregierten Daten auf. Alles davon ist offensichtlich, sobald Sie die zweite Aufzeichnung ansehen.

Heatmaps

Heatmaps verdichten alle Besucher zu einer gemeinsamen Überlagerung, sodass aus der Anekdote einer einzelnen Aufzeichnung ein Muster wird:

• Klickkarten zeigen, wo Aufmerksamkeit landet. Wenn der heißeste Punkt auf einer Produktseite ein nicht klickbares Badge oder ein statisches Feature-Bild ist, erfüllen Sie eine UX-Erwartung nicht.
• Scrollkarten zeigen die echte Falzgrenze. Wenn 80% der Besucher den Cross-Selling-Block oder den vertrauensbildenden Text, an dem Sie einen Tag geschrieben haben, nie erreichen, ist er praktisch unsichtbar, und im Standard-Produkt-Template von PrestaShop unterscheidet sich die Falzposition je nach Theme-Variante und Bildschirmgröße deutlich.
• Bereichskarten zeigen, welche Seitenbereiche Engagement erzeugen, und damit, was weiter nach oben gehört.

Frustrationssignale

Hier verdient Clarity seinen Platz, und genau hier erkennt es wirklich mehr als die meisten Alternativen. Es markiert automatisch Rage Clicks (schnelle Wiederholungsklicks auf ein Element, meist etwas Defektes oder Reaktionsloses), Dead Clicks (Klicks auf Dinge, die interaktiv aussehen, es aber nicht sind), und Quick Backs (ein Besucher landet auf der Seite und springt sofort zurück, ein Signal dafür, dass die Seite nicht hielt, was der Link versprach). Jede Markierung ist als Kohorte filterbar, sodass Sie direkt zu "zeige mir jede Sitzung mit einem Rage Click auf der Warenkorbseite" springen können, statt Aufzeichnungen zufällig anzusehen.

Clarity in PrestaShop installieren, ohne es beim nächsten Theme-Update zu verlieren

Clarity ist ein einzelnes JavaScript-Snippet, das in den <head> gehört und auf jeder Seite geladen wird. Die Falle ist, wo Sie es einfügen, denn die naheliegende Stelle ist zugleich die anfällige.

Fügen Sie es nicht direkt in das Theme-Template ein. Eine Änderung an themes/your-theme/templates/_partials/head.tpl funktioniert bis zum nächsten Theme-Update oder Theme-Wechsel, der sie überschreibt, und Ihr Tracking stirbt unbemerkt, Sie merken es wochenlang nicht, weil sichtbar nichts kaputtgeht. Der ganze Zweck von Verhaltensanalyse wird durch eine Datenlücke untergraben, von der Sie nichts wissen.

Zwei robuste Wege, in dieser Reihenfolge:

• Über Google Tag Manager. Wenn Sie bereits einen GTM-Container nutzen, fügen Sie Clarity als Custom-HTML-Tag hinzu, das auf allen Seiten auslöst und hinter Ihrem Einwilligungs-Trigger liegt (mehr dazu unten). So bleiben alle Drittanbieter-Skripte an einem prüfbaren Ort und vollständig aus Ihrem Theme heraus, aus demselben Grund, den wir in Tracking mit GTM ohne Codeänderungen einrichten erklären. Was bringt das? Ein Theme-Update kann es nicht berühren, und Sie schalten es über ein einziges Dashboard ein oder aus.
• Über ein Header-Injection-Modul am displayHeader-Hook. Ein kleines "Custom Code / Header HTML"-Modul, das sich am displayHeader-Hook registriert, legt das Snippet in den Head jeder Seite, lebt in der Datenbank statt in einer Template-Datei und übersteht Theme-Wechsel. Das ist der Weg ohne Entwickler, wenn Sie kein GTM verwenden.

In beiden Fällen gilt: Erstellen Sie ein kostenloses Projekt auf clarity.microsoft.com, kopieren Sie das Tracking-Snippet, stellen Sie es über einen der oben genannten Wege bereit und prüfen Sie es mit der Live-Vorschau im Clarity-Dashboard, bevor Sie die Sache abhaken. Daten erscheinen normalerweise innerhalb weniger Stunden. Ein PrestaShop-spezifischer Check: Leeren Sie nach dem Einbau den Cache (Erweiterte Einstellungen → Leistung → Cache leeren), denn ein gecachter Head versteckt Ihr neues Skript vor echten Besuchern, selbst wenn es für Sie korrekt aussieht.

Das Snippet erst nach Einwilligung laden

Der häufigste Fehler von Händlern ist, Clarity beim Laden der Seite auszuführen und es erst später zu sperren. Sperren Sie es von Anfang an. Wenn Sie es über ein Custom-Code-Modul statt über GTM einfügen, besteht das Muster darin, Claritys eigenen Loader in einer Funktion zu halten und ihn erst aufzurufen, wenn Ihr Cookie-Banner die Zustimmung zur Analytics-Kategorie gespeichert hat:

<script>
// Clarity's own snippet, wrapped so it only runs after consent
function loadClarity() {
  (function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
}

// Call loadClarity() only when your CMP reports analytics consent.
// Example: most banners expose an event or a stored flag you can read.
if (window.localStorage.getItem("analytics_consent") === "granted") {
  loadClarity();
}
// And subscribe to the consent-change event your banner fires, e.g.:
document.addEventListener("cmp:analytics-accepted", loadClarity);
</script>

Ersetzen Sie YOUR_PROJECT_ID durch die ID aus Ihrem Clarity-Dashboard, und ersetzen Sie die Consent-Prüfung durch das Signal, das Ihr Cookie-Modul tatsächlich ausgibt, PrestaShop-Consent-Module unterscheiden sich beim Namen des Flags und beim Event, das sie bereitstellen. Lesen Sie deshalb die Dokumentation Ihres Moduls, statt die Platzhalternamen wörtlich zu kopieren.

Clarity mit Blick auf die echten PrestaShop-Seitentypen lesen

Generische Ratschläge wie "sehen Sie sich ein paar Aufzeichnungen an" verschwenden das Tool. Clarity zahlt sich aus, wenn Sie es gezielt auf die spezifischen PrestaShop-Templates richten und konkrete Fragen stellen.

Produktseiten (product controller)

• Auf der Scrollkarte: Liegt der Warenkorb-Button auf Mobilgeräten über der Falz, oder drücken Attributauswahlen und Mengen-Stepper ihn nach unten? Das ist die häufigste Schwachstelle, die Clarity in PrestaShop aufdeckt.
• Klicken Kunden auf das Hauptproduktbild, weil sie einen Zoom oder eine Galerie erwarten? Wenn die Klickkarte dort aufleuchtet, aber nichts passiert (Dead Clicks), fehlt die Bildinteraktion Ihres Themes oder ist nicht erkennbar.
• Bedienen sie die Attributauswahlen (Größe, Farbe) reibungslos, oder deuten Rage Clicks darauf hin, dass die Kombinationslogik verwirrend ist oder eine Variante ohne klare Meldung nicht vorrätig ist?
• Erreichen sie den Beschreibungstab und Cross-Sells überhaupt, oder brechen sie darüber ab?

Kategorie- und Facettensuchseiten

• Nutzen Besucher die Layered-Navigation-Filter (ps_facetedsearch), oder scrollen sie daran vorbei? Wenn die Filter-Seitenleiste auf Mobilgeräten keine Klicks erhält, ist sie möglicherweise an einer Stelle eingeklappt, die Besucher nie finden.
• Wie weit scrollen sie, bevor sie auf ein Produkt klicken oder die Seite verlassen, ein Signal dafür, ob Ihre Standardsortierung und die Anzahl der Produkte pro Seite zur Suchabsicht passen.
• Wo landet der erste Klick: Bild, Name oder Preis? Das zeigt Ihnen, welches Element die Überzeugungsarbeit leistet.

Kasse (order controller)

• An welchem Schritt der PrestaShop-Kasse, persönliche Daten, Adressen, Versand, Zahlung, geraten abbrechende Kunden ins Stocken? Aufzeichnungen zeigen den exakten Moment.
• Welche Formularfelder lösen wiederholte Versuche oder lange Pausen aus (typisch: Adressfelder, die erneut validieren und Inhalte löschen, oder ein Telefonfeld mit strenger Formatierung)?
• Schickt das Gutscheinfeld Menschen weg? Ein offenes, auffälliges Gutscheinfeld in der Kasse ist ein bekannter Ausstieg, Kunden verlassen den Shop, um einen Code zu googeln, und nicht alle kommen zurück.

In der Kasse werden Clarity-Erkenntnisse zu den wertvollsten Verbesserungen, denn jeder Besucher, der dort ankommt, will bereits kaufen. Wenn die Aufzeichnungen immer wieder auf dieselbe Reibung im mehrstufigen Ablauf zeigen, erneut validierende Abschnitte, zu viele Hürden, ein Gutscheinfeld, das Schaden anrichtet. Dann ist das ein strukturelles Kassenproblem, keine Kleinigkeit. Den Ablauf selbst zu überarbeiten (ein Bildschirm, live aktualisierte Summe, Gastbestellung standardmäßig) ist genau das, wofür unser Checkout Revolution-Modul gebaut ist: konfigurierbar im Back Office statt per Entwicklerrechnung, die Art von Änderung, die Sie nachdem Clarity Ihnen genau gezeigt hat, wo die Reibung liegt, vornehmen.

DSGVO: die Maskierung, die Sie wirklich konfigurieren müssen

Clarity maskiert Text- und Eingabeinhalte standardmäßig (im Maskierungsmodus "Balanced"), aber das Standardverhalten ist konfigurierbar, und in einem PrestaShop-Shop gibt es shopspezifische Bereiche, die Sie ausdrücklich absichern sollten. Denn "die Aufzeichnung hat den Namen und die vollständige Adresse eines eingeloggten Kunden im Kundenkonto erfasst" ist ein realer, häufiger und vermeidbarer Verstoß.

• Einwilligungssteuerung ist nicht optional. Das Clarity-Skript darf erst geladen werden, nachdem der Besucher Analyse-Cookies akzeptiert hat. Wenn Sie es über GTM ausspielen, hängen Sie es an Ihren Einwilligungs-Trigger; wenn über ein Header-Modul, sperren Sie es über das Analyse-Signal Ihrer CMP. Es vor der Einwilligung zu laden, ist der häufigste Fehler und genau der, den eine Aufsichtsbehörde bemerkt.
• Maskieren Sie PrestaShops personenbezogene Datenbereiche ausdrücklich. Nutzen Sie Claritys Maskierungsregeln (und das Attribut data-clarity-mask oder eine Maskierungskonfiguration per CSS-Selektor) über dem Kundenkonto-Block (my-account / identity-Templates), der Bestellbestätigungsseite und jeder Adressanzeige, damit Aufzeichnungen keine Namen, Adressen oder Bestelldetails speichern. Maskierung verbirgt allerdings nur sichtbare Inhalte in der Wiedergabe, sie entfernt keine personenbezogenen Daten, die an anderer Stelle landen. Kombinieren Sie sie deshalb damit, Identifikatoren aus URLs und Query-Strings zu entfernen, niemals personenbezogene Daten in Custom Tags, Attribute oder Events zu übergeben und zu prüfen, dass keine Umfrage oder Feedback-Erfassung Freitext speichert, der einen Kunden offenlegt.
• Weisen Sie darauf hin. Führen Sie Microsoft Clarity in Ihrer Datenschutzerklärung als Auftragsverarbeiter auf und ordnen Sie es in Ihrem Cookie-Banner der Kategorie "Analyse" zu.

Wenn Sie diese Art der Datenverarbeitung durch Dritte gegen eine Analyse im eigenen Haus abwägen, ist das eine bewusste Entscheidung mit eigenen Vor- und Nachteilen, wir behandeln sie in Privacy-first Analytics für Ihren Shop.

Wo Hotjar passt, und wo nicht

Claritys nächstes Gegenstück ist Hotjar; beide bieten Heatmaps und Aufzeichnungen. Die ehrliche Kurzfassung: Clarity ist kostenlos mit unbegrenzten Sitzungen und stärkerer Frustrationserkennung, während Hotjar On-Site-Umfragen und Feedback-Widgets ergänzt, für die Clarity kein Äquivalent hat. Für die meisten PrestaShop-Shops deckt Claritys kostenloser Tarif die Aufgabe der Verhaltensanalyse vollständig ab, und Hotjar greifen Sie vor allem dann auf, wenn Sie Besucher aktiv fragen möchten, statt ihnen nur zuzusehen. Den vollständigen Feature-für-Feature-Vergleich, einschließlich der PrestaShop-spezifischen Einrichtung für beide Tools, finden Sie in Hotjar für PrestaShop; deshalb wiederholen wir ihn hier nicht.

Ein PrestaShop-spezifischer Stolperstein: Bot-Traffic in Ihren Aufzeichnungen

Wenn Sie Aufzeichnungen ansehen und Sitzungen finden, die ein Produkt in den Warenkorb legen und dann nichts Menschliches mehr tun, kein Scrollen, sofortige Aktionen, keine Kasse, sehen Sie möglicherweise automatisierten Traffic, keine Kunden. Bot- oder automatisierte Sitzungen können in Analytics- und Aufzeichnungstools auftauchen und Ihr Bild davon verzerren, wie sich "echte" Besucher verhalten. Bevor Sie eine Seite nach einem Muster umbauen, das Clarity Ihnen zeigt, filtern Sie verdächtige Sitzungen heraus und prüfen Sie mit gesundem Menschenverstand, ob der Rest menschlich ist. Wir erklären, was dieser Traffic ist und warum Sie ihn nicht blockieren sollten, in Google Storebot kauft in Ihrem PrestaShop-Shop ein.

Vom Zuschauen zum Handeln, eine Routine, die den ersten Monat übersteht

Der typische Fehlschlag bei Verhaltensanalyse ist, Aufzeichnungen wie Unterhaltung anzusehen und nichts zu ändern. Binden Sie sie an einen Rhythmus:

• Wöchentlich: Sehen Sie sich 10–15 Sitzungen an, gefiltert auf Kassen-Sitzungen und Ihre Produktseiten mit den höchsten Ausstiegsraten, nicht zufällige Aufzeichnungen. Mit Claritys Segmentfiltern dauert das zwei Minuten.
• Monatlich: Prüfen Sie die Heatmaps Ihrer zehn wichtigsten Seiten und scannen Sie Rage-Click- und Dead-Click-Hotspots auf neue Regressionen (eine Theme-Anpassung, die ein Klickziel beschädigt hat, taucht hier zuerst auf).
• Nach jeder Änderung: Wenn Sie einen Button verschieben, ein Template bearbeiten oder die Kasse ändern, sehen Sie sich Aufzeichnungen der neuen Version an, um zu bestätigen, dass sie sich wie beabsichtigt verhält, statt es nur anzunehmen.

Jede Beobachtung sollte zu einer konkreten, benannten Aktion führen: den Warenkorb-Button auf Mobilgeräten über die Falz verschieben, den vom Theme vergessenen Bildzoom einbinden, das Feld reparieren, das sich immer wieder leert, das Gutscheinfeld hinter einem "Haben Sie einen Code?"-Link verstecken. Einzeln klein; über ein Quartal hinweg wirkungsvoll.

Clarity ist kostenlos und lässt sich in zehn Minuten korrekt in PrestaShop installieren. Der Grund, es zu tun, ist derselbe Grund, warum die meisten Shopbetreiber mit ihrer Einschätzung der eigenen Kasse falsch liegen: Sie haben den Shop gestaltet, deshalb sehen Sie ihn nicht so wie ein Erstbesucher. Clarity lässt Sie ihnen über die Schulter schauen. Kombinieren Sie es mit GA4 für die Zahlen, maskieren Sie Kundendaten sauber, richten Sie es auf die echten PrestaShop-Seitentypen und handeln Sie nach dem, was es Ihnen zeigt. Genau diese Schleife macht aus einem kostenlosen Analyse-Tool messbare, belastbare Verbesserungen für Ihren Shop.

Häufig gestellte Fragen

Ist Microsoft Clarity wirklich kostenlos, oder gibt es einen Haken für einen stark besuchten PrestaShop-Shop?

Es ist kostenlos und ohne Sitzungsbegrenzung, egal ob Ihr Shop hundert Besuche am Tag oder Zehntausende hat. Der Preis ist kein Geld, der Kompromiss besteht darin, dass Ihre Daten zum Besucherverhalten von Microsoft verarbeitet werden. Deshalb führen Sie Clarity in Ihrer Datenschutzerklärung als Auftragsverarbeiter auf und laden es wie jeden anderen Drittanbieter-Tracker erst nach Analytics-Einwilligung. Wenn es Ihnen wichtig ist, Verhaltensdaten von Drittanbieter-Servern fernzuhalten, spricht das für eine selbst gehostete Alternative, die wir in Matomo vs Google Analytics abwägen.

Verlangsamt Clarity meinen PrestaShop-Shop?

Das Tracking-Skript lädt asynchron, blockiert also nicht das Rendern Ihrer Seite. Der realistische Performance-Hinweis ist: Es ist eine weitere Drittanbieter-Anfrage, und in einem Shop, der bereits mehrere Tags lädt, summiert sich das, ein weiterer Grund, alle über einen einzigen einwilligungsgesteuerten GTM-Container zu verwalten, statt Snippets zu verstreuen. Wenn die Seitengeschwindigkeit bereits ein Problem ist, beheben Sie das zuerst; ein Aufzeichnungstool wird nicht Ihr Flaschenhals sein, aber ganz ohne Gewicht ist es ebenfalls nicht.

Funktioniert Clarity mit der einseitigen und modulbasierten Kasse von PrestaShop?

Ja. Clarity zeichnet auf, was im Browser gerendert wird, also sowohl die native fünfstufige PrestaShop-Kasse als auch One-Page-Checkout-Module. Prüfen müssen Sie die Maskierung: Eigene Checkout-Module können Felder in Markup rendern, das die Standard-Maskierungsregeln nicht erfassen. Sehen Sie sich deshalb einige Ihrer eigenen Kassen-Aufzeichnungen von Anfang bis Ende an und bestätigen Sie, dass keine E-Mail-Adresse, Adresse oder kartenähnliches Feld sichtbar ist, bevor Sie darauf vertrauen.

Kann ich Clarity und GA4 gleichzeitig verwenden?

Ja, und in der Regel sollten Sie das tun, sie beantworten unterschiedliche Fragen. GA4 liefert Ihnen aggregierte Zahlen und Raten, die zeigen, welche Seite leckt; Clarity zeigt Ihnen, warum. Laden Sie beide über denselben GTM-Container hinter demselben Analyse-Einwilligungs-Trigger, damit sie gemeinsam aktiviert werden und keines von beiden vor der Einwilligung des Besuchers feuert.

Warum zeigt Clarity Sitzungen, die sich nicht wie echte Käufer verhalten?

Weil einige davon keine sind. Automatisierter Traffic, Crawler und Shopping-Bots, bewegt sich durch PrestaShop-Seiten und erscheint in Aufzeichnungen als sofortige, scrollfreie, unmenschliche Sitzungen. Filtern Sie diese heraus, bevor Sie Schlussfolgerungen ziehen, sonst bauen Sie eine Seite für ein Verhalten um, das kein Kunde je gezeigt hat. Wir behandeln dieses Phänomen in Google Storebot kauft in Ihrem PrestaShop-Shop ein.