2

我已经购买了 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 的脚本。我为解决这个问题所做的事情是我将这一行放在我的要求中.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, 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 调用执行。

有什么想法我能做什么?我变得绝望了。他们的社区论坛没有多大用处。

4

2 回答 2

0

更新:

我得到了 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 或文本插件本身的问题。

于 2021-04-22T12:06:01.907 回答
0

您需要使用他们的 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);
        }

此处如果用户同意使用统计cookies模块将触发原始谷歌分析模块功能(即设置GA相关cookies)。如果用户没有通过 Cookiebot 面板接受它,GA 模块将不会运行。

于 2020-10-01T20:59:08.263 回答