如何在用户接受Cookie后通过JS加载Cloudflare Insights并传递data-cf-beacon参数

要让动态创建的脚本正确加载Cloudflare Insights并传递data-cf-beacon配置，你需要在创建<script>元素时，不仅设置src，还要添加defer属性和data-cf-beacon自定义属性——这两个都是原嵌入代码里的关键部分，缺少的话脚本无法正常获取配置。

修改后的函数如下：

function loadCloudflareInsights() {
    const script = document.createElement('script');
    script.src = 'https://static.cloudflareinsights.com/beacon.min.js';
    script.defer = true; // 保持原脚本的defer异步加载行为
    // 设置data-cf-beacon属性，传入你的token配置
    script.setAttribute('data-cf-beacon', '{"token": "001e2db377654356d03acf35f1e5a"}');
    document.head.appendChild(script);
}

关键说明： #

• defer属性：确保脚本在文档解析完成后异步加载，和原嵌入代码的行为一致，避免阻塞页面渲染。
• data-cf-beacon属性：Cloudflare Insights的脚本会读取这个属性里的JSON配置来识别你的站点，必须在脚本插入DOM前设置好，否则脚本初始化时无法获取到token。

你也可以用dataset属性来设置自定义数据（更符合现代JS规范），效果完全相同：

script.dataset.cfBeacon = JSON.stringify({"token": "001e2db377654356d03acf35f1e5a"});

最后，将这个函数绑定到用户接受Cookie的操作上（比如“同意Cookie”按钮的点击事件），就能实现仅在用户授权后加载统计脚本的需求。

内容的提问来源于stack exchange，提问作者Matthijs