API JavaScript

Pour commencer : attendre l’état

La ligne Cookiemark figure en premier dans votre head et s’exécute immédiatement : window.Cookiemark existe donc pour tous les scripts placés en dessous. Le choix du visiteur est connu un peu plus tard, une fois la page lue. Utilisez l’événement ready pour connaître l’état au chargement de la page, et change pour suivre ce qui se passe ensuite.

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

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

Avant votre première publication, le script ne contient rien et window.Cookiemark n’existe pas. Vérifiez sa présence avant de l’appeler, pour que votre code fonctionne aussi sur un site encore à l’état de brouillon.

Une fonction ajoutée avec on('ready') après que l’état est connu s’exécute immédiatement. Les autres événements ne sont pas répétés pour les écouteurs ajoutés tardivement. Ensemble, ready et change ne manquent jamais rien.

Chaque événement est aussi émis sur window sous forme de CustomEvent avec le préfixe cookiemark:. Les données se trouvent dans event.detail.

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

Propriétés

Toutes les propriétés sont en lecture seule et reflètent toujours l’état actuel.

declined vaut aussi true pour un nouveau visiteur qui n’a pas encore répondu, puisque rien n’est autorisé à ce stade. Vérifiez aussi hasResponse si vous avez besoin de savoir que le visiteur a dit non.

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

Méthodes

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

Chaque choix enregistré via l’API est un vrai choix. Il dépose le cookie, entre dans le journal des consentements et libère ou retire les scripts, exactement comme un clic dans le bandeau.

Événements

Chaque écouteur reçoit le même objet. consent contient les quatre catégories. action vaut accept_all, deny_all, custom, withdraw ou signal après un choix, et reste vide sinon. first vaut true quand il s’agit du premier choix du visiteur.

La file d’écouteurs

window.cookiemarkListeners est une file pour le code susceptible de s’exécuter avant le script Cookiemark, comme un modèle Tag Manager. Ajoutez-y une fonction avec push. Cookiemark l’appelle dès que le choix est connu, puis après chaque modification.

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

Le premier argument suit la correspondance définie dans l’onglet Google et GTM. Pour un nouveau visiteur, Cookiemark appelle la fonction dès qu’il fait son choix.

Le balisage que le script comprend

Vous pouvez créer vos propres boutons et liens sans écrire de JavaScript. Cookiemark gère le clic sur tout élément qui porte l’un de ces attributs.

Cookiemark remplit aussi certains éléments avec les données propres au visiteur. Comme c’est le navigateur qui s’en charge, la page reste identique pour tout le monde et peut être mise en cache sans risque.

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

La page de votre politique relative aux cookies est un bon endroit pour afficher l’ID de consentement. Un visiteur qui demande ce qu’il a accepté peut le citer, et vous le retrouvez dans le journal des consentements.

Le cookie de consentement

Cookiemark enregistre le choix dans un cookie propriétaire (first-party) nommé cookiemark_consent. Sa valeur est du JSON encodé au format URL, comme ceci.

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

v est la version du consentement et ts l’heure du choix en secondes. Un cookie avec une version du consentement plus ancienne compte comme une absence de choix : le bandeau s’affiche de nouveau. Lisez le choix via l’API plutôt que via le cookie quand c’est possible, car l’API tient aussi compte des régions et des signaux de confidentialité.

L’API Cookiebot

Le code de thème ou de plugin écrit pour Cookiebot interroge souvent Cookiebot.consent.marketing, ou écoute CookiebotOnAccept. Activez Répondre à l’API JavaScript de Cookiebot dans l’onglet Google et GTM, et Cookiemark répond à ce code. Il s’abstient quand le vrai script Cookiebot est encore sur la page.

Les événements CookiebotOnLoad, CookiebotOnConsentReady, CookiebotOnAccept, CookiebotOnDecline, CookiebotOnDialogInit, CookiebotOnDialogDisplay et CookiebotOnTagsExecuted sont émis sur window. Les anciennes fonctions de rappel comme CookiebotCallback_OnAccept sont aussi appelées.