In diesem Artikel erläutern wir Ihnen, wie Sie das Usercentrics-Script zusammen mit dem Smart Data Protector direkt in Ihren Online-Shop oder Ihre Website einbinden. Außerdem empfehlen wir Ihnen unsere Video-Tutorials zu den einzelnen Schritten anzuschauen.
Der Trusted Shops Consent-Manager in Kooperation mit Usercentrics sorgt dafür, dass zukünftig die Tracking-Scripte und Cookies auf Ihrer Seite nur noch dann ausgespielt werden, wenn Ihnen dafür eine Einwilligung des Besuchers vorliegt.
In der folgenden Schritt-für-Schritt-Anleitung zeigen wir Ihnen, wie Sie:
- das Script zum Consent-Manager in Ihrem Online-Shop oder Ihrer Website integrieren
- die Scripte so anpassen, dass sie nur nach Einwilligung ausgespielt werden
Schritt 1: Script in Ihrem Online-Shop integrieren
Vorbereitung:
Um Ihre Scripte nur nach Einwilligung der Besucher und Besucherinnen auszuspielen, müssen Sie zuerst das Script zu Ihrem Consent-Manager im Online-Shop integrieren, damit zunächst der Consent-Manager angezeigt wird. Das Script zum Consent-Manager wird erstellt, sobald Sie im Legal Account die Konfiguration abgeschlossen haben. Eine Anleitung dazu finden Sie ebenfalls hier im Helpcenter.
Durchführung:
1. Usercentrics-Script in den head-Bereich implementieren:
In Ihrem Legal Account finden Sie im Schritt 4 "Integration" innerhalb des Menüpunkts "Consent-Manager" Ihr persönliches Script mit Ihrer ID. Bis auf die ID sieht das Script wie folgt aus:
<link rel="preconnect" href="//privacy-proxy.usercentrics.eu">
<link rel="preload" href="//privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js" as="script">
<script id="usercentrics-cmp" data-settings-id=" XXXXXXXXX " data-language="de" src="https://app.usercentrics.eu/browser-ui/latest/loader.js" async></script>
<script src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js" async></script>
Kopieren Sie das Script oder ersetzen Sie im obigen Code-Beispiel „XXXXXXXXX“ mit Ihrer persönlichen ID. Diesen Code implementieren Sie anschließend in den "head"-Bereich Ihres Online-Shops, damit unsere Consent-Manager in Ihrem Online-Shop aufgerufen wird.
Wenn Sie diesen Schritt korrekt durchgeführt haben, sollte in wenigen Sekunden der Consent-Manager auf Ihrer Seite erscheinen! Achtung - zu dieser Zeit ist der Manager zwar sichtbar, aber noch ohne jegliche Funktion. Benötigt werden nun die Anpassungen in Schritt 2.
Video-Tutorial zu Schritt 1
Schritt 2: Bestehende Scripte anpassen
Vorbereitung:
Sie haben nun den Consent-Manager, zusammen mit dem Smart Data Protector in Ihrer Webseite / Ihrem Shop integriert.
Der Smart Data Protector sorgt dafür, dass gewisse Dienste und Tracking-Skripte automatisch erkannt und blockiert werden, bis eine Einwilligung des/der Besucher*In vorliegt. Andere Skripte, die vom Smart Data Protector nicht automatisch erkannt werden, müssen Sie noch selbst anpassen, damit diese für den Consent Manager erkennbar sind und er deren Ausführung steuern kann.
Im Schritt 3 bei der Erstellung Ihres Consent Managers im Trusted Shops Legal Bereich haben Sie alle relevanten Dienste definiert, die auf Ihrer Webseite genutzt werden und die eine Einwilligung benötigen. Im Schritt 4 können Sie dann sehen, welche von diesen Diensten automatisch vom Smart Data Protector erkannt und blockiert werden können und welche nicht.
Die in der Spalte b. Andere Dienste gelisteten Skripte / Dienste müssen noch zusätzlich angepasst werden, damit sie vom Consent Manager erkannt werden und blockiert werden können. Dieser Schritt ist notwendig, damit die Scripte, welche die Cookies und das Webtracking steuern, nur nach expliziter Einwilligung der Besucher ausgeführt werden.
Für diesen Schritt ist es zunächst erforderlich, die einzelnen Tracking-Scripte im Quellcode Ihres Shops zu finden und zu identifizieren.
So kann beispielsweise ein Script in Ihrem Onlineshop aussehen (Hier: Script zu Google Analytics):
Durchführung:
Mit dem Script-O-Mat können Sie Ihre Scripte automatisch anpassen lassen.
Beispiel:
Sie möchten Google Analytics einsetzen. Um Ihr Script automatisch anzupassen, wählen Sie einfach aus dem Drop-Down "Google Analytics" aus, tragen Sie Ihr Original-Script ein und klicken Sie dann auf "Script anpassen". In der Ausgabe auf der rechten Seite, wird Ihnen Ihr angepasstes Script ausgegeben.
Alternativ manuelle Anpassung:
Die Anpassung der Scripte besteht aus zwei Änderungen. Es muss jeweils nur die erste Zeile Code des jeweiligen Scriptes wie folgt angepasst werden:
1. Änderung des Script-Typs
Die erste Änderung bezieht sich auf den Script-Typen. Tauschen/Überschreiben Sie in Ihren Scripten den Typ von type="text/javascript" zu type="text/plain".
Hier ein Beispiel (gekürzt):
Original:
<script type="text/javascript">
</script>
wird zu
Angepasste Version:
<script type="text/plain">
</script>
2. Vergabe der Data-Attribute
Um die Verbindung zu unserer Consent-Manager herzustellen, benötigen Ihre Scripte noch ein benutzerdefiniertes "Data-Attribute". Dieses Data-Attribute ist nach dem Prinzip data-usercentrics="Name Data Processing Service" aufgebaut, wobei “Name Data Processing Service” dem exakten Namen des Datenverarbeitungsdienst entspricht, den Sie in Ihrem Legal Account im Schritt 3 "Datenverarbeitungsdienste" innerhalb des Menüpunkts "Consent-Manager" angelegt haben.
Vereinfacht gesagt: Der Consent Manager lässt die einzelnen Dienste starten, in dem er als Befehl den "Namen" des jeweiligen Dienstes "ruft".
Hier ein Beispiel (gekürzt), in dem das Script zu Google Analytics angepasst wurde.
Original:
<script type="text/javascript">
</script>
wird zu
Angepasste Version:
<script type="text/plain" data-usercentrics="Google Analytics">
</script>
Mit der Ergänzung data-usercentrics="Google Analytics" haben wir die Verknüpfung zum Consent-Manager geschaffen. Wenn im Consent-Manager also später eine Einwilligung eingeht, funkt der Manager den Befehl "Google Analytics" und sorgt dafür, dass das entsprechend benannte Script startet.
Hier ein vollständiges, ungekürztes Beispiel anhand des Google Analytics-Scriptes:
Original:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || ;
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-X');
</script>
wird zu
Angepasste Version:
<script type="text/plain" data-usercentrics="Google Analytics" async="" src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script type="text/plain" data-usercentrics="Google Analytics">
window.dataLayer = window.dataLayer || ;
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-X');
</script>
Das Google Analytics-Script wird mit diesen Anpassungen nur noch ausgeführt, wenn eine Einwilligung des Besuchers für den gleichnamigen Datenverarbeitungsdienst „Google Analytics“ vorliegt.
Besonderheiten beim Google Tag Manager:
Achtung: Insofern Sie den Google Tag Manager nutzen, passen Sie bitte NICHT zusätzlich die Scripte manuell an. Lesen Sie dazu mehr in dem Leitfaden zur Konfiguration der Datenverarbeitungsdienste via Google Tag Manager.
Video-Tutorial zu Schritt 2: