Comment ajouter un bandeau cookies à un site Drupal

Où coller la balise dans Drupal

Drupal imprime chaque page à travers un seul modèle, html.html.twig, dont le head contient trois espaces réservés : un pour les éléments du head, un pour les CSS et un pour le JavaScript. La balise doit se trouver au-dessus des trois, pour se charger avant toute bibliothèque ou tout script de module.

Avec un modèle de thème (sans module). Utilisez un thème personnalisé ou un sous-thème du thème que vous utilisez. Copiez le html.html.twig dont hérite votre thème (Olivero fournit le sien dans core/themes/olivero/templates/layout/ ; sinon, copiez core/modules/system/templates/html.html.twig) dans le dossier templates de votre thème, et ajoutez la balise sur la ligne qui suit <head> :

html
<head>
  <script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>
  <head-placeholder token="{{ placeholder_token }}">
  <title>{{ head_title|safe_join(' | ') }}</title>

Videz ensuite les caches sous Configuration, puis Développement, puis Performance, ou avec drush cr. Drupal n’utilise votre copie d’un modèle qu’après une reconstruction du cache. Ne modifiez pas Olivero ni un thème contribué directement : la prochaine mise à jour supprimerait la ligne.

Avec un module personnalisé. Si vous préférez ne pas toucher aux modèles, attachez la balise depuis hook_page_attachments(). Les éléments ajoutés à html_head s’impriment dans l’espace réservé du head, avant les CSS et le JS :

php
function mymodule_page_attachments(array &$attachments) {
  $attachments['#attached']['html_head'][] = [[
    '#tag' => 'script',
    '#attributes' => [
      'src' => 'https://cookiequiet.com/cq.js',
      'data-site' => 'YOUR_SITE_KEY',
      'data-consent-mode' => '1',
      'data-auto-block' => '1',
      'defer' => TRUE,
    ],
  ], 'cookiequiet'];
}

Le hook s’exécute aussi sur les pages d’administration. C’est sans conséquence, mais vous pouvez les exclure en vérifiant d’abord le contexte d’administration du routeur.

Quels cookies Drupal dépose-t-il lui-même ?

Le cœur de Drupal ne dépose qu’un cookie à lui : le cookie de session, nommé SESS (ou SSESS en HTTPS) suivi d’une empreinte de 32 caractères tirée de l’hôte. Il est créé quand quelqu’un se connecte, ou quand un module stocke des données dans la session d’un visiteur anonyme (un panier, un formulaire en cours). Il est strictement nécessaire et n’exige aucun consentement. Tout le reste vient des modules et des balises que vous ajoutez ; c’est pourquoi un scan compte davantage sur Drupal que sur la plupart des plateformes : lancez le scanner de cookies gratuit sur quelques types de pages (accueil, article, formulaire, boutique) pour voir ce que vos modules impriment réellement.

Comment gérer les balises ajoutées par les modules

• Module Google Tag. Il imprime la balise Google à votre place, vous ne pouvez donc pas la marquer. Dans les réglages avancés du conteneur de balises, cochez Enforce Privacy Consent Policy : le module règle alors les valeurs de consentement par défaut de Google sur refusé (ad_storage, analytics_storage, ad_user_data, ad_personalization) avant de charger gtag.js. Cookiequiet envoie la commande consent update quand le visiteur choisit, et la balise l’applique quel que soit le code qui l’a imprimée. Si vous utilisez plutôt Google Tag Manager, voir le guide Google Tag Manager.
• Balises que vous avez collées. Dans un modèle ou dans un bloc qui utilise le format de texte HTML complet, remplacez la balise d’ouverture par <script type="text/plain" data-cq-category="marketing"> pour le pixel Meta, analytics pour Hotjar ou Clarity. Le guide pour bloquer les scripts jusqu’au consentement montre le principe pour les scripts inline et externes.
• Scripts que les modules injectent en JavaScript. Avec data-auto-block="1", Cookiequiet retient les scripts et iframes créés ainsi par environ 80 traceurs connus jusqu’à ce que leur catégorie soit accordée.
• Vidéos distantes. Le module Media de Drupal imprime les lecteurs YouTube et Vimeo comme des iframes dans le HTML, elles se chargent donc tout de suite. Pour qu’une vidéo attende le consentement, utilisez une iframe avec data-cq-src à la place de src dans un bloc en HTML complet.

Désinstallez tout autre module de consentement (EU Cookie Compliance, Klaro, COOKiES) après la bascule, pour que les visiteurs ne voient qu’un seul bandeau et qu’un seul consentement soit enregistré.

Comment ajouter le lien Préférences de cookies

Allez dans Structure, puis Menus, ouvrez le menu Pied de page (Footer) et cliquez sur Ajouter un lien (Add link). Saisissez #cq-preferences comme lien (Drupal accepte les chemins qui commencent par un dièse) et « Préférences de cookies » comme titre. Cookiequiet ouvre le centre de préférences depuis tout lien qui a cette adresse. Si votre pied de page est plutôt un bloc personnalisé, ajoutez-y une ancre avec le même href.

Comment tester

1. Ouvrez le site dans une fenêtre de navigation privée, déconnecté. 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 (Application, puis Cookies dans Chrome), vous devez voir cq_consent et rien de Google, de Meta ni de Hotjar.
3. Effacez les cookies, rechargez, cliquez sur Tout accepter : les scripts marqués s’exécutent et leurs cookies apparaissent.
4. Consultez le registre des consentements dans le tableau de bord Cookiequiet.

Si le bandeau ne s’affiche pas, affichez le code source de la page et cherchez cq.js. Une balise absente signifie presque toujours que le cache n’a pas été reconstruit, ou que le modèle se trouve dans un thème qui n’est pas le thème par défaut.

Ce qui est propre à Drupal

• Deux thèmes. Le thème d’administration (Claro) n’utilise pas votre modèle public : le bandeau n’apparaît donc que sur le site public, ce qui est le comportement voulu.
• Cache de pages et proxys inverses. La balise est la même pour chaque visiteur : le cache de pages de Drupal, Varnish ou un CDN peuvent donc mettre en cache les pages qui la contiennent. Purgez-les une fois après la modification.
• Multisite. Donnez à chaque site sa propre clé de site, pour que les registres des consentements et les politiques restent séparés.

Cookiequiet est gratuit pour un site, ciblage géographique compris, et Starter coûte 3 € par site et par mois sans limite de pages vues, voir les tarifs.