Consentl pentru orice site

Adăugați o etichetă script, prima în <head>. Bannerul, textele, regiunile, Consent Mode și regulile de blocare se configurează în panoul de control Consentl.

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

Da

Consentl funcționează pe orice site care vă permite să adăugați un <script> în <head>. Nu trebuie instalat nimic pe server: totul se configurează în panoul de control Consentl (site extern) și este livrat de scriptul de încărcare.

Ce face fiecare plan

În planul Free, etichetele Google, Meta Pixel și toate celelalte etichete rulează imediat ce pagina se încarcă, cu excepția cazului în care le marcați manual.

1. Adăugați site-ul și copiați cheia

1. Conectați-vă la panoul de control (sau creați un cont gratuit) și adăugați site-ul.
2. Adăugați fiecare nume de gazdă pe care rulează site-ul în câmpul Domenii al site-ului. www. și domeniul simplu contează ca același site; adăugați separat domeniile de staging.
3. Deschideți pagina Configurare a site-ului și copiați fragmentul de cod de instalare. Cheia site-ului din el începe cu sk_ și este publică: identifică site-ul dumneavoastră, nu este o parolă.

2. Instalați scriptul de încărcare

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

• SITE_KEY: cheia site-ului (sk_ + 24 de caractere).
• LANG: limba paginii, aceeași valoare ca <html lang>: en, de, fr, pt-PT, pt-BR, fr-CA, … Variantele regionale revin automat la limba de bază (de-AT → de). Omiteți &l= pentru a folosi limba implicită a site-ului din panoul de control.

Unde: ca prim element din <head>, imediat după <meta charset>. Trebuie să vină înainte de Google Tag Manager, gtag.js, Meta Pixel, instrumentele de analiză, widgeturile de chat și instrumentele de testare A/B.

Cum: sincron: fără async, fără defer, fără type="module". Scriptul este mic și păstrat în cache.

De ce primul și sincron:

1. Valorile implicite Google Consent Mode v2 (Pro și planurile superioare) trebuie setate înainte ca vreo etichetă Google să le citească.
2. Blocarea împiedică rularea etichetelor până când vizitatorul își dă acordul. Scripturile aflate deasupra scriptului de încărcare au rulat deja.
3. Alegerea unui vizitator care revine este aplicată imediat: bannerul nu apare pentru o clipă și nicio etichetă nu se declanșează înainte ca alegerea să fie cunoscută.

Dacă platforma dumneavoastră nu poate plasa scriptul primul, ghidul ei explică exact ce înseamnă acest lucru.

Ce poate și ce nu poate opri blocarea

• Etichetele încărcate prin cod (Google Tag Manager, scriptul de încărcare JavaScript al unui pixel, scripturile adăugate de aplicație) sunt reținute înainte de a fi solicitate atunci când corespund unui tracker cunoscut (Business) sau uneia dintre regulile dumneavoastră de blocare.
• Etichetele scrise în HTML-ul paginii (<script src>, pixeli <img>, <iframe>) sunt solicitate de browser înainte ca vreun script să le poată opri: în timp ce scriptul de încărcare se descarcă, browserul preia deja ce găsește mai jos în pagină. Consentl împiedică în continuare rularea unui script recunoscut, dar solicitarea, cu adresa IP a vizitatorului, adresa paginii și eventualele cookie-uri ale terților, a fost deja trimisă; pentru un pixel de urmărire, solicitarea este chiar urmărirea. Marcați manual fiecare etichetă scrisă în HTML (secțiunea 6) și ștergeți pixelii de urmărire <noscript>.
• Site-urile generate pe server pot și să includă scriptul de încărcare inline, ceea ce elimină așteptarea descărcării. Etichetele scrise în HTML trebuie totuși marcate.

3. Verificați că funcționează

1. Deschideți site-ul într-o fereastră privată. Bannerul apare.
2. În instrumentele pentru dezvoltatori ale browserului → Console:
   • Consentl.get() returnează alegerile curente;
   • Consentl.region() returnează modelul juridic aplicat vizitatorului, de exemplu { mode: "opt_in", law: "gdpr", gpc: false, known: true }.
3. În Network, înainte să acceptați:
   • nicio solicitare către gazde de urmărire de la etichetele încărcate prin cod, atunci când blocarea automată este activă (Business); cu Consent Mode, doar pingurile Google fără cookie-uri;
   • etichetele scrise în HTML pe care nu le-ați marcat sunt solicitate. Marcați-le și verificați din nou.
4. Cât timp site-ul este în modul de test, adăugați ?consentl=preview la o adresă pentru a vedea bannerul fără a stoca sau a înregistra o alegere. Această opțiune nu alege o regiune: Previzualizarea din panoul de control arată bannerul pentru fiecare regiune.

Regiuni: la fiecare afișare de pagină, bannerul îi cere lui Consentl țara vizitatorului, care se stabilește din adresa IP a acestuia. Determinarea are loc în memorie și nu stochează nimic, iar scriptul de încărcare rămâne același pentru toți vizitatorii. Se aplică regula dumneavoastră pentru țara respectivă:

• Statele SUA nu sunt diferențiate: un vizitator din SUA primește regula pentru întreaga SUA sau, dacă nu există, prima regulă pentru un stat SUA (de exemplu California).
• Când țara este necunoscută, se aplică regula pentru regiuni necunoscute (opt-in în mod implicit).
• Codul se află în câmpul dataLayer consentl.region (de exemplu DE sau US). Pentru a vedea bannerul altei regiuni, folosiți Previzualizarea din panoul de control sau un VPN.

4. Adăugați un link „Setări cookie-uri”

Retragerea consimțământului trebuie să fie la fel de simplă ca acordarea lui. Folosiți oricare dintre acestea:

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

window.Consentl.open("prefs");

Linkurile a căror adresă se termină în #consentl sau #consentl-preferences și orice element cu data-consentl-open deschid preferințele în loc să navigheze, inclusiv pe elementele adăugate ulterior. Celelalte ancore care doar încep la fel (cum ar fi #consentl-api) nu sunt afectate. Panoul de control poate afișa și o pictogramă plutitoare pentru preferințe.

5. Declarația privind cookie-urile, cererile privind datele personale și formularul de retragere 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>

Includeți blocks.js o singură dată pe pagină, după elementele <div>. Declarația listează cookie-urile din pagina Cookie-uri a panoului de control: scanerul adaugă ce găsește la crearea site-ului, când faceți clic pe Scanați acum și, în planul Business și în cele superioare, în fiecare lună; puteți adăuga sau edita chiar dumneavoastră intrările (detaliile sunt completate din Open Cookie Database). Cererile privind datele personale sunt verificate prin e-mail și apar în panoul de control cu termenul lor. Formularul de retragere UE necesită planul Pro sau unul superior și trebuie activat din panoul de control; altfel, <div>-ul său rămâne gol.

6. Rețineți tot ce nu este recunoscut automat

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

• Categorii: preferences, analytics, marketing.
• Nu se solicită nimic până când categoria nu este acordată. Aceasta este singura modalitate de a reține o etichetă scrisă în HTML.
• Adăugați data-consentl-type="module" la un script marcat care trebuie să ruleze ca modul.
• Blocarea manuală funcționează în orice plan. Planul Business adaugă blocarea automată a trackerelor cunoscute și reguli de blocare („URL contains”) pe care le adăugați în panoul de control fără să modificați site-ul. Regulile se aplică adreselor scripturilor, iframe-urilor și imaginilor, precum și scripturilor inline care încarcă ceva. Datele de pagină ale framework-urilor precum Next.js, Nuxt, Remix sau SvelteKit nu sunt reținute niciodată.
• O etichetă reținută rulează o singură dată după consimțământ, chiar dacă framework-ul adaugă o a doua copie a ei la pornirea paginii (Nuxt face acest lucru).

Aplicații cu o singură pagină

• Nu trebuie apelat nimic la schimbarea rutei: runtime-ul este încărcat o singură dată per document, alegerea este stocată în cookie-ul propriu consentl, iar etichetele reținute sunt eliberate fără reîncărcare.
• Routerele care înlocuiesc corpul paginii (Astro <ClientRouter />, Turbo, Swup, htmx hx-boost) păstrează funcționarea bannerului, a pictogramei plutitoare și a linkurilor „Setări cookie-uri”.
• Păstrați aceeași adresă a scriptului de încărcare pe toate paginile și nu îl încărcați din nou la navigare. Dacă constructorul de site-uri oferă „încărcare pe fiecare pagină”, alegeți „încărcare o singură dată”.
• Etichetele inserate ulterior de aplicație sunt și ele reținute atunci când corespund unui tracker cunoscut (Business) sau unei reguli de blocare. Pentru propriul cod, verificați consimțământul. 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());

• După o schimbare de limbă fără reîncărcare completă, bannerul își păstrează limba până la următoarea încărcare a paginii.

Cu Google Tag Manager

Șablonul GTM Consentl poate gestiona Google Consent Mode. Dacă îl folosiți și pe el, și fragmentul de cod, adăugați &gcm=ext la adresa scriptului de încărcare, astfel încât doar șablonul să trimită comenzi Consent Mode:

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

Inițializare inline (pe server)

Dacă paginile sunt generate pe un server pe care îl controlați, puteți afișa scriptul de încărcare inline în loc să trimiteți la el printr-un link, așa cum fac pluginurile Consentl pentru WordPress, Shopware, PrestaShop și Magento:

1. Pe server, preluați https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG.
2. Păstrați răspunsul în cache pentru fiecare cheie a site-ului și limbă timp de 5 minute (Cache-Control-ul său); dacă o preluare ulterioară eșuează, continuați să livrați ultima copie bună.
3. Afișați <script> + răspunsul + </script> ca prim element din <head>. Cu o Content Security Policy, adăugați nonce-ul (conținutul se schimbă odată cu setările, așa că un hash nu funcționează).
4. Dacă nu există nicio copie în cache, afișați eticheta normală <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>`;
}

Nu modificați răspunsul: acesta este generat de Consentl pentru site-ul dumneavoastră. Afișați-l în șablonul HTML scris de server, în afara oricărui framework pe client. Nu pentru App Router din Next.js: acolo React ar trimite scriptul de încărcare de două ori pe fiecare pagină; folosiți eticheta simplă, așa cum se arată în Next.js.

API JavaScript

Evenimente pe document (alegerile se află în event.detail):

• consentl:change: la fiecare afișare de pagină, după aplicarea regulii regiunii, și la fiecare modificare;
• consentl:ready: o dată per afișare de pagină, după primul consentl:change;
• consentl:ui-error: bannerul nu a putut fi încărcat (nici după o reîncercare). Linkurile către #consentl se comportă atunci ca linkuri normale, astfel încât să puteți afișa propria soluție de rezervă.

dataLayer primește consentl_consent (la fiecare afișare de pagină și la fiecare modificare) și consentl_update (doar la modificări), fiecare cu consentl.preferences, analytics, marketing, sale, stored și region. Elemente marcate: data-consentl="<category>", type="text/plain", data-src, data-consentl-srcset (imagini cu srcset), data-consentl-type. Adăugați data-consentl-noicon la un element de pe paginile care au propriul buton „Setări cookie-uri”, pentru a ascunde acolo pictograma plutitoare.

Content Security Policy

Dacă site-ul trimite un antet Content-Security-Policy, permiteți API-ul 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' este necesar deoarece bannerul își adaugă stilurile la rulare. Contactați asistența dacă politica dumneavoastră interzice stilurile inline.
• Scripturile pe care Consentl le eliberează după consimțământ au nevoie în continuare de propriile gazde în script-src.
• Cu o politică strictă bazată pe nonce, dați etichetei scriptului de încărcare nonce-ul dumneavoastră și folosiți 'strict-dynamic', astfel încât scripturile pe care le încarcă și le eliberează să fie de încredere. Fără 'strict-dynamic', dați nonce-ul și scripturilor inline marcate.
• Subresource Integrity (SRI) nu poate fi folosit pentru scriptul de încărcare, deoarece conținutul acestuia se schimbă atunci când modificați setările în panoul de control.

Verificări pe server (opțional)

Alegerea este stocată în cookie-ul propriu consentl: 1.<id>.<timestamp>.<revision>.<flags>.<action>. flags are patru cifre pentru preferences, analytics, marketing și sale (1 = acordat). Lipsa cookie-ului înseamnă că nu există încă o decizie: tratați-o ca „neacordat”. Un cookie cu o revizie mai veche (după „Reset all consents”) nu mai contează. Paginile care depind de acest cookie nu trebuie stocate într-un cache partajat. Preferați, acolo unde puteți, condiționarea pe client (secțiunea 6).

Limitări

• Bannerul nu poate controla scripturile care rulează înaintea scriptului de încărcare: scripturile aflate deasupra lui în <head> și scripturile pe care o platformă de găzduire le injectează în afara controlului dumneavoastră.
• Etichetele scrise în HTML-ul paginii sunt solicitate înainte de consimțământ, cu excepția cazului în care le marcați.
• Iframe-urile încorporate ale terților (videoclipuri, hărți) sunt reținute în întregime până la consimțământ. Consentl nu poate vedea ce se întâmplă în interiorul lor.
• Consentl nu implementează IAB Transparency & Consent Framework (TCF).

Ghiduri conexe

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

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