如何为网站添加 Cookie 同意横幅

Cookie 同意横幅，就是有人第一次进入你的网站时出现的那条小提示，询问他们是否同意非必要的 Cookie 和追踪器。在 GDPR、UK PECR 规则和印度 DPDPA 这类法律之下，横幅只是整套系统露在外面的一角。真正的工作发生在下面：分析、广告像素和聊天插件等非必要脚本，在访客给出同意之前不得运行。

这个区别很重要，因为只显示一条提示、却让 Google Analytics 或 Meta 像素在页面加载时就触发的横幅并不合规。监管机构已经讲得很清楚：同意必须在追踪器加载之前取得，而不是之后。所以添加横幅要同时做到两件事：给出清晰的选择，并在做出选择之前拦截追踪器。

添加横幅最快的方式，是把一段脚本放进你 HTML 的 head 里。在 ConsentX 控制台中创建网站之后，你会拿到一段嵌入代码，它看起来就是引用 embed.js 并带上你站点密钥的一行代码。把它粘贴在 head 中尽量靠上的位置，让它先于你的其他脚本加载。

把它放在你的分析和广告代码上方。顺序很重要，因为 ConsentX 需要先注册，才能在访客做出决定之前拦住位于它下方的追踪器。只要你在控制台里正确地标记了追踪器，加载器就会在首次访问时让它们保持被拦截，并在同意被授予的那一刻放行。

这种做法适用于任何手写代码的网站、静态站点生成器，或任何你能控制 HTML head 的框架。它也是最干净的方法，因为中间没有插件这一层。

如果你的追踪器已经在 Google Tag Manager 中管理，你也可以通过 GTM 添加 ConsentX。新建一个自定义 HTML 代码，把嵌入代码粘贴进去，并把它设置为在“同意初始化”触发器上触发，让它先于其他一切运行。

更干净的做法，是把横幅与 Google Consent Mode 配合使用。不要让 GTM 代码随意触发，而是根据同意状态对它们加以限制，由 ConsentX 在访客做出选择时更新该状态。这样 GTM 自己就会在同意被授予之前拦住代码，而这正是监管机构期待的行为。

要避免一个常见错误：通过 GTM 加载了 ConsentX，而你的分析代码仍然在“所有页面”上触发、没有任何同意检查。如果追踪器没有被限制，横幅就只是装饰，你依然暴露在风险之中。

在 WordPress 上你不需要一个笨重的插件。最简单的路线，是通过页眉页脚代码插件或主题的自定义 head 代码字段，把嵌入代码加到主题的页眉中，让它在全站的 head 中加载。

如果你运行着 SEO 或缓存插件，就把这段代码放在不会被剥离或延迟加载的位置，因为延迟加载同意加载器可能让追踪器在它初始化之前溜过去。添加之后，清空所有页面缓存，让访客拿到新的 head 标记。

WordPress 网站常常同时通过多个插件加载追踪器，所以在依赖横幅之前，先用控制台的追踪器发现功能找出每一个脚本并给它打上标记。

在 Shopify 上，编辑 theme.liquid，把嵌入代码粘贴到 head 元素内靠近顶部的位置，即可把它加入你的主题。Shopify 主题会加载若干第一方脚本和应用脚本，所以把加载器放在 head 中靠上的位置很重要。

Shopify 也为店面提供了自己的客户隐私与同意 API。在可能的情况下，把 ConsentX 接入该信号，让 Shopify 原生像素与你的其他追踪器一样尊重访客的选择。用一次结账流程做测试，因为结账页面有时会加载店面页面不会加载的脚本。

测试是大多数团队跳过的一步，而它恰恰决定了你是否真的合规。在一个全新的隐私浏览窗口中打开你的网站，然后打开浏览器开发者工具，在页面加载时观察 Network 标签页。在你点击横幅上的任何东西之前，你应该看不到任何指向分析或广告域名的请求。

接着，点击“拒绝”并重新加载。追踪器应当仍然不出现，Application 或 Storage 标签页里也不应出现任何营销 Cookie。然后点击“接受”，确认追踪器现在会加载、Cookie 会出现。如果追踪器在你做出选择之前就触发了，那么要么脚本在 head 中放得太靠下，要么该追踪器没有被标记为需要拦截。

在几种关键页面类型上重复这个测试，包括你的首页、一个产品页或内容页，以及任何带有聊天插件或嵌入视频的页面，因为这些页面往往会引入额外的第三方脚本。