Événements

Au lieu d’interroger les cookies, abonnez-vous aux événements. Cookiesh émet les mêmes événements de trois façons : vous pouvez donc les écouter là où se trouve votre code.

• L’API JavaScript : cookiesh.on(name, handler).
• Des événements DOM sur window, préfixés par cookiesh:.
• Des envois dans le dataLayer pour Google Tag Manager.

S’abonner

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

on() renvoie une fonction qui supprime l’écouteur :

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

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

// Plus tard, par exemple au démontage d'un composant
stop();

Si vous vous abonnez à consent:ready après son déclenchement, le gestionnaire s’exécute immédiatement avec l’état actuel. Inutile de vous soucier de l’ordre de chargement.

Référence des événements

Événement	Déclenchement	Données
consent:ready	Une fois par page, quand l’état du consentement est connu	{ categories, method, region }
consent:updated	Chaque fois que le visiteur ou votre code enregistre un nouveau choix	{ categories, changed, method, consentId }
banner:shown	Le premier niveau du bandeau s’affiche	{ bannerVersion, region }
banner:hidden	Le bandeau se ferme, avec ou sans choix	{ reason }
preferences:opened	Le centre de préférences s’ouvre	{}
preferences:closed	Le centre de préférences se ferme	{ saved }
script:unblocked	Cookiesh exécute un script ou charge une iframe qu’il retenait	{ category, src }

Dans ces données :

• categories est un objet contenant un booléen par catégorie : { necessary, preferences, analytics, marketing }.
• changed liste les catégories dont la valeur a changé, comme ['analytics'].
• method vaut default, banner, preferences, api ou gpc.
• reason vaut accepted, rejected, saved ou closed.

Événements DOM

Chaque événement est aussi émis sur window sous forme de CustomEvent, ce qui est pratique pour les scripts qui n’importent pas le package :

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

Google Tag Manager

Cookiesh envoie deux événements dans le dataLayer, sur lesquels vous pouvez créer des déclencheurs :

{
  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' }
}

Créez un déclencheur Custom Event sur cookiesh_consent_updated et une Data Layer Variable pour cookiesh.marketing afin de ne déclencher les balises non Google qu’après consentement. Les balises Google n’en ont pas besoin : elles lisent les signaux Consent Mode que Cookiesh envoie automatiquement.

Événements côté serveur

Ces événements s’exécutent dans le navigateur du visiteur. Pour recevoir les changements de consentement sur votre serveur, par exemple pour les synchroniser avec un CRM, utilisez les webhooks.