Comment ajouter un bandeau cookies à une boutique BigCommerce

Où coller la balise dans BigCommerce

Script Manager ajoute des scripts aux boutiques Stencil sans modifier les fichiers du thème. Allez dans Storefront, puis Script Manager (dans Channel Manager sur les boutiques multi-vitrines), cliquez sur Create a Script et remplissez :

Collez la balise dans le contenu du script et enregistrez :

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

Pourquoi Essential. BigCommerce permet aux acheteurs de refuser toutes les catégories sauf Essential, et les scripts sans catégorie y sont rangés par défaut. Le bandeau doit se charger pour tout le monde : il a donc sa place là. Pourquoi Storefront pages. L’emplacement Checkout ne fonctionne qu’avec l’Optimized One-Page Checkout, et la norme PCI DSS exige une empreinte d’intégrité pour les scripts qui s’exécutent sur les pages de paiement, ce qu’un script mis à jour au fil du temps ne peut pas conserver. Avec la passerelle ci-dessous, BigCommerce reporte le consentement donné sur la boutique jusqu’au paiement.

Comment s’articule le réglage de consentement propre à BigCommerce ?

BigCommerce a un bandeau intégré : Settings, puis Security & Privacy, puis Cookie Consent Tracking, dans la section consacrée à la confidentialité des clients. Quand il est activé, les acheteurs peuvent refuser les catégories Analytics, Functional et Targeting; Advertising, et BigCommerce n’exécute que les scripts de Script Manager et les intégrations natives dont la catégorie est autorisée. Le centre d’aide de Google ajoute que Consent Mode est activé automatiquement pour l’intégration Google de BigCommerce une fois le bandeau activé.

Deux configurations propres sont possibles :

1. Vous n’utilisez aucune intégration native de BigCommerce (toutes vos balises sont les vôtres). Laissez Cookie Consent Tracking désactivé. Marquez les scripts que vous ajoutez : le Script type « Script » de Script Manager accepte <script type="text/plain" data-cq-category="analytics"> comme n’importe quel HTML, et Cookiequiet l’exécute après le consentement. Les balises injectées plus tard en JavaScript sont retenues par le bloqueur automatique.
2. Vous utilisez les intégrations natives Google Analytics, Meta ou autres de BigCommerce. Laissez Cookie Consent Tracking activé et transmettez chaque choix fait dans Cookiequiet à BigCommerce. Sa Storefront Consent API reçoit les catégories sous forme de nombres : 2 pour Functional, 3 pour Analytics, 4 pour Targeting; Advertising. BigCommerce documente que le point d’accès ne fonctionne que si la fonction de consentement aux cookies est activée. Ajoutez ceci comme second script de Script Manager (Footer, Storefront pages, Essential) :

html
<script>
  window.addEventListener('cq:consent', function (e) {
    var c = e.detail.categories, allow = [], deny = [];
    [[2, 'functional'], [3, 'analytics'], [4, 'marketing']].forEach(function (p) {
      (c.indexOf(p[1]) >= 0 ? allow : deny).push(p[0]);
    });
    fetch('/api/storefront/consent', {
      method: 'POST',
      credentials: 'same-origin',
      headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
      body: JSON.stringify({ allow: allow, deny: deny })
    });
  });
</script>

Dans cette configuration, le bandeau propre à BigCommerce s’affiche encore. Masquez-le avec une règle CSS dans votre thème qui cible son conteneur, dont vous pouvez lire l’id avec l’inspecteur du navigateur, pour que les visiteurs ne voient qu’un bandeau. Les clients connectés retrouvent leur choix sur leur compte, car BigCommerce enregistre le consentement dans la fiche client.

Comment classer les autres scripts

Donnez à chaque script de Script Manager sa vraie catégorie : Analytics pour Google Analytics ou Hotjar, Targeting; Advertising pour le pixel Meta ou TikTok, Functional pour un chat. C’est cette catégorie que BigCommerce vérifie dans la configuration 2. Les scripts collés directement dans les fichiers du thème reçoivent type="text/plain" et un data-cq-category, comme dans le guide pour bloquer les scripts jusqu’au consentement. Si vous faites passer les balises Google par Google Tag Manager, le data-consent-mode="1" de Cookiequiet définit les valeurs par défaut, et son événement dataLayer cq_consent peut déclencher le reste.

Comment ajouter le lien Préférences de cookies

Dans Storefront, puis Themes, ouvrez Advanced, puis Edit Theme Files sur une copie de votre thème, et ajoutez cette ligne au modèle du pied de page (templates/components/common/footer.html dans Cornerstone) :

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

Cookiequiet ouvre le centre de préférences depuis ce lien. Si vous préférez ne pas modifier les fichiers du thème, activez le bouton flottant Préférences de cookies dans les réglages du bandeau.

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, les cookies de session et de panier de BigCommerce, et aucun _ga ni _fbp.
3. Effacez les cookies, cliquez sur Tout accepter et rechargez : les balises s’exécutent.
4. Consultez le registre des consentements dans le tableau de bord Cookiequiet, et lancez le scanner de cookies gratuit pour lister ce que la boutique dépose.

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.