Consentl per qualsiasi sito web

Aggiunga un tag script per primo nel <head> del suo sito. Banner, testi, regioni, Consent Mode e regole di blocco si configurano tutti nel pannello di controllo Consentl.

Loader per primo nel <head>

Sì

Consentl funziona su qualsiasi sito che consenta di aggiungere uno <script> al <head>. Non c'è nulla da installare sul suo server: tutto si configura nel pannello di controllo Consentl (sito esterno) e viene fornito dallo script del loader.

Che cosa fa ogni piano

Con Free, i tag Google, Meta Pixel e ogni altro tag vengono eseguiti non appena la pagina si carica, a meno che lei non li contrassegni manualmente.

1. Aggiungere il sito e copiare la chiave

1. Acceda al pannello di controllo (o crei un account gratuito) e aggiunga il suo sito.
2. Aggiunga tutti i nomi host su cui il sito è attivo nel campo Domini del sito. www. e il dominio senza www contano come lo stesso sito; aggiunga separatamente i domini di staging.
3. Apra la pagina Configurazione del sito e copi lo snippet di installazione. La chiave del sito che contiene inizia con sk_ ed è pubblica: identifica il suo sito, non è una password.

2. Installare il loader

<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG"></script>

• SITE_KEY: la sua chiave del sito (sk_ + 24 caratteri).
• LANG: la lingua della pagina, lo stesso valore di <html lang>: en, de, fr, pt-PT, pt-BR, fr-CA, … Le varianti regionali ripiegano automaticamente (de-AT → de). Ometta &l= per usare la lingua predefinita del sito impostata nel pannello di controllo.

Dove: come primo elemento nel <head>, subito dopo <meta charset>. Deve precedere Google Tag Manager, gtag.js, Meta Pixel, gli strumenti di statistica, i widget di chat e gli strumenti di test A/B.

Come: in modo sincrono: niente async, niente defer, niente type="module". Lo script è piccolo e viene memorizzato nella cache.

Perché per primo e in modo sincrono:

1. I valori predefiniti di Google Consent Mode v2 (dal piano Pro in su) devono essere impostati prima che qualsiasi tag Google li legga.
2. Il blocco impedisce ai tag di essere eseguiti finché il visitatore non acconsente. Gli script sopra il loader sono già stati eseguiti.
3. La scelta di un visitatore di ritorno viene applicata subito: il banner non lampeggia e nessun tag si attiva prima che la scelta sia nota.

Se la sua piattaforma non consente di inserire lo script per primo, la relativa guida spiega esattamente che cosa comporta.

Che cosa il blocco può e non può fermare

• I tag caricati dal codice (Google Tag Manager, il loader JavaScript di un pixel, gli script aggiunti dalla sua app) vengono trattenuti prima di essere richiesti quando corrispondono a un tracker noto (Business) o a una delle sue regole di blocco.
• I tag scritti nell'HTML della pagina (<script src>, pixel <img>, <iframe>) vengono richiesti dal browser prima che qualsiasi script possa fermarli: mentre il loader si scarica, il browser recupera già ciò che trova più in basso nella pagina. Consentl impedisce comunque l'esecuzione di uno script riconosciuto, ma la richiesta, con l'indirizzo IP del visitatore, l'indirizzo della pagina e gli eventuali cookie di terze parti, è già partita; per un pixel di tracciamento, la richiesta stessa è il tracciamento. Contrassegni manualmente ogni tag scritto nell'HTML (sezione 6) ed elimini i pixel di tracciamento in <noscript>.
• I siti generati lato server possono anche inserire il loader inline, eliminando l'attesa del download. I tag scritti nell'HTML devono comunque essere contrassegnati.

3. Verificare che funzioni

1. Apra il sito in una finestra privata. Il banner compare.
2. Negli strumenti per sviluppatori del browser → Console:
   • Consentl.get() restituisce le scelte attuali;
   • Consentl.region() restituisce il modello giuridico applicato al visitatore, ad esempio { mode: "opt_in", law: "gdpr", gpc: false, known: true }.
3. In Network, prima di accettare:
   • nessuna richiesta verso host di tracciamento dai tag caricati dal codice, quando il blocco automatico è attivo (Business); con Consent Mode, solo i ping senza cookie di Google;
   • i tag scritti nell'HTML che non ha contrassegnato vengono richiesti. Li contrassegni e controlli di nuovo.
4. Mentre il sito è in modalità di test, aggiunga ?consentl=preview a un indirizzo per vedere il banner senza memorizzare né registrare una scelta. Non sceglie una regione: l'Anteprima del pannello di controllo mostra il banner per ogni regione.

Regioni: a ogni visualizzazione di pagina il banner chiede a Consentl il Paese del visitatore, che viene ricavato dal suo indirizzo IP. La ricerca avviene in memoria e non memorizza nulla, e il loader resta lo stesso per ogni visitatore. Si applica la sua regola per quel Paese:

• Gli Stati USA non vengono distinti: un visitatore statunitense riceve la sua regola per l'intero territorio USA oppure, in sua assenza, la sua prima regola per uno Stato USA (ad esempio la California).
• Quando il Paese non è noto, si applica la sua regola per le regioni sconosciute (opt-in per impostazione predefinita).
• Il codice si trova nel campo consentl.region del dataLayer (ad esempio DE o US). Per vedere il banner di un'altra regione, usi l'Anteprima del pannello di controllo o una VPN.

4. Aggiungere un link «Impostazioni dei cookie»

Revocare il consenso deve essere facile quanto prestarlo. Usi uno di questi metodi:

<a href="#consentl">Cookie settings</a>
<button type="button" data-consentl-open>Cookie settings</button>

window.Consentl.open("prefs");

I link il cui indirizzo termina con #consentl o #consentl-preferences, e qualsiasi elemento con data-consentl-open, aprono le preferenze invece di navigare, anche sugli elementi aggiunti in seguito. Le altre ancore che iniziano soltanto allo stesso modo (come #consentl-api) non vengono toccate. Il pannello di controllo può anche mostrare un'icona fluttuante delle preferenze.

5. Dichiarazione dei cookie, richieste sui dati personali e modulo di recesso UE

<div data-consentl-declaration data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<div data-consentl-request      data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<div data-consentl-withdrawal   data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<script src="https://api.consentl.com/v1/blocks.js" defer></script>

Includa blocks.js una volta per pagina, dopo i <div>. La dichiarazione elenca i cookie della pagina Cookie del pannello di controllo: lo scanner aggiunge ciò che trova quando il sito viene creato, quando lei fa clic su Avvia la scansione e, da Business in su, ogni mese; può aggiungere o modificare voci lei stesso (i dettagli vengono compilati dall'Open Cookie Database). Le richieste sui dati personali vengono verificate via e-mail e compaiono nel pannello di controllo con la loro scadenza. Il modulo di recesso UE richiede il piano Pro o superiore e deve essere attivato nel pannello di controllo; altrimenti il suo <div> resta vuoto.

6. Trattenere tutto ciò che non viene riconosciuto automaticamente

<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<script type="text/plain" data-consentl="analytics">/* inline code */</script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">

• Categorie: preferences, analytics, marketing.
• Nulla viene richiesto finché la categoria non è concessa. È l'unico modo per trattenere un tag scritto nell'HTML.
• Aggiunga data-consentl-type="module" a uno script contrassegnato che deve essere eseguito come modulo.
• Il blocco manuale funziona in ogni piano. Il piano Business aggiunge il blocco automatico dei tracker noti e le regole di blocco ("l'URL contiene") che aggiunge nel pannello di controllo senza toccare il sito. Le regole si applicano all'indirizzo di script, iframe e immagini e agli script inline che caricano qualcosa. I dati di pagina di framework come Next.js, Nuxt, Remix o SvelteKit non vengono mai trattenuti.
• Un tag trattenuto viene eseguito una sola volta dopo il consenso, anche se il suo framework ne aggiunge una seconda copia durante l'avvio della pagina (come fa Nuxt).

Applicazioni a pagina singola

• Nulla da chiamare ai cambi di route: il runtime viene caricato una volta per documento, la scelta viene memorizzata nel cookie di prima parte consentl e i tag trattenuti vengono sbloccati senza ricaricare la pagina.
• I router che sostituiscono il body della pagina (Astro <ClientRouter />, Turbo, Swup, htmx hx-boost) mantengono funzionanti il banner, l'icona fluttuante e i link «Impostazioni dei cookie».
• Mantenga lo stesso indirizzo del loader su ogni pagina e non lo carichi di nuovo durante la navigazione. Se il suo builder offre "carica su ogni pagina", scelga "carica una volta".
• Anche i tag che la sua app inserisce in seguito vengono trattenuti quando corrispondono a un tracker noto (Business) o a una regola di blocco. Per il suo codice, verifichi 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());

• Dopo un cambio di lingua senza ricaricamento completo, il banner mantiene la sua lingua fino al successivo caricamento della pagina.

Con Google Tag Manager

Il modello Consentl per GTM può gestire Google Consent Mode. Se usa il modello e lo snippet, aggiunga &gcm=ext all'indirizzo del loader, così solo il modello invia i comandi di Consent Mode:

<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG&gcm=ext"></script>

Bootstrap inline (lato server)

Se le sue pagine vengono generate su un server che controlla, può stampare il loader inline invece di collegarlo, come fanno i plugin Consentl per WordPress, Shopware, PrestaShop e Magento:

1. Sul server, recuperi https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG.
2. Memorizzi la risposta nella cache per chiave del sito e lingua per 5 minuti (il suo Cache-Control); se un recupero successivo non riesce, continui a servire l'ultima copia valida.
3. Stampi <script> + la risposta + </script> come primo elemento nel <head>. Con una Content Security Policy, aggiunga il suo nonce (il contenuto cambia con le sue impostazioni, quindi un hash non funziona).
4. Se non dispone di alcuna copia nella cache, stampi il normale tag <script src="…">.

// Node, simplified
const cache = new Map(); // url -> { body, until }
async function consentlHead(key, lang) {
  const url = `https://api.consentl.com/v1/loader.js?k=${encodeURIComponent(key)}&l=${encodeURIComponent(lang)}`;
  const hit = cache.get(url);
  if (!hit || hit.until < Date.now()) {
    try {
      const r = await fetch(url);
      if (r.ok) cache.set(url, { body: await r.text(), until: Date.now() + 300_000 });
    } catch {
      /* keep the stale copy */
    }
  }
  const body = cache.get(url)?.body;
  return body ? `<script>${body}</script>` : `<script src="${url}"></script>`;
}

Non modifichi la risposta: è generata da Consentl per il suo sito. La stampi nel template HTML scritto dal suo server, al di fuori di qualsiasi framework lato client. Non adatto all'App Router di Next.js: lì React invierebbe il loader due volte su ogni pagina; usi il tag semplice come mostrato in Next.js.

API JavaScript

Eventi su document (le scelte si trovano in event.detail):

• consentl:change: a ogni visualizzazione di pagina una volta applicata la regola della regione, e a ogni modifica;
• consentl:ready: una volta per visualizzazione di pagina, dopo il primo consentl:change;
• consentl:ui-error: non è stato possibile caricare il banner (anche dopo un nuovo tentativo). I link a #consentl funzionano allora come link normali, così può mostrare una sua soluzione alternativa.

Il dataLayer riceve consentl_consent (a ogni visualizzazione di pagina e a ogni modifica) e consentl_update (solo alle modifiche), ciascuno con consentl.preferences, analytics, marketing, sale, stored e region. Elementi contrassegnati: data-consentl="<category>", type="text/plain", data-src, data-consentl-srcset (immagini con srcset), data-consentl-type. Aggiunga data-consentl-noicon a un elemento nelle pagine che hanno un proprio pulsante «Impostazioni dei cookie», per nascondervi l'icona fluttuante.

Content Security Policy

Se il suo sito invia un'intestazione Content-Security-Policy, consenta l'API di Consentl:

script-src  'self' https://api.consentl.com;
connect-src 'self' https://api.consentl.com;
img-src     'self' https://api.consentl.com data:;
style-src   'self' 'unsafe-inline';

• style-src 'unsafe-inline' è necessario perché il banner aggiunge i suoi stili in fase di esecuzione. Contatti l'assistenza se la sua policy vieta gli stili inline.
• Gli script che Consentl sblocca dopo il consenso hanno comunque bisogno dei propri host in script-src.
• Con una policy rigorosa basata su nonce, assegni il suo nonce al tag del loader e usi 'strict-dynamic', così gli script che carica e sblocca sono considerati attendibili. Senza 'strict-dynamic', assegni il suo nonce anche agli script inline contrassegnati.
• La Subresource Integrity (SRI) non può essere usata sul loader, perché il suo contenuto cambia quando modifica le impostazioni nel pannello di controllo.

Controlli lato server (facoltativi)

La scelta viene memorizzata nel cookie di prima parte consentl: 1.<id>.<timestamp>.<revision>.<flags>.<action>. flags ha quattro cifre per preferences, analytics, marketing e sale (1 = concesso). L'assenza del cookie significa che non c'è ancora una decisione: la tratti come «non concesso». Un cookie con una revisione precedente (dopo «Reimposta tutti i consensi») non conta più. Le pagine che dipendono da questo cookie non devono essere memorizzate in una cache condivisa. Ove possibile, preferisca il controllo lato client (sezione 6).

Limitazioni

• Il banner non può controllare gli script eseguiti prima del loader: gli script sopra di esso nel <head> e gli script che una piattaforma di hosting inserisce al di fuori del suo controllo.
• I tag scritti nell'HTML della pagina vengono richiesti prima del consenso, a meno che lei non li contrassegni.
• Gli iframe di terze parti incorporati (video, mappe) vengono trattenuti per intero fino al consenso. Consentl non può vedere ciò che accade al loro interno.
• Consentl non implementa l'IAB Transparency & Consent Framework (TCF).

Guide correlate

• Google Tag Manager
• Next.js
• React, Vue, Angular (SPA)
• Webflow

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