Cookiebot Integration

Cookiebot Konfiguration

notwendige Schritte

Einstellungen machen und Script-link kopieren.

Scriptlink per TS einbinden (soweit wie möglich oben im Header)

#typo3conf/ext/h2template/Configuration/TypoScript/Library/Page.ts

#----------------------------
# Cookiebot
#----------------------------
page.headerData.3 = TEXT
page.headerData.3.value (
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="63b56d9b-6f30-4c56-80cb-a9afc988efe7" data-blockingmode="auto" type="text/javascript"></script>
)

Cookiebot CSS überschreiben (hier ein LESS Bsp.)

#CybotCookiebotDialog {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 20px !important;
}

#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper{
  margin-bottom: 10px !important;
}
a#CybotCookiebotDialogBodyLevelButtonAccept, a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll{
  background: @green !important;
  border: none !important;
}
#CybotCookiebotDialogBodyContentTitle{
  color: @green !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 900 !important;;
}
#CybotCookiebotDialogBodyContentText{
  font-family: 'Lato', sans-serif !important;
  font-weight: 400 !important;;
  font-size: 14px !important;;
  line-height: 1.4 !important;
}
a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection{
  padding: 5px 10px !important;
  height: auto !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border: 1px solid @green !important;
  margin-bottom: 10px !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll{
  &:hover{
    background: #fff !important;
    border: 1px solid @green !important;
    color: @green !important;
  }
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection{
  background: #fff !important;
  border: 1px solid @green !important;
  color: @green !important;
  &:hover{
    background: @green !important;
    border: 1px solid @green !important;
    color: #fff !important;
  }
}
.requiredCookieBotSet{
  padding: 40px 40px 25px;
  border: 1px solid @blue;
  text-align: center;
  p{
    margin-bottom: 15px !important;
  }
}

Cookiebot Hinweise für nicht geladene Ressourcen

//default Class to evoke CookieBot-Dialog. Can be used in cKEditor config e.g.

$('.cookieBotRenewal').click(function (e) {
    e.preventDefault();
    Cookiebot.renew()
});

// get iframe/elements marked by cookiebot as using marketing-cookies and show overlay width information and renewal-link
if(!Cookiebot.consent.marketing){
    $('.cookieconsent-optin-marketing').parent().append('<div class="requiredCookieNotSet"><p>Bitte erlauben Sie die Verwendung von Marketing-Cookies um das Video angezeigt zu bekommen.</p><p><a href="javascript:' +
        ' Cookiebot.renew()">Erneuern oder ändern Sie Ihre Cookie-Einwilligung</a></p></div>')
}
// get iframe/elements marked by cookiebot as using preferences-cookies and show overlay width information and renewal-link
if(!Cookiebot.consent.preferences){
    $('.cookieconsent-optin-preferences').parent().append('<div class="requiredCookieNotSet"><p>Bitte erlauben Sie die Verwendung von Präferenzen-Cookies um die Ladekarte angezeigt zu bekommen.</p><p><a href="javascript:' +
        ' Cookiebot.renew()">Erneuern oder ändern Sie Ihre Cookie-Einwilligung</a></p></div>')
}
// listen to accept-event and hide overlays if specific consent was given
window.addEventListener('CookiebotOnAccept', function (e) {
    if (Cookiebot.consent.marketing)
    {
        $('.cookieconsent-optin-marketing').parent().find('.requiredCookieNotSet').remove();

    } else if(Cookiebot.consent.preferences){
        $('.cookieconsent-optin-preferences').parent().find('.requiredCookieNotSet').remove();
    }
}, false);

Laden von Scripten vor Consent verhindern

Es ist möglich das Laden von Scripten zu verhindern, solange die entsprechende Einwilligung nicht erteilt wurde. 

Dazu wird der Typ des Scripts auf "text/plain" gesetzt und ein Data-Attribut nach folgendem Muster eingefügt: data-cookieconsent="[typ-der-Einwilligung]"

z.B.

<script type="text/plain" data-cookieconsent="statistics">

Mit dem Data-Attribut können beliebige Inhalte an die Cookiebot Einwilligung geknüpft werden. Das funktioniert nicht immer zuverlässig. Deshalb überprüfen und ggf. auf manuelle Methode s.o. zurückgreifen.

Absatz für die Datenschutzerklärung

Deutsch

Einsatz von Cookiebot

Cookiebot ist ein Onlinedienst, der uns dabei hilft, die Verwendung von Cookies und das Online-Tracking dieser datenschutzkonform zu gestalten. Mit dem Einsatz des Webservices Cybot A/S (Havnegade 39, 1058 Kopenhagen, Dänemark) übermittelt Ihr Browser personenbezogene Daten an das obengenannte Unternehmen. Rechtsgrundlage für die Datenverarbeitung ist Art. 6 Abs.1 lit. f DSGVO. Das berechtigte Interesse besteht in einer fehlerfreien Funktion der Internetseite. Die Löschung der Daten erfolgt, sobald der Zweck ihrer Erhebung erfüllt wurde. Weitere Informationen zum Handling der übertragenen Daten finden Sie in der Datenschutzerklärung von cookiebot.com: www.cookiebot.com/de/privacy-policy/ . Sie können die Erfassung sowie die Verarbeitung Ihrer Daten durch cookiebot.com verhindern, indem Sie die Ausführung von Script-Code in Ihrem Browser deaktivieren oder einen Script-Blocker in Ihrem Browser installieren (diesen finden Sie z.B. unter www.noscript.net oder www.ghostery.com). Sie haben jederzeit das Recht, Ihre Einwilligung zu ändern oder sie zu widerrufen.

 

Englisch

Use of Cookiebot

Cookiebot is an online service that helps us use cookies and track them online in compliance with data protection legislation. When using the web service Cybot A/S (Havnegade 39, 1058 Copenhagen, Denmark), your browser transmits personal data to the company named. The legal basis for the processing of this data is Art. 6(1)(f) GDPR. Our legitimate interest is the error-free functioning of our website. This data is erased as soon as the purpose for which it was collected has been fulfilled. Further information on how the transmitted data is handled is provided in Cookiebot’s privacy policy: www.cookiebot.com/en/privacy-policy/ . You can prevent cook-iebot.com from collecting and processing your data by deactivating the execution of script code or installing a script blocker in your browser (available for example at www.noscript.net or www.ghostery.com).

You have the right to change or withdrawyour consent at any time.

 

Cookiebit auf Impressum- und Datenschutzseiten

 

In der Cookiebot-Beschreibung können Datenschutz und Impressum verlinkt werden. Das passiert im Cookiebot-Backend des Kunden. Um auf diesen Seiten Cookiebot nicht anzuzeigen, bekommen die Links den GET-Paramter
 
?disableCookiebot=1

 

mit.

In main.js muss dann solch ein Script zu finden sein:

document.addEventListener("DOMContentLoaded", function(event) {
    function getQueryParams() {
        url = window.location.href;
        if (url.indexOf('disableCookiebot') !== -1) {
            return true;
        }
    }

    if (getQueryParams()) {
        setTimeout(function () {
            Cookiebot.hide();
        }, 200)
    }
});

Scss für neues Cookiebot Layout:

//variables
$windowBackground: #fff;
$highlightColor: $blue;
$textColor: $black;
$linkColor:$highlightColor;
$linkHoverColor: $gray;
$tabsBackground:#fff;
$tabsHoverBackground:#76D3F2;
$tabsActiveBackground:$highlightColor;
$tabsLinkColor:$highlightColor;
$tabsHoverLinkColor: #fff;
$tabsActiveLinkColor:#fff;

$radioBtnDisabledBackground:#fff;
$radioBtnDisabledForeground:$gray;
$radioBtnInactiveBackground:#fff;
$radioBtnInactiveForeground:$highlightColor;
$radioBtnActiveBackground:$highlightColor;
$radioBtnActiveForeground:#fff;

$btnSettingsBackground:#fff;
$btnSettingsForeground:$highlightColor;
$btnSettingsHoverBackground:$highlightColor;
$btnSettingsHoverForeground:#fff;

$btnAllowBackground:$highlightColor;
$btnAllowForeground:#fff;
$btnAllowHoverBackground:#fff;
$btnAllowHoverForeground:$highlightColor;

$fontBold:$slabRegular;
$fontRegular:$regular;
$fontThin:$thin;

$fontSizeHeadline: 35px;
$fontSizeParagraph: 15px;
$fontSizeTabs: 20px;

/* Cookiebot */
#CybotCookiebotDialog {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: $windowBackground;
  background-repeat: no-repeat;
  background-position: center;
  color: $textColor;
  padding: 0 !important;
  font-family: $fontBold !important;
  @media (max-width: 575px) {
    transform-origin: center !important;
  }
  a:not(.CybotCookiebotDialogNavItemLink){
    @include  transition(all, 0.25s);
    &:link,&:visited,&:focus{
      color: $linkColor !important;
      text-decoration: none !important;
    }
    &:hover,&:active{
      color: $linkHoverColor !important;
      text-decoration: none !important;
    }
  }
  .CybotCookiebotDialogContentWrapper{
    background-image: url(#{$imgPath}icon_cookie_white.svg);
    background-repeat: no-repeat;
    background-position: 180% 610%;
    background-size: 67%;
  }
}
#CybotCookiebotDialogDetailFooter{
  a{
    @include  transition(all, 0.25s);
    &:link,&:visited,&:focus{
      color: $highlightColor !important;
      text-decoration: none !important;
    }
    &:hover,&:active{
      color: $gray !important;
      text-decoration: none !important;
    }
  }
}
#CybotCookiebotDialogPoweredbyCybot,#CybotCookiebotDialogHeader{
  display: none;
}
#CybotCookiebotDialogNav{
  .CybotCookiebotDialogNavItemLink{
    border: none;
    padding: 40px 20px;
    text-transform: uppercase;
    font-family: $fontThin;
    color: $tabsLinkColor;
    background-color: $tabsBackground;
    &:hover{
      background-color: $tabsHoverBackground;
      color: $tabsHoverLinkColor;
    }
    &.active{
      font-family: $fontRegular;
      background-color: $tabsActiveBackground;
      color: $tabsActiveLinkColor;
      border: none;
    }
    &:focus {
      outline: none;
    }
    &:focus-visible{
      outline-color: rgba($focusColor, 0.2);
      outline-width: 2px;
    }
  }
}
#CybotCookiebotDialog, #CybotCookiebotDialogBodyUnderlay{
  .CybotCookiebotDialogNavItemLink,#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection{
    font-size: $fontSizeTabs !important;
  }
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper{
  margin-bottom: 10px !important;
}
a#CybotCookiebotDialogBodyLevelButtonAccept, a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll{
  background: $windowBackground !important;
  border: none !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll{
  @include transition();
  border: 1px solid $btnAllowBackground !important;
  color: $btnAllowForeground !important;
  background-color: $btnAllowBackground !important;
  font-family: $fontRegular !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover {
  background: $btnAllowHoverBackground !important;
  color: $btnAllowHoverForeground !important;
}
#CybotCookiebotDialogBodyContentTitle{
  color: $textColor !important;
  font-family: $fontThin !important;
  font-size: $fontSizeHeadline;
}
#CybotCookiebotDialogBodyContentText{
  font-family: $fontBold !important;
  font-weight: 400 !important;
  font-size: $fontSizeParagraph !important;
  line-height: 1.4 !important;
  ul {
    margin-left: 0px;
  }
  p{
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    font-size: $fontSizeParagraph !important;
  }
}

a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection{
  padding: 10px !important;
  height: auto !important;
  font-size: $fontSizeParagraph !important;
  font-weight: bold !important;
  background: $white !important;
  color: $highlightColor !important;
  margin-bottom: 10px !important;
  border: none !important;
  font-family: $bold !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection{
  background: #fff !important;
  color: $highlightColor !important;
}

#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover {
  background: $white !important;
  color: $highlightColor !important;
}
#CybotCookiebotDialogBodyContent a, #CybotCookiebotDialogBodyContent a:hover{
  color: $textColor !important;
  display: inline-block;
  margin-right: 20px;
  font-family: $fontBold !important;
}

.requiredCookieBotSet{
  padding: 40px 40px 25px;
  border: 1px solid $white;
  text-align: center;
}

.requiredCookieBotSet p {
  margin-bottom: 15px !important;
}

#CybotCookiebotDialogBodyLevelButtonsSelectPane{
  border: none !important;
}

#CybotCookiebotDialogBodyLevelDetailsWrapper{
  background: none !important;
  border: none !important;
}
a#CybotCookiebotDialogBodyLevelDetailsButton{
  color: $highlightColor !important;
}

#CybotCookiebotDialog div{
  font-family: $fontBold !important;
}
#CybotCookiebotDialogBodyLevelButtonsTable a{
  font-family: $fontBold !important;
}
#CybotCookiebotDialogBodyButtonDecline,#CybotCookiebotDialogBodyLevelButtonCustomize,#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection{
  @include transition();
  border: 1px solid $highlightColor !important;
  color: $btnSettingsForeground !important;
  font-family: $fontRegular !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  width: 40%;
  background-color: $btnSettingsBackground !important;
  &:hover{
    color: $btnSettingsHoverForeground !important;
    background-color: $btnSettingsHoverBackground !important;
    .CybotCookiebotDialogArrow{
      &:before,&:after{
        background-color: $white;
      }
    }
  }
  .CybotCookiebotDialogArrow{
    transform: none !important;
    border: none !important;
    position: relative !important;
    margin-left: 5px !important;
    &:before{
      @include transition();
      content:'';
      position: absolute;
      width: 15px;
      height: 3px;
      border-radius: 1px;
      background-color: $highlightColor;
      transform: rotate(90deg);
    }
    &:after{
      @include transition();
      content:'';
      position: absolute;
      width: 15px;
      height: 3px;
      border-radius: 1px;
      background-color: $highlightColor;
    }
  }
}


#CybotCookiebotDialogBodyButtonDecline,#CybotCookiebotDialogBodyLevelButtonCustomize,#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll{
  font-size: $fontSizeTabs !important;
}
#CybotCookiebotDialogTabContent{
  .CybotCookiebotDialogBodyLevelButtonSlider{
    background-color: $radioBtnInactiveBackground !important;
    border: 1px solid $radioBtnInactiveForeground;
    &:before{
      background-color: $radioBtnInactiveForeground !important;
    }
  }
  input[type=checkbox]{
    &[disabled]{
      &:checked{
        + .CybotCookiebotDialogBodyLevelButtonSlider{
          background-color: $radioBtnDisabledBackground !important;
          border: 1px solid $radioBtnDisabledForeground;
          &:before{
            background-color: $radioBtnDisabledForeground !important;
          }
        }
      }
    }
  }
  input:checked + .CybotCookiebotDialogBodyLevelButtonSlider{
    background-color: $radioBtnActiveBackground !important;
    border: 1px solid $radioBtnActiveForeground;
    &:before{
      background-color: $radioBtnActiveForeground !important;
    }
  }
 }
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover, #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover, #CybotCookiebotDialogBodyLevelButtonsSelectPane label:not([for=CybotCookiebotDialogBodyLevelButtonNecessary]) .CybotCookiebotDialogBodyLevelButtonDescription:hover, #CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover{
  color: $highlightColor;
}

#CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieGroup,.CybotCookiebotDialogDetailBodyContentCookieInfo{
  border-radius: 0 !important;
}
.CybotCookiebotDialogDetailBodyContentCookieContainerButton.collapsed::before, .CybotCookiebotDialogDetailBodyContentIABv2Tab.collapsed::before{
  top: 2px !important;
}
.CybotCookiebotDialogDetailBodyContentCookieContainerButton::before, .CybotCookiebotDialogDetailBodyContentIABv2Tab::before{
  left: 15px !important;
}
.CybotCookiebotDialogDetailBulkConsentCount{
  border: 2px solid $highlightColor !important;
  background-color: $white !important;
  color: #333;
}
.CybotCookiebotFader{
  display: none !important;
}
@include media-breakpoint-up(lg){
  #CybotCookiebotDialog #CybotCookiebotDialogBody .CybotCookiebotScrollContainer{
    max-height: 50vh !important;
    border-bottom: 0 !important;
  }
  .CybotCookiebotScrollContainer{
    padding: 60px 30px 40px !important;
  }
}

@media screen and (min-width: 601px) {
  #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyButton:not(:last-of-type), #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton, #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:not(:first-of-type) {
    width: 40%;
  }
}

 

Tags

cookiebot