Vier eigene Cookie-Banner-Designs zum Bearbeiten und Kopieren, ein Checker, der riskante Optionen nach den Leitlinien der britischen ICO markiert, und Code für Google Consent Mode v2.
Ein guter Cookie-Banner bietet Alle akzeptieren und Alle ablehnen nebeneinander an, ermöglicht eine Auswahl nach Kategorien und lässt jeden nicht notwendigen Schalter aus, bis der Besucher handelt. Unten findest du vier eigene Banner-Designs zum Bearbeiten und Kopieren, einen Checker für riskante Optionen und den passenden Google Consent Mode Code.
Banner-Optionen im Überblick (basierend auf den Leitlinien der britischen ICO, Stand Oktober 2026)
Die meisten Banner-Galerien zeigen Screenshots fremder Banner, ohne zu sagen, ob sie die Regeln einhalten. Die Beispiele hier sind unsere eigenen Designs, live und bearbeitbar, und zu jedem steht, was die Leitlinien der britischen Aufsichtsbehörde wirklich zu Ablehnen, Voreinstellungen und Schweigen sagen. Diese Seite erklärt Design-Muster; sie ist keine Rechtsberatung.
Die Seite der britischen ICO zum Einwilligungsmanagement beschreibt als gute Praxis einen Mechanismus, bei dem das Ablehnen so einfach ist wie das Zustimmen, und ihr Negativbeispiel ist ein Banner mit Alle akzeptieren, aber ohne Alle ablehnen. Anderswo legt jede nationale Behörde die Regeln fest, prüfe also die Leitlinien der Länder, die du bedienst.
Laut ICO gelten Schweigen oder Untätigkeit nicht als Einwilligung, und ein Pop-up, das die weitere Nutzung als Einwilligung wertet, stuft sie als Vorab-Aktivierung von Cookies ohne Einwilligung ein. Wenn ein Besucher den Banner ignoriert, lass nicht notwendige Cookies aus.
Cookies, die für etwas, das der Besucher angefordert hat, unbedingt erforderlich sind, etwa ein Warenkorb oder ein Login, fallen unter eine Ausnahme. Die ICO weist darauf hin, dass Cookies, die hilfreich oder bequem, aber nicht notwendig sind, trotzdem eine Einwilligung brauchen.
Damit teilst du Google-Tags mit, ob der Besucher zugestimmt hat. Du setzt mit gtag('consent', 'default', ...) einen Standardwert, bevor die Tags laden, und rufst gtag('consent', 'update', ...) auf, wenn er sich entscheidet. Version 2 hat die Parameter ad_user_data und ad_personalization neben ad_storage und analytics_storage hinzugefügt.
Beides kann funktionieren. Eine Leiste unten lässt die Seite lesbar, ein zentriertes Fenster führt schneller zu einer Entscheidung, verdeckt aber Inhalte. Wichtiger ist, dass beide Optionen gleich einfach sind und nichts Nicht-Notwendiges vorher läuft.
Jede Vorschau läuft in einer Sandbox ohne Skripte, die Buttons tun hier also nichts. Kopiere das Markup und verbinde die Buttons mit deinem eigenen Consent-Code.
Das häufigste Layout. Akzeptieren und Ablehnen haben denselben Stil; Auswählen öffnet dein Einstellungsfenster.
Braucht auf großen Bildschirmen weniger Platz. Auf dem Handy sollte sie sich über die volle Breite ziehen.
Notwendige Cookies werden als immer aktiv angezeigt; jedes andere Kästchen startet ohne Häkchen.
Ein kleiner Link im Footer jeder Seite lässt Besucher ihre Meinung jederzeit ändern.
Wenn deine Website Google-Tags nutzt, setze den Standard, bevor die Tags laden, und aktualisiere ihn, wenn der Besucher wählt. Die Parameternamen unten sind die aus Googles Dokumentation zum Consent Mode.
Consent Mode Parameter
Der Default-Aufruf steht vor deinem Google-Tag-Snippet. wait_for_update gibt dem Banner 500 Millisekunden, um ein Update zu senden, bevor die Tags feuern.
Layout
Leiste unten
Box in der Ecke
Zentrierte Box
Was dein Banner tut
Alle ablehnen ist auf der ersten Ebene
Akzeptieren und Ablehnen sehen gleich aus
Analyse-Schalter ist anfangs eingeschaltet
Text sagt, Weitersurfen bedeutet Einwilligung
Ein Link Cookie-Einstellungen lässt Besucher ihre Meinung ändern
Vorschau
Wir verwenden Cookies, um diese Website zu betreiben und, wenn du zustimmst, Besuche zu messen.
Wenn du weitersurfst, stimmst du unserer Verwendung von Cookies zu.
Alle akzeptieren
Alle ablehnen
Auswählen
Analyse
Hinweise
In deiner Auswahl wurden keine riskanten Optionen gefunden.
Kein Alle ablehnen auf der ersten Ebene. Die ICO beschreibt es als gute Praxis, das Ablehnen so einfach zu machen wie das Zustimmen.
Ablehnen wirkt schwächer als Akzeptieren. Unserer Ansicht nach macht das Ablehnen schwerer als Zustimmen; ein gleichwertiges Paar ist das sicherere Design.
Ein nicht notwendiger Schalter ist anfangs an. In den Positivbeispielen der ICO sind Schalter für nicht ausgenommene Technologien standardmäßig aus.
Weitersurfen wird als Einwilligung gewertet. Laut ICO gelten Schweigen oder Untätigkeit nicht als Einwilligung.
Keine Möglichkeit, die Wahl später zu ändern. Laut ICO sollten Nutzer nicht notwendige Cookies einfach aktivieren oder deaktivieren können.
Eine Design-Hilfe auf Basis veröffentlichter ICO-Leitlinien, keine Rechtsberatung.
Kostenlos starten · Keine Kreditkarte nötig