Consentl

Consentl con Astro

Aggiunga il loader di Consentl al layout di base di Astro con is:inline, così Astro non lo raggruppa in un modulo differito. Funziona con le view transitions.

Loader per primo nel <head>
Sì

Il loader deve essere il primo script nel <head> e sincrono. In Astro, is:inline è obbligatorio: senza di esso, Astro raggruppa lo script in un modulo differito.

Testato con Astro 6.4 su Node 22. Astro 7 richiede Node 22.23.4 o successivo e non è ancora stato testato.

Layout di 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>

Il controllo su SITE_KEY fa fallire la build quando la variabile d'ambiente manca, invece di pubblicare k=undefined.

View transitions

Con <ClientRouter />, Astro sostituisce il body della pagina a ogni navigazione. Il banner, l'icona fluttuante e i link «Impostazioni dei cookie» continuano a funzionare dopo ogni sostituzione. Mantenga lo stesso indirizzo del loader su ogni pagina (lo stesso l= per una lingua), così Astro non lo esegue di nuovo, e non vi aggiunga data-astro-rerun.

Verificare che funzioni

Visualizzi il sorgente della pagina: il loader è il primo <script> nel <head>. Poi segua i controlli in Qualsiasi sito web.

Consent Mode richiede il piano Pro o superiore, il blocco automatico dei tracker noti il piano Business; con Free attendono il consenso solo i tag che contrassegna lei stesso. I tag scritti nell'HTML della pagina vengono richiesti prima del consenso, a meno che lei non li contrassegni con type="text/plain" data-consentl="…" (veda Qualsiasi sito web).

Limitazioni

  • Le integrazioni che inseriscono script sopra il contenuto del <head> del suo layout vengono eseguite prima di Consentl.
  • Se invia una Content Security Policy, consenta https://api.consentl.com (veda Qualsiasi sito web).

Serve aiuto? Scriva a support@consentl.com: rispondiamo in inglese nei giorni lavorativi.