Consentl

Consentl mit Astro

Fügen Sie den Consentl-Loader mit is:inline in Ihr Astro-Basislayout ein, damit Astro ihn nicht verzögert bündelt. Funktioniert mit View Transitions (ClientRouter).

Loader als erstes im <head>
Ja

Der Loader muss das erste Skript im <head> und synchron sein. In Astro ist is:inline erforderlich: Ohne diese Angabe bündelt Astro das Skript in ein verzögertes Modul.

Getestet mit Astro 6.4 auf Node 22. Astro 7 benötigt Node 22.23.4 oder neuer und wurde noch nicht getestet.

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>

Die Prüfung von SITE_KEY lässt den Build fehlschlagen, wenn die Umgebungsvariable fehlt, statt k=undefined zu veröffentlichen.

View Transitions

Mit <ClientRouter /> tauscht Astro bei jeder Navigation den Seiteninhalt aus. Das Banner, das schwebende Symbol und Links „Cookie-Einstellungen“ funktionieren nach jedem Austausch weiter. Halten Sie die Loader-Adresse auf jeder Seite gleich (dasselbe l= für eine Sprache), damit Astro ihn nicht erneut ausführt, und fügen Sie ihm kein data-astro-rerun hinzu.

Prüfen, ob es funktioniert

Sehen Sie sich den Seitenquelltext an: Der Loader ist das erste <script> im <head>. Folgen Sie dann den Prüfungen unter Jede Website.

Consent Mode erfordert den Tarif Pro oder höher, die automatische Blockierung bekannter Tracker den Tarif Business; im Tarif Free warten nur die Tags auf eine Einwilligung, die Sie selbst markieren. Tags, die im HTML der Seite stehen, werden vor der Einwilligung angefordert, sofern Sie sie nicht mit type="text/plain" data-consentl="…" markieren (siehe Jede Website).

Einschränkungen

  • Integrationen, die Skripte oberhalb des <head>-Inhalts Ihres Layouts einfügen, laufen vor Consentl.
  • Wenn Sie eine Content Security Policy senden, erlauben Sie https://api.consentl.com (siehe Jede Website).

Kommen Sie nicht weiter? Schreiben Sie an support@consentl.com – wir antworten an Werktagen auf Englisch.