如何用需求正确地实现Cookiebot？

Question

我已经购买了Cookiebot，所以我的网站是符合GDPR的，但我有一个实现它的问题。如果我按照他们的教程一步一步地做每件事，并把这个脚本作为第一个在头脑中，它可能会工作。(我藏了我的cbid代码)

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

在开发工具中，我看不到应用程序选项卡中的cookie，但它也阻止了许多脚本，其中包括不设置像owlCarousel等任何cookie的脚本。我所做的就是将这一行放在require.js配置中：

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

因此，每个模块，即需要动态调用和放入的模块，都应该被cookiebot忽略。然而，这带来了新的问题。在我网站的某些部分，出现了一个错误：

Uncaught Error: Mismatched anonymous define() module: function

这是第一个装载了require并加载所有其他脚本的main.js脚本中的一个错误。据我所知，我没有称任何anonymouse定义了应该具有冲突的函数。我不知道该怎么处理。在这里，我看到了一个有这个问题的人，https://support.cookiebot.com/hc/en-us/community/posts/360007620760-RequireJs-Error-with-Magento-2-2和Community支持者在这里提出了一个正式的指南：https://support.cookiebot.com/hc/en-us/articles/360015039559-Installing-Cookiebot-in-Magento-2-3-4，我试图遵循完全相同的步骤，但是我没有magento，所以在第二步中它是不同的。我所做的是使用requirejs加载cookiebot，并将cookiebot作为一个基本的依赖项，因此它每次都在每个站点上加载。脚本加载，脚本工作，但似乎没有任何cookie被阻止。如果我允许或拒绝所有cookie，什么都不会改变。因此，我经常在这两个问题之间穿插。要么我在外面的需求中有cookiebot，并且它与需求发生了冲突，要么我使用requirejs加载它，但是它没有正确地阻止我的cookie。以下是我的完整源代码：

我把要求放在头上

<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>

然后我配置它

<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>

我的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
});

基本上，main.js正在做的事情是，它在DOM中找到类，这些类为它们分配了脚本名，然后通过脚本名加载它们，并调用initOnDomScan()函数，我在每个模块中实现了这个函数。UpdateOnDomScan()是通过ajax调用执行的。

我能做些什么呢？我正变得绝望。他们的社区论坛用处不大。

Answer 1

您需要使用他们的Javascript。您可以使用它来检查是否应该在模块中设置特定的cookie。

Cookiebot脚本现在应该加载并构造一个名为Cookiebot / CookieConsent的客户端JavaScript对象，该对象公开公共属性、方法、事件和回调函数。您可以在我们的开发人员文档中找到这些内容的概述：https://www.cookiebot.com/en/developer/。

来自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);
        }

在这里，如果用户同意使用统计cookie模块将触发原来的谷歌分析模块功能(设置GA相关的cookie)。如果用户不接受它通过Cookiebot面板GA模块将无法运行。

Answer 2

更新：

我从CookieBot那里得到了答案！

您需要删除blockingmode="auto"并手动定义脚本的类别。

那你就不会再看到错误了！

我希望这对你或其他任何人都有帮助。

原始答案

我也有同样的问题，并追踪到它的引用文本！插件。如果我不使用它，一切都会正常的。

所以，他没有：

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

我用了这个构造

(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("");
    });
}());

丑陋，但这样，我可以发送我的应用程序，因为我不需要在其他地方的文本插件。

我在cookiebot：https://support.cookiebot.com/hc/en-us/community/posts/360010666180-Cookiebot-breaks-requirejs-implementation上报道了这一点

但老实说:我不知道这是一个烹饪机器人问题，还是与需求或文本插件本身的问题。