Consentl

Consentl met Astro

Voeg de Consentl-loader met is:inline toe aan uw Astro-basislayout, zodat Astro hem niet bundelt in een uitgestelde module. Werkt met view transitions (ClientRouter).

Loader als eerste in <head>
Ja

De loader moet het eerste script in <head> zijn en synchroon worden geladen. In Astro is is:inline vereist: zonder dat bundelt Astro het script in een uitgestelde module.

Getest met Astro 6.4 op Node 22. Astro 7 vereist Node 22.23.4 of later en is nog niet getest.

Basislayout

---
// 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>

Door de controle op SITE_KEY mislukt de build als de omgevingsvariabele ontbreekt, in plaats van dat k=undefined wordt gepubliceerd.

View transitions

Met <ClientRouter /> vervangt Astro bij elke navigatie de body van de pagina. De banner, het zwevende pictogram en links "Cookie-instellingen" blijven na elke vervanging werken. Houd het adres van de loader op elke pagina gelijk (dezelfde l= voor één taal), zodat Astro hem niet opnieuw uitvoert, en voeg er geen data-astro-rerun aan toe.

Controleren of het werkt

Bekijk de paginabron: de loader is het eerste <script> in <head>. Volg daarna de controles in Elke website.

Consent Mode vereist het plan Pro of hoger, automatische blokkering van bekende trackers het plan Business; bij Free wachten alleen de tags die u zelf markeert op toestemming. Tags die in de HTML van de pagina staan, worden vóór de toestemming opgevraagd, tenzij u ze markeert met type="text/plain" data-consentl="…" (zie Elke website).

Beperkingen

  • Integraties die scripts boven de <head>-inhoud van uw layout invoegen, worden vóór Consentl uitgevoerd.
  • Als u een Content Security Policy verstuurt, sta dan https://api.consentl.com toe (zie Elke website).

Vastgelopen? Schrijf naar support@consentl.com — wij antwoorden op werkdagen in het Engels.