Comment ajouter un bandeau cookies aux pages HubSpot CMS

Où coller la balise dans HubSpot

HubSpot imprime le code d’en-tête commun sur chaque page qu’il héberge pour un domaine : pages du site, landing pages et articles de blog.

1. Cliquez sur l’icône des paramètres dans la barre de navigation supérieure, puis allez dans « Content », puis « Pages » dans la barre latérale gauche.
2. Dans le menu déroulant « Choose a domain to edit its settings » (choisir un domaine pour modifier ses réglages), sélectionnez votre domaine, ou « Default settings for all domains » (réglages par défaut pour tous les domaines).
3. Dans la section « Site Header HTML », cliquez sur « Override default settings » si vous avez choisi un domaine, collez la balise tout en haut et cliquez sur « Save ».

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

HubSpot documente le champ comme disponible avec tous les produits et toutes les offres ; il vous faut l’autorisation Website settings. Le « Head HTML » propre à une page (dans les options avancées de l’éditeur de page) est imprimé après l’en-tête du site, les balises de page voient donc quand même la balise Cookiequiet en premier.

Comment relier le bandeau et le code de suivi de HubSpot

Les pages HubSpot chargent le code de suivi de HubSpot, qui dépose __hstc (six mois), hubspotutk, __hssc et __hssrc, et HubSpot propose son propre bandeau cookies sous « Settings », puis « Privacy & Consent », onglet « Cookies ». Avec Cookiequiet, les deux doivent suivre le choix du visiteur. HubSpot fournit une API navigateur pour cela : un indicateur qui désactive son bandeau, et une méthode qui définit l’état de consentement de son code de suivi. Collez ceci juste après la balise dans le Site Header HTML :

html
<script>
  window.disableHubSpotCookieBanner = true;
  window._hsp = window._hsp || [];
  window.addEventListener('cq:consent', function (e) {
    var c = e.detail.categories;
    window._hsp.push(['setHubSpotConsent', {
      analytics: c.indexOf('analytics') >= 0,
      advertisement: c.indexOf('marketing') >= 0,
      functionality: c.indexOf('functional') >= 0
    }]);
  });
</script>

HubSpot exige que l’indicateur soit défini tout en haut du head, avant le chargement de son bandeau, c’est pourquoi il accompagne la balise. HubSpot précise aussi que le consentement transmis ainsi n’est pas stocké dans les cookies de son propre bandeau ; ce n’est pas un problème, parce que Cookiequiet émet l’événement cq:consent à chaque chargement de page où un choix est enregistré, et de nouveau après chaque nouveau choix : le code de suivi reçoit donc l’état courant à chaque fois. Avec analytics à false, le code de suivi de HubSpot retient ses cookies.

Comment gérer les autres balises

• Google Analytics et Tag Manager. HubSpot a des champs d’intégration pour eux, et HubSpot documente lui-même qu’une balise Google ajoutée via l’en-tête HTML n’est pas contrôlée par son bandeau. Collez plutôt la balise Google dans le Site Header HTML sous la balise Cookiequiet, marquée (type="text/plain" data-cq-category="analytics") ou précédée du bloc de consentement par défaut de Google, comme l’expliquent les guides Google Analytics 4 et Google Tag Manager.
• Pixel Meta. Ajouté via l’outil publicitaire de HubSpot, le pixel est chargé par HubSpot et suit la valeur advertisement définie ci-dessus. Collé à la main, marquez-le marketing.
• Contenus embarqués. Dans un module de texte enrichi, ouvrez le code source et écrivez les iframes avec data-cq-src au lieu de src.
• Formulaires, CTA et réunions sont des fonctions internes de HubSpot ; leurs cookies sont nécessaires.

Comment ajouter le lien Préférences de cookies

Ouvrez le module de pied de page global de votre thème et ajoutez un lien libellé « Préférences de cookies » avec l’URL #cq-preferences. Si l’éditeur réécrit l’URL, ouvrez la source du texte enrichi et insérez <a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>. Le bouton flottant de préférences dans les réglages du bandeau est l’alternative sans code.

Comment tester

1. Ouvrez une page dans une fenêtre de navigation privée et cliquez sur « Tout refuser ».
2. Vérifiez les cookies dans les outils de développement : cq_consent seulement, pas de _ga, pas de _fbp, et pas de __hstc ni de hubspotutk.
3. Effacez les cookies, cliquez sur « Tout accepter », rechargez : les balises marquées s’exécutent et les cookies de HubSpot apparaissent.
4. Envoyez un formulaire de test : l’envoi fonctionne toujours, avec ou sans consentement.
5. Consultez le registre des consentements dans le tableau de bord Cookiequiet.

Ce qui est propre à HubSpot

• Un seul bandeau. Avec l’indicateur défini, le bandeau de HubSpot ne s’affiche pas ; n’activez pas non plus le bandeau de consentement préalable (opt-in) dans Privacy & Consent, sinon les visiteurs en auront deux.
• Réglages par domaine. Le Site Header HTML est propre à chaque domaine ; répétez l’étape pour chaque domaine que vous hébergez sur HubSpot, ou utilisez les réglages par défaut pour tous les domaines.
• Global Privacy Control. Cookiequiet respecte le signal du navigateur comme une opposition dans les États américains dotés d’une loi sur la vie privée ; l’interrupteur GPC de HubSpot ne s’applique qu’à son propre bandeau.
• Les landing pages sur le même domaine reçoivent le même en-tête, le bandeau et la passerelle les couvrent donc.