欢迎访问我的博客,有问题可以在任意文章底部留言评论

GTM+Consent Mode+Cookiebot:完整的Cookie Banner部署流程

意见征求模块 Haran 4年前 (2023-03-01) 16815次浏览 16个评论

更新时间:2026年8月22号

本节介绍如何通过GTMConsent Mode(意见征求模式) 为网站部署CMP/Cookie Banner。

什么是Consent Mode?

Consent Mode 本质上是一种机制,而不是一个 CMP。

当 CMP(Consent Management Platform,同意管理平台)接入 Consent Mode 后:

  • CMP 负责 收集用户的授权状态
  • 授权信息会被传递给Consent Mode
  • Consent Mode会将其 转化为标准化的意见征求参数
  • 这些参数可以直接被Googl产品(如 GA4、Google Ads)以及GTM中的第三方标签使用

这样可以在合规前提下控制数据收集与建模行为。

整体运行原理

用户访问网站时,数据收集流程如下:

  • 用户打开网站,GTM 容器加载;
  • GTM 优先触发 CMP 代码(如 Cookiebot),弹出 Cookie Banner 向用户请求授权;
  • 用户做出选择(同意/拒绝/部分同意);
  • CMP 将授权结果传递给 Consent Mode
  • Consent Mode 将结果转换为标准的意见征求参数;
  • GA4 及其他追踪代码根据这些参数决定是否执行(如发送数据、设置 Cookie)。

 

配置步骤(以GA4 + Cookiebot为例)

下文以Cookiebot作为CMP示例,分五个步骤完成完整部署。

Step 1 : 获取Cookiebot ID

前往 Cookiebot 官网注册账号并创建容器,创建成功后,您会获得一个唯一的Cookiebot ID(格式为 UUID,例如:1d1f0b31-6f9b-4ff1-82b9-9950d83fb3b4)后续配置中需要用到。

 

Step 2 : GTM配置Cookiebot代码

在GTM中进入「代码」→「新建」→「代码配置」→ 在社区模板库中搜索 “Cookiebot” 并安装,做如下配置:

GTM+Consent Mode+Cookiebot:完整的Cookie Banner部署流程

配置很简单:

  • Cookiebot ID:填入你的Cookiebot ID(示例:1d1f0b31-6f9b-4ff1-82b9-9950d83fb3b4
  • Default Consent State:所有类型统一设置为Denied,这是为了确保在用户做出明确选择前,默认不加载追踪代码。
  • 触发器:选择Consent Initialization – All Pages,在页面加载过程中,它是最快触发,比Page View都快,是专用于CMP部署的。

 

Step 3 : GTM上设置用户意见征求(Consent Mode)

在GTM上启用Consent Mode,在GTM上点击「管理」——「容器设置」,在其他设置里勾选“启用用户意见征求模式”:

GTM+Consent Mode+Cookiebot:完整的Cookie Banner部署流程

保存后,容器即具备处理意见征求参数的能力。

接下来为为每个代码设置意见征求状态,在GTM的代码列表中,会看到每个代码旁新增了一个 「用户意见征求概览」 图标(小手形状):

GTM+Consent Mode+Cookiebot:完整的Cookie Banner部署流程

点击后会有三个选项

GTM+Consent Mode+Cookiebot:完整的Cookie Banner部署流程

  • 未设置:默认是这个,此代码不会执行更多用户意见征求。
  • 不需要额外的用户同意:代码会需检查现有用户意见征求意见,也就是内置用户意见征求检查里已经设置意见征求模式参数
  • 需要额外的用户同意才能触发代码:还需要更多的意见征求模式参数才可以

一般情况下,选择「无需更更多用户意见征求」就可以。

 

如果参数名称不是 Consent Mode内置,可以改为“需要额外的用户同意才能触发代码”, 设置自定义的参数,如:GTM+Consent Mode+Cookiebot:完整的Cookie Banner部署流程

 

Step 4 : 调整页面浏览触发逻辑(关键)

用户访问第一个页面的时候会弹出Cookie Banner,用户同意过后,会发送一个事件,我们需要通过这个事件去触发页面,才能跟踪到第一个页面的数据。

在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「自定义事件」,命名为“cookie_consent_update”,做如下设置:

GTM+Consent Mode+Cookiebot:完整的Cookie Banner部署流程

 

接下就是将这个触发器替换GA4的页面浏览:

GTM+Consent Mode+Cookiebot:完整的Cookie Banner部署流程

 

 

Step 5 : 预览调试

在 GTM 中点击「预览」进入调试模式

GTM+Consent Mode+Cookiebot:完整的Cookie Banner部署流程

 

清除浏览器 Cookie(或使用无痕窗口),模拟新用户首次访问,会弹出Cookie Banner,别测试两种用户行为:

  • 拒绝全部:GA4 及其他代码不应触发数据发送。
  • 同意全部:GA4 及其他代码正常触发,并在开发者工具的 Network 面板中看到数据请求。

 

常见问题与注意事项

为什么默认状态要设为 Denied?

这是为了满足 GDPR 等法规要求,确保在用户未明确同意前不收集任何数据。

 

cookie_consent_update 事件在所有 CMP 中都通用吗?

不,不同 CMP 触发的事件名称不同,本教程基于 Cookiebot,其他 CMP 需查阅其文档获取对应事件名。

 

如果我的网站是单页应用(SPA),此方案是否适用?

SPA 需额外处理路由变化,但初始页面部署逻辑相同,后续路由可配合历史变更触发器。

 

延伸阅读:


有疑问可以在底部留言
喜欢 (6)
发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(16)个小伙伴在吐槽
  1. 大佬,求教第五步是怎么配置出来的?
    hhh2024-12-10 15:52 回复 Mac OS X | Chrome 131.0.0.0
    • Haran
      触发器里设置cookie_consent_update,然后将其添加到代码里的触发条件
      Haran2024-12-10 21:22 回复 Mac OS X | Chrome 131.0.0.0
  2. cookiebot我看官方说的有添加地区,咱们的博客内容没有。consent我们针对于欧洲地区的隐私政策,我应该选地区呢,还是向你的一样,这种是全部地区都会弹出的吗?
    excuse2024-07-17 17:20 回复 Windows 10 | Chrome 126.0.0.0
    • Haran
      后台设置可以限制特定国家才弹出,付费版才可以设置
      Haran2024-07-17 17:55 回复 Mac OS X | Chrome 126.0.0.0
  3. 求助 哪一个安装方便呢,还能给app装consent mode?我用consent manager 发现麻烦,不如博主发的这个好安装
    LLLLL2024-07-17 10:03 回复 Windows 10 | Chrome 126.0.0.0
  4. 网站中新建consent mode,GA4的用户数据大幅度减少?是不是因为用户选择了“decline”所以跟踪不到。如果希望继续跟踪decline的用户,该如何设置
    Imy2024-04-17 23:19 回复 Windows 10 | Chrome 123.0.0.0
    • Haran
      是的,拒绝后就不能跟踪,如果拒绝后继续跟踪,就不合规的了。 GA4里有个混合数据的功能,他是根据模型估算的数据,可以找回部分数据,但不完全准确。
      Haran2024-04-18 09:19 回复 Mac OS X | Chrome 123.0.0.0
  5. 看了几个cmp产品,对这些配置说的都很模糊,说是根据自身需要去做。 ad_storage: "denied", ad_user_data: "denied", ad_personalization: "denied", analytics_storage: "denied", functionality_storage: "denied", personalization_storage: "denied", security_storage: "granted", wait_for_update: 2000, 不同cmp默认配置略有不同,哪些该denied,哪些该granted,有些搞不清楚,这个有什么原则么?博主建议怎么配置
    liuqing2024-03-14 10:03 回复 Windows 10 | Chrome 122.0.0.0
  6. 请问博主,用户同意或者拒绝的结果怎么验证
    xiaohuihui2024-02-25 17:46 回复 Windows 10 | Chrome 121.0.0.0
    • Haran
      CMP产品一般会将拒绝或同意信息写到cookie,可以看对应CMP产品使用哪些cookie,以及不同值的意义
      Haran2024-02-26 10:35 回复 Mac OS X | Chrome 121.0.0.0
      • cookie中是可以看到拒绝或同意的结果,但是如果我想快速验证这个授权结果最终应用到谷歌层面是否生效的表现应该怎么去验证呢
        xiaohuihui2024-02-27 17:10 回复 Windows 10 | Chrome 122.0.0.0
        • Haran
          看发送给Google的请求,同意的时候,可以看到请求,拒绝的时候,看不到请求
          Haran2024-02-27 21:06 回复 Mac OS X | Chrome 122.0.0.0
  7. 博主,请教下,我直接在Cookiebot里面设置,然后在网站上放代码也可以吧?
    Evan2023-07-14 16:36 回复 Mac OS X | Chrome 114.0.0.0
    • Haran
      可以,但还是需要在GTM上做设置
      Haran2023-07-14 16:55 回复 Mac OS X | Chrome 114.0.0.0