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.
Weiters gibt es Events wenn sich der User noch nicht entschieden hat und wenn abgelehnt wurde.
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" data-protected-add-class="another-class" data-protected-placeholder="false"> <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>