Docs · für Entwickler

Snippet einbinden

Ein Script-Tag bringt das Banner auf Ihre Website und hält jeden nicht notwendigen Tracker zurück, bis der Besucher entscheidet. Es gibt zwei Regeln, und das ist die ganze Arbeit.

Das Tag

Kopieren Sie das Tag aus Website-Einstellungen → Installation im Dashboard. Es trägt den öffentlichen Schlüssel Ihrer Website und die Umgebung, die es laden soll:

<script src="https://app.cookiecrumbs.eu/runtime/cc.js"
        data-cc-site="pk_live_…"
        data-cc-env="production"></script>

Jede Website hat zwei Schlüssel: den Produktions-Schlüssel für echte Besucher und den Preview-Schlüssel, der lädt, was auf Preview veröffentlicht ist, damit Sie auf einer Staging-Seite testen können, ohne jemanden zu berühren.

Regel eins: Das Tag kommt zuerst

Platzieren Sie das Tag als erstes Skript in <head>, vor jedem anderen Skript. Alles, was davor läuft, kann ein Cookie setzen, während der Besucher noch entscheidet, und die Runtime kann das nicht zurücknehmen. Die Runtime installiert ihren Interceptor synchron, noch bevor sie Ihre Konfiguration lädt, sodass nichts Nicht-Notwendiges läuft, bevor eine Entscheidung existiert.

Regel zwei: Einwilligungspflichtige Skripte werden inaktiv

Skripte, die Einwilligung brauchen, werden markiert, damit das Banner sie freigeben kann, sobald ihre Kategorie erlaubt wird:

<script type="text/plain"
        data-cc-category="analytics"
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>

Ein type="text/plain"-Skript tut von sich aus nichts. Wenn der Besucher die Kategorie erlaubt, erzeugt die Runtime das Skript in Dokumentreihenfolge neu und es läuft normal. Inline-Skripte funktionieren genauso: Geben Sie ihnen type="text/plain" und ein data-cc-category.

Ungetaggte Skripte: die Blockliste

Sie müssen nicht alles taggen. In Ihrem Dashboard erfasste Tracker tragen Host-Muster, und die werden beim Veröffentlichen in eine Block-Map kompiliert. Jedes ungetaggte <script src> oder <iframe src>, dessen Host passt, wird an Ort und Stelle neutralisiert (Skripte werden text/plain, iFrames werden mit geparkter Quelle in data-cc-src zurückgehalten) und freigegeben, wenn seine Kategorie erlaubt wird. Blockierte iFrames zeigen einen Platzhaltertext, pro Sprache editierbar unter Banner → Texte.

Content-Management-Systeme

WordPress: Design → Theme-Datei-Editor → header.php, vor wp_head(), oder ein Header-Scripts-Plugin nutzen.
Shopify: Onlineshop → Themes → Code bearbeiten → layout/theme.liquid, erste Zeile in <head>.
Webflow: Projekteinstellungen → Custom code → Head code.

Der Tag-Manager-Vorbehalt

Laden Sie das CookieCrumbs-Tag nicht über einen Tag-Manager. Das Tag muss laufen, bevor der Tag-Manager läuft; ein Consent-Tag, das aus dem Manager heraus feuert, läuft zu spät, um etwas zurückzuhalten. Fügen Sie es direkt in die Seite ein, über dem Manager, und lassen Sie Consent Mode die Entscheidungen in Ihre Tags tragen (siehe Consent-Mode-Leitfaden).

Der Installations-Check

Der Installations-Check des Dashboards lädt Ihre Seite in einem echten Browser, akzeptiert einmal und berichtet, was er tatsächlich gesehen hat. Nichts wird auf Vertrauen genommen. Er prüft:

das Snippet ist auf der Seite vorhanden und vor anderen Tags platziert,
die Consent-Mode-Standardwerte sind gesetzt, bevor ein Google-Tag läuft,
das Banner wurde gerendert, und der öffentliche Schlüssel auf der Seite gehört zu dieser Website,
nach dem Akzeptieren wird ein Einwilligungs-Cookie geschrieben,
__tcfapi wird nicht bereitgestellt: CookieCrumbs implementiert das IAB TCF heute nicht.

Jeder fehlgeschlagene Check kommt mit einem Urteilssatz, der den nächsten Schritt nennt, zum Beispiel: „Das Snippet ist da, aber andere Tags laufen davor. Verschieben Sie das Tag über jedes andere Skript im Head und starten Sie den Check erneut.“ Eine echte Einwilligungsentscheidung eines Besuchers zählt ebenfalls als Nachweis, dass die Installation funktioniert.

Lieber ein Paket?

Wenn Ihre Website mit Next.js, React, Astro, Nuxt oder SvelteKit gebaut ist, platzieren die Framework-SDKs das Tag für Sie, und npx cookiecrumbs init erkennt Ihr Framework und schreibt die Konfiguration.