如何将 Cookie 同意横幅和 Cookie 政策添加到您的网站

2025-06-10

如何将 Cookie 同意横幅和 Cookie 政策添加到您的网站

在本指南中,我将向您展示如何快速向您的网站添加 cookie 同意横幅。

我们将使用CookieHub,它是最知名、最便捷的同意管理平台之一,符合 GDPR、LGPD 和 CCPA 标准。除了 Cookie 同意工具外,该服务还会自动为网站创建 Cookie 政策,并在必要时进行更新。此外,它还提供多种横幅广告界面语言、WordPress 插件和响应迅速的客户支持。

步骤#1. 选择资费方案并注册

选择资费计划的关键标准是每月用户会话数和页面扫描限制

CookieHub 资费计划

每位独立用户每天访问您的网站,均计入一次会话。超出配额的会话费用取决于套餐:基础版/商务版/企业版 - 额外 1,000 次会话需支付 0.25 欧元/0.10 欧元/0.05 欧元。

页面扫描限制是指 CookieHub 扫描器能够检查的最大页面数量,一旦达到限制,爬虫程序就会停止运行。需要说明的是,通常情况下,即使是拥有数千个类似页面的大型网站,也只需扫描几十个页面就能检测到大部分或所有 Cookie。

因此,请检查您的网站统计数据并选择最合适的计划:

在注册页面,输入您的电子邮件以及网站地址,然后按照说明创建帐户。

注册完成后,请前往“账单”部分,输入您的信用卡信息并选择“仅链接”选项,添加付款方式。所有付费套餐均有 30 天的试用期,因此无需立即付款。

同时,您的网站已经正在接受 cookie 检查,结果很快就会出现在您的仪表板上。

步骤2. 对网站上使用的 Cookie 进行分类

后台运行的 CookieHub 扫描器会检测您的网站设置的所有 cookie,并尝试将它们分为 4 个已知类别:必要偏好分析营销

要查看扫描结果,请前往“我的域名”部分。在“ Cookies ”列中,您可以查看检测到的 Cookie 总数以及需要注意的 Cookie 数量。通常,需要注意的是您的网站在未经事先同意的情况下创建的营销和分析 Cookie,尽管这很可能是必需的。要对这些 Cookie 进行排序,请点击“ {X} 需要注意”链接:

CookieHub 仪表板


然后在打开的页面上查找未正确设置的 cookie(标有 ❌):

未正确设置的 Cookie

如果网站正常运行需要任何带❌标记的 cookie,请单击“编辑”按钮并将其类别更改为“必要”或“偏好”。

必要的 cookie 是用于身份验证、购物车、负载平衡等的 cookie。首选项 cookie 存储用户首选语言、地区、货币、颜色主题和其他类似设置等数据。

上述两种 cookie 类别均不需要用户事先同意。

一旦 CookieHub 在您的网站上完全实施,带有红色叉号的分析和营销 Cookie 将被标记为绿色复选标记。

如果列表中有“未分类”的 cookie,请尝试定义它们的类型并将其移动到最合适的类别(“编辑”按钮→“类别”)。

最后单击绿色的“保存并发布”按钮。

步骤#3。实施

我们要做的最后一步是将 CookieHub 代码添加到网站。有三种方法:通过 Google 跟踪代码管理器 (GTM)、使用 Wordpress 插件或手动实现。

如果您使用的是 GTM 或 Wordpress,请按照 CookieHub 网站上的说明进行操作(请参阅此处此处)。

就我们的情况而言,我们将选择最常用的方法——手动实现。具体操作如下:前往“实现”选项卡,然后点击“手动插入代码”:

CookieHub 手动实现

在下一页,将显示的脚本复制到剪贴板,并将其粘贴到您网站的 HTML 代码<head>块中或末尾<body>。完成后,网站上将出现 Cookie 同意对话框,用户可以选择允许或禁用某些类别的 Cookie。为了尊重这些选择,我们需要找到并稍微修改网站上所有用于启动或创建 Cookie 的<script>和标签。<iframe>

在与cookie相关的标签中<script>,执行以下操作:

  • 添加data-consent属性,其值与脚本创建的 Cookie 类别相对应。该值应为以下值之一:“必需”、“偏好设置”、“分析”、“营销”或“未分类
  • 用以下方式替换src属性名称data-src
  • 替换type="text/javascript"type="text/plain"type="text/plain"如果类型未定义,则添加)

对于<iframe>标签,除最后一个(类型相关)外,应进行相同的修改。

因此,您的 Cookie 相关标签应类似于以下示例:




<script type="text/plain" data-consent="marketing"> ... </script>
<script type="text/plain" data-consent="analytics" data-src="https://www.googleoptimize.com/optimize.js?id=OPT-XXXXXXXX"></script>
<iframe data-consent="analytics" data-src="https://www.youtube.com/embed/XXXXXXXX" frameborder="0" width="560" height="315" allowfullscreen></iframe>



Enter fullscreen mode Exit fullscreen mode

就这样,现在转到“扫描”选项卡,请求重新扫描网站并等待扫描完成。扫描结果将发送到您的电子邮件地址,您将看到所有 Cookie 是否已正确设置。
如果所有配置都正确,您应该不会再在仪表板主页的“ Cookie ”列中看到“需要注意”的消息。如果不是这样,请尝试再次重复步骤 2 和步骤 3,确保您没有遗漏任何内容。


实用技巧:

  • Cookie 政策是自动生成的,可在同意设置窗口的“ Cookie 声明”选项卡下查看;该文件也可以发布在任何网站页面上,详情请参阅本指南
  • 对于使用流行 CMS(例如 Wordpress、Joomla、Shopify、Wix 等)的网站,您可以选择查看详细的实施指南
  • 一些网站仅使用少数流行的第三方服务来设置 Cookie(例如 Google Analytics、Google Ads、Facebook Pixel),在这种情况下,可以使用“自动 Cookie 阻止”选项作为手动实施的替代方案
  • 如果您在实施 Cookie 横幅时遇到任何问题,请查看帮助部分或联系客户支持寻求帮助
鏂囩珷鏉ユ簮锛�https://dev.to/yamur/how-to-add-cookie-consent-banner-and-cookie-policy-to-your-website-582h
PREV
如果你住在小镇,如何成长为一名开发人员?我如何发现自己滑倒了,但没有放弃?如何撰写技术博客,并且在没有读者的情况下也不要放弃?如何用英语制作截屏视频,以及为什么要这样做?我从中得到了什么?
NEXT
理解 JavaScript 闭包