Consentl

Consentl con Astro

Añada el cargador de Consentl al layout base de Astro con is:inline, para que no se empaquete en un módulo diferido. Compatible con ClientRouter.

Cargador el primero en el <head>
Sí

El cargador debe ser el primer script del <head> y síncrono. En Astro, is:inline es obligatorio: sin él, Astro empaqueta el script en un módulo diferido.

Probado con Astro 6.4 en Node 22. Astro 7 requiere Node 22.23.4 o posterior y todavía no se ha probado.

Layout 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 comprobación de SITE_KEY hace que la compilación falle cuando falta la variable de entorno, en lugar de publicar k=undefined.

Transiciones de vista

Con <ClientRouter />, Astro sustituye el cuerpo de la página en cada navegación. El banner, el icono flotante y los enlaces «Configuración de cookies» siguen funcionando después de cada sustitución. Mantenga la misma dirección del cargador en todas las páginas (el mismo l= para un idioma), para que Astro no vuelva a ejecutarlo, y no le añada data-astro-rerun.

Comprobar que funciona

Vea el código fuente de la página: el cargador es el primer <script> del <head>. Después, siga las comprobaciones de Cualquier sitio web.

Consent Mode requiere el plan Pro o superior; el bloqueo automático de rastreadores conocidos, el plan Business; en Free, solo esperan el consentimiento las etiquetas que usted mismo marca. Las etiquetas escritas en el HTML de la página se solicitan antes del consentimiento, salvo que las marque con type="text/plain" data-consentl="…" (consulte Cualquier sitio web).

Limitaciones

  • Las integraciones que inyectan scripts por encima del contenido del <head> de su layout se ejecutan antes que Consentl.
  • Si envía una Content Security Policy, permita https://api.consentl.com (consulte Cualquier sitio web).

¿Se ha atascado? Escriba a support@consentl.com: respondemos en inglés en días laborables.