das Produkt

Das Banner

Das Banner wird in vier Bildschirmen (Design, Texte, Regeln, Versionen) rund um eine Live-Vorschau bearbeitet, die die echte Runtime zeigt, kein Mock-up. Veröffentlichen erzeugt nummerierte, unveränderliche Versionen; Preview und Produktion sind zwei getrennte Dokumente.

der EditorWie der Editor aufgebaut ist

Eine Leiste oben enthält, was auf jedem Bildschirm gilt: welches Dokument Sie bearbeiten (Preview-Entwurf oder Produktions-Entwurf), den Speicherstatus (Entwürfe speichern automatisch), die Lint-Pille und den Veröffentlichen-Button. Darunter vier Bildschirme:

• Design: ein Ausgangsdesign wählen und anpassen.
• Texte: jeder Text, den das Banner zeigt, pro Sprache.
• Regeln: Kategorien, Regionen, Google Consent Mode und Verhalten, jeweils auf eigenem Bildschirm.
• Versionen: das Buch über alles, was je veröffentlicht wurde.

Die Live-Vorschau begleitet die Bildschirme, auf denen Sehen hilft (Design, Texte, Kategorien), und tritt zurück, wo sie nichts zeigen kann (Regionen, Consent Mode, Verhalten). Sie führt die echte Banner-Runtime aus und simuliert einen Besucher: Land, Regelwerk, Desktop oder Telefon, erste Ebene oder Einstellungsfenster, sogar ein Global-Privacy-Control-Signal. Die Bedienelemente ändern nichts; sie sind eine Simulation, und die Vorschau sagt das auch.

DesignVorlagen, und wie Sie eine zu Ihrer machen

Neue Websites starten mit Standard: ein zentrierter weißer Dialog mit drei gleichwertigen blauen Buttons (Alle akzeptieren, Einstellungen, Alle ablehnen), die Form, die die meisten europäischen Besucher schon kennen. Zehn weitere eingebaute Designs reichen von ruhigen Leisten, die die Schrift Ihrer Seite übernehmen, bis zu lauten, bewusst unübersehbaren Hinweisen, plus eine In-Page-Variante, die nichts verdeckt, und ein Headless-Modus, in dem Sie die Oberfläche selbst auf der Runtime-API bauen.

Mehrere der eingebauten Designs stammen aus einem druckinspirierten Designsystem: zwei Druckfarben auf einem Papierbogen, mit Tiefe durch eine solide versetzte zweite Platte statt Schatten, und der Einwilligungsdatensatz als Quittung, die vom Rand des Banners abgerissen wird. Sie müssen davon nichts verstehen, um sie zu nutzen; jede Vorlagenkarte zeigt genau, wie sie aussieht, und „Ausprobieren“ zeigt ein Design in der Vorschau, ohne etwas zu ändern, bis Sie es anwenden.

Unter „Dieses Design anpassen“ ist immer der volle Satz an Bedienelementen verfügbar: sieben Layouts (Bar, Sheet, Modal, Corner, Ribbon, In-Page, Headless), Platzierung, Farben mit Live-Kontrastprüfung, Schrift, Radius und eigenes CSS. Zwei Regeln gelten in jedem Design: Akzeptieren und Ablehnen sind identische Objekte, und ein Besucher kann immer zurückkehren, um seine Meinung zu ändern.

Ihre Seiten: Jedes Banner verlinkt in seiner Fußzeile Ihr Impressum und Ihre Datenschutzerklärung. Beide sind Pflicht, und die Veröffentlichung ist blockiert, bis beide echte URLs sind. Das ist Absicht: Ein EU-Consent-Banner ohne sie lädt Ärger ein.

Die Banner-Fußzeile trägt eine kleine Zeile „Made & Hosted in Europe by CookieCrumbs“ mit Link auf cookiecrumbs.eu. Sie zu entfernen ist Teil der bezahlten Tarife; im Free-Tarif wird die Zeile immer ausgeliefert, und eine Konfiguration, die sie versteckt, kann nicht veröffentlicht werden.

TexteTexte, gruppiert nach ihrem Ort

Der Bildschirm Texte listet jeden Text in der Reihenfolge, in der ein Besucher ihm begegnet, nicht in Schema-Reihenfolge: die erste Ebene (Titel, Text, die drei Buttons), das Einstellungsfenster (Speichern-Button, Consent-ID-Beschriftung) und das Kleingedruckte um beide (Footer-Links, das Wiederöffnen-Element, die Sprachauswahl). Texte, die Ihre aktuelle Einrichtung nicht nutzt, sind am Ende in eine Zeile zusammengeklappt; bedingte Texte erscheinen genau dann, wenn eine Regel oder ein Verhalten sie erforderlich macht, und sind so markiert.

Fokussieren Sie ein Feld, springt die Vorschau zu dem Bildschirm, auf dem der Text lebt, in der Sprache, die Sie bearbeiten. So sehen Sie immer, was Sie ändern.

Sprachen

Ein Banner kann bis zu vierzig Sprachen sprechen (das genaue Kontingent hängt vom Tarif ab). Sieben kommen vollständig übersetzt: Englisch, Deutsch, Französisch, Niederländisch, Spanisch, Italienisch und brasilianisches Portugiesisch, Texte und Kategoriebeschreibungen inklusive. Jedes andere BCP-47-Tag startet als Kopie Ihrer Standardsprache zum Übersetzen. Jeder Sprach-Chip zeigt, wie viele Texte noch leer sind; beim Übersetzen setzt „Mit Englisch vergleichen“ den Referenztext mit Kopier-Button unter jedes Feld. Die Sprachauswahl für Besucher erscheint automatisch, wenn mehr als eine Sprache eingerichtet ist, und kann abgeschaltet werden.

RegelnKategorien, Regionen, Verhalten

Kategorien

Kategorien sind die Schalter auf Ihrem Banner: standardmäßig Notwendig, Statistik, Marketing und Präferenzen, plus alle, die Sie hinzufügen. Notwendig ist fest eingeschaltet. Jede Kategorie trägt Name und Beschreibung pro Sprache, ihre Google-Consent-Mode-Signale und ob sie standardmäßig aktiv ist (unter Opt-in-Regeln darf das nur Notwendig sein). Eigene Kategorien können hier oder direkt auf der Seite Cookies & Tracker hinzugefügt werden; beide bearbeiten denselben Entwurf. Alles, was Sie ändern, ist sofort im Einstellungsfenster der Vorschau sichtbar, denn die Kategorien sind dieses Fenster.

Regionen

Zuerst eine Frage: Wo sind Ihre Besucher? Europa, Europa und das Vereinigte Königreich, oder weltweit. Die Antwort aktiviert die richtigen Regelwerke, und der Bildschirm fasst das Ergebnis in einem ehrlichen Satz zusammen. Alles andere (Einstellungen pro Regime, Ablauf der Einwilligung, Länderausnahmen, ein erzwungenes Regime zum Testen) liegt unter Erweitert. Die Details jedes Regimes stehen unter Regionen & Regime.

Consent Mode

Wenn Sie Google-Tags einsetzen, gibt das Banner jede Entscheidung an sie weiter. Siehe Google Consent Mode.

Verhalten

Was rund um die Entscheidung passiert. Nach einer wesentlichen Änderung erneut fragen (standardmäßig an): Wird eine Version als wesentlich veröffentlicht, also mit neuen Zwecken oder Signalen, werden Besucher, die schon entschieden haben, erneut gefragt. Eine Ablehnung ein bis dreizehn Monate merken. Die Consent-ID anzeigen, damit Besucher sie bei der Ausübung ihrer Rechte nennen können. Das Wiederöffnen-Element ist entweder ein schwebender Button oder ein Link, den Sie in Ihre eigene Fußzeile setzen; eines von beiden ist Pflicht, denn der Widerruf muss so einfach bleiben wie die Erteilung. Das Schließen des Banners kann als Ablehnung zählen; wenn Sie das einschalten, wird der Hinweis darauf für Besucher Pflicht, und die strengste Lesart ist immer der Standard.

LintDie Lint-Pille

Der Editor lintet den Entwurf fortlaufend und der Server lintet ihn beim Veröffentlichen erneut; die beiden können nie auseinanderdriften, weil sie dieselben Regeln ausführen. Blockierende Funde (ein fehlendes Impressum, eine fehlende Datenschutzerklärung, eine Kategorie, auf die ein Dienst zeigt, die nicht mehr existiert, ein deaktiviertes Fallback-Regime) stoppen die Veröffentlichung mit einer Meldung in klaren Worten und einem Link zum genauen Feld. Warnungen raten, blockieren aber nicht.

VeröffentlichenVersionen, und was jede erreicht hat

Veröffentlichen erzeugt eine unveränderliche nummerierte Version, hält fest, wer sie von wo veröffentlicht hat, und schreibt einen Audit-Eintrag. Der Veröffentlichen-Dialog fragt nach einer kurzen Notiz und danach, ob die Änderung wesentlich ist. Preview und Produktion werden getrennt veröffentlicht; Hochstufen schaltet die aktuelle Preview-Version live.

Der Bildschirm Versionen ist ein Buch, und er schließt eine Lücke, die die meisten Consent-Tools offen lassen: Jede Version, die auf Produktion lief, zeigt ihre Opt-in-Rate und die Veränderung gegenüber der Version davor. Eine Version, die nie Produktion erreicht hat oder zu wenige Entscheidungen für eine ehrliche Angabe hat, zeigt einen Strich und sagt, warum. Wiederherstellen und Hochstufen liegen direkt in der Zeile; hier wird nie etwas überschrieben, ein Rollback ist also konstruktionsbedingt sicher. Jede veröffentlichte Version bekommt außerdem gerenderte Screenshots (Desktop und Telefon, beide Banner-Ebenen) und eine automatische Barrierefreiheitsprüfung, die als Beleg dafür, was Besucher gesehen haben, bei der Version bleiben.