Conditionally loading code in bundles

Introduction

Since Cookiebot CMP blocks resources to prevent tracking from occurring, the use of bundles inherently creates difficulties.
If a bundle contains both vitally necessary and non-essential parts that require consent, this resource will be blocked prior consent. As a result, far more features than the ones that utilize optional tracking will be disabled, possibly having both functional and aesthetical ramifications.

This leaves us with the following conundrum: Do we block the resource prior consent and accept that the website will not be fully functional without the end-user accepting all cookies? Or do we load the resource regardless of whether the user accepts the tracking technology included in the bundle?
Both options are arguably equally bad. The choice between rendering our solution meaningless or “breaking” the website is for most users reason enough to avoid implementing a consent solution at all.

Fortunately, there are also other solutions. For example, all optional scripts that require consent can be moved to a tag manager solution where we can apply conditional loading.

Alternatively, we can add Cookiebot logic to the bundle instead of blocking at the macro level, we can block at the micro level.
Blocks or even single lines of code can be wrapped in code to ensure that they only load if consent was given, or Cookiebot CMP didn’t load at all.
This means that the resource will load as normal if Cookiebot CMP isn’t implemented, or with restrictions if it is and consent hasn’t been given (yet).

We will be focusing on this last approach in this document.

Advantages:

• Works regardless of whether Cookiebot CMP is implemented
• Allows critical functionality to load while preventing unauthorized tracking from occurring
• Relatively easy to implement
• Low risk

Disadvantages:

• Can be time consuming to implement
• Requires access to the raw code prior bundling
• Requires manual updates whenever new scripts are added

Implementation

The code needed to block trackers on the micro level is relatively compact and simple:

(function (w, c, o, a) {
    const cookiebotEnabled = w[c] ? true : false,
        consent = w[c] ? w[c][o][a] : false;
    if (cookiebotEnabled)
        if (!consent) return;

    // Do something that requires consent

})(window, 'Cookiebot', 'consent', 'marketing')

In essence, we wrap the code that will require consent within a self-executing function to which we pass the required category. In the above example the code block needs consent for marketing cookies to load (provided that Cookiebot is implemented).

If Cookiebot is implemented but consent has not been given, both the first and second if-statements are “true” and as a result we escape the function and continue to load the code outside this function.

If Cookiebot is not implemented the first if-statement fails, meaning the second if-statement never even gets evaluated and we continue processing the code within the function.
The same applies to cases where Cookiebot CMP is implemented, and consent has been given. In such a case, the first if-statements returns “true” and the second returns “false”, allowing us to continue into the function.

The last value on the bottom line determines which consent category is required.

If you need the code to load after consent is given without reloading the entire bundle, you could do something like this:

function I_require_consent(w, c, o, a) {
    const cookiebotEnabled = w[c] ? true : false,
        consent = w[c] ? w[c][o][a] : false
    if (cookiebotEnabled)
        if (!consent) return;
    // Do something that requires consent
}

if ("Cookiebot" in window) {
    window.addEventListener('CookiebotOnConsentReady', () => {
        I_require_consent(window, 'Cookiebot', 'consent', 'preferences');
    })
} else {I_require_consent(window, 'Cookiebot', 'consent', 'preferences')}

Here you wrap the code which requires consent in a named function. The function containing the code which requires consent will then load in the following manner:

• If Cookiebot CMP is not implemented: The named function is called immediately.
• If Cookiebot CMP is implemented: An event listener waits for Cookiebot CMP to announce that it “knows” the end-user’s consent choices and calls the function at this point.

In the above case, the function is called “I_require_consent” and it is either called immediately or if consent has been given for cookies in the “preferences” category.
You can assign a function name of your own choosing. Please ensure that you use the same function name in all three places.

You can obviously create multiple instances of the above function with a unique name for each which you then all call in one go. For example:

function loadAfterConsent() {
    I_require_consent(window, 'Cookiebot', 'consent', 'preferences');
    I_also_require_consent(window, 'Cookiebot', 'consent', 'statistics');
    And_me_too(window, 'Cookiebot', 'consent', 'marketing');
}

if ("Cookiebot" in window) {
    window.addEventListener('CookiebotOnConsentReady', () => {
        loadAfterConsent();
    })
} else {
    loadAfterConsent();
}

A practical example

Create a “bundle” called myBundle.js and implement it on a test page.
Add the following content:

console.log("You'll always see me.");
(function (w, c, o, a) {
    const cookiebotEnabled = w[c] ? true : false,
        consent = w[c] ? w[c][o][a] : false
    if (cookiebotEnabled)
        if (!consent) return;
    console.log(`You'll only see me if you've accepted ${a} cookies using Cookiebot CMP.`);
})(window, 'Cookiebot', 'consent', 'statistics')
console.log("You'll see me too.");

In the console you should see “You’ll always see me.” And “You’ll see me too”, irrespective of whether Cookiebot CMP has been implemented or what consent choices you’ve made.

You’ll only see the text “You’ll only see me if you’ve accepted statistics cookies using Cookiebot CMP.” if Cookiebot CMP isn’t loaded, or if it is and the appropriate consent has been given.

Considerations

Ensuring the bundle doesn’t get blocked unintentionally

For this method to work as intended consistently, you should ensure that the bundle is allowed to run. It won’t matter what logic is defined inside the bundle if the bundle unintentionally gets flagged during a scan and subsequently blocked by Cookiebot’s automatic blocking feature.

You can choose one of the following methods to achieve this:

1. Mark up the bundle with data-cookieconsent="ignore"
2. Disable the automatic cookie blocking feature by removing data-blockingmode="auto"
   from the Cookiebot script tag.
3. Determine which trackers originate from the bundle and categorize them as “necessary” in the Cookiebot Manager.

We don’t recommend the 3^rd option (reclassifying). The composition of the bundle may change over time, which could mean the at the bundle would again be flagged and blocked prior consent in the future. Furthermore, classifying non-essential cookies as strictly necessary is a data privacy violation.

The 2^nd option requires you to ensure that resources that result in tracking are marked up prior consent.

In contrast, marking up the bundle to ensure it’ll be ignored will ensure that’ll always load, regardless of what cookies are currently set from it or in the future. Forcing the bundle to be ignored also allows you to keep the automatic cookie blocking feature in place.

If the primary goal is to ensure that the site never ends up in a broken state, while still maintaining the ease of use and security that the automatic blocking feature offers, the first option is the preferred method.

Maintenance

Since this method essentially exempts the bundle from being handled by the automatic cookie blocking feature, it will be your responsibility to ensure that any additions or changes to the bundle in the future don’t result in cookies being set without a website visitor’s consent.
Whenever you add scripts to the bundle which utilizes tracking, you need to remember to add the Cookiebot logic to ensure that tracking only occurs after consent has been given.

Furthermore, if you change the category of a cookie in the Cookiebot Manager you’ll need to ensure that the code is also updated in the bundle and only executes under the right circumstances.