Comment ajouter un bandeau cookies à un site Astro

Où coller la balise dans Astro

Les layouts Astro sont des composants qui fournissent l’enveloppe de la page, avec <html>, <head>, <body> et un <slot /> pour le contenu. La balise va dans le head de ce layout, avant tout autre script. Astro ne traite un <script> que lorsque son seul attribut est src ; le nôtre porte des attributs data, Astro le laisse donc tranquille, mais is:inline rend l’intention explicite :

astro
---
// src/layouts/Layout.astro
const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script is:inline src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

Chaque page qui utilise le layout, y compris les pages Markdown qui le nomment dans leur frontmatter layout, charge désormais le bandeau. Si votre projet a plusieurs layouts, mettez la ligne dans chacun, ou dans un petit composant Head.astro qu’ils incluent tous.

Comment gérer les balises que votre site charge

Balises marquées dans le layout. Ajoutez les balises après la balise Cookiequiet, avec is:inline, type="text/plain" et une catégorie. Cookiequiet les exécute quand la catégorie est accordée, ou tout de suite lors des visites suivantes quand un choix enregistré l’inclut :

html
<script is:inline type="text/plain" data-cq-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script is:inline type="text/plain" data-cq-category="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Le code de base du pixel Meta reçoit data-cq-category="marketing" ; son image noscript doit être retirée, comme l’explique le guide Meta Pixel.

Consent Mode plutôt que marquage. Pour que la balise Google continue de se charger avec des signaux refusés par défaut et des pings sans cookies, placez le bloc de consentement par défaut de Google (un script inline) entre la balise Cookiequiet et la balise Google, comme montré dans le guide Google Analytics 4. Cookiequiet envoie la mise à jour après chaque choix.

Partytown. Gardez cq.js sur le thread principal : il a besoin du document. Si vous déplacez la balise Google dans un worker Partytown, transmettez dataLayer.push pour que les commandes de consentement l’atteignent.

Contenus embarqués. Écrivez les iframes avec data-cq-src au lieu de src. Les composants façade qui construisent le lecteur YouTube au clic créent l’iframe en JavaScript ; le bloqueur automatique retient youtube.com/embed sous marketing tant que cette catégorie n’est pas accordée. Voir Vidéos YouTube et consentement.

Ce qui change avec le ClientRouter

Avec les view transitions, Astro remplace le contenu de la page sans chargement complet. La balise dans le head continue de tourner d’une navigation à l’autre, le choix enregistré reste appliqué et le bandeau ne réapparaît pas. Deux conséquences :

• Les scripts marqués dans le corps d’une page chargée par navigation côté client ne sont pas activés avant le prochain événement de consentement, parce que Cookiequiet active les balises marquées quand un choix est appliqué au chargement et après chaque choix. Gardez les balises marquées dans le layout.
• Les scripts d’îlots qui ont besoin du choix doivent lire window.Cookiequiet.get() (le tableau c liste les catégories accordées) et s’abonner avec window.Cookiequiet.on(callback), qui renvoie une fonction de désabonnement.

Comment ajouter le lien Préférences de cookies

Dans src/components/Footer.astro, ou là où vit votre pied de page :

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

Comment tester

1. Lancez astro dev (ou astro build puis astro preview) et ouvrez le site dans une fenêtre de navigation privée.
2. Cliquez sur « Tout refuser » : les cookies sont cq_consent et rien de Google ni de Meta.
3. Effacez les cookies, cliquez sur « Tout accepter », rechargez : les scripts marqués s’exécutent.
4. Avec le ClientRouter, naviguez entre les pages et vérifiez que le choix tient.
5. Consultez le registre des consentements dans le tableau de bord.

Ce qui est propre à Astro

• Sortie statique. Le bandeau est un script client ; le site construit fonctionne sur n’importe quel hébergement statique (Netlify, Vercel, Cloudflare Pages, GitHub Pages). L’article sur les bandeaux cookies pour sites statiques couvre le reste.
• Content Security Policy. Autorisez https://cookiequiet.com dans script-src et connect-src.
• Plusieurs langues. La langue du bandeau suit le navigateur du visiteur, et chaque texte est modifiable par langue ; elle ne lit pas le lang de la page.
• Collections de contenu et Markdown. Les pages rendues via le layout ne demandent aucun changement ; des balises collées dans le contenu Markdown contourneraient le layout, gardez donc les balises dans le layout.