Google Consent Mode v2

<ConsentMode /> übermittelt die Entscheidung des Besuchers an Google-Tags (GA4, Google Ads, Google Tag Manager) als Consent Mode v2-Signale. Es setzt einen Standardwert, bei dem alles denied ist, bevor ein Google-Tag läuft, und sendet dann ein consent update, sobald der Besucher wählt – und bei jedem späteren Seitenaufruf, nachdem er gewählt hat.

Alle vier Einwilligungstypen von v2 sind abgedeckt: ad_storage, ad_user_data, ad_personalization und analytics_storage.

Verfügbar ab Version 1.0.0.

Einrichtung

Rendere <ConsentMode /> im <head>, oberhalb aller Google-Snippets. Consent Mode verlangt, dass der Standardwert gesetzt ist, bevor ein Google-Tag lädt – deshalb ist es eine eigene Komponente und kein Teil von <ConsentBanner /> (das im <body> gerendert wird):

src/layouts/Layout.astro

---
import ConsentBanner from 'astro-cookie-consent/ConsentBanner.astro';
import ConsentMode from 'astro-cookie-consent/ConsentMode.astro';
---

<html>
  <head>
    <ConsentMode
      mapping={{
        analytics: ['analytics_storage'],
        marketing: ['ad_storage', 'ad_user_data', 'ad_personalization'],
      }}
    />
    <!-- Google snippet goes after this -->
  </head>
  <body>
    <slot />
    <ConsentBanner
      privacyHref="/privacy"
      categories={[
        { id: 'analytics', label: 'Analytics' },
        { id: 'marketing', label: 'Marketing' },
      ]}
    />
  </body>
</html>

Kategorien Einwilligungstypen zuordnen

mapping verbindet die Kategorie-IDs deines Banners mit den Consent-Mode-Typen, die sie gewähren. Ein Typ ist granted, wenn irgendeine akzeptierte Kategorie ihm zugeordnet ist, andernfalls denied.

Bei einem einfachen Akzeptieren/Ablehnen-Banner (ohne categories) lässt du mapping weg. Der Standard sorgt dafür, dass diese eine Entscheidung alle vier Typen steuert:

<ConsentMode />

Das Google-Tag laden

Es gibt zwei Möglichkeiten, Googles Tag zusammen mit <ConsentMode /> zu laden.

Basic Mode (empfohlen)

Lade das Google-Tag erst nach der Einwilligung, mit gateScript(). Nichts erreicht Google, bevor der Besucher zustimmt:

<script is:inline>
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>
<script>
  import { gateScript } from 'astro-cookie-consent';

  gateScript({
    src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX',
    category: 'analytics',
  });
</script>

<ConsentMode /> definiert window.gtag, daher werden die vorgemerkten js- und config-Aufrufe übernommen, sobald gtag.js lädt.

Advanced Mode

Lade Googles Standard-Snippet (oder das von GTM) ohne Blockierung nach <ConsentMode />. Solange die Einwilligung abgelehnt ist, senden Google-Tags cookielose Pings, mit denen Google mehr deiner Daten modellieren kann.

Achtung

Im Advanced Mode werden Anfragen an Google gesendet, bevor der Besucher eingewilligt hat. Prüfe, ob das zu deiner Rechtsgrundlage passt, bevor du dich dafür entscheidest – siehe DSGVO-Funktionen.

Google Tag Manager liest denselben dataLayer, daher funktionieren seine eingebauten Einwilligungsprüfungen in beiden Modi.

Props

Prop	Standard	Beschreibung
mapping	{ all: [all 4 types] }	Kategorie-ID → Consent-Mode-Typen, die sie gewährt.
expiryDays	365	Muss mit <ConsentBanner expiryDays> übereinstimmen.
waitForUpdate	500	Millisekunden, die Google-Tags vor dem Auslösen auf ein Update warten.
adsDataRedaction	false	Anzeigen-Klick-IDs schwärzen, solange ad_storage abgelehnt ist.
urlPassthrough	false	Anzeigen-Klick-Infos über URLs weitergeben, solange Cookies abgelehnt sind.
region	(überall)	ISO-3166-2-Codes, für die der abgelehnte Standard gilt, z. B. nur EWR-Länder.

Tipp

Wenn du expiryDays bei <ConsentBanner /> änderst, übergib denselben Wert an <ConsentMode />. Sonst können die beiden uneinig sein, ob eine gespeicherte Entscheidung noch gültig ist.

Prüfen, ob es funktioniert

Öffne deine Website mit den Entwicklertools des Browsers und gib in der Konsole dataLayer ein. Vor der Auswahl siehst du einen Eintrag consent / default, bei dem jeder zugeordnete Typ auf denied steht. Nachdem du im Banner akzeptiert oder abgelehnt hast, folgt ein Eintrag consent / update mit dem neuen Zustand. Googles Tag Assistant zeigt dieselben Signale pro Tag an.