Blog

Bandeau cookies sur un site statique : Hugo, Astro, Eleventy, Jekyll, HTML

Q: Ai-je besoin d’un bandeau sur un site statique sans aucun cookie ?

Non. Un site qui ne charge ni analytics, ni contenu embarqué, ni balise publicitaire, ni widget tiers n’a rien pour quoi demander un consentement. Vérifiez l’onglet Réseau dans une fenêtre privée pour en être sûr ; les thèmes ajoutent souvent des polices ou un outil d’analyse que vous aviez oubliés.

Q: Le bandeau ralentit-il un site statique ?

Le script pèse environ 7 Ko compressés, se charge avec defer et s’affiche dans un shadow root, donc il ne bloque pas le rendu et n’entre pas en conflit avec votre CSS. Les traceurs marqués se chargent plus tard, après consentement, ce qui rend le premier affichage plus rapide, pas plus lent.

Q: Puis-je héberger le script du bandeau avec mon site ?

Non. Le script est servi depuis cookiequiet.com pour que les changements de configuration faits dans le tableau de bord s’appliquent sans rebuild. Vos traceurs et contenus embarqués, eux, restent dans votre dépôt sous forme de balises marquées.

Q: Cela fonctionne-t-il sur GitHub Pages et Netlify ?

Oui. Rien ne s’exécute sur votre serveur ; le script, la configuration, le ciblage géographique et le registre des consentements sont pris en charge par les points de terminaison de Cookiequiet. N’importe quel hébergeur statique qui sert votre HTML convient.

Un site statique a besoin d’un bandeau cookies dès qu’il charge analytics, polices ou vidéos : une balise dans le layout, des traceurs marqués, aucun build.

Publié le 20 octobre 2026 · Par l’équipe Cookiequiet

Un site statique n’a pas de code côté serveur, mais il a un navigateur à l’autre bout, et c’est dans le navigateur que vivent les cookies. Si votre blog Hugo charge Google Analytics, si votre page d’atterrissage Astro embarque une vidéo YouTube, ou si votre documentation Jekyll charge des polices depuis Google, les règles du consentement s’appliquent exactement comme à un site WordPress. La bonne nouvelle, c’est qu’un site statique est le cas le plus simple à rendre conforme : une balise script dans le layout partagé, un changement d’attribut sur chaque traceur, et aucun plugin à maintenir. Voici le schéma une fois, puis l’endroit où le placer dans chaque générateur.

Le schéma, en HTML pur

Trois morceaux, tous dans le <head> de la page :

html
<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY"
  data-consent-mode="1" data-auto-block="1" defer></script>
<script type="text/plain" data-cq-category="analytics" async
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script 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>

Et dans le body, les contenus embarqués retenus jusqu’au consentement :

html
<iframe data-cq-src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  data-cq-category="marketing" width="560" height="315" title="Demo"></iframe>

Le script place les valeurs par défaut de Google Consent Mode sur refusé avant l’exécution de toute balise Google, retient les scripts et iframes créés dynamiquement par les traceurs connus, récupère la configuration du site dans la langue du visiteur, affiche le bandeau là où la loi l’exige, active les balises marquées quand leur catégorie est accordée, et enregistre chaque choix. Un lien de pied de page avec data-cq-show-preferences rouvre les préférences. Le raisonnement derrière chaque attribut est dans le guide du blocage des scripts ; le reste de cet article porte sur l’endroit où va le balisage.

Hugo

Hugo construit chaque page à partir d’un layout, et le head est presque toujours un partial. Dans les versions actuelles de Hugo, les partials vivent dans layouts/_partials/ (les projets plus anciens et beaucoup de thèmes utilisent layouts/partials/) ; le partial d’un thème est remplacé par un fichier du même nom dans le répertoire layouts de votre projet. Créez ou modifiez le partial du head et ajoutez la balise :

html
{{/* layouts/_partials/head.html */}}
<meta charset="utf-8">
<title>{{ .Title }}</title>
<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY"
  data-consent-mode="1" data-auto-block="1" defer></script>
{{ if hugo.IsProduction }}
<script type="text/plain" data-cq-category="analytics" async
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
{{ end }}

Appelez-le depuis le layout de base avec {{ partial "head.html" . }} si ce n’est pas déjà fait. Si votre thème embarque son propre modèle Google Analytics, désactivez-le dans la configuration et ajoutez la balise marquée vous-même ; une balise injectée par le thème au-dessus du script de consentement s’exécute avant lui. Le guide de la plateforme Hugo contient les notes propres aux thèmes.

Astro

Astro traite par défaut les balises <script> des composants : il les regroupe et les remonte. Sa documentation indique qu’il ne traite pas une balise script qui porte un attribut autre que src, et recommande la directive is:inline pour les scripts chargés depuis l’extérieur de votre projet. Les deux s’appliquent ici ; ajoutez is:inline pour que l’intention soit explicite :

html
---
// src/layouts/Layout.astro
const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
    <script is:inline src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY"
      data-consent-mode="1" data-auto-block="1" defer></script>
    <script is:inline type="text/plain" data-cq-category="analytics" async
      src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
  </head>
  <body><slot /></body>
</html>

Astro laisse tranquilles les scripts type="text/plain", donc le bloc de configuration gtag inline peut être marqué de la même façon. Pour les îlots Astro qui chargent des widgets tiers à l’exécution, le bloqueur automatique retient les traceurs connus ; marquez le reste. Voir le guide de la plateforme Astro.

Eleventy

Les layouts Eleventy vivent dans _includes/ et les pages y souscrivent avec layout: base.njk dans leur front matter ; le layout affiche la page avec {{ content | safe }}. Placez la balise dans le head du layout :

html
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY"
      data-consent-mode="1" data-auto-block="1" defer></script>
    <script type="text/plain" data-cq-category="analytics" async
      src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
  </head>
  <body>{{ content | safe }}</body>
</html>

Le fichier est _includes/base.njk. Nunjucks et Liquid laissent les attributs data- intacts. Si vous générez la balise analytics à partir d’une variable d’environnement, conservez le type="text/plain" dans la sortie générée.

Jekyll

Jekyll cherche les fichiers d’inclusion dans _includes/ et les insère avec {% include head.html %}. La plupart des thèmes, dont Minima, construisent le head à partir d’une telle inclusion ; copiez le fichier du thème dans votre propre _includes/head.html pour le remplacer, puis ajoutez la balise :

html
<head>
  <meta charset="utf-8">
  <title>{{ page.title | default: site.title }}</title>
  <script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY"
    data-consent-mode="1" data-auto-block="1" defer></script>
  {% if jekyll.environment == "production" %}
  <script type="text/plain" data-cq-category="analytics" async
    src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
  {% endif %}
</head>

Les thèmes qui lisent une clé google_analytics dans _config.yml injectent leur propre balise non marquée ; supprimez la clé et ajoutez la balise marquée vous-même.

Les balises que votre générateur ajoute pour vous

Les traceurs que vous n’avez pas écrits sont ceux qui échappent au marquage. Hugo embarque des modèles internes pour Google Analytics que les thèmes appellent en une ligne ; les thèmes Jekyll lisent un identifiant analytics dans la configuration ; les intégrations Astro et les plugins Eleventy ajoutent des scripts au head depuis node_modules. Chacun produit une balise <script> ordinaire qui s’exécute avant le consentement. La solution est la même à chaque fois : désactivez la fonction dans la configuration et écrivez vous-même la balise marquée dans le layout, là où vous la voyez. Après chaque mise à jour de thème ou de plugin, ouvrez le HTML généré d’une page et cherchez <script pour confirmer que rien de non marqué n’est revenu.

Gardez la balise de consentement et les balises marquées dans une seule inclusion ou un seul composant (un partial consent.html dans Hugo, un composant Consent.astro, une inclusion Nunjucks, une inclusion Jekyll) pour qu’un changement de clé de site ou un nouveau traceur ne touche qu’un fichier.

Tester avant de déployer

Le bandeau est configuré par clé de site, pas par domaine, donc la balise fonctionne sur localhost pendant le développement exactement comme en production : lancez le serveur de développement, ouvrez une fenêtre privée, et vérifiez que rien ne se déclenche avant un clic, que « Tout refuser » maintient cet état, et que « Tout accepter » active les balises marquées. Le ciblage géographique utilise l’adresse IP du visiteur, donc sur une machine locale dans un pays à consentement vous voyez le bandeau de consentement ; pour tester l’avis d’opposition des États américains, réglez temporairement le ciblage géographique sur « partout » ou testez depuis une connexion américaine. Les enregistrements de consentement faits depuis localhost atterrissent dans le même registre que ceux de production, donc utilisez une clé de site distincte pour le développement si vous voulez un graphique propre.

Ce qui est propre à l’hébergement statique

Pas de serveur, même ciblage géographique. Le bandeau demande le pays du visiteur au point de terminaison de Cookiequiet, donc n’afficher le bandeau que dans les pays réglementés fonctionne aussi bien sur GitHub Pages, Netlify, Vercel ou un bucket S3.
Les pages de politiques sont statiques aussi. Générez la politique de cookies et la politique de confidentialité à partir du scan, copiez-les en Markdown ou en HTML dans votre répertoire de contenu, et relancez le build. Ou faites un lien vers les versions hébergées.
Les polices. Les thèmes de sites statiques adorent Google Fonts. Hébergez-les vous-même ; le guide Google Fonts explique pourquoi et comment.
La mesure au moment du build ne pose pas de problème. Les journaux du serveur et une mesure sans cookies, au seul service de l’éditeur, n’ont pas besoin du bandeau ; voir la mesure d’audience sans consentement.
Vérifiez après chaque déploiement. Ouvrez le site dans une fenêtre privée : aucune requête analytics ou de contenu embarqué avant un clic, rien de nouveau après « Tout refuser », tout après « Tout accepter ». Un scan avec le scanner de cookies confirme les pages de production.

Questions