Comment ajouter un bandeau cookies à un site WordPress

Où coller la balise dans WordPress

La balise doit s’imprimer dans <head> sur chaque page, au-dessus de toute balise de mesure d’audience ou marketing. Il existe deux façons fiables de le faire sur WordPress.

Avec WPCode (sans code). Installez l’extension gratuite WPCode, puis allez dans « Code Snippets », puis « Header & Footer ». Collez la balise tout en haut du champ « Header » et cliquez sur « Save Changes ». WPCode imprime le champ Header dans le head de chaque page, et cela fonctionne avec les thèmes classiques comme avec les thèmes basés sur des blocs tels que Twenty Twenty-Five.

html
<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>

Avec un thème enfant ou une petite extension. L’action wp_head se déclenche dans le head du thème. Accrochez-y la balise en priorité 0 pour qu’elle s’imprime avant celles que les autres extensions ajoutent à la priorité par défaut de 10 :

php
add_action( 'wp_head', function () {
  echo '<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>';
}, 0 );

Ne modifiez pas le header.php du thème parent : la prochaine mise à jour du thème supprimerait la ligne. Quelle que soit la méthode, videz ensuite le cache de pages.

Comment gérer les balises ajoutées par vos extensions

Les sites WordPress collent rarement leurs balises à la main ; ce sont les extensions qui s’en chargent. Trois cas :

• Balise Google imprimée par Site Kit. Site Kit imprime lui-même la balise Google, vous ne pouvez donc pas la marquer. Activez le mode consentement dans « Site Kit », puis « Settings », puis « Admin Settings » : Site Kit imprime alors l’état de consentement par défaut de Google (refusé pour les visiteurs de l’EEE, du Royaume-Uni et de la Suisse) avant sa balise. Cookiequiet envoie la commande consent update quand le visiteur choisit, et la balise Google l’applique quel que soit le code qui l’a imprimée. Site Kit demande de ne pas activer en même temps la fonction de mode consentement d’une autre extension de consentement ; Cookiequiet n’en a aucune à activer, il n’y a donc pas de conflit. Le guide Google Analytics 4 explique ce que fait la balise tant que le consentement est refusé.
• Balises collées dans un extrait de code. Marquez-les. Pour la balise Google, les deux balises script changent :

html
<script type="text/plain" data-cq-category="analytics" 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>

Le code de base du pixel Meta reçoit data-cq-category="marketing". Les balises marquées data-cookiecategory ou data-cookieconsent pour CookieYes ou Cookiebot continuent de fonctionner ; voir migrer depuis CookieYes.

• Widgets de chat et pixels chargés par leur propre extension. La plupart insèrent leur script en JavaScript. Avec data-auto-block="1", Cookiequiet retient les scripts et iframes créés ainsi par environ 80 traceurs connus (Hotjar, Clarity, Meta, TikTok, LinkedIn, HubSpot et d’autres) jusqu’à ce que leur catégorie soit accordée. Un traceur qu’une extension imprime en HTML brut avant notre balise s’exécute avant que nous puissions l’arrêter : déplacez-le sous la balise ou marquez-le.

Les vidéos YouTube insérées depuis l’éditeur de blocs sont imprimées comme des iframes ordinaires, elles se chargent donc tout de suite. Pour qu’une vidéo attende le consentement, utilisez un bloc HTML personnalisé avec data-cq-src à la place de src, comme l’explique Vidéos YouTube et consentement.

Comment ajouter le lien Préférences de cookies

Les visiteurs doivent pouvoir changer d’avis aussi facilement qu’ils ont consenti. Cookiequiet ouvre le centre de préférences depuis tout lien dont l’URL est #cq-preferences, et depuis tout élément portant data-cq-show-preferences.

• Thèmes classiques : « Apparence », puis « Menus », ajoutez un « Lien personnalisé » avec l’URL #cq-preferences et le libellé « Préférences de cookies » au menu du pied de page.
• Thèmes basés sur des blocs : « Apparence », puis « Éditeur », ouvrez l’élément de modèle du pied de page, sélectionnez le bloc Navigation et ajoutez un lien avec la même URL.

Si vous ne pouvez pas modifier le pied de page, les réglages du bandeau proposent un petit bouton flottant « Préférences de cookies », affiché après un choix.

Comment tester l’installation

1. Ouvrez le site dans une fenêtre de navigation privée. Le bandeau s’affiche avec « Tout accepter » et « Tout refuser » de la même taille.
2. Cliquez sur « Tout refuser ». Dans les outils de développement du navigateur (Application, puis Cookies dans Chrome), seuls cq_consent et les cookies propres à WordPress doivent être présents : pas de _ga, _gid, _fbp ni _hjSession.
3. Effacez les cookies, rechargez, cliquez sur « Tout accepter » : les scripts marqués s’exécutent et leurs cookies apparaissent.
4. Ouvrez le registre des consentements dans le tableau de bord : les deux choix sont enregistrés avec la date, les catégories et le pays.

Si le bandeau ne s’affiche pas, vérifiez que la balise figure dans le code source de la page (Afficher la source, cherchez cq.js), que le cache a été vidé, et que le ciblage géographique est réglé sur « partout » tant que vous testez depuis un pays non réglementé.

Ce qui est propre à WordPress

• Deux bandeaux. Toute autre extension de consentement (Complianz, CookieYes, Cookie Notice, GDPR Cookie Compliance, l’extension Cookiebot) affiche son propre bandeau et peut bloquer ou réécrire des balises. Désactivez-la après la bascule ; voir migrer depuis Cookiebot.
• Extensions d’optimisation. Les fonctions de report et de regroupement des scripts (« Retarder l’exécution du JavaScript » de WP Rocket, LiteSpeed Cache, Autoptimize) peuvent déplacer cq.js après les balises qu’il doit précéder. Ajoutez cq.js à la liste d’exclusion de ces fonctions.
• WooCommerce. Ses cookies de panier et de session sont strictement nécessaires : ils n’exigent aucun consentement, et le scanner les liste sous Nécessaires dans le tableau des cookies. Une boutique qui utilise aussi des balises de mesure d’audience ou marketing a quand même besoin du bandeau pour ces balises.
• Multisite. Chaque site du réseau a besoin de sa propre clé de site, pour que le registre des consentements et les politiques restent séparés.

Le scanner de cookies gratuit montre quelles balises vos extensions impriment réellement : c’est le moyen le plus rapide de repérer celles à marquer.