Consentl

Consentl cu React, Vue, Angular și alte aplicații cu o singură pagină

Plasați scriptul de încărcare Consentl în index.html, nu într-o componentă, pentru aplicațiile cu o singură pagină construite cu Vite, Create React App sau Angular CLI.

Scriptul de încărcare primul în <head>
Da

Într-o aplicație cu o singură pagină, componentele se montează prea târziu pentru consimțământ: valorile implicite Google Consent Mode și blocarea prealabilă trebuie să fie active înainte să ruleze orice alt script. Plasați scriptul de încărcare în fișierul HTML de intrare, ca prim element din <head>, sincron:

<!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>
Instrument Fișier
Vite (React, Vue, Svelte, Solid) index.html în rădăcina proiectului
Create React App public/index.html
Angular CLI src/index.html

În codul aplicației

  • Schimbări de rută: nu trebuie să faceți nimic. Runtime-ul rămâne încărcat, alegerea este stocată în cookie-ul propriu consentl, iar etichetele reținute sunt eliberate fără reîncărcare.
  • Redeschiderea preferințelor: afișați oriunde <a href="#consentl">Cookie settings</a> sau apelați window.Consentl?.open("prefs") dintr-un buton. Clicurile sunt gestionate pe document, așa că funcționează și elementele afișate ulterior.
  • Propria analiză sau funcții care necesită consimțământ: consentl:change se declanșează la fiecare afișare de pagină cu alegerile curente și din nou la fiecare modificare, așa că porniți lucrurile o singură dată:
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());
  • Scripturile inserate ulterior de aplicație sunt reținute atunci când corespund unui tracker cunoscut (planul Business) sau unei reguli de blocare din panoul de control. În planurile Free și Pro, verificați consimțământul în cod, ca mai sus.
  • Etichetele scrise chiar în index.html sunt solicitate de browser înainte de consimțământ; marcați-le cu type="text/plain" data-consentl="…" (consultați Orice site).

Verificați că funcționează

Vizualizați sursa paginii aplicației construite: scriptul de încărcare este primul <script> din <head>. Apoi urmați verificările din Orice site.

Limitări

  • Nu încărcați scriptul de încărcare dintr-o componentă și nu îl injectați din nou la navigare.
  • O schimbare de limbă fără reîncărcare completă păstrează bannerul în prima limbă până la următoarea încărcare a paginii.
  • Dacă trimiteți o Content Security Policy, permiteți https://api.consentl.com (consultați Orice site).

V-ați blocat? Scrieți-ne la support@consentl.com — răspundem în limba engleză, în zilele lucrătoare.