Consentl

Consentl com Astro

Adicione o loader do Consentl ao layout base do Astro com is:inline, para que o Astro não o inclua num módulo diferido. Funciona com view transitions (ClientRouter).

Loader em primeiro lugar no <head>
Sim

O loader tem de ser o primeiro script no <head> e síncrono. No Astro, is:inline é obrigatório: sem ele, o Astro inclui o script num módulo diferido.

Testado com Astro 6.4 em Node 22. O Astro 7 exige Node 22.23.4 ou posterior e ainda não foi testado.

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>

A verificação de SITE_KEY faz falhar a compilação quando a variável de ambiente está em falta, em vez de publicar k=undefined.

View transitions

Com <ClientRouter />, o Astro substitui o corpo da página em cada navegação. O banner, o ícone flutuante e as ligações «Definições de cookies» continuam a funcionar após cada substituição. Mantenha o endereço do loader igual em todas as páginas (o mesmo l= para um idioma), para que o Astro não o execute novamente, e não lhe acrescente data-astro-rerun.

Verificar que funciona

Veja o código-fonte da página: o loader é o primeiro <script> no <head>. Depois, siga as verificações em Qualquer site.

O Consent Mode exige o plano Pro ou superior e o bloqueio automático de rastreadores conhecidos o plano Business; no plano Free, só as tags que marcar pessoalmente aguardam o consentimento. As tags escritas no HTML da página são pedidas antes do consentimento, a menos que as marque com type="text/plain" data-consentl="…" (consulte Qualquer site).

Limitações

  • As integrações que injetam scripts acima do conteúdo do <head> do seu layout são executadas antes do Consentl.
  • Se enviar uma Content Security Policy, permita https://api.consentl.com (consulte Qualquer site).

Com dificuldades? Escreva para support@consentl.com — respondemos em inglês nos dias úteis.