Consentl

Consentl mit React, Vue, Angular und anderen Single-Page-Apps

Setzen Sie den Consentl-Loader in die index.html, nicht in eine Komponente – für Single-Page-Apps mit Vite, Create React App oder der Angular CLI.

Loader als erstes im <head>
Ja

In einer Single-Page-App werden Komponenten für die Einwilligung zu spät eingebunden: Die Standardwerte von Google Consent Mode und die vorherige Blockierung müssen greifen, bevor ein anderes Skript läuft. Setzen Sie den Loader in die HTML-Einstiegsdatei als erstes Element im <head>, synchron:

<!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>
Tool Datei
Vite (React, Vue, Svelte, Solid) index.html im Projektstamm
Create React App public/index.html
Angular CLI src/index.html

In Ihrem App-Code

  • Routenwechsel: nichts zu tun. Die Laufzeit bleibt geladen, die Auswahl ist im First-Party-Cookie consentl gespeichert, und zurückgehaltene Tags werden ohne Neuladen freigegeben.
  • Einstellungen erneut öffnen: Geben Sie an beliebiger Stelle <a href="#consentl">Cookie settings</a> aus oder rufen Sie window.Consentl?.open("prefs") über einen Button auf. Klicks werden auf document verarbeitet, daher funktionieren auch später ausgegebene Elemente.
  • Eigene Statistiken oder Funktionen, die eine Einwilligung brauchen: consentl:change wird bei jedem Seitenaufruf mit der aktuellen Auswahl und erneut bei jeder Änderung ausgelöst, starten Sie also alles nur einmal:
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());
  • Skripte, die Ihre App später einfügt, werden zurückgehalten, wenn sie einem bekannten Tracker (Tarif Business) oder einer Blockierungsregel aus dem Dashboard entsprechen. In den Tarifen Free und Pro prüfen Sie die Einwilligung wie oben in Ihrem Code.
  • Tags, die in der index.html selbst stehen, fordert der Browser vor der Einwilligung an; markieren Sie sie mit type="text/plain" data-consentl="…" (siehe Jede Website).

Prüfen, ob es funktioniert

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

Einschränkungen

  • Laden Sie den Loader nicht aus einer Komponente und fügen Sie ihn bei der Navigation nicht erneut ein.
  • Bei einem Sprachwechsel ohne vollständiges Neuladen bleibt das Banner bis zum nächsten Laden der Seite in seiner ersten Sprache.
  • 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.