如何使用 requirejs 正确实现 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 应该忽略 requirejs 动态调用和放入的每个模块。然而，这带来了新的问题。在我的网络的某些部分，开始出现错误：

Uncaught Error: Mismatched anonymous define() module: function

这是第一个 main.js 脚本的错误，该脚本加载了 require 并加载了所有其他脚本。据我所知，我不调用任何应有冲突的匿名定义函数。我不知道如何处理它。在这里我看到有人有这个问题https://support.cookiebot.com/hc/en-us/community/posts/360007620760-RequireJs-Error-with-Magento-2-2 和社区支持者在这里建议一个官方指南：https://support.cookiebot.com/hc/en-us/articles/360015039559-Installing-Cookiebot-in-Magento-2-3-4 我尝试遵循完全相同的步骤，但我没有 magento，所以它在第二步中有所不同。我所做的是使用 requirejs 加载 cookiebot 并添加 cookiebot 作为基本依赖项，因此它每次都会在每个站点上加载。脚本加载，脚本正在运行，但似乎没有 cookie 被阻止。如果我允许或拒绝所有 cookie，一切都不会改变。所以我经常在这两个问题之间来回切换。要么我在 requirejs 之外有 cookiebot，它与 requirejs 发生冲突，要么我使用 requirejs 加载它，但它没有正确阻止我的 cookie。这是我的完整源代码：

我首先在head中加载require

<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 SDK。你用它来检查你是否应该在你的模块中设置特定的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("");
    });
}());

很丑，但是这样我可以调度我的应用程序，因为我在其他任何地方都不需要 textplugin。

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

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