Comment ajouter un bandeau cookies à Magento et Adobe Commerce

Où coller la balise dans Magento

Magento (Magento Open Source et Adobe Commerce partagent la même administration) a un champ pour les scripts dans le head de chaque page :

1. Allez dans Contenu, puis Design, puis Configuration.
2. Cliquez sur Modifier sur la vue de magasin voulue. Modifier la ligne Global couvre toutes les vues de magasin qui ne la surchargent pas.
3. Sous Autres paramètres, dépliez En-tête HTML et collez la balise tout en haut de Scripts et feuilles de style :

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

1. Cliquez sur Enregistrer la configuration, puis actualisez les caches invalidés sous Système, puis Gestion du cache.

Adobe documente que ce champ s’imprime avant la balise head fermante. C’est assez tôt sur un thème standard, car les scripts de la boutique propres à Magento, dont son module Google Analytics, se chargent plus tard via RequireJS. Si vous construisez votre propre thème, vous pouvez plutôt ajouter la balise dans un fichier de layout ; le champ de l’administration est la voie la plus rapide et survit aux changements de thème.

Comment remplacer le mode de restriction des cookies

La notice cookies intégrée à Magento est le mode de restriction des cookies : une barre avec un bouton Autoriser les cookies (Allow Cookies) qui disparaît une fois acceptée, sans bouton de refus ni catégories. Désactivez-le pour que les visiteurs ne voient qu’un bandeau : Magasins, puis Paramètres, puis Configuration, puis Général, puis Web, dépliez Paramètres par défaut des cookies, réglez Mode de restriction des cookies sur Non, enregistrez et actualisez les caches.

Le module Google Analytics vérifie ce mode. Quand il est désactivé, le module charge gtag.js en créant un script en JavaScript, exactement ce que retient le bloqueur automatique de Cookiequiet : avec data-auto-block="1", la balise attend le consentement à la mesure d’audience, et avec data-consent-mode="1", les valeurs de consentement par défaut de Google sont réglées sur refusé avant son exécution. Les achats suivis par le module sont alors mesurés une fois que le visiteur a accepté. Les balises que vous collez vous-même, dans le même champ En-tête HTML ou dans un bloc CMS, reçoivent type="text/plain" et un data-cq-category, comme le décrit le guide pour bloquer les scripts jusqu’au consentement.

Adobe Commerce avec Product Recommendations ou Live Search. Leur collecteur d’événements respecte le mode de restriction des cookies, et Adobe documente un cookie de non-suivi, mg_dnt, pour les autres outils de consentement. Ajoutez ceci après la balise pour le déposer tant que la mesure d’audience n’est pas accordée :

html
<script>
  if (document.cookie.indexOf('cq_consent=') < 0) document.cookie = 'mg_dnt=true; path=/';
  window.addEventListener('cq:consent', function (e) {
    var ok = e.detail.categories.indexOf('analytics') >= 0;
    document.cookie = ok ? 'mg_dnt=; path=/; max-age=0' : 'mg_dnt=true; path=/';
  });
</script>

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

La liste des cookies d’Adobe indique que PHPSESSID (la session de l’acheteur) et form_key (protection contre la falsification de requêtes intersites) sont nécessaires au fonctionnement de la boutique, et que mage-cache-storage est un stockage local pour le contenu propre à chaque visiteur. Ils n’exigent aucun consentement. Adobe Commerce ajoute add_to_cart et remove_from_cart pour Google Analytics, qui suivent le choix relatif à la mesure d’audience. Les extensions ajoutent le reste ; le scanner de cookies gratuit liste ce que votre boutique dépose réellement.

Pourquoi le bandeau ne s’affiche-t-il pas au paiement ?

Depuis la version 2.4.7, Magento applique sa Content Security Policy en mode restrictif sur les pages de paiement (le paiement dans la boutique), et seuls les scripts autorisés s’y exécutent. La documentation d’Adobe sur la configuration des pages précise que les scripts du champ En-tête HTML doivent être autorisés dans la CSP pour s’exécuter au paiement. Ajoutez cookiequiet.com à script-src et à connect-src dans le csp_whitelist.xml d’un petit module personnalisé, déployez, et vérifiez la console du navigateur sur la page de paiement pour repérer les erreurs CSP.

Comment ajouter le lien Préférences de cookies

Ajoutez une ancre avec href="#cq-preferences" au pied de page : dans Luma, l’endroit le plus simple est un bloc CMS affiché dans le pied de page (Contenu, puis Blocs (Blocks)), ou le champ HTML divers (Miscellaneous HTML) de la section Pied de page (Footer), dans la même configuration du design. Cookiequiet ouvre le centre de préférences depuis tout lien qui a cette adresse.

Comment tester

1. Ouvrez la boutique dans une fenêtre de navigation privée et cliquez sur Tout refuser.
2. Vérifiez les cookies : cq_consent, PHPSESSID, form_key, et aucun _ga ni _fbp.
3. Ajoutez un produit au panier et allez jusqu’à l’étape de paiement : le script du bandeau se charge sans erreur CSP dans la console.
4. Effacez les cookies, cliquez sur Tout accepter, rechargez : Google Analytics se charge. Consultez le registre des consentements dans le tableau de bord.

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