Consentl

Consentl avec Astro

Ajoutez le chargeur Consentl au layout de base Astro avec is:inline, pour qu’Astro ne l’intègre pas dans un module différé. Compatible view transitions (ClientRouter).

Chargeur en premier dans <head>
Oui

Le chargeur doit être le premier script dans <head> et être synchrone. Dans Astro, is:inline est obligatoire : sans cet attribut, Astro intègre le script dans un module différé.

Testé avec Astro 6.4 sous Node 22. Astro 7 nécessite Node 22.23.4 ou ultérieur et n’a pas encore été testé.

Layout de base

---
// src/layouts/BaseLayout.astro
const { lang = "en", title } = Astro.props;
const SITE_KEY = import.meta.env.PUBLIC_CONSENTL_SITE_KEY;
if (!SITE_KEY) throw new Error("Set PUBLIC_CONSENTL_SITE_KEY to your Consentl site key (sk_…)");
const loader = `https://api.consentl.com/v1/loader.js?k=${encodeURIComponent(SITE_KEY)}&l=${encodeURIComponent(lang)}`;
---
<html lang={lang}>
  <head>
    <meta charset="utf-8" />
    <script is:inline src={loader}></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
    <footer><a href="#consentl">Cookie settings</a></footer>
  </body>
</html>

La vérification de SITE_KEY fait échouer le build lorsque la variable d’environnement est absente, au lieu de publier k=undefined.

View transitions

Avec <ClientRouter />, Astro remplace le corps de la page à chaque navigation. La bannière, l’icône flottante et les liens « Paramètres des cookies » continuent de fonctionner après chaque remplacement. Conservez la même adresse du chargeur sur chaque page (le même l= pour une langue), afin qu’Astro ne l’exécute pas à nouveau, et n’y ajoutez pas data-astro-rerun.

Vérifier le fonctionnement

Affichez le code source de la page : le chargeur est le premier <script> dans <head>. Suivez ensuite les vérifications de Tout site web.

Consent Mode nécessite le forfait Pro ou supérieur, le blocage automatique des traceurs connus le forfait Business ; avec Free, seules les balises que vous marquez vous-même attendent le consentement. Les balises écrites dans le HTML de la page sont demandées avant le consentement, sauf si vous les marquez type="text/plain" data-consentl="…" (voir Tout site web).

Limites

  • Les intégrations qui injectent des scripts au-dessus du contenu <head> de votre layout s’exécutent avant Consentl.
  • Si vous envoyez une Content Security Policy, autorisez https://api.consentl.com (voir Tout site web).

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