Comment ajouter une bannière de cookies à WordPress sans extension

Tous les articles

Pour ajouter une bannière de cookies à WordPress sans extension, collez le script de votre outil de consentement dans le head du site depuis un thème enfant : une courte fonction dans son functions.php, accrochée à wp_head en priorité 1. Il s'imprime ainsi avant les scripts que WordPress met en file d'attente et survit aux mises à jour du thème. Ne le collez jamais dans le header.php du thème parent, car la prochaine mise à jour le supprime.

Que signifie vraiment « sans extension » ?

On entend par là l'une de deux choses. Certains veulent éviter une extension de consentement qui ajoute ses propres écrans de réglages, ses tables en base de données et son cycle de mises à jour. D'autres ne veulent aucune extension du tout, pas même un petit outil pour coller du code dans l'en-tête. Les deux sont possibles, et la méthode ci-dessous répond à la version la plus stricte.

Ce que vous ne pouvez pas sauter, c'est l'outil de consentement lui-même. Une bannière construite uniquement en HTML et CSS affiche un avis. Si elle ne stocke pas aussi le choix, ne retient pas les scripts jusqu'à la décision du visiteur et ne fixe pas l'état de consentement que lisent les balises Google, elle ne recueille rien sur quoi vos balises puissent agir. Ce travail, c'est celui d'une plateforme de gestion du consentement, et sur WordPress, la façon la plus légère d'en ajouter une est un seul script hébergé dans le head.

Notre propre guide d'installation WordPress utilise un outil d'extraits pour l'en-tête, car c'est la méthode la plus rapide pour la plupart des sites. La méthode du thème enfant fait le même travail sans rien installer de plus.

Où placer le script dans WordPress ?

On le place à quatre endroits. Seuls deux d'entre eux durent.

• Le header.php du thème parent. La méthode que donnent la plupart des tutoriels, via Apparence et l'éditeur de fichiers des thèmes. Elle fonctionne jusqu'à la mise à jour du thème : le fichier est alors remplacé et la bannière disparaît.
• Le functions.php d'un thème enfant. Il survit aux mises à jour du thème parent et vous laisse choisir à quel endroit du head le script s'imprime. C'est la méthode que nous recommandons.
• Un champ de code d'en-tête dans les réglages du thème. Certains thèmes en proposent un. Il survit aux mises à jour, mais pas à un changement de thème, et vous ne pouvez pas contrôler son ordre par rapport aux autres scripts du head.
• Le modèle d'un thème de blocs. Les thèmes de blocs n'ont pas de header.php, et l'en-tête de l'éditeur de site est du contenu de page, pas le head du document. Utilisez là aussi le hook du thème enfant.

Comment l'ajouter avec un thème enfant ?

Six étapes. Comptez une demi-heure la première fois, surtout pour la vérification finale.

1. Copiez le script complet depuis votre outil de consentement

   Prenez l'extrait d'installation dans le tableau de bord de votre outil de consentement exactement tel qu'il est fourni, y compris l'identifiant de site et les attributs data. C'est en le retapant qu'on perd des attributs.

2. Créez et activez un thème enfant

   Un thème enfant est un petit dossier avec un style.css qui désigne votre thème actuel comme parent, plus son propre functions.php. WordPress le charge par-dessus le parent, et les mises à jour du thème parent n'y touchent pas. Activez-le avant d'ajouter quoi que ce soit.

3. Imprimez le script dans wp_head en priorité 1

   Dans le functions.php du thème enfant, ajoutez une fonction qui affiche la balise script et accrochez-la avec add_action sur wp_head en priorité 1. WordPress imprime les scripts qu'il a mis en file d'attente en priorité 9 : la priorité 1 place donc le script de consentement avant eux.

4. Retirez l'ancienne bannière et excluez le script de l'optimisation

   Désactivez toute extension de consentement utilisée auparavant, pour qu'un seul outil fixe les valeurs par défaut de Consent Mode. Si une extension de cache ou de performance combine, diffère ou retarde le JavaScript, ajoutez le script de consentement à sa liste d'exclusions.

5. Videz tous les caches

   Purgez le cache des pages, tout cache serveur et le CDN. Une page en cache continue de servir le head qu'elle avait avant votre modification : la bannière semble ne pas fonctionner alors qu'elle n'a simplement pas encore atteint la page.

6. Vérifiez la page en ligne avant et après un choix

   Ouvrez le site dans une fenêtre privée depuis une région où le consentement est requis. Dans le code source de la page, le script de consentement doit apparaître avant toute requête gtag.js ou googletagmanager.com. Dans le panneau réseau, filtrez sur collect : avant un choix, il n'y a aucune requête en mode basique, ou une requête portant gcs=G100 en mode avancé. Acceptez tout, et la requête suivante doit porter gcs=G111. La checklist complète se trouve dans comment tester une bannière de cookies avant la mise en ligne.

Pourquoi l'ordre de chargement compte-t-il ?

Les balises Google lisent l'état de consentement au moment où elles s'exécutent. Le guide de configuration de Consent Mode de Google demande que l'état par défaut soit défini avant toute commande qui envoie des données de mesure. Si la balise Google s'imprime en premier, sa première requête peut partir avant qu'aucune valeur par défaut n'existe, et dans les régions qui exigent le consentement, cette requête est envoyée comme si personne n'avait rien demandé.

Sur WordPress, la balise Google arrive souvent par une extension, et une extension qui met son script en file d'attente le voit imprimé avec les autres en priorité 9. Un script de consentement accroché à la priorité par défaut, 10, celle que vous obtenez en omettant le nombre, s'imprime après lui. Ce seul argument manquant explique souvent pourquoi une bannière correctement configurée laisse encore voir des balises se déclencher avant le consentement. Certaines extensions impriment aussi leur propre balise en priorité 1 ; si le code source de la page en montre une avant le script de consentement, utilisez un nombre plus bas, comme 0. Deux autres choses peuvent modifier l'ordre une fois que vous l'avez fixé : un thème qui écrit un script directement dans header.php au-dessus de wp_head(), et une extension d'optimisation qui retarde les scripts jusqu'à ce que le visiteur interagisse. La vérification du code source à l'étape 6 détecte les trois.

Si vos balises de mesure passent plutôt par Google Tag Manager, l'ordre se règle dans le conteneur. Ajoutez l'outil de consentement comme balise sur le déclencheur Consent Initialization, comme le montre la méthode Tag Manager de notre guide WordPress, et gardez l'extrait du conteneur lui-même dans le head, comme avant.

Ce que fait Velo

Velo sur WordPress tient en une ligne de script, sans extension de consentement à installer ni à mettre à jour. Le script fixe les valeurs par défaut de Consent Mode sur refusé pour les régions qui exigent le consentement dès qu'il s'exécute : le hook du thème enfant ci-dessus est donc le bon emplacement. Vérifiez l'ordre sur la page en ligne comme à l'étape 6, car d'autres extensions peuvent encore s'imprimer avant lui.