Consentl z React, Vue, Angular i innymi aplikacjami jednostronicowymi

W aplikacjach jednostronicowych budowanych z Vite, Create React App lub Angular CLI skrypt ładujący Consentl należy umieścić w index.html, a nie w komponencie.

Skrypt ładujący jako pierwszy w <head>

Tak

W aplikacji jednostronicowej komponenty są montowane zbyt późno na potrzeby zgody: domyślne wartości Google Consent Mode i wstępne blokowanie muszą działać, zanim uruchomi się jakikolwiek inny skrypt. Skrypt ładujący należy umieścić w pliku wejściowym HTML jako pierwszy element w <head>, synchronicznie:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

W kodzie aplikacji

• Zmiany trasy: nic nie trzeba robić. Środowisko uruchomieniowe pozostaje załadowane, wybór jest przechowywany we własnym pliku cookie consentl, a wstrzymane tagi są zwalniane bez przeładowania.
• Ponowne otwarcie preferencji: wystarczy wyrenderować w dowolnym miejscu <a href="#consentl">Cookie settings</a> albo wywołać window.Consentl?.open("prefs") z przycisku. Kliknięcia są obsługiwane na document, więc działają też elementy wyrenderowane później.
• Własna analityka lub funkcje wymagające zgody: zdarzenie consentl:change jest wywoływane przy każdym wyświetleniu strony z bieżącymi wyborami i ponownie przy każdej zmianie, dlatego należy uruchamiać je tylko raz:

let started = false;
const maybeStart = (c) => {
  if (c.analytics && !started) {
    started = true;
    startAnalytics();
  }
};
document.addEventListener("consentl:change", (e) => maybeStart(e.detail));
if (window.Consentl) maybeStart(window.Consentl.get());

• Skrypty wstawiane później przez aplikację są wstrzymywane, gdy pasują do znanego narzędzia śledzącego (plan Business) lub do reguły blokowania z panelu. W planach Free i Pro należy sprawdzać zgodę w kodzie, jak powyżej.
• Tagi zapisane bezpośrednio w index.html są pobierane przez przeglądarkę przed wyrażeniem zgody; należy oznaczyć je jako type="text/plain" data-consentl="…" (zob. Każda strona internetowa).

Sprawdzenie działania

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

Ograniczenia

• Nie należy ładować skryptu ładującego z komponentu ani wstrzykiwać go ponownie przy nawigacji.
• Po zmianie języka bez pełnego przeładowania baner pozostaje w pierwszym języku do następnego załadowania strony.
• Jeżeli wysyłają Państwo nagłówek Content Security Policy, należy zezwolić na https://api.consentl.com (zob. Każda strona internetowa).

Powiązane poradniki

• Next.js
• Nuxt
• Astro

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