Consentl z Astro

Dodaj skrypt ładujący Consentl do bazowego layoutu Astro z is:inline, aby Astro nie dołączało go do odroczonego modułu. Działa z przejściami widoków (ClientRouter).

Skrypt ładujący jako pierwszy w <head>
Tak

Skrypt ładujący musi być pierwszym skryptem w <head> i musi być synchroniczny. W Astro wymagane jest is:inline: bez tego Astro dołącza skrypt do odroczonego modułu.

Przetestowano z Astro 6.4 na Node 22. Astro 7 wymaga Node 22.23.4 lub nowszego i nie zostało jeszcze przetestowane.

Bazowy layout

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

Sprawdzenie SITE_KEY powoduje, że budowanie kończy się błędem, gdy brakuje zmiennej środowiskowej, zamiast publikować k=undefined.

Przejścia widoków

Z <ClientRouter /> Astro podmienia treść strony przy każdej nawigacji. Baner, pływająca ikona i linki „Ustawienia plików cookie” działają dalej po każdej podmianie. Adres skryptu ładującego powinien być taki sam na każdej stronie (to samo l= dla jednego języka), aby Astro nie uruchamiało go ponownie; nie należy też dodawać do niego data-astro-rerun.

Sprawdzenie działania

Należy wyświetlić źródło strony: skrypt ładujący jest pierwszym <script> w <head>. Następnie należy wykonać kontrole opisane w poradniku Każda strona internetowa.

Consent Mode wymaga planu Pro lub wyższego, a automatyczne blokowanie znanych narzędzi śledzących – planu Business; w planie Free na zgodę czekają tylko tagi oznaczone samodzielnie. Tagi zapisane w kodzie HTML strony są pobierane przed wyrażeniem zgody, chyba że zostaną oznaczone jako type="text/plain" data-consentl="…" (zob. Każda strona internetowa).

Ograniczenia

  • Integracje, które wstrzykują skrypty powyżej zawartości <head> layoutu, uruchamiają się przed Consentl.
  • Jeżeli wysyłają Państwo nagłówek Content Security Policy, należy zezwolić na https://api.consentl.com (zob. Każda strona internetowa).

Potrzebują Państwo pomocy? Prosimy pisać na adres support@consentl.com — odpowiadamy po angielsku w dni robocze.