Cookiebanner sind dazu da, die Zustimmung zur Verwendung von Cookies von deinen Webseitenbesuchern einzuholen. Dies ist in vielen Ländern gesetzlich vorgeschrieben, einschließlich der Europäischen Union und ihrer Mitgliedsstaaten - also auch in Deutschland - sowie anderer Länder auf der ganzen Welt.

Sie tragen dazu bei, die Privatsphäre der Benutzer zu schützen und ihnen die Kontrolle darüber zu geben, wie ihre Daten von deiner Website erfasst und verwendet werden.

In diesem Beitrag will ich dir ein Tool an die Hand geben, mit dem ich das Cookiebanner meines Blogs erzeugt habe: Cookieconsent.

Was sind Cookies

Cookies sind kleine Datenpakete, die auf dem Gerät eines Benutzers gespeichert werden, wenn dieser eine Website besucht. Diese Cookies können verwendet werden, um das Verhalten des Benutzers zu verfolgen, während er auf der Website navigiert. Sie können auch verwendet werden, um Informationen zu speichern, die der Benutzer auf der Website eingibt, wie z. B. Anmeldeinformationen oder Einstellungen.

Auch Web Beacons und ähnliche Trackingverfahren benötigen eine explizite Zustimmung, sofern sie nicht zwangsläufig für den Betrieb der Webseite benötigt werden.

Wann brauche ich eine Zustimmung

Sobald du auf deiner Webseite Cookies oder Web Beacons fürs Tracking einsetzt, darfst du das erst tun, nachdem der Besucher zugestimmt hat. Darüber hinaus gibt es auch einige externe Dienste, die deine Besucher ebenfalls tracken, auch wenn du das nicht willst…

Diese Dienste dürfen natürlich ebenfalls erst nach Aufklärung und Zustimmung eingebunden werden. Hier ein paar Beispiele für Dienste, die du erst nach Zustimmung aktivieren darfst:

  • Google Analytics
  • Google AdSense
  • Google Fonts (Schriftarten)
  • eingebettetes YouTube Video
  • eingebetteter Twitch Stream
  • eingebettetes Bild von Imgur
  • Facebook Like Button

und viele mehr… Gerade bei außereuropäischen Diensten musst du aufpassen und dir deren Datenschutzerklärung durchlesen, bevor du sie einbindest.

Aktuell dürfen nur Webseiten, mit denen du kein Geld verdienst auf Cookiebanner verzichten.

Wie muss das Cookiebanner aussehen

In Deutschland sind die Anforderungen an Cookie-Banner im Telemediengesetz (TMG) und im Bundesdatenschutzgesetz (BDSG) geregelt. Ich bin kein Anwalt, aber grob gesagt verlangen diese Gesetze, dass Websites Benutzer über die Verwendung von Cookies informiert werden und ihre Zustimmung zu dieser Verwendung eingeholt werden müssen.

Das Banner muss…

  • … gut sichtbar und leicht verständlich sein: Das Banner sollte prominent auf der Website angezeigt werden und eine Sprache verwenden, die auch für Benutzer, die mit Fachbegriffen nicht vertraut sind, leicht verständlich ist.

  • … über die Verwendung von Cookies informieren: Das Banner sollte erklären, was Cookies sind und wie sie auf der Website verwendet werden. Es sollte Benutzer auch über die Arten von Cookies informieren, die verwendet werden, z. B. ob sie zum Tracking oder zum Speichern von Benutzereinstellungen verwendet werden.

  • … die Zustimmung des Benutzers einholen: Das Banner sollte den Benutzer auffordern, der Verwendung von Cookies auf der Website zuzustimmen. Diese Zustimmung sollte durch eine aktive Handlung eingeholt werden, wie z. B. das Klicken auf eine Schaltfläche oder das Ankreuzen eines Kästchens.

  • … einen Link zur Datenschutzrichtlinie der Website enthalten: Das Banner sollte einen Link zur Datenschutzrichtlinie der Website enthalten, die detailliertere Informationen über die Verwendung von Cookies und andere Datenerfassungspraktiken auf der Website enthalten sollte.

Du solltest beachten, dass Websites nach deutschem Recht den Benutzern die Möglichkeit geben müssen, die Verwendung von Cookies, die für Tracking-Zwecke verwendet werden, abzulehnen. Dies sollte im Cookie-Banner und in der Datenschutzerklärung deutlich gemacht werden. Am besten sprichst du das ganze mit deinem Anwalt durch um dich abzusichern.

Wie du das cookieconsent Framework verwendest

Es gibt mehrere Frameworks, mit denen du ein solches Banner implementieren kannst. Nicht alle davon halten die oben genannten Richtlinien ein.

Ich nutze cookieconsent von dem GitHub User orestbida. Dies ist unter der MIT-Lizenz freigestellt. Das bedeutet, dass du es sowohl für private als auch für kommerzielle Zwecke verwenden darfst.

Bevor du es einbinden kannst, musst du die folgenden drei Dateien als statische Dateien erreichbar machen. Kopiere sie am besten zusammen in einen cookieconsent Ordner.

  • cookieconsent.js
  • cookieconsent.css
  • cookieconsent-init.js

Datei cookieconsent.js

Dies ist das Framework selbst.

Du solltest diese Datei nicht direkt von GitHub einbinden! Zum einen weißt du nicht, ob sie eines Tages gelöscht wird. Zum anderen gibst du dadurch die IP-Adresse deiner Webseitenbesucher an GitHub, noch bevor sie die Möglichkeit haben Einspruch einzulegen.

download

Datei cookieconsent.css

Dies ist die Datei, in der du Design und Farben verändern kannst, um das Banner an deine Webseite anzupassen. Falls du nichts verändern willst, sehen die Originalfarben auch schon sehr schick aus. Sowohl light color-scheme als auch dark mode sind schon enthalten.

download

Datei cookieconsent-init.js

Die init Datei ist, wo du die meisten Änderungen machen musst. Hier kommt der komplette Text und die Einstellungen deines speziellen Cookiebanners rein. In diesem Post gehe ich nur auf die notwendigen Einstellungen ein. Mehr Informationen findest du auf GitHub.

Diese Datei besteht mindestens aus dem initCookieConsent() und dem run() Befehl.

Als Beispiel findest du hier meine aktuelle cookieconsent-init.js Datei mit Kommentaren.

// obtain plugin
const cc = initCookieConsent();

// Mein Hugo Papermod Theme benutzt die Bodyclass "dark"
// um den dark mode Status zu ermitteln.
// cookieconsent hingegen benutzt c_darkmode. 
// Deswegen synchronisiere ich die beiden Klassen:
var bodyclasses = document.body.classList
if (bodyclasses.contains("dark")) {
  bodyclasses.add('c_darkmode');
}
else {
  bodyclasses.remove('c_darkmode');
}

// cookieconsent ausfuehren:
cc.run({
  current_lang: 'de', // Sprache
  autoclear_cookies: true, // Cookies bei opt-out resetten
  page_scripts: true, // Scripte von cookieconsent managen lassen
  mode: 'opt-in' // opt-in ist Pflicht in der EU
  force_consent: true, // graut die Seite aus, sodass das Banner sichtbarer wird
  // cookie_name: 'cc_cookie',               // default: 'cc_cookie'

  onFirstAction(user_preferences, cookie) {
    // Funktion die ausgefuehrt wird wenn
    // der Benutzer irgendeine Option auf dem Banner anklickt.
  },

  onAccept(cookie) {
    // Funktion die ausgefuehrt wird wenn
    // alle Cookies angenommen werden
  },

  onChange(cookie, changed_preferences) {
    // Funktion die ausgefuehrt wird wenn
    // der Benutzer die Cookieeinstellungen nachtraeglich aendert
    location.reload(); // Seite neu laden
  },

  gui_options: {    // Layout Einstellungen, sind geschmackssache...
                    // Alternativen in den Kommentaren.
    consent_modal: {
      layout: 'cloud', // box/cloud/bar
      position: 'top center', // bottom/middle/top + left/right/center
      transition: 'slide', // zoom/slide
      swap_buttons: true, // enable to invert buttons
    },
    settings_modal: {
      layout: 'box', // box/bar
      position: 'left', // left/right
      transition: 'zoom', // zoom/slide
    },
  },
  languages: { // Hier der Text und die Cookiekategorien...
    de: { // Ich habe nur eine deutsche Version
      consent_modal: {
        title: 'Wir benutzen Cookies! <img src="/cookieconsent/cookies.webp"></img>',
        description: 'Hi, diese Website verwendet Cookies, um ihren ordnungsgemäßen Betrieb zu gewährleisten, und Tracking-Cookies und vergleichbare Technologien wie Web Beacons, um zu verstehen, wie Sie mit dieser Website interagieren, und um Ihnen gezielte Werbung bereitzustellen. Letztere werden erst nach Zustimmung gesetzt. <br><button type="button" data-cc="c-settings" class="cc-link">Lass mich wählen</button>',
        primary_btn: { // Button um alle Cookies anzunehmen
          text: 'Alle Akzeptieren',
          role: 'accept_all', // 'accept_selected' or 'accept_all'
        },
        secondary_btn: { // Button um nur noetige Cookies anzunehmen (Pflicht in DE)
          text: 'Alle Ablehnen',
          role: 'accept_necessary', // 'settings' or 'accept_necessary'
        },
      },
      settings_modal: { // Menue fuer Eookieeinstellungen
        title: 'Cookie Einstellungen',
        save_settings_btn: 'Einstellungen Speichern',
        accept_all_btn: 'Alles Akzeptieren',
        reject_all_btn: 'Alles Ablehnen',
        close_btn_label: 'Schließen',
        cookie_table_headers: [
          { col1: 'Name' },
          { col2: 'Domain' },
          { col3: 'Expiration' },
          { col4: 'Description' },
        ],
        blocks: [
          {
            title: 'Cookie Nutzung 📢',
            description: 'Wir verwenden Cookies und vergleichbare Technologien wie Web-Beacons, um die grundlegenden Funktionen der Website sicherzustellen und Ihr Online-Erlebnis zu verbessern. Sie können für jede Kategorie wählen, ob Sie sich jederzeit an- oder abmelden möchten. Weitere Einzelheiten zu Cookies und anderen sensiblen Daten finden Sie in der vollständigen <a href="/datenschutz" class="cc-link">Datenschutzerklärung</a>.',
            //Link zur Datenschutzerklaerung, sollte ohne Zustimmung erreichbar sein
          }, {
            title: 'Notwendige Cookies',
            description: 'Diese Cookies sind für das reibungslose Funktionieren meiner Website unerlässlich. Ohne diese Cookies würde die Website nicht richtig funktionieren.',
            toggle: {
              value: 'necessary', // Kategorie "necessary" fuer notwendige Cookies
              enabled: true,
              readonly: true, // cookie kategorien mit readonly=true werden als notwendig behandelt
            },
            cookie_table: [ // hier kannst du deine notwendigen Cookies auflisten
              {
                col1: 'cc_cookie', // match all cookies starting with "_ga"
                col2: 'batchest.com',
                col3: '6 months',
                col4: 'Stores your answers to this cookie consent tool.',
              },
            ],
          }, {
            title: 'Werbe- und Targeting-Cookies und Web-Beacons',
            description: 'Diese Cookies sammeln Informationen darüber, wie Sie die Website nutzen, welche Seiten Sie besucht und auf welche Links Sie geklickt haben.',
            toggle: {
              value: 'ads', // Kategorie "ads" fuer Marketing Cookies
                            // z.B. google AdSense
              enabled: false,
              readonly: false,
            },
          },
          {
            title: 'Leistungs- und Analyse-Cookies und Web-Beacons',
            description: 'Diese Cookies und Web Beacons können Informationen über Sie (IP-Adresse, Browserinformationen usw.) oder darüber sammeln, welche Seiten Sie besucht und welche Links Sie angeklickt haben.',
            toggle: {
              value: 'analytics', // Kategorie "analytics" fuer Analysecookies 
                                  //z.B. Google Analytics
              enabled: false,
              readonly: false,
            },
          },
          {
            title: 'Mehr Informationen',
            description: 'Bei Fragen zu unserer Richtlinie zu Cookies und Ihren Auswahlmöglichkeiten <a class="cc-link" href="/impressum">kontaktieren Sie uns bitte</a>.', 
            //Link zum Impressum, sollte ohne Zustimmung erreichbar sein
          },
        ],
      },
    },
  },
});

Auch diese Datei legst du am besten zusammen mit den anderen beiden ab, sodass du sie auf deiner Webseite einbinden kannst.

cookieconsent Dateien einbinden

Hast du alle Einstellungen durch und liegen die drei Dateien bereit, kannst du sie in deinem <body> oder <head> Tag im HTML Code deiner Webseite einbinden. Am besten bevor du andere Scripte einbindest.

<body>
<link rel="stylesheet" href="/cookieconsent/cookieconsent.css" media="print" onload="this.media='all'">
<script defer src="/cookieconsent/cookieconsent.js"></script>
<script defer src="/cookieconsent/cookieconsent-init.js"></script>

...
</body>

Jetzt sollte das Banner erscheinen, wenn du die Webseite neu lädst.

Scriptausführung erst nach Zustimmung

Ziel der Übung ist es, dass die Scripte nur dann ausgeführt werden, wenn der Benutzer zugestimmt hat.

Um Scripte von cookieconsent starten zu lassen, sobald der User einer bestimmten Cookie-Kategorie zugestimmt hat, musst du sie mit zwei speziellen Tags versehen:

  • type
  • data-cookiecategory

Durch type="text/plain" wird die initiale Ausführung beim Laden der Seite verhindert. Durch data-cookiecategory lernt cookieconsent, dass es dieses Script managen und welche Kategorie es verwenden soll.

Beispiel Google Analytics

So könntest du das Google Analytics Script nur nach Zustimmung der “analytics” Cookie Kategorie ausführen:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-0" type="text/plain" data-cookiecategory="analytics"></script>
<script type="text/plain" data-cookiecategory="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123456789-0');
</script>

Beispiel Google Adsense

So könntest du das Google Adsense Script nur nach Zustimmung der “ads” Cookie Kategorie ausführen:

<script async type="text/plain" data-cookiecategory="ads"
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567891234567"
    crossorigin="anonymous"></script>

Cookieeinstellungen ändern

Du solltest deinen Besuchern die Möglichkeit geben, ihre Zustimmung nachträglich zu ändern. Zum Beispiel lehnen manche Benutzer pauschal alles ab. Später könnten sie merken sie, dass sie dadurch auf eingebundene externen Inhalte wie z.B. einen Twitch Stream verzichten müssen.

Einen Link um das Cookieeinstellungsmenü aufzurufen kannst du so implementieren:

<a href="#" style="color:silver" data-cc="c-settings">Cookie Settings</a>

Natürlich funktioniert dieser Link erst, nachdem das cookieconsent-init.js Script geladen ist. Ich habe einen solchen Button in den Footer der Webseite integriert.


Konnte ich helfen? Ich freue mich über einen Drink! 💙