Comment ajouter un bandeau de consentement aux cookies à votre site web

Un bandeau de consentement aux cookies est le petit avis qui apparaît lorsqu’une personne arrive pour la première fois sur votre site, lui demandant si elle accepte les cookies et traceurs non essentiels. Au titre de lois comme le GDPR, les règles UK PECR et le DPDPA indien, le bandeau n’est que la partie visible du système. Le vrai travail se passe en dessous : les scripts non essentiels tels que l’analytique, les pixels publicitaires et les widgets de chat ne doivent pas s’exécuter tant que le visiteur n’a pas donné son consentement.

Cette distinction compte, car un bandeau qui se contente d’afficher un message tout en laissant Google Analytics ou le pixel Meta se déclencher au chargement de la page n’est pas conforme. Les régulateurs ont été clairs : le consentement doit être obtenu avant que le traceur ne se charge, pas après. L’objectif de l’ajout d’un bandeau est donc double : afficher un choix clair et bloquer les traceurs jusqu’à ce que ce choix soit fait.

Le moyen le plus rapide d’ajouter un bandeau est de déposer un script dans la section head de votre HTML. Après avoir créé un site web dans votre tableau de bord ConsentX, vous obtenez un extrait d’intégration qui ressemble à une seule ligne référençant embed.js avec votre clé de site. Collez-le le plus haut possible dans le head pour qu’il se charge avant vos autres scripts.

Placez-le au-dessus de vos balises d’analytique et de publicité. L’ordre compte, car ConsentX doit s’enregistrer en premier afin de pouvoir retenir les traceurs situés en dessous jusqu’à ce que le visiteur décide. Si vous étiquetez correctement vos traceurs dans le tableau de bord, le chargeur les maintiendra bloqués à la première visite et les libérera dès que le consentement sera accordé.

Cette approche fonctionne sur n’importe quel site codé à la main, générateur de site statique ou framework où vous contrôlez la section head du HTML. C’est aussi la méthode la plus propre, car il n’y a aucune couche d’extension entre les deux.

Si vos traceurs sont déjà gérés dans Google Tag Manager, vous pouvez aussi ajouter ConsentX via GTM. Créez une nouvelle balise HTML personnalisé, collez-y l’extrait d’intégration et réglez-la pour qu’elle se déclenche sur le déclencheur Initialisation du consentement, afin qu’elle s’exécute avant tout le reste.

Le schéma le plus propre consiste à associer le bandeau à Google Consent Mode. Au lieu de laisser les balises GTM se déclencher librement, vous les conditionnez à l’état de consentement, et ConsentX met cet état à jour lorsque le visiteur choisit. Ainsi, GTM lui-même retient les balises jusqu’à ce que le consentement soit accordé, ce qui correspond exactement au comportement attendu par les régulateurs.

Évitez l’erreur courante qui consiste à charger ConsentX via GTM alors que votre balise d’analytique se déclenche toujours sur Toutes les pages sans vérification du consentement. Si le traceur n’est pas conditionné, le bandeau est décoratif et vous restez exposé.

Sur WordPress, vous n’avez pas besoin d’une extension lourde. La solution la plus simple est d’ajouter l’extrait d’intégration à l’en-tête de votre thème via une extension de code d’en-tête et de pied de page, ou via le champ de code head personnalisé de votre thème, pour qu’il se charge sur tout le site dans le head.

Si vous utilisez une extension de SEO ou de cache, placez l’extrait là où il n’est ni supprimé ni différé, car différer le chargeur de consentement peut laisser des traceurs passer avant son initialisation. Après l’avoir ajouté, videz tout cache de page pour que les visiteurs reçoivent le nouveau balisage du head.

Les sites WordPress chargent souvent des traceurs via plusieurs extensions à la fois : utilisez donc la découverte des traceurs du tableau de bord pour repérer chaque script et l’étiqueter avant de vous fier au bandeau.

Sur Shopify, ajoutez l’extrait d’intégration à votre thème en modifiant theme.liquid et en le collant à l’intérieur de l’élément head, près du haut. Les thèmes Shopify chargent plusieurs scripts propriétaires et d’applications : positionner le chargeur haut dans le head est donc important.

Shopify dispose aussi de sa propre API de confidentialité et de consentement client pour la boutique. Dans la mesure du possible, connectez ConsentX à ce signal pour que les pixels natifs de Shopify respectent le choix du visiteur au même titre que vos autres traceurs. Testez avec un parcours de paiement, car les pages de paiement chargent parfois des scripts que vos pages de boutique ne chargent pas.

Le test est l’étape que la plupart des équipes sautent, et c’est celle qui décide si vous êtes réellement conforme. Ouvrez votre site dans une nouvelle fenêtre de navigation privée, puis ouvrez les outils de développement de votre navigateur et surveillez l’onglet Réseau pendant le chargement de la page. Avant de cliquer sur quoi que ce soit dans le bandeau, vous ne devriez voir aucune requête vers des domaines d’analytique ou de publicité.

Cliquez ensuite sur Refuser et rechargez. Les traceurs doivent rester absents et aucun cookie marketing ne doit apparaître dans l’onglet Application ou Stockage. Cliquez ensuite sur Accepter et vérifiez que les traceurs se chargent désormais et que les cookies apparaissent. Si des traceurs se déclenchent avant votre choix, c’est que le script est placé trop bas dans le head ou que le traceur n’est pas étiqueté pour le blocage.

Répétez le test sur quelques types de pages clés, dont votre page d’accueil, une page produit ou de contenu, et toute page comportant un widget de chat ou une vidéo intégrée, car celles-ci font souvent appel à des scripts tiers supplémentaires.