如何使用requirejs正确实施Cookiebot？

如何解决如何使用requirejs正确实施Cookiebot？

我已经购买了Cookiebot，因此我的网站符合GDPR要求，但是在实施时遇到了问题。如果我按照他们的教程逐步进行所有操作，并将此脚本放在首位，则可能可行。（我隐藏了我的出价代码）

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

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

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。这是我完整的源代码：

我首先需要加载

<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,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调用执行。

任何想法我该怎么办？我变得绝望了。他们的社区论坛没什么用。

解决方法

您需要使用他们的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模块，则会触发原始的Google Analytics（分析）模块功能（用于设置与GA相关的Cookie）。如果用户未通过Cookiebot面板接受它，则GA模块将无法运行。

更新：

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

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

如何使用requirejs正确实施Cookiebot？

如何解决如何使用requirejs正确实施Cookiebot？

解决方法

相关推荐