Eventos

En lugar de consultar las cookies una y otra vez, suscríbete a eventos. Cookiesh emite los mismos eventos de tres formas, para que puedas escucharlos allí donde esté tu código:

• La API de JavaScript: cookiesh.on(name, handler).
• Eventos del DOM en window, con el prefijo cookiesh:.
• Envíos al dataLayer para Google Tag Manager.

Suscripción

on(event: string, handler: (detail) => void): () => void
off(event: string, handler: (detail) => void): void

on() devuelve una función que elimina el listener:

import { cookiesh } from '@cookiesh/js';

const stop = cookiesh.on('consent:updated', ({ categories, changed }) => {
  if (changed.includes('analytics')) analytics.setEnabled(categories.analytics);
});

// Más adelante, por ejemplo al desmontar un componente
stop();

Si te suscribes a consent:ready después de que se haya emitido, el handler se ejecuta al instante con el estado actual. No tienes que preocuparte por el orden de carga.

Referencia de eventos

Evento	Cuándo se emite	Detalle
consent:ready	Una vez por página, cuando se conoce el estado del consentimiento	{ categories, method, region }
consent:updated	Cada vez que el visitante o tu código guardan una nueva elección	{ categories, changed, method, consentId }
banner:shown	Aparece el banner de primera capa	{ bannerVersion, region }
banner:hidden	El banner se cierra, con o sin elección	{ reason }
preferences:opened	Se abre el centro de preferencias	{}
preferences:closed	Se cierra el centro de preferencias	{ saved }
script:unblocked	Cookiesh ejecuta un script o carga un iframe que tenía retenido	{ category, src }

En estas cargas útiles:

• categories es un objeto con un booleano por categoría: { necessary, preferences, analytics, marketing }.
• changed enumera las categorías cuyo valor ha cambiado, como ['analytics'].
• method es default, banner, preferences, api o gpc.
• reason es accepted, rejected, saved o closed.

Eventos del DOM

Cada evento también se emite en window como un CustomEvent, algo práctico para los scripts que no importan el paquete:

<script>
  window.addEventListener('cookiesh:consent:updated', (event) => {
    console.log('Nueva elección', event.detail.categories);
  });
</script>

Google Tag Manager

Cookiesh envía dos eventos al dataLayer, para que puedas crear activadores a partir de ellos:

{
  event: 'cookiesh_consent_ready',
  cookiesh: { necessary: true, preferences: false, analytics: true, marketing: false, method: 'banner' }
}

{
  event: 'cookiesh_consent_updated',
  cookiesh: { necessary: true, preferences: true, analytics: true, marketing: false, method: 'preferences' }
}

Crea un activador Custom Event con cookiesh_consent_updated y una Data Layer Variable para cookiesh.marketing, de modo que las etiquetas que no son de Google solo se activen tras el consentimiento. Las etiquetas de Google no lo necesitan: leen las señales de Consent Mode que Cookiesh envía automáticamente.

Eventos en el servidor

Estos eventos se ejecutan en el navegador del visitante. Para recibir los cambios de consentimiento en tu servidor, por ejemplo para sincronizarlos con un CRM, usa los webhooks.