Comment ajouter un bandeau cookies à un site Gatsby

Où placer la balise dans Gatsby ?

Gatsby rend chaque page en HTML statique au moment du build. Les API de rendu serveur de gatsby-ssr.js permettent d’ajouter des éléments à ce HTML : onRenderBody reçoit setHeadComponents, qui ajoute des composants au head de chaque page. C’est là que la balise doit aller, car elle figure alors dans le HTML avant les bundles JavaScript de Gatsby.

jsx
// gatsby-ssr.js
import * as React from "react";
​
export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="cookiequiet"
      src="https://cookiequiet.com/cq.js"
      data-site="YOUR_SITE_KEY"
      data-consent-mode="1"
      data-auto-block="1"
      defer
    />,
  ]);
};

N’utilisez pas le composant <Script> de Gatsby pour cela. Ses stratégies (post-hydrate, idle et off-main-thread) chargent toutes après l’hydratation, ce qui est trop tard pour un script qui doit s’exécuter avant les balises qu’il contrôle.

Plugins qui ajoutent des balises au head. Si un plugin appelle aussi setHeadComponents, exportez onPreRenderHTML pour placer la balise en premier. Gatsby documente ce hook pour réordonner ce que d’autres plugins ont ajouté :

jsx
export const onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  const head = getHeadComponents();
  head.sort((a, b) => (a && a.key === "cookiequiet" ? -1 : b && b.key === "cookiequiet" ? 1 : 0));
  replaceHeadComponents(head);
};

Quand plusieurs plugins implémentent onPreRenderHTML, le dernier l’emporte : vérifiez donc le HTML construit.

Comment bloquer mes propres balises jusqu’au consentement ?

Balises marquées dans gatsby-ssr.js. Ajoutez-les dans le même tableau setHeadComponents, après la balise Cookiequiet. Cookiequiet les transforme en scripts actifs quand la catégorie est accordée, et d’emblée lors des visites suivantes quand le choix enregistré l’inclut :

jsx
<script
  key="ga4-config"
  type="text/plain"
  data-cq-category="analytics"
  dangerouslySetInnerHTML={{ __html: "/* votre configuration de la balise Google, inchangée */" }}
/>

Le script externe gtag.js reçoit les mêmes type et data-cq-category. Le guide Google Analytics 4 montre les deux balises et l’alternative du Consent Mode.

Plugins qui écrivent un traceur. Un plugin qui écrit un script de suivi dans le HTML au moment du build s’exécute avant qu’un script de consentement puisse l’arrêter, sauf s’il s’agit d’une balise Google qui se charge en Consent Mode avec des valeurs refusées par défaut. Pour les autres traceurs, retirez le plugin et ajoutez vous-même la balise marquée. Les scripts créés plus tard en JavaScript (un gestionnaire de balises, un widget de chat) sont retenus par le bloqueur automatique quand ils viennent de l’un des quelque 80 traceurs qu’il connaît.

Qu’est-ce qui change avec la navigation côté client ?

Après le premier chargement, Gatsby navigue sans recharger la page. La balise s’exécute une fois par chargement complet et le choix reste appliqué, donc le bandeau ne réapparaît pas. Deux conséquences :

• Les scripts marqués sont activés quand un choix est appliqué au chargement et après chaque choix. Gardez-les dans gatsby-ssr.js, pas dans les composants de page.
• Les pages vues lors des changements de route relèvent de votre code. Gatsby appelle onRouteUpdate dans gatsby-browser.js à chaque changement de route, chargement initial compris. N’envoyez la page vue que lorsque la mesure d’audience est accordée.

Cookiequiet émet un événement cq:consent sur window chaque fois qu’il applique un choix (un choix enregistré au chargement, un nouveau choix après un clic, ou toutes les catégories dans les régions où le bandeau n’est pas affiché). Son detail.categories liste les catégories accordées :

js
// gatsby-browser.js
let analytics = false;
window.addEventListener("cq:consent", (e) => {
  analytics = e.detail.categories.indexOf("analytics") >= 0;
});
​
export const onRouteUpdate = ({ location }) => {
  if (!analytics) return;
  // envoyez ici votre page vue pour location.pathname
};

window.Cookiequiet.get() renvoie le choix en vigueur (son tableau c liste les catégories) : le choix enregistré, ou a: "geo" avec toutes les catégories là où le ciblage géographique n’affiche aucun bandeau. Il renvoie null tant qu’aucun choix ne s’applique.

Comment ajouter le lien Préférences de cookies ?

Rendez une ancre ordinaire dans le composant de pied de page. Un lien avec un dièse n’a pas besoin du <Link> de Gatsby :

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

Comment tester ?

1. Lancez gatsby build puis gatsby serve : gatsby-ssr.js n’agit que sur le HTML construit, testez donc le build plutôt que gatsby develop.
2. Affichez le code source de la page : le script Cookiequiet doit être le premier script du head.
3. Ouvrez le site dans une fenêtre de navigation privée et cliquez sur Tout refuser. Les cookies doivent se limiter à cq_consent, rien de Google ni de Meta.
4. Effacez les cookies, cliquez sur Tout accepter, rechargez : les scripts marqués s’exécutent. Naviguez entre les pages et vérifiez que le choix tient.
5. Ouvrez le registre des consentements dans le tableau de bord.

Le scanner de cookies liste ce que le site déployé dépose avant consentement. Cookiequiet est gratuit pour un site, ciblage géographique compris, et Starter coûte 3 € par site et par mois sans limite de pages vues.

Quoi d’autre est propre à Gatsby ?

• Content Security Policy. Autorisez https://cookiequiet.com dans script-src et connect-src : le bandeau récupère sa configuration, la géolocalisation et les enregistrements de consentement depuis cette origine.
• Partytown. Gardez cq.js sur le thread principal. Il lit le document et contrôle les scripts qui s’y trouvent.
• Hébergement statique. Le bandeau n’a besoin d’aucun code serveur : Netlify, Cloudflare Pages ou n’importe quel hébergement statique convient.