Magento Question posted in
The official documentation can be found here.

How to properly implement Cookiebot with requirejs? – Magento

I have bought Cookiebot so my site is GDPR compliant but I have an issue with implementing it. If I do everything step by step acording to their tutorial and put this script as the very first in the head it probably works. (I hid my cbid code)

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="my-code" data-blockingmode="auto" type="text/javascript"></script>

I can’t see cookies in Application tab in dev tools, but it also blocks a lot of scripts including ones, that do not set any cookies like owlCarousel etc. The thing I did to combat this was that I put this line in my require.js config:

onNodeCreated: function(node, config, name, url){
            node.setAttribute("data-cookieconsent", "ignore");          
        }
    }

so every module, that requirejs dynamically calls and puts in the should be ignored by cookiebot. However that introduces new problem. On some sections of my web, an error started to appear:

Uncaught Error: Mismatched anonymous define() module: function

It’s an error from the very first main.js script that is loaded with require and which loads all other scripts. As far as I know I do not call any anonymouse defines functions that should have collisions. I don’t know how to deal with it. Here I saw someone with this problem https://support.cookiebot.com/hc/en-us/community/posts/360007620760-RequireJs-Error-with-Magento-2-2 and Community Supporter suggests an offical guide here: https://support.cookiebot.com/hc/en-us/articles/360015039559-Installing-Cookiebot-in-Magento-2-3-4 I tried to follow the exact same steps but I do not have magento, so it differs in step two. What I did was load the cookiebot using requirejs and added cookiebot as a basic dependency so it loads everytime on every site. The script loads, script are working, but it seems like no cookies are blocked. Nothing changes if I allow or deny all cookies. So I am constantly jumping between these two issues. Either I have cookiebot outside requirejs and it collides with requirejs or I load it using requirejs and it does not correctly block my cookies. Here are my complete source codes for it:

I load require first in head

<script 
id="require-data-host"
data-main="main"
data-cookieconsent="ignore"
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" 
integrity="sha256-1fEPhSsRKlFKGfK3eO710tEweHh1fwokU5wFGDHO+vg=" 
crossorigin="anonymous">
</script>

Then I configure it

<script data-cookieconsent="ignore">
requirejs.config({
    "waitSeconds": 0,
    "paths": {
        "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min",
        "cookiebot": "https://consent.cookiebot.com/uc.js?cbid=my-code",
        <? while _template.module_source ?>
            <? _.name jstr ?>: "<? ref(_) _name=_.name link:version=_ ?>"<?if not _last?>,<?/if?>
        <? /while ?>
    },
    
    "map": {
        //maps noconflict jquery to regular jquery, so there are no conflicts using the "$"
        "*" : {
            "jquery" : "jquery-noconflict"
        },
        "jquery-noconflict" : {
            "jquery" : "jquery"
        }
    },
    
    deps: ['cookiebot', 'domReady!'],
    
    onNodeCreated: function(node, config, name, url){
        if (!(name == 'cookiebot')) {
            node.setAttribute("data-cookieconsent", "ignore");
        } else {
            node.setAttribute("data-blockingmode", "auto");
        }
    }
    
});
</script>

my main.js

    var domScanMap = {
        "init-remote-login": ".e24-login",
        "navbar": ".js-nav",
         ...
        "jsLoader": ".js-loader"
    };

var loaded = [];

var moduleInDom = function(moduleName) {
    require([moduleName], function(module) {
        loaded.push(module);
        if (module && module.initOnDomScan) {
            if (typeof module != 'undefined') {
                module.initOnDomScan();
            }
        }
        $(document.body).addClass('js-module-loaded-' + moduleName);
    });
    delete domScanMap[moduleName];
};

function initModules() {
    for (var i = 0, module; i < loaded.length; i++) {
        module = loaded[i];
        if (typeof module != 'undefined') {
            module.updateOnDomScan && module.updateOnDomScan(); 
        }
    }
    for (var moduleName in domScanMap) {
        var selector = domScanMap[moduleName];
        if ($(selector).length) {
            moduleInDom(moduleName);
        }
    }
}

domReady(initModules);
$(document).on({
    "tdi:ajax:done": initModules
});

Basically what main.js is doing it finds classes in DOM which have assigned script names to them and then loads them by the script name and calls initOnDomScan() function which I implement differently in each module. UpdateOnDomScan() is executed with ajax calls.

Any ideas what can I do? I am becoming desperate. Their community forum is not much of a use.

Tags:

2

Answers


  1. 0

    You need to use their Javascript SDK. You use it to check if you should set or not specific cookie in your module.

    The Cookiebot script should now load and construct a client-side
    JavaScript object named Cookiebot / CookieConsent which exposes public
    properties, methods, events and callback functions. You can find an
    overview of these in our Developer Documentation:
    https://www.cookiebot.com/en/developer/.

    Example of usage from
    https://github.com/customgento/module-cookiebot-m2/blob/master/view/frontend/web/js/google-analytics-mixin.js

            window.addEventListener('CookiebotOnAccept', function () {
            if (Cookiebot.consent.statistics) {
                parentMethod(config);
            }
        });
        if (typeof Cookiebot === 'undefined') {
            return;
        }
        if (Cookiebot.consent.statistics) {
            parentMethod(config);
        }

    Here if user agree to use statistics cookies module will trigger original google analytics module function (that sets GA related cookies). If user didn’t accept it via Cookiebot panel GA module won’t run.

    Login or Signup to reply.
  2. 0

    Update:

    I got an answer from CookieBot!

    You need to remove the blockingmode="auto" and manually define the categories of your scripts.

    Then you won’t see the error again!

    I hope this is still of some help to you or anyone else.

    Original Answer

    I had the same problem and tracked it down to the invokation of the text! plugin. If i avoid using it, everything works.

    So insteadof:

    requirejs(["text!/abs/path/to/icons.svg", "core"], function(svgSprite, core) {
    core.init(svgSprite);
});

    i used this construct

    (function(){
    function init(svgSprite) {
        requirejs(["core"], core => {
            core.init(svgSprite);
        });
    }
    fetch('/abs/path/to/icons.svg').then(response => {
        if (response.ok) {
            response.text().then(init);
        } else {
            console.error(response.statusText);
            init("");
        }
    }).catch(error => {
        console.error(error);
        init("");
    });
}());

    Ugly but this way i can dispatch my app because i dont need the textplugin anywhere else.

    I reported this at cookiebot:
    https://support.cookiebot.com/hc/en-us/community/posts/360010666180-Cookiebot-breaks-requirejs-implementation

    But to be honest: i have no idea if this is a cookiebot issue or an issue with requirejs or the text-plugin itself.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search