Comment ajouter un bandeau cookies à une application Bubble

Où coller la balise dans Bubble

Bubble a un seul endroit pour le code qui doit figurer sur chaque page d’une application. Dans l’éditeur, ouvrez l’onglet « Settings », puis « SEO / metatags », et collez la balise tout en haut du champ « Script/meta tags in header » :

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

Le manuel de Bubble précise que seules les balises <script>, <meta> et <link> sont valides dans ce champ ; tout autre contenu peut être déplacé dans le body par le navigateur. Le champ s’applique à chaque page, dans la version de développement comme dans la version en production. Chaque page a aussi son propre champ d’en-tête dans ses réglages (ouvrez l’éditeur de propriétés de l’élément page), qui ne s’applique qu’à cette page : utilisez-le pour une balise dont une seule page a besoin, jamais pour le bandeau lui-même. Si la balise n’apparaît pas dans le code source de la page après le déploiement, vérifiez que votre offre inclut les scripts d’en-tête personnalisés.

Comment gérer les balises que votre application charge

Balises que vous collez. Sous la balise Cookiequiet, dans le même champ. Deux façons :

• marquées, pour que rien ne se charge avant le consentement :

html
<script type="text/plain" data-cq-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script type="text/plain" data-cq-category="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

• ou en Consent Mode, avec le bloc de consentement par défaut de Google au-dessus de la balise Google, comme décrit dans le guide Google Analytics 4. Le pixel Meta est marqué marketing ; voir le guide Meta Pixel pour sa mise en garde sur le noscript.

Plugins. Les plugins Bubble qui ajoutent Google Analytics, le pixel Meta, Hotjar ou un widget de chat insèrent leur script en JavaScript à l’exécution. Avec data-auto-block="1", Cookiequiet retient les scripts et iframes d’environ 80 traceurs connus créés ainsi jusqu’à ce que leur catégorie soit accordée ; un plugin qui utilise un hôte inconnu s’exécute, ce que le test et le scanner de cookies révèlent. Quand le plugin propose une action manuelle « initialize », déclenchez-la depuis un workflow seulement après le consentement (voir ci-dessous).

Éléments HTML. L’élément HTML de Bubble imprime son contenu dans la page : les scripts marqués et les iframes data-cq-src y fonctionnent. Rappelez-vous qu’un élément HTML placé dans une page n’existe que sur cette page, et que Cookiequiet active les scripts marqués quand un choix est appliqué au chargement et après chaque choix : un contenu affiché plus tard (une popup, un groupe rendu visible par un workflow) doit s’appuyer sur data-cq-src ou sur l’API plutôt que sur des scripts marqués.

Workflows et API. Une action « Run JavaScript » (d’un plugin JavaScript comme Toolbox) peut appeler window.Cookiequiet.get() pour lire le choix enregistré (son tableau c liste les catégories accordées) et window.Cookiequiet.showPreferences() pour ouvrir le centre de préférences depuis n’importe quel bouton.

Comment ajouter le lien Préférences de cookies

Ajoutez un élément HTML au pied de page, ou à l’élément réutilisable du pied de page pour qu’il apparaisse sur chaque page, avec :

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

Un bouton relié à une action Run JavaScript qui appelle window.Cookiequiet.showPreferences() fonctionne aussi, et le bouton flottant de préférences dans les réglages du bandeau est la solution sans code.

Comment tester

1. Ouvrez la version de développement (l’URL version-test) 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, les cookies de session de Bubble, rien de Google ni de Meta.
3. Effacez les cookies, cliquez sur « Tout accepter », rechargez : les balises marquées s’exécutent.
4. Déployez en production et refaites le test une fois sur l’URL de production.
5. Consultez le registre des consentements dans le tableau de bord Cookiequiet.

Ce qui est propre à Bubble

• Développement et production partagent le champ d’en-tête ; le registre des consentements enregistre le chemin de la page, les entrées de test sont donc faciles à repérer.
• Les cookies propres à Bubble maintiennent la session et le fonctionnement de l’application et sont nécessaires.
• Wrappers natifs et iframes. Une application intégrée dans l’iframe d’un autre site affiche le bandeau dans l’iframe ; le choix est enregistré pour le domaine de l’application.
• Les champs d’en-tête par page sont imprimés après le champ global, une balise ajoutée pour une page voit donc quand même la balise Cookiequiet en premier.