Cookie Consent Control by pc-web


Integration

consent.js

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>
                    

Settings

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:

Google Tag Manager

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.

On-Site Protection

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>


            
Cookie Consent zurücksetzen

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>