Handling Cookie Consent Depending on the Provider

🍪 Handling Cookie Consent Depending on the Provider

In our project framework (see the article How to introduce cookies for reference), we centralize cookie consent logic in a dedicated utility file: handleCookiesConsent.js. This is key for decoupling provider-specific logic from our handler system, ensuring consistent behavior across services like HubSpot or Intercom.

Depending on the cookie provider, Cookiebot** or CookieYes, the implementation of this file varies.

---

🔹 Cookiebot Integration

Cookiebot exposes a global object Cookiebot, and a CookiebotOnConsentReady event that is fired once the consent banner logic is initialized.

📄 handleCookiesConsent.js

export function handleCookiesConsent(emitter, debug) {
    const processConsent = () => {
        try {
            if (typeof Cookiebot !== "undefined" && Cookiebot.consented) {
                emitter.emit("cookies:consentGiven");
            }
        } catch (e) {
            debug && console.warn("Cookiebot consent processing failed:", e);
        }
    };

    if (typeof Cookiebot !== "undefined") {
        processConsent();
    }

    window.addEventListener("CookiebotOnConsentReady", processConsent);
}

✅ Consent status check

export function isCookieConsentGranted() {
    return typeof Cookiebot !== "undefined" && Cookiebot.consented === true;
}

---

🔸 CookieYes Integration

CookieYes provides a method getCkyConsent() that returns an object with consent data, but it may not be available immediately. Additionally:

⚠️ Domain-specific behavior

CookieYes requires that you explicitly register all domains where the banner should appear. That means:

• In development/staging, consent might not be handled by default.
• You must bypass the check for non-production environments manually.

We achieve this with domain checks and the VITE_BYPASS_COOKIE_CONSENT flag y the repo’s .env files.

VITE_BYPASS_COOKIE_CONSENT=true

📄 handleCookiesConsent.js

let consentAlreadyEmitted = false;

export function handleCookiesConsent(emitter, debug) {
    const hostname = window.location.hostname;
    const isDev = hostname === 'preludedevenv.wpenginepowered.com';
    const isProd = hostname === 'preludeprod.wpenginepowered.com';

    if ((import.meta.env.VITE_BYPASS_COOKIE_CONSENT === 'true' || isDev || isProd) && !consentAlreadyEmitted) {
        consentAlreadyEmitted = true;
        emitter.emit("cookies:consentGiven");
        debug && console.log("Consent bypassed in development/production");
        return;
    }

    const processConsent = () => {
        try {
            if (typeof getCkyConsent !== "function") {
                debug && console.warn("getCkyConsent is not yet available");
                return;
            }

            const data = getCkyConsent();
            debug && console.log("CookieYes consent data:", data?.categories?.analytics);

            if (data?.categories?.analytics === true && !consentAlreadyEmitted) {
                consentAlreadyEmitted = true;
                emitter.emit("cookies:consentGiven");
                clearInterval(retryInterval);
            } else if (!data?.categories?.analytics) {
                debug && console.log("Analytics consent not given");
            }
        } catch (e) {
            debug && console.warn("Error processing CookieYes consent:", e);
        }
    };

    if (typeof getCkyConsent === "function") {
        processConsent();
    }

    window.addEventListener("cookieyes_consent_update", processConsent);

    const retryInterval = setInterval(() => {
        if (typeof getCkyConsent === "function") {
            processConsent();
        }
    }, 1000);

    setTimeout(() => clearInterval(retryInterval), 10000);
}

✅ Consent status check

export function isCookieConsentGranted() {
    const hostname = window.location.hostname;
    const isDev = hostname === 'preludedevenv.wpenginepowered.com';
    const isProd = hostname === 'preludeprod.wpenginepowered.com';

    if (isDev || isProd || import.meta.env.VITE_BYPASS_COOKIE_CONSENT === 'true') {
        return true;
    }

    try {
        if (typeof getCkyConsent !== "function") return false;
        const data = getCkyConsent();
        return data?.categories?.analytics === true;
    } catch {
        return false;
    }
}

---

🧠 How to Use This in Handlers (e.g., HubSpot)

Whether you’re using Cookiebot or CookieYes, your handlers should rely on the shared isCookieConsentGranted() method.

Example: Conditional logic based on consent

const canUseHubspot = isCookieConsentGranted();
if (!canUseHubspot) return;

// Later in the code:
if (canUseHubspot) {
    // Load HubSpot forms or Intercom chat
}

This ensures your scripts only load if analytics cookies have been accepted, and you avoid errors or data leaks in privacy-sensitive regions.

---

🫙 Bonus: What’s Membrillo Got To Do With It?

As mentioned in our main guide (“How to introduce cookies”, lovingly nicknamed “el artículo del membrillo” internally), we strongly recommend:

• Emitting cookies:consentGiven only once.
• Keeping environment logic outside of your handlers.
• Using the emitter as the glue between cookie logic and service handlers.

If you follow that pattern, you’ll avoid spaghetti JS and have a deliciously modular system 😋.