Consentl voor elke website

Voeg één scripttag als eerste toe in de <head> van uw site. De banner, teksten, regio's, Consent Mode en blokkeerregels stelt u allemaal in het Consentl-dashboard in.

Loader als eerste in <head>

Ja

Consentl werkt op elke site waarop u een <script> aan <head> kunt toevoegen. Er hoeft niets op uw server te worden geïnstalleerd: alles wordt ingesteld in het Consentl-dashboard (externe website) en geleverd door het loaderscript.

Wat elk plan doet

Bij Free worden Google-tags, Meta Pixel en alle andere tags uitgevoerd zodra de pagina laadt, tenzij u ze handmatig markeert.

1. Uw site toevoegen en de sleutel kopiëren

1. Log in op het dashboard (of maak een gratis account aan) en voeg uw site toe.
2. Voeg in het veld Domeinen van de site elke hostnaam toe waarop de site draait. www. en het kale domein tellen als dezelfde site; voeg stagingdomeinen apart toe.
3. Open de pagina Installatie van de site en kopieer de installatiesnippet. De sitesleutel daarin begint met sk_ en is openbaar: hij identificeert uw site en is geen wachtwoord.

2. De loader installeren

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

• SITE_KEY: uw sitesleutel (sk_ + 24 tekens).
• LANG: de taal van de pagina, dezelfde waarde als <html lang>: en, de, fr, pt-PT, pt-BR, fr-CA, … Regionale varianten vallen automatisch terug (de-AT → de). Laat &l= weg om de standaardtaal van de site uit het dashboard te gebruiken.

Waar: als eerste element in <head>, direct na <meta charset>. Hij moet vóór Google Tag Manager, gtag.js, Meta Pixel, analysetools, chatwidgets en A/B-testtools staan.

Hoe: synchroon: geen async, geen defer, geen type="module". Het script is klein en wordt in de cache opgeslagen.

Waarom als eerste en synchroon:

1. De standaardwaarden van Google Consent Mode v2 (vanaf Pro) moeten zijn ingesteld voordat een Google-tag ze leest.
2. Blokkering voorkomt dat tags worden uitgevoerd totdat de bezoeker instemt. Scripts boven de loader zijn al uitgevoerd.
3. De keuze van een terugkerende bezoeker wordt direct toegepast: de banner flitst niet even op en er worden geen tags geactiveerd voordat de keuze bekend is.

Als uw platform het script niet als eerste kan plaatsen, legt de handleiding van dat platform precies uit wat dat betekent.

Wat blokkering wel en niet kan tegenhouden

• Tags die door code worden geladen (Google Tag Manager, de JavaScript-loader van een pixel, scripts die uw app toevoegt) worden tegengehouden voordat ze worden opgevraagd als ze overeenkomen met een bekende tracker (Business) of met een van uw blokkeerregels.
• Tags die in de HTML van de pagina staan (<script src>, <img>-pixels, <iframe>) worden door de browser opgevraagd voordat een script ze kan tegenhouden: terwijl de loader wordt gedownload, haalt de browser al op wat hij verderop in de pagina vindt. Consentl voorkomt nog steeds dat een herkend script wordt uitgevoerd, maar het verzoek, met het IP-adres van de bezoeker, het adres van de pagina en eventuele cookies van derden, is al verstuurd; bij een trackingpixel is het verzoek zelf de tracking. Markeer elke tag die in de HTML staat handmatig (stap 6) en verwijder <noscript>-trackingpixels.
• Server-rendered sites kunnen de loader ook inline opnemen, waardoor het wachten op de download wegvalt. Tags die in de HTML staan, moeten nog steeds worden gemarkeerd.

3. Controleren of het werkt

1. Open de site in een privévenster. De banner verschijnt.
2. In de ontwikkelaarstools van de browser → Console:
   • Consentl.get() geeft de huidige keuzes terug;
   • Consentl.region() geeft het juridische model terug dat op de bezoeker wordt toegepast, zoals { mode: "opt_in", law: "gdpr", gpc: false, known: true }.
3. In Network (Netwerk), voordat u accepteert:
   • geen verzoeken aan trackinghosts van tags die door code worden geladen, wanneer automatische blokkering aan staat (Business); met Consent Mode alleen de cookieloze pings van Google;
   • tags in de HTML die u niet hebt gemarkeerd, worden opgevraagd. Markeer ze en controleer opnieuw.
4. Zolang de site in testmodus staat, voegt u ?consentl=preview aan een adres toe om de banner te zien zonder een keuze op te slaan of te registreren. Er wordt dan geen regio gekozen: de Preview in het dashboard toont de banner voor elke regio.

Regio's: bij elke paginaweergave vraagt de banner Consentl naar het land van de bezoeker, dat wordt afgeleid uit het IP-adres van de bezoeker. Het opzoeken gebeurt in het geheugen en slaat niets op, en de loader blijft voor elke bezoeker hetzelfde. Uw regel voor dat land is van toepassing:

• Amerikaanse staten worden niet van elkaar onderscheiden: een bezoeker uit de VS krijgt uw regel voor de hele VS of, als die er niet is, uw eerste regel voor een Amerikaanse staat (bijvoorbeeld Californië).
• Als het land onbekend is, geldt uw regel voor onbekende regio's (standaard opt-in).
• De code staat in het dataLayer-veld consentl.region (bijvoorbeeld DE of US). Om de banner van een andere regio te zien, gebruikt u de Preview in het dashboard of een VPN.

4. Een link "Cookie-instellingen" toevoegen

Toestemming intrekken moet even eenvoudig zijn als toestemming geven. Gebruik een van deze mogelijkheden:

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

window.Consentl.open("prefs");

Links waarvan het adres eindigt op #consentl of #consentl-preferences, en elk element met data-consentl-open, openen de voorkeuren in plaats van te navigeren, ook bij elementen die later worden toegevoegd. Andere ankers die alleen op dezelfde manier beginnen (zoals #consentl-api), blijven ongemoeid. Het dashboard kan ook een zwevend voorkeurenpictogram tonen.

5. Cookieverklaring, privacyverzoeken en EU-herroepingsformulier

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

Neem blocks.js één keer per pagina op, na de <div>'s. De verklaring somt de cookies op van de pagina Cookies in het dashboard: de scanner voegt toe wat hij vindt wanneer de site wordt aangemaakt, wanneer u op Nu scannen klikt en, vanaf Business, elke maand; u kunt zelf vermeldingen toevoegen of bewerken (de details worden aangevuld uit de Open Cookie Database). Privacyverzoeken worden per e-mail geverifieerd en verschijnen in het dashboard met hun termijn. Het EU-herroepingsformulier vereist het plan Pro of hoger en moet in het dashboard worden ingeschakeld; anders blijft de <div> ervan leeg.

6. Alles tegenhouden wat niet automatisch wordt herkend

<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ën: preferences, analytics, marketing.
• Er wordt niets opgevraagd totdat toestemming voor de categorie is gegeven. Dit is de enige manier om een tag die in de HTML staat tegen te houden.
• Voeg data-consentl-type="module" toe aan een gemarkeerd script dat als module moet worden uitgevoerd.
• Handmatige blokkering werkt bij elk plan. Het plan Business voegt automatische blokkering van bekende trackers en blokkeerregels ("URL bevat") toe die u in het dashboard instelt zonder de site aan te passen. Regels vergelijken het adres van scripts, iframes en afbeeldingen, en van inline scripts die iets laden. Paginagegevens van frameworks zoals Next.js, Nuxt, Remix of SvelteKit worden nooit tegengehouden.
• Een tegengehouden tag wordt na de toestemming één keer uitgevoerd, ook als uw framework er tijdens het starten van de pagina een tweede kopie van toevoegt (Nuxt doet dat).

Single-page apps

• Bij routewijzigingen hoeft u niets aan te roepen: de runtime wordt één keer per document geladen, de keuze wordt opgeslagen in de first-party cookie consentl en tegengehouden tags worden zonder herladen vrijgegeven.
• Routers die de body van de pagina vervangen (Astro <ClientRouter />, Turbo, Swup, htmx hx-boost), laten de banner, het zwevende pictogram en links "Cookie-instellingen" werkend.
• Houd het adres van de loader op elke pagina gelijk en laad hem bij navigatie niet opnieuw. Als uw websitebouwer "op elke pagina laden" aanbiedt, kies dan "één keer laden".
• Tags die uw app later invoegt, worden ook tegengehouden als ze overeenkomen met een bekende tracker (Business) of een blokkeerregel. Controleer voor uw eigen code de toestemming. consentl:change wordt bij elke paginaweergave geactiveerd met de huidige keuzes en opnieuw bij elke wijziging, dus start dingen maar één keer:

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

• Na een taalwissel zonder volledig herladen behoudt de banner zijn taal tot de volgende keer dat de pagina wordt geladen.

Met Google Tag Manager

Het GTM-sjabloon van Consentl kan Google Consent Mode beheren. Als u het sjabloon en de snippet gebruikt, voeg dan &gcm=ext toe aan het adres van de loader, zodat alleen het sjabloon Consent Mode-opdrachten verstuurt:

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

Inline bootstrap (server-side)

Als uw pagina's worden gerenderd op een server die u beheert, kunt u de loader inline afdrukken in plaats van ernaar te linken, zoals de Consentl-plugins voor WordPress, Shopware, PrestaShop en Magento doen:

1. Haal op de server https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG op.
2. Sla het antwoord per sitesleutel en taal 5 minuten in de cache op (de Cache-Control ervan); als een latere ophaalpoging mislukt, blijf dan de laatste goede kopie leveren.
3. Druk <script> + het antwoord + </script> af als eerste element in <head>. Met een Content Security Policy voegt u uw nonce toe (de inhoud verandert met uw instellingen, dus een hash werkt niet).
4. Als er helemaal geen kopie in de cache staat, drukt u de normale tag <script src="…"> af.

// 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>`;
}

Wijzig het antwoord niet: het wordt door Consentl voor uw site gegenereerd. Druk het af in de HTML-template die uw server schrijft, buiten elk client-side framework. Niet voor de Next.js App Router: React zou de loader daar op elke pagina twee keer versturen; gebruik daar de gewone tag zoals getoond in Next.js.

JavaScript-API

Events op document (de keuzes staan in event.detail):

• consentl:change: bij elke paginaweergave zodra de regionale regel is toegepast, en bij elke wijziging;
• consentl:ready: één keer per paginaweergave, na de eerste consentl:change;
• consentl:ui-error: de banner kon niet worden geladen (ook niet na één nieuwe poging). Links naar #consentl werken dan als gewone links, zodat u uw eigen alternatief kunt tonen.

De dataLayer krijgt consentl_consent (bij elke paginaweergave en elke wijziging) en consentl_update (alleen bij wijzigingen), elk met consentl.preferences, analytics, marketing, sale, stored en region. Gemarkeerde elementen: data-consentl="<category>", type="text/plain", data-src, data-consentl-srcset (afbeeldingen met srcset), data-consentl-type. Voeg data-consentl-noicon toe aan een element op pagina's met een eigen knop "Cookie-instellingen", om daar het zwevende pictogram te verbergen.

Content Security Policy

Als uw site een Content-Security-Policy-header verstuurt, sta dan de Consentl-API toe:

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' is nodig omdat de banner zijn stijlen tijdens de uitvoering toevoegt. Neem contact op met support als uw policy inline stijlen verbiedt.
• Scripts die Consentl na de toestemming vrijgeeft, hebben nog steeds hun eigen hosts in script-src nodig.
• Met een strikte nonce-policy geeft u de loadertag uw nonce en gebruikt u 'strict-dynamic', zodat de scripts die hij laadt en vrijgeeft, worden vertrouwd. Zonder 'strict-dynamic' geeft u ook gemarkeerde inline scripts uw nonce.
• Subresource Integrity (SRI) kan niet op de loader worden gebruikt, omdat de inhoud ervan verandert wanneer u instellingen in het dashboard wijzigt.

Controles aan de serverkant (optioneel)

De keuze wordt opgeslagen in de first-party cookie consentl: 1.<id>.<timestamp>.<revision>.<flags>.<action>. flags heeft vier cijfers voor voorkeuren, analyse, marketing en verkoop (1 = toegestaan). Geen cookie betekent nog geen beslissing: behandel dat als "niet toegestaan". Een cookie met een oudere revisie (na "Alle toestemmingen opnieuw instellen") telt niet meer. Pagina's die van deze cookie afhangen, mogen niet in een gedeelde cache worden opgeslagen. Geef waar mogelijk de voorkeur aan blokkering aan de clientkant (stap 6).

Beperkingen

• De banner kan geen scripts beheren die vóór de loader worden uitgevoerd: scripts erboven in <head>, en scripts die een hostingplatform buiten uw controle invoegt.
• Tags die in de HTML van de pagina staan, worden vóór de toestemming opgevraagd, tenzij u ze markeert.
• Ingesloten iframes van derden (video's, kaarten) worden als geheel tegengehouden tot de toestemming. Consentl kan niet zien wat er binnenin gebeurt.
• Consentl implementeert het IAB Transparency & Consent Framework (TCF) niet.

Gerelateerde handleidingen

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

Vastgelopen? Schrijf naar support@consentl.com — wij antwoorden op werkdagen in het Engels.