JavaScript: Window Events Overview

Consent Studio CMP window events overview for JavaScript

Consent Studio dispatches a set of CustomEvents on window throughout the banner's lifecycle and every time the consent state changes. Listen to these if you want to run code in response to what the visitor does. It's the recommended alternative to polling the consent state.

Getting started

All events are dispatched on window, so you can subscribe to them with a standard addEventListener call:

window.addEventListener('consent-studio__updated', (event) => { 
   console.log('Consent changed', event.detail); 
}); 

Every event name is prefixed with consent-studio__. Events are grouped into two categories:

• Lifecycle events — fired as the banner initializes

• Consent state events — fired whenever the consent state is saved

Lifecycle events

Banner initialized

Fired once on page load, before Consent Studio starts processing any existing consent. Useful as an "as early as possible" hook for code that wants to run before the banner renders.

window.addEventListener('consent-studio__init', () => { 
   // Consent Studio is initializing 
}); 

No prior consent

Fired once on page load when the visitor has no existing consent cookie — i.e. the banner is about to be shown for the first time. Useful for analytics that want to track how many sessions start without prior consent.

window.addEventListener('consent-studio__empty', () => { 
   // Visitor arrived without an existing consent choice 
}); 

Consent state events

Consent updated

Fired every time the consent state is saved, regardless of how the change was triggered (visitor interaction, implicit consent, GPC, or the JavaScript API). This is the main event to listen to when you want to react to any consent change.

The event.detail object contains:

• categories — array of the currently granted categories

• source — how the change was triggered:

  • interactive — the visitor clicked a button in the banner

  • parsed — consent was restored from an existing cookie on page load

  • implicit — implicit consent was auto-granted

  • gpc — the visitor's Global Privacy Control signal triggered the change

  • auto — an automatic decision (e.g. scanner mode)

  • api — the change was made via window.consentStudio.api.consentState write methods

/** 
 * @param {CustomEvent<{categories: string[], source: string}>} event 
 */ 
window.addEventListener('consent-studio__updated', (event) => { 
   const { categories, source } = event.detail; 
   console.log('Consent changed to', categories, 'via', source); 
}); 

Functional consent granted

Fired when the consent state is saved and functional consent is included in the new state. The event.detail object contains bannerInstance (the Consent Studio instance) and categories (the full array of currently granted categories).

/** 
 * @param {CustomEvent<{bannerInstance: object, categories: string[]}>} event 
 */ 
window.addEventListener('consent-studio__updated__granted__functional', (event) => { 
   // Functional consent is now granted 
}); 

Analytics consent granted

Fired when the consent state is saved and analytics consent is included in the new state.

/** 
 * @param {CustomEvent<{bannerInstance: object, categories: string[]}>} event 
 */ 
window.addEventListener('consent-studio__updated__granted__analytics', (event) => { 
   // Analytics consent is now granted 
}); 

Marketing consent granted

Fired when the consent state is saved and marketing consent is included in the new state.

/**
 * @param {CustomEvent<{bannerInstance: object, categories: string[]}>} event
 */ 
window.addEventListener('consent-studio__updated__granted__marketing', (event) => { 
   // Marketing consent is now granted 
}); 

Functional consent denied

Fired when the consent state is saved and functional consent is not included in the new state.

/**
 * @param {CustomEvent<{bannerInstance: object, categories: string[]}>} event
 */ 
window.addEventListener('consent-studio__updated__denied__functional', (event) => { 
   // Functional consent is now denied 
}); 

Analytics consent denied

Fired when the consent state is saved and analytics consent is not included in the new state.

/**
 * @param {CustomEvent<{bannerInstance: object, categories: string[]}>} event
 */ 
window.addEventListener('consent-studio__updated__denied__analytics', (event) => { 
   // Analytics consent is now denied 
}); 

Marketing consent denied

Fired when the consent state is saved and marketing consent is not included in the new state.

/**
 * @param {CustomEvent<{bannerInstance: object, categories: string[]}>} event
 */ 
window.addEventListener('consent-studio__updated__denied__marketing', (event) => { 
   // Marketing consent is now denied 
});