JavaScript API

Start here: wait for the state

The Cookiemark line sits first in your head and runs straight away, so window.Cookiemark exists for every script below it. The visitor's choice is known a little later, once the page has been read. Use the ready event to learn the state when the page loads, and change to follow what happens next.

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

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

Before your first publish the script holds nothing, and window.Cookiemark does not exist. Check for it before you call it, so your code also works on a site that is still a draft.

A function you add with on('ready') after the state is known runs at once. The other events are not repeated for late listeners. Together, ready and change never miss anything.

Each event is also sent on window as a CustomEvent with the prefix cookiemark:. The data is in event.detail.

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

Properties

All properties are read-only and always show the current state.

declined is also true for a new visitor who has not answered yet, because nothing is allowed at that point. Check hasResponse as well when you need to know that the visitor said no.

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

Methods

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

Every choice you store through the API is a real choice. It sets the cookie, goes into the consent log and releases or withdraws scripts, exactly like a click in the banner.

Events

Every listener receives the same object. consent holds the four categories. action is accept_all, deny_all, custom, withdraw or signal after a choice, and empty otherwise. first is true when this is the visitor's first choice.

The listener queue

window.cookiemarkListeners is a queue for code that may run before the Cookiemark script, such as a Tag Manager template. Push a function onto it. Cookiemark calls it once the choice is known, and again after every change.

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

The first argument follows the mapping on the Google and GTM tab. For a new visitor, Cookiemark calls the function once they choose.

Markup the script understands

You can build your own buttons and links without writing JavaScript. Cookiemark handles a click on any element with these attributes.

Cookiemark also fills in elements with the visitor's own data. Because the browser does this, the page itself stays the same for everyone and is safe to cache.

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

A cookie policy page is a good place for the consent ID. A visitor who asks what they agreed to can quote it, and you look it up in the consent log.

The consent cookie

Cookiemark stores the choice in a first-party cookie called cookiemark_consent. Its value is URL-encoded JSON like this.

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

v is the consent version and ts the time of the choice in seconds. A cookie with an older consent version counts as no choice, so the banner shows again. Read the choice through the API rather than the cookie where you can, because the API also knows about regions and privacy signals.

The Cookiebot API

Theme and plugin code written for Cookiebot often asks Cookiebot.consent.marketing, or listens for CookiebotOnAccept. Switch on Answer to the Cookiebot JavaScript API on the Google and GTM tab, and Cookiemark answers that code. It stays away when the real Cookiebot script is still on the page.

The events CookiebotOnLoad, CookiebotOnConsentReady, CookiebotOnAccept, CookiebotOnDecline, CookiebotOnDialogInit, CookiebotOnDialogDisplay and CookiebotOnTagsExecuted fire on window. The older callback functions such as CookiebotCallback_OnAccept are called too.