Bloquer les scripts avant consentement : les quatre méthodes qui marchent

Un bandeau qui n’arrête pas les scripts est l’échec le plus courant en matière de conformité cookies, et le plus coûteux : les plus grosses amendes récentes de la CNIL (Shein, 150 millions d’euros ; American Express, 1,5 million d’euros ; Condé Nast, 750 000 €) citent toutes des cookies déposés avant que le visiteur ait choisi ou après son refus. Bloquer signifie que la mesure d’audience, la publicité et les contenus embarqués ne se chargent pas tant que le visiteur n’a pas consenti à leur catégorie. Il y a quatre façons d’y parvenir, et la plupart des sites en combinent deux : marquer les balises script, remplacer les URL des contenus embarqués, laisser un bloqueur automatique attraper ce que les gestionnaires de balises et les chargements différés créent à l’exécution, et faire patienter chaque balise d’un gestionnaire de balises jusqu’au consentement.

Méthode 1 : marquer la balise script

Changez le type de la balise pour que le navigateur l’ignore, et étiquetez-la avec sa catégorie :

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>

Un navigateur n’exécute jamais un script dont le type est text/plain. Quand le visiteur accorde la catégorie, Cookiequiet crée un nouvel élément script avec les mêmes attributs et le même contenu, lui donne le type JavaScript et l’insère juste après l’original, de sorte que les scripts externes comme les scripts inline s’exécutent dans leur ordre d’origine. Les scripts dont la catégorie est refusée restent inertes.

Noms de catégories acceptés dans l’attribut : necessary, functional, analytics, marketing, plus les alias utilisés par d’autres bandeaux (statistics et performance pour analytics, preferences pour functional, advertisement, advertising et targeting pour marketing, essential pour necessary). Les attributs data-cookieconsent, data-cookiecategory et data-category sont lus aussi, ce qui fait de la migration depuis Cookiebot un simple remplacement de balise script.

Méthode 2 : retenir les contenus embarqués avec data-cq-src

Les iframes contactent leur hôte dès que le navigateur voit un src. Déplacez l’URL dans data-cq-src et l’iframe reste vide jusqu’au consentement :

html
<iframe data-cq-src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  data-cq-category="marketing" width="560" height="315"
  title="Product demo" allowfullscreen></iframe>

Quand la catégorie est accordée, le src est posé et le lecteur se charge. La catégorie peut venir de l’attribut ou de la base de fournisseurs (une URL YouTube est classée marketing par défaut, un lecteur Vimeo en fonctionnel) ; quand rien n’est connu, marketing est supposé. Un bloc de remplacement avec un bouton « Charger la vidéo » qui ouvre les préférences donne aux visiteurs un moyen de consentir sur place ; le guide YouTube fournit le balisage.

Méthode 3 : le bloqueur automatique

Les gestionnaires de balises, les plugins et les chargements différés créent des éléments script et iframe en JavaScript, après le chargement de la page, là où aucun balisage de votre part ne peut les attraper. Le bloqueur automatique intercepte la création d’éléments : quand un script ou une iframe est créé et que son src pointe vers un traceur connu dont la catégorie n’a pas été accordée, l’élément est retenu (son type passé en text/plain, l’URL mise de côté) et libéré quand le consentement arrive. La liste des hôtes vient de la configuration du site, construite à partir d’une base de fournisseurs d’environ 80 traceurs ; une courte liste par défaut des plus courants (Google Analytics, Google Ads, Meta, Hotjar, Clarity, TikTok, LinkedIn, Microsoft Advertising, Pinterest, contenus YouTube) est appliquée avant même l’arrivée de la configuration, pour qu’il n’y ait aucune fenêtre au démarrage. Activez-le dans le tableau de bord, ou avec data-auto-block="1" sur la balise :

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

La limite, en toute honnêteté : un traceur codé en dur dans le HTML avant ce script, sans le marquage text/plain, s’exécute avant que quoi que ce soit puisse l’arrêter. Chargez le script Cookiequiet en premier dans le head, et marquez ou déplacez toute balise située au-dessus. Le bloqueur automatique ne peut pas non plus retenir un traceur dont l’hôte est inconnu de la base ; marquez ceux-là à la main.

Méthode 4 : laisser le gestionnaire de balises décider

Si chaque traceur passe par Google Tag Manager, vous pouvez laisser le conteneur se charger et faire attendre chaque balise. Le Consent Mode de Google gère les balises Google : avec data-consent-mode="1", les valeurs par défaut sont réglées sur refusé avant l’exécution du conteneur et mises à jour à chaque choix, comme expliqué dans le guide Consent Mode. Pour les autres éditeurs, Cookiequiet pousse un événement cq_consent avec les indicateurs cq_functional, cq_analytics et cq_marketing ; un déclencheur sur cet événement avec le bon indicateur à true ne déclenche la balise qu’après consentement. L’événement est poussé au chargement de la page quand un choix mémorisé existe, pour que les visiteurs qui reviennent soient couverts.

Ce qu’il ne faut pas marquer

Les scripts dont le site a besoin pour fonctionner (le bundle de votre framework, la bibliothèque d’un formulaire de paiement sur la page de commande, le widget de recherche, le script qui enregistre le choix de consentement lui-même) relèvent de la catégorie nécessaire et ne doivent pas être marqués du tout : ils s’exécutent pour tout le monde, avec ou sans consentement, et la politique de cookies explique pourquoi chacun est nécessaire. Les marquer rendrait le site dépendant du bandeau, et un visiteur qui refuse obtiendrait une page cassée, ce qui est un cookie wall sous une autre forme.

Réagir au consentement dans votre propre code

N’importe quel script à vous peut attendre le consentement sans être marqué :

js
window.addEventListener('cq:consent', function (e) {
  if (e.detail.categories.indexOf('analytics') >= 0) {
    // lancez votre outil de mesure ici
  }
});

L’API window.Cookiequiet expose get() pour le choix mémorisé, on(callback) pour les changements, showPreferences() pour ouvrir le centre, et acceptAll(), rejectAll(), save(categories) et withdraw() pour des boutons personnalisés. Un élément portant data-cq-show-preferences, ou un lien vers #cq-preferences, ouvre les préférences au clic.

Vérifier que rien ne fuit

Ouvrez une fenêtre de navigation privée avec les outils de développement, chargez la page et ne cliquez pas. L’onglet Application ne doit montrer que des cookies nécessaires (le cookie de consentement, une session), et l’onglet Réseau aucune requête vers des hôtes de mesure d’audience ou de publicité. Exécutez document.querySelectorAll('script[type="text/plain"]') dans la console pour voir les balises retenues. Cliquez sur « Tout refuser » : rien de nouveau ne doit apparaître. Cliquez sur « Tout accepter » : les balises s’exécutent et les cookies arrivent. Répétez sur une page avec des contenus embarqués et sur une page avec un formulaire, et après chaque changement du gestionnaire de balises. La checklist d’audit cookies en fait une routine.