Google Consent Mode v2

<ConsentMode /> transmet le choix du visiteur aux balises Google (GA4, Google Ads, Google Tag Manager) sous forme de signaux Consent Mode v2. Il définit une valeur par défaut entièrement denied avant l’exécution de toute balise Google, puis envoie un consent update dès que le visiteur fait son choix – et à chaque chargement de page ultérieur une fois qu’il l’a fait.

Les quatre types de consentement de la v2 sont couverts : ad_storage, ad_user_data, ad_personalization et analytics_storage.

Disponible à partir de la version 1.0.0.

Configuration

Affichez <ConsentMode /> dans le <head>, au-dessus de tout extrait Google. Consent Mode exige que la valeur par défaut soit définie avant le chargement d’une balise Google – c’est pourquoi il s’agit d’un composant distinct, et non d’une partie de <ConsentBanner /> (qui s’affiche dans le <body>) :

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>

Associer les catégories aux types de consentement

mapping relie les identifiants de catégorie de votre bannière aux types Consent Mode qu’ils accordent. Un type est granted si une catégorie acceptée y est associée, et denied sinon.

Avec une bannière accepter/refuser simple (sans categories), omettez mapping. La valeur par défaut fait contrôler les quatre types par ce choix unique :

<ConsentMode />

Charger la balise Google

Il existe deux façons de charger la balise Google avec <ConsentMode />.

Mode de base (recommandé)

Chargez la balise Google uniquement après le consentement, avec gateScript(). Rien n’atteint Google avant que le visiteur accepte :

<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 /> définit window.gtag, donc les appels js et config mis en file d’attente sont pris en compte dès que gtag.js se charge.

Mode avancé

Chargez l’extrait standard de Google (ou celui de GTM) sans blocage, après <ConsentMode />. Tant que le consentement est refusé, les balises Google envoient des pings sans cookies, ce qui permet à Google de modéliser davantage de données.

Attention

Le mode avancé envoie des requêtes à Google avant que le visiteur ait consenti. Vérifiez que cela correspond à votre base légale avant de le choisir – voir Fonctionnalités liées au RGPD.

Google Tag Manager lit le même dataLayer, donc ses vérifications de consentement intégrées fonctionnent dans les deux modes.

Props

Prop	Valeur par défaut	Description
mapping	{ all: [all 4 types] }	Identifiant de catégorie → types Consent Mode qu’il accorde.
expiryDays	365	Doit correspondre à <ConsentBanner expiryDays>.
waitForUpdate	500	Millisecondes pendant lesquelles les balises Google attendent une mise à jour.
adsDataRedaction	false	Masque les identifiants de clic publicitaire tant que ad_storage est refusé.
urlPassthrough	false	Transmet les infos de clic publicitaire via les URL tant que les cookies sont refusés.
region	(partout)	Codes ISO 3166-2 auxquels s’applique la valeur refusée, p. ex. uniquement l’EEE.

Astuce

Si vous modifiez expiryDays sur <ConsentBanner />, passez la même valeur à <ConsentMode />. Sinon, les deux pourraient ne pas être d’accord sur la validité d’un choix enregistré.

Vérifier que cela fonctionne

Ouvrez votre site avec les outils de développement du navigateur et tapez dataLayer dans la console. Avant tout choix, vous verrez une entrée consent / default avec chaque type associé à denied. Après avoir accepté ou refusé dans la bannière, une entrée consent / update suit avec le nouvel état. Le Tag Assistant de Google affiche les mêmes signaux pour chaque balise.