Javascript 如何使用requirejs正确实现Cookiebot？

我买了Cookiebot，所以我的网站符合GDPR，但我在实现它时遇到了问题。如果我按照他们的教程一步一步地做每件事，并把这个脚本作为第一个放在头上，它可能会起作用。（我隐藏了我的cbid代码）

因此，cookiebot应该忽略requirejs动态调用并放入的每个模块。然而，这带来了新的问题。在我的网站的某些部分，开始出现错误：

Uncaught Error: Mismatched anonymous define() module: function

这是第一个main.js脚本中的一个错误，该脚本加载require并加载所有其他脚本。据我所知，我不调用任何anonymouse定义的应该有冲突的函数。我不知道怎么处理它。在这里，我看到有人有这个问题，社区支持者建议这里有一个官方指南：我试图遵循完全相同的步骤，但我没有magento，所以第二步有所不同。我所做的是使用requirejs加载cookiebot，并添加cookiebot作为基本依赖项，以便它在每个站点上每次都加载。脚本已加载，脚本正在运行，但似乎没有阻止任何cookie。如果我允许或拒绝所有cookie，则不会发生任何更改。所以我经常在这两个问题之间跳来跳去。要么我在requirejs之外有cookiebot，它与requirejs冲突，要么我使用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>

requirejs.config({
“等待秒”：0，
“路径”：{
“jquery”：”https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min",
“cookiebot”：https://consent.cookiebot.com/uc.js?cbid=my-代码“，
: "",
},
“地图”：{
//将noconflict jquery映射到常规jquery，因此使用“$”不会发生冲突
"*" : {
“jquery”：“jquery无冲突”
},
“jquery无冲突”：{
“jquery”：“jquery”
}
},
副部长：['cookiebot'，'domReady！']，
onNodeCreated:函数（节点、配置、名称、url）{
如果（！（名称=='cookiebot'））{
setAttribute（“数据cookieconsent”、“忽略”）；
}否则{
setAttribute（“数据块模式”、“自动”）；
}
}
});

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

var domScanMap={
“初始化远程登录”：“.e24登录”，
“导航栏”：“.js导航”，
...
“jsLoader”：“.js loader”
};
加载的var=[]；
var moduleInDom=函数（moduleName）{
要求（[moduleName]，函数（模块）{
加载。推送（模块）；
if（module&&module.initOnDomScan）{
if（模块类型！=“未定义”）{
module.initOnDomScan（）；
}
}
$（document.body）.addClass（'js-module-loaded-'+moduleName）；
});
删除domScanMap[moduleName]；
};
函数initModules（）{
对于（变量i=0，模块；i

基本上main.js是这样做的：它在DOM中查找已为其分配脚本名的类，然后按脚本名加载它们，并调用initOnDomScan（）函数，我在每个模块中以不同的方式实现该函数。UpdateOnDomScan（）通过ajax调用执行

---

你知道我能做什么吗？我变得绝望了。他们的社区论坛没有多大用处。

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

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

来自的用法示例

---

在这里，如果用户同意使用统计cookies模块，将触发原始的谷歌分析模块功能（设置GA相关cookies）。如果用户未通过Cookiebot面板接受，GA模块将不会运行。

更新：

我从CookieBot那里得到了答案

您需要删除

blockingmode=“auto”

并手动定义脚本的类别

这样你就不会再看到错误了

我希望这仍然对你或其他人有所帮助

原始答案

我也遇到了同样的问题，一直到文本的调用！插件。如果我避免使用它，一切都会正常

因此，取代：

requirejs（[“text！/abs/path/to/icons.svg”，“core”]，函数（svgSprite，core）{
core.init（svgSprite）；
});

我用了这个结构

（函数（）{
函数初始化（svgSprite）{
requirejs（[“core”]，core=>{
core.init（svgSprite）；
});
}
获取（'/abs/path/to/icons.svg'）。然后（响应=>{
if（response.ok）{
response.text（）.then（init）；
}否则{
控制台。错误（响应。状态文本）；
初始值（“”）；
}
}).catch（错误=>{
控制台错误（error）；
初始值（“”）；
});
}());

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

我在cookiebot报道了这一点：

---

但老实说：我不知道这是cookiebot问题，还是requirejs或文本插件本身的问题。

非常感谢您提出这个非常有用的问题！“onNodeCreated”钩子保存了我的***嗯，不幸的是我犯了一个错误，我的应用程序仍然无法工作，因为cookiebot破坏了requirejs实现。

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

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

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