Consent-Manager: Allgemeine Anleitung zur Einbindung

In diesem Artikel erläutern wir dir, wie du das Usercentrics-Script zusammen mit dem Smart Data Protector direkt in deinen Online-Shop oder deine Website einbindest. Außerdem empfehlen wir dir 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 deiner Seite nur noch dann ausgespielt werden, wenn dir dafür eine Einwilligung des Besuchers vorliegt.

In der folgenden Schritt-für-Schritt-Anleitung zeigen wir dir, wie du:

• das Script zum Consent-Manager in deinem Online-Shop oder deiner Website integrierst
• die Scripte so anpasst, dass sie nur nach Einwilligung ausgespielt werden

Schritt 1: Script in deinem Online-Shop integrieren

Vorbereitung:

Um deine Scripte nur nach Einwilligung der Besucher und Besucherinnen auszuspielen, musst du zuerst das Script zu deinem Consent-Manager im Online-Shop integrieren, damit zunächst der Consent-Manager angezeigt wird. Das Script zum Consent-Manager wird erstellt, sobald du im Legal Account die Konfiguration abgeschlossen hast. Eine Anleitung dazu findest du ebenfalls hier im Helpcenter.

Durchführung:

1. Usercentrics-Script in den head-Bereich implementieren:

In deinem Legal Account findest du im Schritt 4 "Integration" innerhalb des Menüpunkts "Consent-Manager" dein persönliches Script mit deiner ID. Bis auf die ID sieht das Script wie folgt aus:

<link rel="preconnect" href=https://privacy-proxy.usercentrics.eu>
<link rel="preload" href=https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js as="script">
<script id="usercentrics-cmp" data-settings-id="XXXXXXXXX" data-language="de" src=https://web.cmp.usercentrics.eu/ui/loader.js async></script>
<script type="application/javascript" src=https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js></script>

Kopiere das Script oder ersetze im obigen Code-Beispiel „XXXXXXXXX" mit deiner persönlichen ID. Diesen Code implementierst du anschließend in den "head"-Bereich deines Online-Shops, damit unser Consent-Manager in deinem Online-Shop aufgerufen wird.

Wenn du diesen Schritt korrekt durchgeführt hast, sollte in wenigen Sekunden der Consent-Manager auf deiner 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: Google Consent Mode hinzufügen

Nutzt du einen der folgenden Google-Services: Google Analytics, Google Ads, Floodlight, Conversion-Verknüpfung? In diesem Fall musst du zusätzlich den Google Consent Mode dem Consent Manager hinzufügen. Details dazu findest du auf dieser Seite.

Schritt 3: Bestehende Scripte anpassen

Vorbereitung:

Du hast nun den Consent-Manager, zusammen mit dem Smart Data Protector in deiner Webseite / deinem 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, musst du 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 deines Consent Managers im Trusted Shops Legal Bereich hast du alle relevanten Dienste definiert, die auf deiner Webseite genutzt werden und die eine Einwilligung benötigen. Im Schritt 4 kannst du 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 deines Shops zu finden und zu identifizieren.

So kann beispielsweise ein Script in deinem Onlineshop aussehen (Hier: Script zu Google Analytics):

Durchführung:

Mit dem Script-O-Mat kannst du deine Scripte automatisch anpassen lassen.

Beispiel:
Du möchtest Google Analytics einsetzen. Um dein Script automatisch anzupassen, wähle einfach aus dem Drop-Down "Google Analytics" aus, trage dein Original-Script ein und klicke dann auf "Script anpassen". In der Ausgabe auf der rechten Seite, wird dir dein 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. Tausche/Überschreibe in deinen 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 unserem Consent-Manager herzustellen, benötigen deine 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 du in deinem Legal Account im Schritt 3 "Datenverarbeitungsdienste" innerhalb des Menüpunkts "Consent-Manager" angelegt hast.

Vereinfacht gesagt: Der Consent Manager lässt die einzelnen Dienste starten, in dem er als Befehl den "Namen" des jeweiligen Dienstes "ruft".

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.