Cookie-Banner gestalten und einbinden – Design, Sprachen und Einbindung auf der Website
Im Reiter „Design“ legen Sie Layout, Logo, Farben und je Sprache die Texte samt Links zu Datenschutzerklärung und Impressum fest; die Vorschau zeigt Änderungen sofort. Im Reiter „Einbindung“ kopieren Sie das Skript als erstes Element in den <head>, markieren Skripte mit data-preeco-category und eingebettete Inhalte mit data-preeco-src und prüfen nach jedem Scan die Einbindung.
Transkript des Videos
Im Reiter „Design“ legen Sie fest, wie der Cookie-Banner aussieht und was er in jeder Sprache sagt. Im Reiter „Einbindung“ finden Sie das Skript für Ihre Website und sehen nach jedem Scan, ob es richtig eingebunden ist und welche Inhalte noch nicht blockiert werden.
Voraussetzungen
- Der Cookie-Banner ist bestellt, und Ihre Benutzergruppe hat im Bereich „Cookie-Banner“ das Recht „Bearbeiten“.
- Für die Einbindung brauchen Sie Zugriff auf den Quelltext oder das Content-Management-System Ihrer Website.
Design und Texte festlegen
- Öffnen Sie den Cookie-Banner und wechseln Sie in den Reiter „Design“. Die „Vorschau“ zeigt, wie Besuchende den Cookie-Banner sehen; zwischen „Erste Ebene“ und „Einstellungen“ schalten Sie um.
- Klicken Sie im Abschnitt „Gestaltung“ auf „Bearbeiten“. Wählen Sie das „Layout“ („Leiste unten“, „Box, unten links“, „Box, unten rechts“ oder „Dialog, Mitte“), das „Logo“ und die Farben für „Hintergrund“, „Text“ und „Schaltflächen“. Der Kontrast zwischen Schaltfläche und Text muss mindestens 4,5:1 betragen.
- Tragen Sie unter „Texte“ für jede Sprache des Cookie-Banners die „Überschrift“ und den „Text erste Ebene“ ein, dazu die Adressen Ihrer „Datenschutzerklärung“ und Ihres „Impressums“ auf der Website. Beide Links sind für die Freigabe nötig, weil der Cookie-Banner oft den Footer verdeckt.
- Klicken Sie auf „Speichern“. Die Vorschau zeigt die Änderung sofort, die Website erst nach der nächsten Freigabe.
Die Sprachen selbst legen Sie über „Bearbeiten“ des Cookie-Banners unter „Sprachen des Cookie-Banners“ fest. „Alle ablehnen“ und „Alle akzeptieren“ stehen immer gleichwertig nebeneinander, und außer „Notwendig“ ist keine Kategorie vorausgewählt. Diese Regeln lassen sich nicht abschalten.
Skript einbinden
- Wechseln Sie in den Reiter „Einbindung“ und kopieren Sie unter „Skript“ den Einbettencode über das Kopiersymbol.
- Fügen Sie das Skript als erstes Element in den <head> jeder Seite ein. Es lädt immer die zuletzt freigegebene Version; nach einer neuen Freigabe müssen Sie nichts austauschen. Hat Ihre Website eine Content-Security-Policy, erlauben Sie die angegebene Adresse in script-src und connect-src.
- Markieren Sie jedes Skript, das eine Einwilligung braucht, mit type="text/plain" und seiner Kategorie im Attribut data-preeco-category. Das Beispiel unter „Skripte blockieren“ zeigt die Schreibweise.
- Binden Sie eingebettete Inhalte wie YouTube, Google Maps oder Vimeo mit data-preeco-src statt src ein, dazu Kategorie und Dienst. Bis zur Einwilligung zeigt der Cookie-Banner an dieser Stelle einen Platzhalter. Nur so markierte Inhalte lädt der Browser sicher nicht vor der Einwilligung.
- Setzen Sie bei Bedarf zusätzlich den „Link zum erneuten Öffnen“ ein, etwa im Footer; die schwebende Schaltfläche bleibt daneben bestehen.
Einbindung prüfen
Der Abschnitt „Prüfung der Einbindung“ zeigt nach jedem abgeschlossenen Scan je Domain, ob das Skript gefunden wurde, ob es vor anderen Skripten steht und welche Einbindungen nicht blockiert werden. Steht dort „Noch nicht geprüft“, prüft der nächste abgeschlossene Scan die Einbindung; über „Scan starten“ im Reiter „Scans“ stoßen Sie ihn selbst an.
Tipp aus der Praxis
Das Skript liefert bis zur ersten Freigabe nichts aus. Sie können es also schon einbauen, während Sie Dienste und Texte noch vorbereiten, und den Cookie-Banner danach freigeben. Prüfen Sie nach der Freigabe die „Nicht blockierten Einbindungen“: Jeder Eintrag dort lädt vor der Einwilligung und braucht noch die Markierung mit data-preeco-src oder data-preeco-category.