Zum Inhalt springen
Loslegen

JS-API

import {
getConsent,
getConsentRecord,
setConsent,
onConsentChange,
whenAccepted,
gateScript,
} from 'astro-cookie-consent';
getConsent(); // 'accept' | 'decline' | null — reads the 'all' category
getConsent('analytics'); // 'accept' | 'decline' | null for a specific category

Gibt null zurück, wenn nichts gespeichert ist oder der gespeicherte Datensatz abgelaufen ist.

getConsentRecord(); // { categories: {...}, timestamp } | null

Der rohe gespeicherte Datensatz – der aktuelle Wert jeder Kategorie plus der Zeitpunkt, zu dem er gesetzt wurde. Gibt null zurück, wenn er abgelaufen oder nicht gesetzt ist. Nützlich als Prüfpfad (Rechenschaftspflicht nach Art. 7 Abs. 1 DSGVO) – siehe DSGVO-Funktionen.

setConsent('accept'); // sets it programmatically and broadcasts the change
setConsent({ analytics: true, marketing: false }); // per-category form
onConsentChange((record) => {
// record.categories is the full map, e.g. { all: true }
// or { analytics: true, marketing: false }
});

Wird bei jeder künftigen Änderung ausgelöst, mit dem vollständigen Datensatz (nicht nur einer einzelnen Kategorie).

whenAccepted(() => {
/* fires immediately if already accepted, or once accepted */
});
whenAccepted(() => {
/* same, scoped to one category */
}, 'analytics');

Wird bei einer Ablehnung nie aufgerufen.

gateScript({ src: '...', onLoad: () => {} }); // load a script only after consent
gateScript({ src: '...', category: 'analytics' }); // same, scoped to one category
Option Typ Standard Beschreibung
src string — Erforderlich. Die Skript-URL, die nach Zustimmung geladen wird.
async boolean true Setzt script.async.
onLoad function — Wird aufgerufen, sobald das Skript geladen ist.
category string 'all' Welche Kategorie akzeptiert sein muss, damit es eingefügt wird.

Fügt das Skript erst ein, wenn der Besucher zustimmt, und niemals doppelt.

gateScript deckt das Laden eines Drittanbieter-Skripts ab. Um deine eigene Oberfläche je nach Einwilligung ein- oder auszublenden – ein Widget, einen „Cookies verwalten“-Link, einen Embed-Platzhalter –, kombinierst du getConsent() und onConsentChange() direkt. Genau dieses Muster verwendet das „Analyse-Widget“ auf der Startseite, das live reagiert, während du das Banner umschaltest:

<div id="analytics-widget">Waiting for consent…</div>
<script>
import { getConsent, onConsentChange } from 'astro-cookie-consent';
const widget = document.getElementById('analytics-widget');
const render = (value: 'accept' | 'decline' | null) => {
if (!widget) return;
widget.textContent =
value === 'accept'
? 'Analytics widget — visible'
: value === 'decline'
? 'Hidden until you accept analytics'
: 'Waiting for consent…';
};
render(getConsent('analytics')); // set the initial state on load
onConsentChange(() => render(getConsent('analytics'))); // update on every change
</script>

getConsent() beim Laden deckt wiederkehrende Besucher ab, die bereits gewählt haben; onConsentChange() deckt ab, dass sie ihre Meinung später über den Button zum erneuten Öffnen ändern – beides ist nötig, damit der Inhalt immer zur aktuellen Wahl passt.

Eine ausführlichere Version davon – einen Platzhalter mit einem „Aktivieren“-Button für ein Drittanbieter-Embed – findest du unter Einzelne Widgets deaktivieren.

Eine gespeicherte Wahl läuft nach expiryDays ab (Standard: 365, einstellbar über das Prop expiryDays an <ConsentBanner /> oder die Option expiryDays bei getConsent/getConsentRecord) – danach geben beide wieder null zurück und das Banner erscheint beim nächsten Laden erneut.