Cookie-Einwilligung für Astro

Cookie-Einwilligung für Astro,
eine Integration

@cookiecrumbs/astro fügt das Tag als erstes Element in den Head jeder Seite ein, zur Build-Zeit für prerendered Seiten und pro Anfrage bei SSR. Eine Middleware füllt den serverseitigen Cookie-Reader.

Was sich im Head einer Astro-Seite ändert, sobald die Runtime an erster Stelle steht: Nichts Nicht-Notwendiges läuft, bis seine Kategorie erlaubt wird.

die Regel

Was das Gesetz von einer Astro-Website verlangt

Astro-Islands hydratisieren Analyse-Skripte, sobald sie mounten. Ohne Consent-Ebene trägt schon der erste Paint einer Content-Website einen Tracker.

Die Regel ist überall in der EU und im Vereinigten Königreich dieselbe: Ohne Zustimmung darf nichts über das unbedingt Notwendige hinaus auf dem Gerät eines Besuchers gespeichert oder von dort ausgelesen werden. Das ist Artikel 5 Absatz 3 der ePrivacy-Richtlinie, und die Zustimmung muss der DSGVO-Definition von Einwilligung genügen: freiwillig, spezifisch, informiert und unmissverständlich, mit einer Ablehnung, die so einfach ist wie die Annahme. Das Vereinigte Königreich hält dieselbe Regel in PECR fest, mit engen Ausnahmen für risikoarme Statistiken seit dem 5. Februar 2026. Kalifornien und die anderen US-Bundesstaaten funktionieren umgekehrt: kein Opt-in, aber ein Opt-out-Link und Unterstützung für das Global-Privacy-Control-Signal.

Für eine Website folgen daraus drei Dinge. Analyse-, Werbe- und Social-Media-Skripte müssen auf eine Entscheidung warten. Die Entscheidung muss so aufgezeichnet werden, dass Sie sie später vorzeigen können, denn Artikel 7 Absatz 1 legt die Beweislast bei Ihnen. Und der Widerruf muss so einfach sein wie die Zustimmung, also braucht es auf jeder Seite ein Bedienelement, das das Banner wieder öffnet. Ein Banner, das zwei Buttons zeigt und Google Analytics trotzdem lädt, fällt beim ersten Test durch, und genau dieses Versagen ahnden die Aufsichtsbehörden, von den CNIL-Entscheidungen gegen Google und SHEIN bis zu den Prüfwellen der niederländischen und belgischen Behörden.

so funktioniert es

So funktioniert Einwilligung in einer Astro-App

Astro-Websites sind meist statisches HTML mit Islands an Interaktivität, und das ist gut für die Einwilligung: Die Runtime kann zur Build-Zeit ins HTML geschrieben werden, als erstes im Head jeder Seite, ohne Wettlauf mit irgendetwas. Die Integration tut genau das für prerendered Seiten und wiederholt es pro Anfrage für serverseitig gerenderte, sodass sich eine hybride Website überall gleich verhält.

In Islands verstecken sich die Tracker. Ein per Partytown geladener GTM, eine reine Client-Analytics-Island, ein YouTube-Embed in einer client:visible-Komponente: Jedes davon bekommt entweder eine Kategorie an seinem Script-Tag oder prüft den Einwilligungsstatus vor dem Mounten. Die Integration liefert die gemeinsamen Komponenten mit, und die Middleware stellt die Einwilligung auf Astro.locals bereit, sodass eine Seite serverseitig entscheiden kann, ob sie ein Embed oder seinen Platzhalter rendert.

Content-Websites haben oft Hunderte Seiten, und der Scan crawlt sie in jedem Einwilligungszustand bis zum Budget Ihres Tarifs. Das Ergebnis speist die Cookie-Erklärung, die Sie mit CookieDeclaration auf Ihrer Datenschutzseite einbinden können und die sich selbst aktualisiert, wenn der nächste Scan etwas Neues findet.

Einrichtung

Einrichtung in Astro

Fünf Schritte. Die CLI erledigt die meisten davon, und jeder ist auch ein Klick im Dashboard.

  1. Init aus dem Repo

    Erkennt Astro, verknüpft die Website, schreibt die Konfiguration.

    npx cookiecrumbs login
    npx cookiecrumbs init
  2. Integration hinzufügen

    Eine Zeile in astro.config.mjs. Mit auto: false platzieren Sie <CookieCrumbs /> selbst in Ihrem Layout.

    npm i @cookiecrumbs/astro
    
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import cookiecrumbs from '@cookiecrumbs/astro';
    
    export default defineConfig({
      integrations: [cookiecrumbs({ site: 'pk_live_…', env: 'production' })],
    });
  3. Sperren, was Einwilligung braucht

    Einwilligungspflichtige Tags bekommen type="text/plain" und eine Kategorie. Islands, die Tracker laden, können den Einwilligungsstatus vor dem Mounten prüfen.

    <script type="text/plain" data-cc-category="analytics"
            src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
  4. Lesen Sie es auf dem Server, wenn Sie möchten

    Die Middleware setzt die Einwilligung auf locals, sodass eine Seite ein Embed für Besucher, die Nein gesagt haben, ganz auslassen kann.

    // src/pages/index.astro
    const { consent } = Astro.locals;
    const showVideo = consent?.isGranted('marketing');
  5. Scannen, einsortieren, veröffentlichen

    Der Scan crawlt die gebaute Website in jedem Einwilligungszustand. Einmal einsortieren, veröffentlichen.

    npx cookiecrumbs scan --wait
    npx cookiecrumbs push --env production

aufgepasst

Fehler, die wir in Astro-Apps sehen

Jeder davon taucht im ersten Scan als Tracker auf, der vor der Einwilligung gefeuert hat.

  • Die Runtime über Partytown ladenDie Runtime braucht den Haupt-Thread und muss zuerst laufen. Partytown ist für die Tracker, nicht für das, was sie sperrt.
  • Eine YouTube- oder Maps-Island ohne PlatzhalterEin iFrame setzt Cookies beim Laden. Halten Sie es mit einer Kategorie zurück und zeigen Sie einen Platzhalter, bis Marketing erlaubt ist.
  • View Transitions, die Analyse erneut feuernEin Seitenaufruf bei jeder Transition braucht trotzdem Einwilligung. Prüfen Sie isGranted vor dem Senden.
  • Nur das Layout taggenSeiten mit eigenen Head-Slots umgehen das Layout. Die Integration deckt jede Seite ab; von Hand platzierte Tags nicht.
  • Kein Widerrufs-LinkStatische Websites vergessen ihn am häufigsten. Ein ManageCookiesLink in der Fußzeile reicht.

vor dem Livegang

Die Compliance-Checkliste

Acht Zeilen. Die letzten beiden hakt das Dashboard anhand echter Daten ab.

  • Das Tag ist das erste Skript im HeadAlles darüber kann ein Cookie setzen, das die Runtime nicht zurücknehmen kann.
  • Jedes Analyse-, Werbe- und Social-Skript wartet auf seine KategorieEntweder type="text/plain" mit einer Kategorie, oder der Host steht in der Block-Map aus dem Scan.
  • „Alle ablehnen“ steht auf der ersten EbeneGleiche Größe, gleiches Gewicht wie „Alle akzeptieren“. Kein „X“, das als Einwilligung zählt, keine vorangekreuzten Kästchen.
  • Die Consent-Mode-Standardwerte stehen auf „denied“, bevor Google lädtPrüfen Sie die sieben Signale im Tag Assistant bei verweigerter Einwilligung.
  • Die Links zu Impressum und Datenschutzerklärung sind gesetztOhne beide wird die Veröffentlichung verweigert; die Banner-Fußzeile verlinkt darauf.
  • Ein Widerrufs-Element ist auf jeder Seite erreichbarDas dauerhafte Bedienelement oder ein Link „Cookies verwalten“ in Ihrer Fußzeile.
  • Der erste vollständige Scan ist gelaufen und jeder Anbieter ist einsortiertDas Urteil auf der Startseite sagt datiert, was vor der Einwilligung gefeuert hat.
  • Der Installations-Check ist bestandenEr lädt Ihre Seite wie ein Besucher und bestätigt, dass das Banner vor jedem Tracker lief.

was Sie bekommen

Was der kostenlose Tarif enthält

Zwei Domains, 100 gescannte Unterseiten pro Monat und Domain, jede Regulierung, die CLI, die SDKs und der MCP-Server.

Ein Scanner, der die gerenderte Seite liest

Jede Seite, in jedem Einwilligungszustand, in einem echten Browser. Cookies, Pixel, iFrames und Storage-Schlüssel, mit der Seite und dem Skript, die sie gesetzt haben. Regelmäßig neu gescannt.

Die Cookie-Erklärung schreibt sich aus dem Ergebnis von selbst.

Ein Banner, das zuerst blockiert

Tags bleiben inaktiv, bis ihre Kategorie erlaubt wird. „Alle ablehnen“ ist so sichtbar wie „Alle akzeptieren“. Sieben Layouts, 25 Sprachen, Consent Mode v2 und die richtige Regel pro Region.

21 kB, eine Datei, keine eigenen Anfragen an Dritte.

Ein Nachweis, den Sie vorlegen können

Jede Entscheidung wird mit Zeitstempel, Banner-Version und einem Hash der angezeigten Texte gespeichert, verkettet mit dem Datensatz davor. Exporte sind signiert. Gehostet in Frankfurt.

Artikel 7 Absatz 1, im kostenlosen Tarif.

kostenloser Check

Prüfen Sie, was Ihre Website gerade lädt

Das HTML der Startseite, abgeglichen mit der Tracker-Datenbank. Kein Konto, nichts wird gespeichert. Der vollständige Scan im Dashboard macht dasselbe für jede Seite, in einem echten Browser.

Fragen

Klare Antworten

Funktioniert es mit prerendered und serverseitig gerenderten Seiten?
Beides. Die Integration schreibt das Tag zur Build-Zeit für statische Seiten und pro Anfrage für SSR, immer als erstes Element im Head.
Kann ich das Tag selbst platzieren?
Ja. Setzen Sie auto: false und platzieren Sie die CookieCrumbs-Komponente aus @cookiecrumbs/astro/CookieCrumbs.astro in Ihrem Layout.
Funktioniert es mit Partytown?
Ja, für die Tracker. Die Consent-Runtime selbst läuft im Haupt-Thread, zuerst, und die Consent-Mode-Standardwerte existieren, bevor der Worker GTM lädt.
Wie geht der Scan mit einer großen Content-Website um?
Er crawlt bis zum monatlichen Budget Ihres Tarifs, 100 Unterseiten pro Monat und Domain im Free-Tarif und 10.000 im Pro-Tarif, in jedem Einwilligungszustand, und scannt regelmäßig neu.
Kann ich die Cookie-Liste auf einer Seite anzeigen?
Binden Sie CookieDeclaration auf Ihrer Datenschutzseite ein. Es rendert die öffentliche Liste aus dem letzten Scan in der Sprache des Besuchers.
Welche Adapter werden unterstützt?
Jeder Adapter, der HTML erzeugt: Node, Vercel, Netlify, Cloudflare. Die Integration hängt sich in Astros Head-Injection ein, nicht in den Adapter.

nächster Schritt

Das Banner mit dem nächsten Deploy ausliefern

Website hinzufügen, npx cookiecrumbs init im Astro-Repo ausführen, und das Einwilligungsprotokoll beginnt in der EU aufzuzeichnen.