Blog

Comment installer une banniere de consentement cookies sur WordPress, Shopify ou un site fait main

Publie le 13/09/2026 · Temps de lecture : 8 min

Une fois votre banniere de consentement configuree (message, couleurs, boutons d'acceptation et de refus), il reste une seule etape technique avant qu'elle ne s'affiche reellement sur votre site : coller un extrait de code a l'endroit approprie. Cette etape est souvent perçue comme un obstacle technique, alors qu'elle prend en general moins de 5 minutes, quelle que soit la plateforme utilisee.

Sommaire

• Installer sur WordPress
• Installer sur Shopify
• Installer sur Wix ou Squarespace
• Installer sur un site fait main (HTML, Next.js, autre framework)
• Comment verifier que tout fonctionne
• Erreurs frequentes lors de l'installation
• Questions frequentes

Installer sur WordPress

WordPress propose plusieurs methodes selon votre niveau de confort technique.

Methode recommandee (sans toucher au code du theme) :

1. Installez une extension gratuite comme « Insert Headers and Footers » ou « WPCode » depuis Extensions > Ajouter.
2. Ouvrez les reglages de l'extension, generalement accessibles depuis Reglages ou Apparence selon l'extension choisie.
3. Collez le code d'integration fourni par ConformiteFacile dans le champ Footer (pied de page), qui s'applique automatiquement a toutes les pages du site.
4. Enregistrez.

Methode alternative (edition directe du theme) : dans Apparence > Editeur de fichiers de theme, ouvrez footer.php et collez le code juste avant la balise </body>. Cette methode presente un risque : le code sera perdu si vous changez de theme ou lors d'une mise a jour majeure du theme, contrairement a une extension dediee qui persiste independamment du theme actif.

Installer sur Shopify

1. Dans l'administration Shopify, allez dans Boutique en ligne > Themes.
2. Cliquez sur les trois points a cote de votre theme actif, puis Modifier le code.
3. Dans la liste des fichiers, ouvrez layout/theme.liquid (le fichier de mise en page principal, applique a toutes les pages de la boutique).
4. Collez le code d'integration juste avant la balise </body>, tout en bas du fichier.
5. Cliquez sur Enregistrer.

Point d'attention specifique a Shopify : la plateforme depose elle-meme certains cookies techniques et, selon les applications installees depuis l'App Store (avis clients, upsell, retargeting), des cookies tiers supplementaires. Verifiez la liste de vos applications installees et assurez-vous que celles liees au marketing ou a la mesure d'audience respectent egalement le choix du visiteur.

Installer sur Wix ou Squarespace

Ces plateformes tout-en-un limitent generalement l'acces au code source complet, mais proposent un emplacement dedie pour des scripts personnalises :

• Wix : dans le tableau de bord, allez dans Parametres > Suivi et analyses > Nouvel outil (ou « Code personnalise » selon la version), puis choisissez de charger le code sur toutes les pages, dans la section Body - fin.
• Squarespace : dans Parametres > Avance > Injection de code, collez le code dans le champ Pied de page (Footer), disponible selon la formule d'abonnement (fonctionnalite parfois reservee aux plans payants).

Installer sur un site fait main (HTML, Next.js, autre framework)

Pour un site en HTML statique, collez la balise <script> fournie avant la fermeture de </body> de chaque page, ou dans un fichier inclus (footer commun) si votre site utilise un systeme de templates.

Pour un site construit avec un framework JavaScript (Next.js, Nuxt, SvelteKit...), ajoutez le script dans le layout racine de l'application afin qu'il se charge sur l'ensemble des pages sans avoir a le dupliquer. Avec Next.js par exemple, cela signifie l'ajouter dans le fichier app/layout.tsx, idealement avec le composant next/script et une strategie de chargement afterInteractive pour ne pas bloquer le rendu initial de la page.

Comment verifier que tout fonctionne

Une fois le code en place, effectuez ce controle en 4 etapes :

1. Ouvrez votre site dans une fenetre de navigation privee (pour partir sans cookies existants).
2. La banniere doit apparaitre immediatement, avant toute interaction.
3. Ouvrez les outils de developpeur (touche F12 ou clic droit > Inspecter), onglet Application sur Chrome/Edge ou Stockage sur Firefox, et verifiez la liste des cookies presents. A ce stade, seuls des cookies techniques (session, panier) doivent apparaitre.
4. Cliquez sur Tout accepter, rechargez la page, et verifiez que les cookies tiers (Google Analytics, Facebook...) apparaissent desormais. Refaites le test avec Tout refuser : ces memes cookies ne doivent jamais apparaitre.

Erreurs frequentes lors de l'installation

• Coller le code dans le <head> plutot que juste avant </body> : la banniere peut alors s'afficher avant que le reste de la page ne soit charge, ce qui degrade l'experience visuelle sans empecher son fonctionnement.
• Installer le code sur une seule page plutot que dans un gabarit commun (footer, layout) : la banniere n'apparait alors que sur la page d'accueil, pas sur les pages internes.
• Garder une ancienne banniere active en parallele : deux bannières de consentement qui se chevauchent creent une experience confuse et peuvent generer des conflits de cookies.
• Oublier de purger le cache d'un plugin de cache WordPress (WP Rocket, W3 Total Cache) apres modification : l'ancienne version de la page, sans la banniere, continue d'etre servie aux visiteurs.

Questions frequentes

A lire aussi : les 5 erreurs qui exposent votre site a une sanction CNIL.