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