Comment ajouter un bandeau cookies à un site Hugo

Où coller la balise dans Hugo

Hugo construit chaque page à partir d’un template de base qui imprime l’enveloppe <html>, <head> et <body>. Depuis Hugo 0.146.0, le template de base vit dans layouts/baseof.html et les partials dans layouts/_partials/ ; les projets et thèmes plus anciens utilisent encore layouts/_default/baseof.html et layouts/partials/, que Hugo fait correspondre à la nouvelle organisation. La plupart des thèmes gardent le head dans un partial appelé depuis le template de base, par exemple {{ partial "head.html" . }}.

La règle qui rend l’opération sûre : quand le projet et le thème ont un fichier au même chemin, celui du projet l’emporte. Donc :

1. Trouvez le partial head du thème (themes/<theme>/layouts/_partials/head.html ou themes/<theme>/layouts/partials/head.html) ou son template de base.
2. Copiez-le au même chemin relatif dans le répertoire layouts/ de votre projet.
3. Ajoutez la balise comme premier script, juste après la balise meta charset :

html
<head>
  <meta charset="utf-8">
  {{ with site.Params.cookiequiet.siteKey }}
  <script src="https://cookiequiet.com/cq.js" data-site="{{ . }}" data-consent-mode="1" data-auto-block="1" defer></script>
  {{ end }}
  ...
</head>

toml
# hugo.toml
[params.cookiequiet]
siteKey = "YOUR_SITE_KEY"

Le bloc with vous permet de laisser la clé vide dans une configuration locale, pour que les builds de développement n’aient pas de bandeau. Certains thèmes fournissent un partial vide prévu pour le code de head personnalisé (extend_head.html de PaperMod, par exemple) : l’utiliser évite de copier tout le partial head, à condition que le thème l’inclue avant sa propre mesure d’audience.

Comment gérer les balises que votre thème imprime

Google Analytics. Beaucoup de thèmes impriment la balise Google quand services.googleAnalytics.id est défini, souvent via le template Google Analytics intégré de Hugo. Ce template ne définit pas les valeurs par défaut du Consent Mode. Deux options, toutes deux décrites dans le guide Google Analytics 4 :

• retirez l’ID de la configuration et collez une copie marquée de la balise Google sous la balise Cookiequiet (type="text/plain" data-cq-category="analytics" sur les deux balises script), pour que rien ne se charge avant le consentement ;
• ou gardez la balise du thème et ajoutez le bloc de consentement par défaut de Google comme script inline entre la balise Cookiequiet et la balise Google, pour qu’elle tourne en Consent Mode avec analytics_storage refusé jusqu’au consentement.

Pixel Meta, widgets de chat, commentaires. Collez-les dans le même partial, marqués avec la bonne catégorie (marketing pour le pixel, functional pour un widget de chat). Disqus et les systèmes de commentaires similaires chargent leur script en JavaScript ; le bloqueur automatique retient ceux qu’il connaît jusqu’au consentement, et un wrapper marqué rend la chose explicite.

Contenus YouTube, Vimeo, X. Les shortcodes intégrés de Hugo impriment des iframes dans le HTML. La configuration de confidentialité de Hugo aide : privacy.youTube.privacyEnhanced = true fait passer le shortcode YouTube sur youtube-nocookie.com, et privacy.vimeo.enableDNT et privacy.x.simple réduisent ce que les autres envoient. Pour qu’un lecteur attende plutôt le consentement, surchargez le shortcode dans votre projet (layouts/_shortcodes/youtube.html, ou layouts/shortcodes/ sur les versions plus anciennes) et imprimez data-cq-src au lieu de src ; Cookiequiet charge l’iframe une fois le marketing accordé. Le guide sur les vidéos YouTube montre le balisage.

Comment ajouter le lien Préférences de cookies

Dans le partial du pied de page que vous avez copié dans le projet :

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

Comment tester

1. Lancez hugo server et ouvrez le site dans une fenêtre de navigation privée.
2. Cliquez sur « Tout refuser » : les cookies se limitent à cq_consent, pas de _ga, pas de _fbp.
3. Effacez les cookies, cliquez sur « Tout accepter », rechargez : les balises marquées s’exécutent.
4. Lancez hugo et vérifiez dans le HTML construit (public/index.html) que cq.js est le premier script du head.
5. Consultez le registre des consentements dans le tableau de bord.

Ce qui est propre à Hugo

• Mises à jour du thème. Comme votre copie du partial vit dans le projet, mettre à jour le thème (sous-module git ou module Hugo) ne supprime pas la balise ; comparez de temps en temps le nouveau partial du thème avec le vôtre.
• Les modules Hugo suivent la même règle de surcharge que les thèmes.
• Hébergement statique. Le site construit fonctionne sur Netlify, GitHub Pages, Cloudflare Pages ou n’importe quel serveur web ; le bandeau n’a pas besoin de serveur. Voir bandeaux cookies pour sites statiques.
• Sites multilingues. Une seule balise sert toutes les langues ; la langue du bandeau suit le navigateur du visiteur.