vanilla-cookieconsent

To ensure that user interactions with iframes (like clicking an 'Accept' button inside an iframe) are reflected in the CookieConsent state, use the onChange callback in iframemanager.run().

When an event occurs, you must retrieve the current accepted services for the relevant category, merge them with the newly changed services, and call CookieConsent.acceptService().

Note: The onChange callback requires iframemanager version 1.2.0 or higher.

const im = iframemanager();

im.run({
    onChange: ({ changedServices, eventSource }) => {
        if(eventSource.type === 'click') {
            const servicesToAccept = [
                ...CookieConsent.getUserPreferences().acceptedServices['analytics'],
                ...changedServices
            ];

            CookieConsent.acceptService(servicesToAccept, 'analytics');
        }
    },

    services: {
        youtube: {
            // ...
        },

        vimeo: {
            // ...
        }
    }
});

To support Google Tag Manager's consent mode, you must synchronize CookieConsent's state with Google's gtag function.

1. Initialize dataLayer and gtag: Define the dataLayer array and the gtag function globally.
2. Set Default Consent: Call gtag('consent', 'default', { ... }) with all relevant services set to 'denied' before any other dataLayer changes occur.
3. Map Services to Categories: Use CookieConsent.acceptedService(serviceName, categoryName) to check if a user has granted consent for a specific service within a category. This allows you to map CookieConsent categories (e.g., analytics, advertisement) to specific Google Consent Mode parameters (e.g., analytics_storage, ad_storage).
4. Update on Consent Changes: Use the onFirstConsent, onConsent, and onChange hooks in the CookieConsent.run() configuration to trigger a gtag('consent', 'update', { ... }) call whenever the user's preferences change.