JavaScript-API

Begin hier: wacht op de status

De regel van Cookiemark staat als eerste in je head en draait meteen, dus window.Cookiemark bestaat voor elk script eronder. De keuze van de bezoeker is iets later bekend, zodra de pagina is gelezen. Gebruik het event ready om de status te weten te komen als de pagina laadt, en change om te volgen wat er daarna gebeurt.

Cookiemark.on('ready', function (detail) {
  if (detail.consent.statistics) {
    startMyAnalytics();
  }
});

Cookiemark.on('change', function (detail) {
  if (detail.consent.marketing) {
    loadChatWidget();
  }
});

Vóór je eerste publicatie bevat het script niets, en bestaat window.Cookiemark niet. Controleer of het bestaat voordat je het aanroept, zodat je code ook werkt op een site die nog een concept is.

Een functie die je met on('ready') toevoegt nadat de status bekend is, draait meteen. De andere events worden niet herhaald voor listeners die later komen. Samen missen ready en change nooit iets.

Elk event wordt ook op window verstuurd als CustomEvent met het voorvoegsel cookiemark:. De gegevens staan in event.detail.

window.addEventListener('cookiemark:change', function (event) {
  console.log(event.detail.action, event.detail.consent);
});

Eigenschappen

Alle eigenschappen zijn alleen-lezen en tonen altijd de huidige status.

declined is ook true voor een nieuwe bezoeker die nog niet heeft geantwoord, omdat er op dat moment niets is toegestaan. Controleer ook hasResponse als je moet weten dat de bezoeker nee heeft gezegd.

if (Cookiemark.hasResponse && Cookiemark.declined) {
  // The visitor chose to reject everything.
}

Methoden

Cookiemark.submitConsent({ preferences: true, statistics: true, marketing: false });

Elke keuze die je via de API opslaat, is een echte keuze. Die zet de cookie, komt in het consentlog en geeft scripts vrij of trekt ze in, precies zoals een klik in de banner.

Events

Elke listener krijgt hetzelfde object. consent bevat de vier categorieën. action is na een keuze accept_all, deny_all, custom, withdraw of signal, en anders leeg. first is true als dit de eerste keuze van de bezoeker is.

De listener-wachtrij

window.cookiemarkListeners is een wachtrij voor code die mogelijk vóór het script van Cookiemark draait, zoals een Tag Manager-template. Push er een functie op. Cookiemark roept die aan zodra de keuze bekend is, en opnieuw na elke wijziging.

window.cookiemarkListeners = window.cookiemarkListeners || [];
window.cookiemarkListeners.push(function (googleState, categories) {
  // googleState: { analytics_storage: 'granted', ad_storage: 'denied', ... }
  // categories:  { necessary: true, preferences: false, statistics: true, marketing: false }
});

Het eerste argument volgt de koppeling op het tabblad Google en GTM. Bij een nieuwe bezoeker roept Cookiemark de functie aan zodra die kiest.

Markup die het script begrijpt

Je kunt eigen knoppen en links bouwen zonder JavaScript te schrijven. Cookiemark verwerkt een klik op elk element met deze attributen.

Cookiemark vult ook elementen in met de eigen gegevens van de bezoeker. Omdat de browser dat doet, blijft de pagina zelf voor iedereen hetzelfde en kun je hem veilig cachen.

<a href="#cookiemark-preferences">Cookie settings</a>
<button type="button" data-cookiemark-action="withdraw">Withdraw my consent</button>
<button type="button" data-cmk-allow="marketing">Allow marketing cookies</button>

<p>Your consent ID: <span data-cookiemark-consent-id></span></p>
<p>Chosen on: <span data-cookiemark-consent-date></span></p>

Een pagina met je cookiebeleid is een goede plek voor het consent-ID. Een bezoeker die wil weten waarmee hij heeft ingestemd, kan het noemen, en jij zoekt het op in het consentlog.

De consentcookie

Cookiemark slaat de keuze op in een first-party cookie met de naam cookiemark_consent. De waarde is URL-gecodeerde JSON, zoals hieronder.

{"necessary":true,"preferences":false,"statistics":true,"marketing":false,
 "v":1,"id":"0b0f6c1e-3d0a-4c54-9f0e-2f1c8a4e7b11","ts":1791974400}

v is de consentversie en ts het tijdstip van de keuze in seconden. Een cookie met een oudere consentversie telt als geen keuze, dus dan verschijnt de banner opnieuw. Lees de keuze waar mogelijk uit via de API en niet uit de cookie, want de API weet ook van regio's en privacysignalen.

De Cookiebot-API

Thema- en plugincode die voor Cookiebot is geschreven, vraagt vaak Cookiebot.consent.marketing op of luistert naar CookiebotOnAccept. Zet Antwoorden op de JavaScript-API van Cookiebot aan op het tabblad Google en GTM, dan geeft Cookiemark die code antwoord. Cookiemark doet dat niet zolang het echte script van Cookiebot nog op de pagina staat.

De events CookiebotOnLoad, CookiebotOnConsentReady, CookiebotOnAccept, CookiebotOnDecline, CookiebotOnDialogInit, CookiebotOnDialogDisplay en CookiebotOnTagsExecuted worden op window verstuurd. Ook de oudere callbackfuncties, zoals CookiebotCallback_OnAccept, worden aangeroepen.