Cookie-Consent-Banner mit JavaScript

Ohne Plugin, ohne WordPress, ohne extra Software, Cookie-Consent als Java-Script Lösung.

Cookie-Banner dürften zu den nervigsten Elementen aktueller Webseiten gehören. Die Anwender sind genervt, da diese auf jeder Webseite genervt werden, sofern sie nicht mittels Browserplugin die Cookie-Meldungen einfach ausblenden. Auch die Webseitenbetreiber sind genervt, da die korrekte Umsetzung jede Menge Arbeitszeit kostet und oft auch Geld, wenn man an die vielen kommerziellen WordPress-Plugins denkt.

Auch sind diese nicht immer nutzbar, beispielsweise, wenn die Webseite nicht in WordPress oder einem anderen CMS erstellt worden ist. Wir stellen daher in diesem Artikel die Umsetzung mit Java-Script vor. Damit lässt sich die Lösung auf jeder Webseite nutzen und auch in Programmen wie Magix Webdesigner.

Das Beispielscript gibt es hier zum Download

Videoanleitung zum Einbau

“Cookie Banner Generator” Software

Unsere neue kostenlose Software “Cookie Banner Generator” hilft Ihnen bei der Erstellung der Schritte für dieses Script. In der Software können Sie die hier gezeigten Scripte in einer komfortablen Benutzeroberfläche vornehmen und das Ergebnis exportieren.

Das Cookie-Consent-Script

Für unsere Anleitung verwenden wir das Cookie-Consent-Script. Dieses ist kostenlos, Open-Source und basiert rein auf Java-Script. Das Script lässt sich vielfältig anpassen und konfigurieren, wie die Demo-Seite eindrucksvoll demonstriert.

Im einfachsten Fall binden wir das Script einfach via CDN ein, natürlich lässt es sich auch selbst hosten.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.8.0/dist/cookieconsent.css" />
<script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.8.0/dist/cookieconsent.js" defer></script>

Design, Texte, Rubriken lassen sich mittels JSON konfigurieren. Hier legen wir Position, Texte, Funktionen fest und können auch festlegen, welche Rubriken wir anlegen wollen, z.B. essenzielle Cookies oder welche nur für analytische Zwecke benötigt werden.

Der Anwender kann Cookies entweder annehmen, ablehnen oder selbst konfigurieren.

Zu jeder Rubrik lassen sich die einzelnen Cookies darstellen, optional mit Detailinformationen. Hier kann der Anwender dann einzelne Rubriken auch an oder abwählen.

Neben der reinen Auswahl müssen die abgewählten Scripte natürlich auch blockiert werden. Auch hier unterstützt das Script, indem sich Script-Tags mit entsprechenden Attributen ausstatten lassen.

<script type="text/plain" data-cookiecategory="analytics">
  document.getElementById("cookie").innerText = "Ich erscheine nur, wenn ich zustimme!";
</script>

So wird dieses Element nur geladen, wenn der Benutzer der Gruppe “analytics” zustimmt.

Fazit

Das Script lässt kaum Wünsche offen, erfordert aber etwas Handarbeit, da die einzelnen Cookie-Verursacher zuerst identifiziert und eingebunden werden müssen. Auch die Scripte, welche blockiert werden sollen, müssen händisch erfasst werden.

Dafür ist die Software am Ende kostenlos und hat sonst keine weiteren Abhängigkeiten, benötigt keine Datenbank und kommt ohne serverseitige Scriptsprachen aus.

Auf die genauen Funktionen und Konfigurationsmöglichkeiten gehen wir in unserem Video ein.

Das Beispielscript gibt es hier zum Download

22 Kommentare

    1. Vielen Dank. Gibt es eine Möglichkeit die Cookieeinstellungen nachträglich zu ändern? Wie kann man die Einstellungen aufrufen, wenn das Cookie Banner nicht mehr sichtbar ist?
      Grüße
      Martin

  1. Eigentlich bin ich sehr zufrieden!

    Ich habe das Script wie beschrieben eingebaut und es funktioniert auch alles sehr schön … allerdings nur auf der Startseite.

    Sobald ich irgend eine Unterseite oder einen Pfad unterhalb des toplevels anwähle also domain.de/irgendwas/ wird der banner nicht eingeblendet.

    Habe ich da einfach eine Option übersehen?

  2. Super, vielen Dank für die Info. Aber das CookieBanner kommt bei mir jedes Mal. Muss ich noch manuell das Cookie setzen und abfragen, ob es gesetzt wurde?

    1. Also der Cookie sollte automatisch gesetzt werden. Wo testet Du das Ganze? Online oder lokal? Falls online, kann ich mir das irgendwo anschauen?
      Gruß
      Andy

  3. Ich bin sehr zufrieden mit dem Banner. Allerdings wirft der Generator jede menge Fehler in die Cookieconsent-init.js Datei. Erst nach ersetzen/anpassen der Demo-Basic Datei von github hat der Banner funktioniert.
    Ich denke wenn das behoben ist, wird sehr einfach sein einen Cookieconsent Banner zu erstellen.
    Trotzdem hat mir der Genertor sehr geholfen.
    Vielen Dank
    Gruß Ronny

    1. Hallo Ronny,

      hast Du unsere Software verwendet? Falls ja, dann würde ich mich freuen, wenn Du mir mal Deine Projektdatei zusendest. Wenn Du sagst, dass die Generierung hier und da nicht richtig funktioniert, kann ich mir das mal anschauen und die Software dann ggf. verbessern. Die Software ist noch recht neu und daher sind wir über Feedback dankbar.
      Gerne per E-Mail an: andy.dunkel@ekiwi.de

      Gruß
      Andy

  4. Hallo,

    kann man auch mit Java Script auf die einzelnen Kategorien zugreifen? Ich meine damit, hat der “analytics” Teil eine boolean Variable, mit der man checken kann, ob der Nutzer analytics aktiviert hat?

    MfG Len

    1. Ich denke das geht, aber schaue am besten direkt in das Github-Wiki dafür, da gibt es Code-Beispiele für Java-Script und auch Callbacks.

  5. Ich finde leider nicht die Einstellmöglichkeiten für die Höhe des Dialogfensters. (in der Mobilen Ansicht passt das alles, ist alles i.O.), aber im Mediaquerie ist das Fenster zu klein, wenn ich auf Auswahl drücke. Denn sind unten nicht alle Buttons zu sehen.

    Lg
    Charlie

Schreibe einen Kommentar zu Denis Nayland Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert