Consentl pour tout site web

Ajoutez une balise script en premier dans <head>. Bannière, textes, régions, Consent Mode et règles de blocage se configurent dans le tableau de bord Consentl.

Chargeur en premier dans <head>

Oui

Consentl fonctionne sur tout site qui vous permet d’ajouter un <script> dans <head>. Il n’y a rien à installer sur votre serveur : tout se configure dans le tableau de bord Consentl (site externe) et est diffusé par le script de chargement.

Ce que fait chaque forfait

Avec Free, les balises Google, Meta Pixel et toutes les autres balises s’exécutent dès le chargement de la page, sauf si vous les marquez manuellement.

1. Ajouter votre site et copier la clé

1. Connectez-vous au tableau de bord (ou créez un compte gratuit) et ajoutez votre site.
2. Ajoutez chaque nom d’hôte sur lequel le site fonctionne dans le champ Domaines du site. www. et le domaine nu comptent comme le même site ; ajoutez les domaines de préproduction séparément.
3. Ouvrez la page Configuration du site et copiez le code d’installation. La clé du site qu’il contient commence par sk_ et est publique : elle identifie votre site, ce n’est pas un mot de passe.

2. Installer le chargeur

<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG"></script>

• SITE_KEY : votre clé du site (sk_ + 24 caractères).
• LANG : la langue de la page, la même valeur que <html lang> : en, de, fr, pt-PT, pt-BR, fr-CA, … Les variantes régionales se replient automatiquement sur la langue de base (de-AT → de). Omettez &l= pour utiliser la langue par défaut du site définie dans le tableau de bord.

Où : comme premier élément dans <head>, directement après <meta charset>. Il doit précéder Google Tag Manager, gtag.js, Meta Pixel, les outils de mesure d’audience, les widgets de chat et les outils de test A/B.

Comment : de manière synchrone : pas de async, pas de defer, pas de type="module". Le script est léger et mis en cache.

Pourquoi en premier et de manière synchrone :

1. Les valeurs par défaut de Google Consent Mode v2 (à partir du forfait Pro) doivent être définies avant qu’une balise Google ne les lise.
2. Le blocage empêche les balises de s’exécuter jusqu’à ce que le visiteur donne son accord. Les scripts placés au-dessus du chargeur se sont déjà exécutés.
3. Le choix d’un visiteur qui revient est appliqué immédiatement : pas d’apparition furtive de la bannière ni de balises déclenchées avant que le choix ne soit connu.

Si votre plateforme ne permet pas de placer le script en premier, son guide explique précisément ce que cela implique.

Ce que le blocage peut et ne peut pas empêcher

• Les balises chargées par du code (Google Tag Manager, le chargeur JavaScript d’un pixel, les scripts ajoutés par votre application) sont bloquées avant d’être demandées lorsqu’elles correspondent à un traceur connu (Business) ou à l’une de vos règles de blocage.
• Les balises écrites dans le HTML de la page (<script src>, pixels <img>, <iframe>) sont demandées par le navigateur avant qu’un script ne puisse les arrêter : pendant le téléchargement du chargeur, le navigateur récupère déjà ce qu’il trouve plus bas dans la page. Consentl empêche tout de même un script reconnu de s’exécuter, mais la requête, avec l’adresse IP du visiteur, l’adresse de la page et les éventuels cookies tiers, est déjà partie ; pour un pixel de suivi, la requête constitue le suivi. Marquez manuellement chaque balise écrite dans le HTML (section 6) et supprimez les pixels de suivi <noscript>.
• Les sites rendus côté serveur peuvent aussi intégrer le chargeur en ligne, ce qui supprime l’attente du téléchargement. Les balises écrites dans le HTML doivent toujours être marquées.

3. Vérifier le fonctionnement

1. Ouvrez le site dans une fenêtre de navigation privée. La bannière apparaît.
2. Dans les outils de développement du navigateur → Console :
   • Consentl.get() renvoie les choix actuels ;
   • Consentl.region() renvoie le modèle juridique appliqué au visiteur, par exemple { mode: "opt_in", law: "gdpr", gpc: false, known: true }.
3. Dans Réseau (Network), avant d’accepter :
   • aucune requête vers des hôtes de suivi provenant de balises chargées par du code, lorsque le blocage automatique est activé (Business) ; avec Consent Mode, uniquement les pings sans cookies de Google ;
   • les balises écrites dans le HTML que vous n’avez pas marquées sont demandées. Marquez-les et vérifiez à nouveau.
4. Tant que le site est en mode test, ajoutez ?consentl=preview à une adresse pour voir la bannière sans enregistrer ni journaliser de choix. Cela ne sélectionne pas de région : l’Aperçu du tableau de bord montre la bannière pour chaque région.

Régions : à chaque affichage de page, la bannière demande à Consentl le pays du visiteur, déterminé à partir de son adresse IP. La recherche se fait en mémoire et n’enregistre rien, et le chargeur reste le même pour chaque visiteur. Votre règle pour ce pays s’applique :

• Les États américains ne sont pas distingués : un visiteur américain reçoit votre règle pour l’ensemble des États-Unis ou, à défaut, votre première règle d’État américain (par exemple la Californie).
• Lorsque le pays est inconnu, votre règle pour les régions inconnues s’applique (opt-in par défaut).
• Le code figure dans le champ consentl.region du dataLayer (par exemple DE ou US). Pour voir la bannière d’une autre région, utilisez l’Aperçu du tableau de bord ou un VPN.

4. Ajouter un lien « Paramètres des cookies »

Retirer son consentement doit être aussi simple que le donner. Utilisez l’une de ces méthodes :

<a href="#consentl">Cookie settings</a>
<button type="button" data-consentl-open>Cookie settings</button>

window.Consentl.open("prefs");

Les liens dont l’adresse se termine par #consentl ou #consentl-preferences, ainsi que tout élément portant data-consentl-open, ouvrent les préférences au lieu de naviguer, y compris sur des éléments ajoutés ultérieurement. Les autres ancres qui commencent seulement de la même manière (comme #consentl-api) ne sont pas affectées. Le tableau de bord peut aussi afficher une icône flottante des préférences.

5. Déclaration relative aux cookies, demandes relatives aux données personnelles et formulaire de rétractation UE

<div data-consentl-declaration data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<div data-consentl-request      data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<div data-consentl-withdrawal   data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<script src="https://api.consentl.com/v1/blocks.js" defer></script>

Incluez blocks.js une seule fois par page, après les <div>. La déclaration répertorie les cookies de la page Cookies du tableau de bord : le scanner ajoute ce qu’il trouve lors de la création du site, lorsque vous cliquez sur Analyser maintenant et, à partir du forfait Business, chaque mois ; vous pouvez ajouter ou modifier vous-même des entrées (les détails sont complétés à partir de l’Open Cookie Database). Les demandes relatives aux données personnelles sont vérifiées par e-mail et apparaissent dans le tableau de bord avec leur délai. Le formulaire de rétractation UE nécessite le forfait Pro ou supérieur et doit être activé dans le tableau de bord ; sinon, son <div> reste vide.

6. Bloquer tout ce qui n’est pas reconnu automatiquement

<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<script type="text/plain" data-consentl="analytics">/* inline code */</script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">

• Catégories : preferences, analytics, marketing.
• Rien n’est demandé tant que la catégorie n’est pas accordée. C’est le seul moyen de bloquer une balise écrite dans le HTML.
• Ajoutez data-consentl-type="module" à un script marqué qui doit s’exécuter en tant que module.
• Le blocage manuel fonctionne avec chaque forfait. Le forfait Business ajoute le blocage automatique des traceurs connus et des règles de blocage (« L’URL contient ») que vous ajoutez dans le tableau de bord sans toucher au site. Les règles s’appliquent à l’adresse des scripts, des iframes et des images, ainsi qu’aux scripts en ligne qui chargent quelque chose. Les données de page de frameworks tels que Next.js, Nuxt, Remix ou SvelteKit ne sont jamais bloquées.
• Une balise bloquée s’exécute une seule fois après le consentement, même si votre framework en ajoute une seconde copie pendant le démarrage de la page (c’est le cas de Nuxt).

Applications monopages

• Rien à appeler lors des changements de route : l’environnement d’exécution est chargé une fois par document, le choix est enregistré dans le cookie propriétaire consentl et les balises bloquées sont libérées sans rechargement.
• Les routeurs qui remplacent le corps de la page (Astro <ClientRouter />, Turbo, Swup, htmx hx-boost) préservent le fonctionnement de la bannière, de l’icône flottante et des liens « Paramètres des cookies ».
• Conservez la même adresse du chargeur sur chaque page et ne le chargez pas à nouveau lors de la navigation. Si votre outil de création propose « charger sur chaque page », choisissez « charger une fois ».
• Les balises que votre application insère ultérieurement sont également bloquées lorsqu’elles correspondent à un traceur connu (Business) ou à une règle de blocage. Pour votre propre code, vérifiez le consentement. consentl:change se déclenche à chaque affichage de page avec les choix actuels, puis à chaque modification : ne démarrez donc les choses qu’une seule fois :

let started = false;
const maybeStart = (c) => {
  if (c.analytics && !started) {
    started = true;
    startAnalytics();
  }
};
document.addEventListener("consentl:change", (e) => maybeStart(e.detail));
if (window.Consentl) maybeStart(window.Consentl.get());

• Après un changement de langue sans rechargement complet, la bannière conserve sa langue jusqu’au prochain chargement de page.

Avec Google Tag Manager

Le modèle GTM de Consentl peut prendre en charge Google Consent Mode. Si vous l’utilisez en plus de l’extrait de code, ajoutez &gcm=ext à l’adresse du chargeur, afin que seul le modèle envoie les commandes Consent Mode :

<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG&gcm=ext"></script>

Amorçage en ligne (côté serveur)

Si vos pages sont rendues sur un serveur que vous contrôlez, vous pouvez imprimer le chargeur en ligne au lieu de le référencer par un lien, comme le font les plugins Consentl pour WordPress, Shopware, PrestaShop et Magento :

1. Sur le serveur, récupérez https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG.
2. Mettez la réponse en cache par clé du site et par langue pendant 5 minutes (son Cache-Control) ; si une récupération ultérieure échoue, continuez à servir la dernière copie valide.
3. Imprimez <script> + la réponse + </script> comme premier élément dans <head>. Avec une Content Security Policy, ajoutez votre nonce (le contenu change avec vos paramètres, un hash ne fonctionne donc pas).
4. En l’absence de toute copie en cache, imprimez la balise <script src="…"> normale.

// Node, simplified
const cache = new Map(); // url -> { body, until }
async function consentlHead(key, lang) {
  const url = `https://api.consentl.com/v1/loader.js?k=${encodeURIComponent(key)}&l=${encodeURIComponent(lang)}`;
  const hit = cache.get(url);
  if (!hit || hit.until < Date.now()) {
    try {
      const r = await fetch(url);
      if (r.ok) cache.set(url, { body: await r.text(), until: Date.now() + 300_000 });
    } catch {
      /* keep the stale copy */
    }
  }
  const body = cache.get(url)?.body;
  return body ? `<script>${body}</script>` : `<script src="${url}"></script>`;
}

Ne modifiez pas la réponse : elle est générée par Consentl pour votre site. Imprimez-la dans le modèle HTML que votre serveur écrit, en dehors de tout framework côté client. Ne convient pas à l’App Router de Next.js : React y enverrait le chargeur deux fois sur chaque page ; utilisez la balise simple comme indiqué dans Next.js.

API JavaScript

Événements sur document (les choix figurent dans event.detail) :

• consentl:change : à chaque affichage de page une fois la règle régionale appliquée, et à chaque modification ;
• consentl:ready : une fois par affichage de page, après le premier consentl:change ;
• consentl:ui-error : la bannière n’a pas pu être chargée (y compris après une nouvelle tentative). Les liens vers #consentl se comportent alors comme des liens normaux, ce qui vous permet d’afficher votre propre solution de repli.

Le dataLayer reçoit consentl_consent (à chaque affichage de page et à chaque modification) et consentl_update (modifications uniquement), chacun avec consentl.preferences, analytics, marketing, sale, stored et region. Éléments marqués : data-consentl="<category>", type="text/plain", data-src, data-consentl-srcset (images avec srcset), data-consentl-type. Ajoutez data-consentl-noicon à un élément sur les pages qui ont leur propre bouton « Paramètres des cookies », pour y masquer l’icône flottante.

Content Security Policy

Si votre site envoie un en-tête Content-Security-Policy, autorisez l’API Consentl :

script-src  'self' https://api.consentl.com;
connect-src 'self' https://api.consentl.com;
img-src     'self' https://api.consentl.com data:;
style-src   'self' 'unsafe-inline';

• style-src 'unsafe-inline' est nécessaire, car la bannière ajoute ses styles à l’exécution. Contactez l’assistance si votre politique interdit les styles en ligne.
• Les scripts que Consentl libère après le consentement doivent toujours avoir leurs propres hôtes dans script-src.
• Avec une politique stricte basée sur un nonce, attribuez votre nonce à la balise du chargeur et utilisez 'strict-dynamic', afin que les scripts qu’il charge et libère soient approuvés. Sans 'strict-dynamic', attribuez aussi votre nonce aux scripts en ligne marqués.
• Subresource Integrity (SRI) ne peut pas être utilisé pour le chargeur, car son contenu change lorsque vous modifiez les paramètres dans le tableau de bord.

Vérifications côté serveur (facultatif)

Le choix est enregistré dans le cookie propriétaire consentl : 1.<id>.<timestamp>.<revision>.<flags>.<action>. flags comporte quatre chiffres pour les préférences, la mesure d’audience, le marketing et la vente (1 = accordé). L’absence de cookie signifie qu’aucune décision n’a encore été prise : considérez-la comme « non accordé ». Un cookie d’une révision antérieure (après « Réinitialiser tous les consentements ») ne compte plus. Les pages qui dépendent de ce cookie ne doivent pas être stockées dans un cache partagé. Préférez le filtrage côté client (section 6) lorsque c’est possible.

Limites

• La bannière ne peut pas contrôler les scripts qui s’exécutent avant le chargeur : les scripts placés au-dessus de lui dans <head>, et les scripts qu’une plateforme d’hébergement injecte sans que vous puissiez le contrôler.
• Les balises écrites dans le HTML de la page sont demandées avant le consentement, sauf si vous les marquez.
• Les iframes tierces intégrées (vidéos, cartes) sont bloquées dans leur ensemble jusqu’au consentement. Consentl ne peut pas voir ce qui se passe à l’intérieur.
• Consentl n’implémente pas l’IAB Transparency & Consent Framework (TCF).

Guides associés

• Google Tag Manager
• Next.js
• React, Vue, Angular (SPA)
• Webflow

Vous êtes bloqué ? Écrivez à support@consentl.com — nous répondons en anglais les jours ouvrables.