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!

Ü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

Einen Kommentar schreiben

Bitte rechnen Sie 9 plus 1.