Das script consent.js vor dem schließenden </body> Tag einfügen.
<html> <body> ... <script src="<your unique script here>" type="text/javascript"></script> </body> </html>
Die Settings können in jedes beliebige Element geladen werden. Hierfür wird ein CSS Selector gesetzt.
Sollten Sie bereits eine Auswahl in unserem Banner getroffen haben sehen sie diese hier:
Cookie Consent Control arbeitet perfekt mit dem Google Tag Manager zusammen. Alle Ressourcen können erst nach einem eingestellten GTM Event geladen werden. Somit werden Cookies und Tracking-Tags erst aktiviert, nachdem der Kunde sich dafür entscheidet.
Cookie Consent Control bietet einen eigenen Mechanismus für Consent Protection von On-Site Elementen. Diese möglichkeiten werden im folgenden vorgestellt.
Jedes Element mit dem Data-Attribut data-requires-consent wird von Cookie Consent Control überwacht. Folgende Attribute werden unterstützt:
Attribut | Beschreibung |
---|---|
data-protected-selector | Ein beliebiger Css Selector um ein Element innerhalb des aktuellen Elements als Ziel festzulegen. Z.b. ".my-class". Siehe Bsp. 2 |
data-protected-attributes | Eine mit "," getrennte Liste von Attributen die "aktiviert" werden sobald der User seinen Consent gegeben hat. Siehe Bsp. 1 |
data-protected-remove-class | Entfernt die angegebene Klasse sobald der User seinen Consent gegeben hat. Siehe Bsp. 1 |
data-protected-template-selector | Wählt ein <template> Element aus welches "aktiviert" wird sobald der user seinen Consent gegeben hat. Siehe Bsp. 3 |
Bsp. 1
<iframe width="560" height="315" src="https://www.youtube.com/embed/HbUwHAXEsZA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>Wird zu
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/HbUwHAXEsZA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen data-requires-consent data-protected-attributes="src" data-protected-remove-class="hidden" class="hidden" ></iframe>
Unterschiede:
Bsp. 2 In Diesem Beispiel wird mit data-protected-selector ein Element ausgewählt.
<div data-requires-consent data-protected-selector=".my-class" data-protected-remove-class="hidden"> <div class="my-class hidden"> Sie haben uns aktuell erlaubt Cookies zu setzen. </div> </div>
Bsp. 3 In diesem Beispie verwenden wir data-protected-template-selector um zu steuern wann ein <script> Tag ausgeführt wird.
<div id="bsp-3" data-requires-consent data-protected-template-selector="template"> <template> <script> let info = document.createElement("strong"); info.innerText = "Dieser Text wurde durch ein nachgeladenes Script eingefügt und bleibt daher auch."; document.getElementById("bsp-3").append(info) </script> </template> </div>