API de JavaScript

Empieza aquí: espera al estado

La línea de Cookiemark está al principio de tu head y se ejecuta enseguida, así que window.Cookiemark existe para todos los scripts que van detrás. La elección del visitante se conoce un poco más tarde, cuando ya se ha leído la página. Usa el evento ready para conocer el estado al cargar la página, y change para seguir lo que pasa después.

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

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

Antes de tu primera publicación, el script no contiene nada y window.Cookiemark no existe. Comprueba que existe antes de llamarlo, para que tu código también funcione en un sitio que sigue en borrador.

Una función que añades con on('ready') cuando el estado ya se conoce se ejecuta al momento. Los demás eventos no se repiten para los listeners que llegan tarde. Con ready y change juntos no se te escapa nada.

Cada evento también se envía en window como CustomEvent con el prefijo cookiemark:. Los datos están en event.detail.

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

Propiedades

Todas las propiedades son de solo lectura y siempre muestran el estado actual.

declined también es true para un visitante nuevo que todavía no ha respondido, porque en ese momento no se permite nada. Comprueba también hasResponse cuando necesites saber que el visitante ha dicho que no.

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

Métodos

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

Cada elección que guardas a través de la API es una elección real. Instala la cookie, entra en el registro de consentimientos y libera o retira scripts, exactamente igual que un clic en el banner.

Eventos

Todos los listeners reciben el mismo objeto. consent contiene las cuatro categorías. action es accept_all, deny_all, custom, withdraw o signal después de una elección, y vacío en los demás casos. first es true cuando es la primera elección del visitante.

La cola de listeners

window.cookiemarkListeners es una cola para el código que puede ejecutarse antes que el script de Cookiemark, como una plantilla de Tag Manager. Añade una función a la cola. Cookiemark la llama en cuanto se conoce la elección, y de nuevo después de cada cambio.

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

El primer argumento sigue la correspondencia de la pestaña Google y GTM. Con un visitante nuevo, Cookiemark llama a la función en cuanto elige.

Marcado que entiende el script

Puedes crear tus propios botones y enlaces sin escribir JavaScript. Cookiemark gestiona el clic en cualquier elemento con estos atributos.

Cookiemark también rellena elementos con los datos del propio visitante. Como lo hace el navegador, la página en sí es la misma para todos y se puede guardar en caché sin problema.

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

Una página de política de cookies es un buen sitio para el ID de consentimiento. Un visitante que pregunte qué aceptó puede indicarlo, y tú lo buscas en el registro de consentimientos.

La cookie de consentimiento

Cookiemark guarda la elección en una cookie propia llamada cookiemark_consent. Su valor es un JSON codificado para URL como este.

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

v es la versión de consentimiento y ts la hora de la elección en segundos. Una cookie con una versión de consentimiento anterior cuenta como si no hubiera elección, así que el banner vuelve a aparecer. Siempre que puedas, lee la elección a través de la API y no de la cookie, porque la API también tiene en cuenta las regiones y las señales de privacidad.

La API de Cookiebot

El código de temas y plugins escrito para Cookiebot suele consultar Cookiebot.consent.marketing o escuchar CookiebotOnAccept. Activa Responder a la API de JavaScript de Cookiebot en la pestaña Google y GTM, y Cookiemark responderá a ese código. No interviene si el script real de Cookiebot sigue en la página.

Los eventos CookiebotOnLoad, CookiebotOnConsentReady, CookiebotOnAccept, CookiebotOnDecline, CookiebotOnDialogInit, CookiebotOnDialogDisplay y CookiebotOnTagsExecuted se disparan en window. También se llama a las funciones de callback antiguas, como CookiebotCallback_OnAccept.