Cookie Consent Control by pc-web

Version:

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.

Weiters gibt es Events wenn sich der User noch nicht entschieden hat und wenn abgelehnt wurde.

Google Consent Mode

Google verlangt seit 01.03.2024 den Cookie Consent Mode. Hierfür muss bei der Integration zuerst ein Standard definiert werden und bei der Einwilligung der Consent den der User gesetzt hat an Google übermittelt werden. Dies wird nur benötigt sollte Google Tag Manager oder Analytics genutzt werden.

Bsp.
Dieses Script muss vor dem laden des Cookie Banners eingebunden werden. 

<script>

    gtag('consent', 'default', {
      'ad_storage': 'denied',
      'ad_user_data': 'denied',
      'ad_personalization': 'denied',
      'analytics_storage': 'denied',
      'wait_for_update': 500
    });

    document.addEventListener('c3po_consent_changed', (e) => {
        gtag('consent', 'update', {
          'ad_storage': e.detail.consent,
          'ad_user_data': e.detail.consent,
          'ad_personalization': e.detail.consent,
          'analytics_storage': e.detail.consent
        });
    });

</script>

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:

Cookie Consent zurücksetzen

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>
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>
Cookie Consent zurücksetzen