Consentl con React, Vue, Angular e altre applicazioni a pagina singola

Inserisca il loader di Consentl in index.html, non in un componente, per le applicazioni a pagina singola create con Vite, Create React App o Angular CLI.

Loader per primo nel <head>

Sì

In un'applicazione a pagina singola, i componenti vengono montati troppo tardi per il consenso: i valori predefiniti di Google Consent Mode e il blocco preventivo devono essere attivi prima che venga eseguito qualsiasi altro script. Inserisca il loader nel file HTML di ingresso come primo elemento nel <head>, in modo sincrono:

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

Nel codice della sua app

• Cambi di route: nulla da fare. Il runtime resta caricato, la scelta viene memorizzata nel cookie di prima parte consentl e i tag trattenuti vengono sbloccati senza ricaricare la pagina.
• Riaprire le preferenze: inserisca <a href="#consentl">Cookie settings</a> in qualsiasi punto, oppure chiami window.Consentl?.open("prefs") da un pulsante. I clic vengono gestiti su document, quindi funzionano anche gli elementi generati in seguito.
• Le sue statistiche o funzionalità che richiedono il consenso: consentl:change si attiva a ogni visualizzazione di pagina con le scelte attuali e di nuovo a ogni modifica, quindi avvii le cose una sola volta:

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());

• Gli script che la sua app inserisce in seguito vengono trattenuti quando corrispondono a un tracker noto (piano Business) o a una regola di blocco del pannello di controllo. Con Free e Pro, verifichi il consenso nel suo codice come sopra.
• I tag scritti direttamente in index.html vengono richiesti dal browser prima del consenso; li contrassegni con type="text/plain" data-consentl="…" (veda Qualsiasi sito web).

Verificare che funzioni

Visualizzi il sorgente della pagina dell'app compilata: il loader è il primo <script> nel <head>. Poi segua i controlli in Qualsiasi sito web.

Limitazioni

• Non carichi il loader da un componente e non lo inserisca di nuovo durante la navigazione.
• Un cambio di lingua senza ricaricamento completo mantiene il banner nella sua prima lingua fino al successivo caricamento della pagina.
• Se invia una Content Security Policy, consenta https://api.consentl.com (veda Qualsiasi sito web).

Guide correlate

• Next.js
• Nuxt
• Astro

Serve aiuto? Scriva a support@consentl.com: rispondiamo in inglese nei giorni lavorativi.