Microsoft Clarity liefert Heatmaps, Session Recordings und Insights für deinen Shop – kostenlos, ohne Session-Limit und ohne Sampling. Microsoft Clarity Integration Pro bindet den Dienst sauber in Shopware 6 ein und kümmert sich um Cookie-Consent, Custom Tags und den Schutz sensibler Checkout-Daten. Alle Einstellungen erfolgen über die Plugin-Konfiguration in der Shopware-Administration – Code-Anpassungen sind nicht nötig.
- Einbindung von Microsoft Clarity (Tracking-Code, asynchron geladen)
- Integration in den Shopware Cookie Manager (Gruppen Statistik, Marketing oder Komfort wählbar)
- SHA256-gehashte User-Identifikation für eingeloggte Kunden (kein Klartext-PII an Microsoft)
- Custom Tags für Sales Channel, Sprache und Kundengruppe
- Automatische Maskierung aller Checkout-Eingaben (Adresse, Zahlung, E-Mail)
- Purchase-Event auf der Finish-Seite für Conversion-Auswertungen
Voraussetzungen
- Shopware 6.6 oder 6.7
- Ein aktives Microsoft-Clarity-Projekt mit gültiger Project-ID (Anlage kostenlos unter clarity.microsoft.com)
- Aktiver Shopware Cookie Manager – ohne Consent lädt Clarity nicht
Kompatibilität
- Shopware 6.7 – vollständig getestet, Anbindung über die neue
CookieGroupCollectEvent-API - Shopware 6.6 – kompatibel über die klassische
CookieProviderInterface-API - Verwendet ausschließlich die offizielle Microsoft-Clarity-Client-API (
consent,set,identify,event,upgrade) - Keine Drittplugins erforderlich
Installation
- Plugin im Shopware Store erwerben und im Shop installieren.
- Unter Erweiterungen → Meine Erweiterungen aktivieren.
- Cache leeren und Storefront per F5 neu laden.
- Die Plugin-Konfiguration öffnen und die Microsoft-Clarity-Project-ID eintragen (siehe nächster Abschnitt).
Einrichtung
Microsoft-Clarity-Projekt anlegen
- clarity.microsoft.com öffnen und anmelden (Microsoft-, Google- oder Facebook-Konto).
- Oben links auf Meine Projekte klicken.
- Über Neues Projekt das Formular ausfüllen: Name (z. B. der Shop-Name), Website-URL, passende Kategorie.
- Projekt anlegen.
Project-ID herauskopieren
- Nach dem Anlegen das neue Projekt oben rechts über die Projekt-Auswahl aktivieren.
- Im linken Menü auf Einstellungen klicken.
- Ganz oben steht die Project-ID (alphanumerisch, z. B.
abc1234xyz). Diese ID kopieren.
Plugin konfigurieren
- In der Shopware-Administration Erweiterungen → Meine Erweiterungen → Microsoft Clarity Integration Pro → Konfiguration öffnen.
- Project-ID eintragen.
- Bei Bedarf pro Sales Channel konfigurieren, wenn nur bestimmte Kanäle getrackt werden sollen.
- Speichern.
Die Project-ID wird beim Speichern validiert – nur alphanumerische Zeichen werden akzeptiert. Ungültige Eingaben werden ignoriert und Clarity lädt nicht.
1 · Grundkonfiguration
Die Grundkonfiguration schaltet Clarity ein und bestimmt, wie der Cookie in den Cookie Manager eingeordnet wird.
| Feld | Bedeutung |
|---|---|
| Plugin aktiv | Schaltet die gesamte Clarity-Einbindung ein oder aus. |
| Clarity Project-ID | Die alphanumerische ID aus dem Clarity-Dashboard. |
| Cookie-Gruppe | In welche Shopware-Cookie-Gruppe der Clarity-Cookie eingeordnet wird: Statistik (Default, DSGVO-Empfehlung), Marketing oder Komfort. |
| Cookie-Consent umgehen | Nur für interne Test-Shops: Clarity lädt sofort ohne Cookie-Banner. Nicht in Produktivshops aktivieren! |
2 · Optionen
Die Optionen steuern zusätzliche Clarity-Features rund um Kundenerkennung, Conversion-Tracking und Datenschutz im Checkout.
| Feld | Bedeutung |
|---|---|
| User-Identifikation aktivieren | Ruft für eingeloggte Kunden clarity("identify", <sha256-hash>) auf. Die Kunden-ID wird vor dem Senden per SHA256 gehasht – kein Klartext-PII erreicht Microsoft. |
| Purchase-Event auf Finish-Seite | Feuert nach abgeschlossener Bestellung clarity("event", "purchase") auf /checkout/finish. |
| Checkout-Felder maskieren | Wrappt den gesamten Checkout-Content in <div data-clarity-mask>. Clarity blendet alle Formulareingaben (Adresse, Zahlung, E-Mail) in Session Recordings und Heatmaps automatisch aus. |
3 · Custom Tags
Custom Tags sind Key-Value-Paare, die bei jeder Session an Clarity übergeben werden (clarity("set", key, value)). Sie tauchen im Clarity-Dashboard als Filter auf – so lassen sich Heatmaps und Recordings nach Sprache, Sales Channel oder Kundengruppe segmentieren.
| Feld | Bedeutung |
|---|---|
| Sales-Channel taggen | Sendet den Namen des aktuellen Sales Channels als Tag salesChannel. |
| Sprache taggen | Sendet den aktuellen Locale-Code (z. B. de-DE, en-GB) als Tag language. |
| Kundengruppe taggen | Sendet den Namen der Kundengruppe als Tag customerGroup (nur wenn der Kunde eingeloggt ist). |
4 · Cookie-Banner & Consent
Nach der Installation erscheint der Cookie biloba-clarity-enabled automatisch im Shopware Cookie Manager, in der konfigurierten Gruppe (Statistik, Marketing oder Komfort).
- Stimmt der Kunde zu, wird das Clarity-Script asynchron nachgeladen und beginnt zu tracken.
- Stimmt der Kunde nicht zu, lädt Clarity nicht – es gehen keinerlei Daten an Microsoft.
- Widerruft der Kunde später die Zustimmung, wird Clarity beim nächsten Seitenaufruf nicht mehr geladen.
Das Plugin unterstützt beide Shopware-Cookie-APIs: die klassische CookieProviderInterface (vor 6.7.3) und die neue CookieGroupCollectEvent-basierte API (6.7.3+).
5 · Checkout-Maskierung
Wenn Checkout-Felder maskieren aktiv ist, werden im gesamten Checkout (/checkout/*) alle Eingabefelder für Clarity unsichtbar gemacht:
- Adress-Eingaben
- Zahlungsdaten
- E-Mail-Adresse
- Rechnungsanschrift
In Clarity-Aufzeichnungen erscheinen diese Felder als graue Rechtecke, Heatmaps zeigen nur die Position der Felder, nicht den Inhalt. Das ist die native Clarity-Funktion über das HTML-Attribut data-clarity-mask – keine eigene Magie, sondern Microsoft-Standard.
FAQs
Support
Bei Fragen oder Problemen stehen wir zur Verfügung:
- Support-Anfrage: biloba-it.de/shopware-plugin-support
- E-Mail: support@biloba-it.de
- Telefon: +49 (0) 711 – 13633800
- Offizielle Clarity-Doku: learn.microsoft.com/en-us/clarity
German 
English