Cookie-Banner selbst erstellen

Cookie-Banner Screenshot mit Akzeptieren-Button

Seitdem im Web die DSGVO in Kraft getreten ist, gibt es eine Vielzahl an Angeboten für kostenpflichtige Cookie-Banner. Obwohl diese zumeist auch technisch sehr gut sind, reicht es für die meisten Webseiten, einen Cookie-Banner mit weniger Komplexität zu nutzen. Aus diesem Grund möchten wir dir unseren Cookie-Banner gratis zur Verfügung stellen inklusive einer Anleitung, wie dieser eingebunden werden kann.

Unser Cookie-Banner basiert ausschließlich auf HTML, CSS und JavaScript. Es sind keine externen Tools wie jQuery oder PHP nötig. Deshalb ist die Einbindung ziemlich einfach. Zunächst muss das HTML eingebunden werden und dies geschieht am besten am Ende der Seite. Nun können hier weitere Anpassungen getätigt werden. Dazu gehören der Link zu “Mehr erfahren” sowie der allgemeine Text für den Cookie-Banner. Damit steht die Struktur. In einem nächsten Schritt kann das Aussehen der Komponente angepasst werden. Dazu muss der CSS-Code eingefügt werden.

Wir haben den Cookie-Banner auch für mobile Geräte optimiert. Auch hier gilt wieder: Gerne können Sie das Styling Ihren Wünschen gemäß anpassen und Abstände, Farben, Größen sowie die Position ändern. Kommen wir nun aber zum letzten und natürlich wichtigstem Punkt, der Funktionalität. Grundsätzlich soll der Banner nur dann angezeigt werden, wenn der Besucher diesem noch nicht zugestimmt hat. Den anderen Fall, das Nichtanzeigen, haben wir bereits mit CSS geregelt. Dazu muss der JavaScript-Code vor dem schließenden Body-Tag eingefügt werden. Nun folgt der gesamte Code, der auf Github Gist gehostet ist. Dieser kann einfach eingebunden werden.

Das war es auch schon! Ziemlich einfach, oder? Falls Sie Fragen dazu haben oder Hilfe bei der Implementierung benötigen, hinterlassen Sie uns gerne ein Kommentar oder nutzen Sie unser Kontakformular. Wir helfen gerne weiter!

Update 2020: Leider ist der Cookie-Banner nicht mehr vollständig konform mit der DSGVO. Wir arbeiten hier bereits an einer neuen Lösung, die sowohl kostenfrei als auch kostenpflichtig genutzt werden kann.

Update 31.03.2021: Wir haben mittlerweile einen Cookie Banner programmiert, den Sie über unser Tool nutzen können. Aktuell befinden wir uns noch in der Beta-Phase bis ca. Q3 2021. Folgende Dinge kann der Banner:

  • Automatisches Blocken von Cookies vor der Zustimmung (nur First-Party-Cookies, Third-Party-Cookies sind wir noch dran)
  • Automatisches Erkennen von Cookies
  • Oberfläche zur Verwaltung der Cookies
  • Einfache Einbindung mit einem kleinen Script im <head> der Seite

Update 06.04.2021: Unsere Beta ist nun auf Grund der vielen Teilnehmer erstmal geschlossen für neue Benutzer. Vielen Dank für das umfassende Feedback an alle Teilnehmer. Wir werden nun die Wünsche umsetzen und dann das Tool wieder für alle öffnen. Wenn Sie dann benachrichtigt werden wollen, tragen Sie sich hier unten ein:

Bitte addieren Sie 9 und 6.

Über den Autor

Hallo, ich bin Daniel Koch. Ich helfe Firmen und Privatpersonen, das Beste aus ihrem Web-Auftritt herauszuholen, so dass diese mehr Kunden und Aufträge erhalten. Seit meinem 13. Lebensjahr beschäftige ich mich mit der Erstellung und Optimierung von Webseiten und bin ein Digital Native. Gerne helfe ich auch Ihnen weiter. Ich freue mich auf Ihren Kommentar.

Kommentare

Kommentar von Klaus |

Vielen Dank für den Cookie-Banner.

Leider funktioniert der Button "Akzeptieren" nicht. Nichts bewegt sich und der Cookie-Banner bleibt stehen.
Muß bei > span id="accept" a href="#" title="Akzeptieren" Akzeptieren < der # gegen einen anderen Wert ersetzt werden?

Vielen Dank im Voraus

Antwort von Daniel Koch

Hallo,

sehr gerne! Eigentlich muss das "#" nicht ersetzt werden. Wenn ich die HTML so wie es ist, herunterlade, funktioniert es bei mir. Das ist komisch. Gerne kannst du mir mal privat die Webseiten-URL zusenden, dann kann ich mal ein Auge drauf werfen. Vielleicht finden wir dann eine Lösung.

Viele Grüße
Daniel Koch

Kommentar von Jens |

Moin,

hat gut funktioniert, nur im Tablet Querformat bleibt die Höhe fix und der Text wird nicht umgebrochen.
Hast Du eine Lösung dafür?

LG Jens

Antwort von Daniel Koch

Hi Jens,

ich habe mir das mal auf deiner Webseite angeschaut. Komischerweise wird bei mir der Text umgebrochen. Gerne kannst du mir aber mal privat einen Screenshot senden, dann schaue ich gerne mal drauf.

Viele Grüße
Daniel Koch

Kommentar von Ulrike |

Guten Morgen,
super, der Banner ist eingefügt und erscheint wie gewünscht - nur leider ist meine Hintergrundfarbe und Linkfarben nicht mehr wie vorher. Vermutlich habe ich mit dem color-tag im Banner damit meine Seite komplett geändert. Wie kann ich das reparieren?
Danke im Voraus.
Grüße aus Berlin
Ulrike

Antwort von Daniel Koch

Hallo, das freut mich!

Sie müssen da natürlich nur den relevanten Code bei uns rauskopieren. Das sind Zeile 10-77, Zeile 81-86 sowie Zeile 88-109. Der Rest Außenrum ist nur "Schablone" und stellt selbst eine eigenständige "Webseite" dar. D.h. sie haben das komplette kopiert, müssen aber nur die genannten Zeilen kopieren, denn ansonsten wird ihre Seite komisch.

Bei weiteren Fragen gerne per E-Mail :) Hoffe ich konnte helfen!

Liebe Grüße aus dem Rhein-Neckar-Kreis
Daniel Koch

Kommentar von Dominik |

Hallo

Ich habe den Code verwendet und der Cookie Hinweis ist auch auf der Website jetzt ersichtlich.
Leider funktioniert es nicht auf dem Smartphone oder Tablet, da der code anscheinend nicht responsive ist.

Besten Dank für Ihre Hilfe
LG Dominik

Antwort von Daniel Koch

Hallo,

schade, dass es bei Ihnen nicht funktioniert hat. Manchmal ist es auch so, dass das CSS der Seite den Cookie-Banner überschreibt und daher es nicht mehr responsive ist. An sich ist der Cookie-Banner nämlich responsive :) Falls Sie noch Hilfe brauchen, melden Sie sich gerne per Mail bei mir.

Viele Grüße
Daniel Koch

Kommentar von Harald Kauffmann |

Hallo,
vielen Dank für das Beispiel. Den Banner kann ich akzeptieren aber wenn ich auf die Seite zurück komme so erscheint der Cookie-Banner abermals. Ich hatte verstanden, dass der Banner nur einmal zum Akzeptieren auftauchen soll.
Dieses Problem tritt bei MS Edge, MS IE, Google Chrome auf aber nicht beim Firefox auf.
Eine Testseite liegt auf http://kauffmann.dnsalias.com/main/firma/firma_frame_test.html.
Grüße aus dem Ruhrgebiet
Harald Kauffmann

Antwort von Daniel Koch

Hallo Herr Kauffmann,

vielen Dank für die Verwendung des Cookie-Banners.

Ich habe mir Ihre Seite angeschaut. Ihre Seite verwendet Frames und daher wird der Cookie, der abspeichert, ob der Banner schon bestätigt wurde, abgeblockt. Ich kann Ihnen hier leider nicht viel weiterhelfen. Vielleicht planen Sie ja langfristig von Frames wegzugehen, dann kann ich gerne versuchen weiterzuhelfen. Haben Sie diese Möglichkeit?

Viele Grüße aus dem Rhein-Neckar-Kreis!
Daniel Koch

Kommentar von Stefan Kammann |

Hallo, gut gemeinter Service, aber der Cookie-Banner ist in dieser Form doch gar nicht DSGVO-konform

Antwort von Daniel Koch

Sie haben total recht. Wie ich im Artikel unten schon geschrieben habe, arbeiten wir bereits an einer DSGVO-konformen Lösung. Die wird auch bald kommen.

Kommentar von Dominik Knaup |

Hi, ich würde gerne euren Cookie Banner auf meiner Website einbinden. Habt ihr schon den "neuen" Cookiebanner, der auch vollständig DSGVO konform ist veröffentlich?

Antwort von Daniel Koch

Hallo Dominik,

bis Ende Q1 2021 werden wir es voraussichtlich fertig haben.

Danke für die Geduld.

Liebe Grüße
Daniel Koch

Kommentar von Wolfgang |

Hallo Dominik,

wie kann ich es gestalten dass erst nach dem "Akzeptieren" ausserhalb des Banners etwas geklickt werden kann?
Ich denke, so sollte es sein. Besser wäre es auch das die automatische Weiterleitung (<meta http-equiv="refresh" content="5; URL=index_start.html">) auch erst nachher funktioniert.

VG
Wolfgang

Kommentar von Wolfgang K. |

Sorry, wollte nicht Dominik sondern Herr Daniel Koch schreiben, sorry!

Aber trotzdem meine Frage:
Wie kann ich es gestalten dass erst nach dem "Akzeptieren" ausserhalb des Banners etwas geklickt werden kann?
Ich denke, so sollte es sein. Besser wäre es auch das die automatische Weiterleitung (<meta http-equiv="refresh" content="5; URL=index_start.html">) auch erst nachher funktioniert.

Danke im Voraus!
Wolfgang K.

Antwort von Daniel Koch

Kein Problem! Sie könnten natürlich ein <div> über die gesamte Seite legen, welches einen höheren z-index hat als der Rest der Seite, welches aber durchsichtig bleibt. Damit hätten Sie diesen Effekt. Laut DSGVO muss aber die Bedienung auch ohne Akzeptieren des Cookie-Banners möglich sein. Wie gesagt, wir arbeiten an diesen Themen und wollen Ende Q1 2021 etwas veröffentlichen, was dann auch der DSGVO vollständig entspricht. Über die automatische Weiterleitung kann ich Ihnen leider nichts direkt sagen, weil das hier total auf Ihren Fall ankommt.

Liebe Grüße
Daniel Koch

Kommentar von Dominik Knaup |

Hi, ich hab ja schon mal angefragt, wie es mit dem Cookie Manager aussieht, kannst du mir ungefähr sagen, wann der fertig wäre, damit ich planen kann? :)

Antwort von Daniel Koch

Hi Dominik,

wir werden gegen Ende Q1 2021 voraussichtlich soweit sein.

Liebe Grüße
Daniel Koch

Kommentar von Wolfgang |

Hallo Daniel,
danke für die Antwort!
Ein <div> in den Anfang des <body> ?
Hat leider keinerlei Wirkung... :-(
VG
Wolfgang

Antwort von Daniel Koch

Schreiben Sie mir ruhig einmal per E-Mail. Sie müssten dem <div> natürlich auch noch CSS-Befehle geben, so dass es den Inhalt blockiert, falls noch nicht geschehen.

Liebe Grüße

Daniel

Kommentar von Markus Bosshard |

Hallo Herr Koch
Mit Ihrem Cookie-Banner habe ich endlich etwas einfaches und nicht verpflichdendes gefunden. Ich bin sehr daran interessiert, wenn Sie die neue DSGVO Version fertiggestellt haben, diese gegen entsprechende Gebühren bei uns zu installieren.
Zu der aktuellen Version habe ich noch eine Frage: Sollte das Banner nicht jedesmal, wenn die Seite aufgerufen wird angezeigt werden?
Ich muss jeweils die aktuellen Browser-Daten löschen, um das Banner beim Aufruf der Seite wieder zu erhalten.

Vielen Dank für Ihre tolle Arbeit
Markus Bosshard

Antwort von Daniel Koch

Hallo Herr Bosshard,

vielen Dank für Ihr positives Feedback.

Der Banner sollte nur dann angezeigt werden, wenn er noch nicht bestätigt worden ist. Das Opt-In wird aktuell in einem Cookie gespeichert, d.h. beim zweiten Aufruf wird dieser nicht nochmal angezeigt, außer Sie leeren die Cookies, wie Sie es gemacht haben.

Viele Grüße
Daniel

Kommentar von Dominik Knaup |

Ich hab aus versehen das Abonnement storniert, daher dieser Kommentar um wieder dabei zu sein :)...

Kommentar von Bernd Kö |

den Code von Zeile 81-86 muß ich aber in jeder Seite einfügen, oder?

Antwort von Daniel Koch

Ja, richtig! Das kommt auf jede Seite. Aber auch das CSS und das JavaScript müssen auf alle Seiten, damit der Cookie-Banner gut aussieht und funktioniert.

Viele Grüße
Daniel Koch

Kommentar von Hans-Georg |

Wirklich ein wunderbar einfaches Tool, freue mich schon auf die aktualisierte Version :)

Antwort von Daniel Koch

Vielen Dank für das Feedback! Bald ist es soweit :)

Kommentar von Markus Bosshard |

Hallo Herr Koch, ich würde gerne ihr Banner auf unserer Web-Seite einbinden und als Beta Tester zur Verfügung stehen.
Mit freundlichen Grüssen
Markus B

Antwort von Daniel Koch

Hallo Markus,

sehr gerne! Melden Sie sich bitte mit Ihrer URL bei uns und wir regeln alles weitere für Sie.

Viele Grüße
Daniel Koch

Kommentar von Stephan Bauer |

Hallo Herr Koch,
ich möchte Ihren Cookie-Banner zweckentfremdet als Popup für meinen Newsletter benutzen. Allerdings hätte ich gerne, dass dieser erst nach 4 Sekunden zeit verzögert öffnet und auch jedes Mal öffnet, ohne ein Cookie zu setzen. Ist dies möglich?
Viele Grüße,
Stephan

Antwort von Daniel Koch

Hallo Stephan,

da würde ich folgendes vorschlagen. Sie müssen das HTML entsprechend Ihren Texten anpassen und den Button verändern. Das JavaScript dazu könnte so aussehen:

var footerCookie = document.querySelector("#footer-cookie");

footerCookie.style.display = "none";

setTimeout(function() {
  footerCookie.style.display = "block";
}, 4000);

Dieser Code blendet das Popup aus und zeigt es nach vier Sekunden an. Hoffe das hilft, aber wahrscheinlich müssen Sie noch ein wenig basteln. Wenn Sie etwas Individuelles brauchen, sagen Sie uns gerne per Mail Bescheid.

Viele Grüße
Daniel Koch

Kommentar von Stephan Bauer |

Hallo Herr Koch,
vielen Dank für Ihre Hilfe, es hat alles wunderbar geklappt!
LG, Stephan

Kommentar von Alex |

Guten Morgen Herr Koch,

ich würde Ihr Consent Banner gerne in meinen Shop einbinden, verstehe aber nicht wo genau ich den HTML Code einfügen muss. Ich benutze das Shopsystem Shopify. Können Sie helfen?

Liebe Grüße
Alex

Antwort von Daniel Koch

Hi Alex,

leider geht unser Cookie-Banner nicht mit Shopify. Vielleicht gibt es da eine Lösung von Shopify selbst, die besser funktioniert.

Viele Grüße
Daniel Koch

 

 

Kommentar von Felix Lautenschläger |

Hallo,

ich würde gerne einen Ablehnen Button hinzufügen, Leider scheite ich am Code, der Button wird bei mir nicht klickbar.
Hätten Sie hier evtl. eine passende Lösung?

Das wäre super und ich würde mich riesig freuen :)

viele Grüße
Felix

Antwort von Daniel Koch

Hallo Herr Lautenschläger,

Sie können uns gerne eine kurze E-Mail senden mit dem aktuellen Stand und Ihrer Webseite, dann können wir da gerne kurz drüber schauen.

Viele Grüße
Daniel Koch

Einen Kommentar schreiben

Bitte addieren Sie 2 und 1.