通过Google Tag Manager的Consent Mode给网站部署Cookiebot

Consent Management Platform Haran 1年前 (2023-03-01) 3095次浏览 14个评论
文章目录[隐藏]

这一节介绍通过Google Tag Manager的Consent Mode给网站部署Cookie Banner,不了解Consent Mode意见征求模式的请看:Google Tag Manager里的Consent Mode意见征求模式

简答的说:Consent Mode就是GTM推出的一个简化CMP部署的功能,CMP厂家加入Consent Mode后,用户可以通过GTM部署CMP是很方便的。

目前加入的CMP有Commanders ActConsentmanagerCookie Information A/SCookiebot (Cybot)DidomiiubendaLiveRampOneTrustOsano、SourcepointUsercentrics

我这里以为Cookiebot作为例子。

原理介绍

用户访问访问站点的时候,GTM加载CMP,CMP弹出一个框框,让用户知情和授权,并将授权状态写入到Cookie,如ad_storage和 analytics_storage,GTM上的Tags再根据Cookie的状态决定是否执行收集数据。

配置过程

获取Cookiebot ID

Cookiebot创建一个账号,获取Cookiebot ID,有些产品是付费,需要付费后才可以使用,我这里获得的Cookiebot ID是:309dd67c-98cb-48d0-8cfa-162cd84af73e。

GTM配置Cookiebot代码

Cookiebot在GTM社区模板上有模板,可以通过模板去配置:

通过Google Tag Manager的Consent Mode给网站部署Cookiebot

配置很简单,值需要填上Cookiebot ID 309dd67c-98cb-48d0-8cfa-162cd84af73e,触发器用Consent Initialization – All Pages,一定要用Consent Initialization – All Pages,因为在页面加载过程中,它是最快触发,比Page View都快,是专用于CMP部署的。

GTM上启用用户意见征求(Consent Mode)

接下来就是在GTM上启用Consent Mode,在GTM上点击「管理」——「容器设置」,在其他设置里勾选:

通过Google Tag Manager的Consent Mode给网站部署Cookiebot

保存后,返回到代码,可以这里有个「用户意见征求概览」的Icon:

通过Google Tag Manager的Consent Mode给网站部署Cookiebot

 

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

接下来就是设置它,点击「用户意见征求概览」,会弹出一个用户意见征求概览页面,它包含:

  • 未配置用户意见征求:需要配置
  • 已配置用户意见征求:已经配置

通过Google Tag Manager的Consent Mode给网站部署Cookiebot

 

勾选所有未配置用户意见征求,然后点击右侧的设置:

通过Google Tag Manager的Consent Mode给网站部署Cookiebot

 

会有选项:

  • 未设置:默认是这个,此代码不会执行更多用户意见征求检查。
  • 无需更多用户意见征求:代码无需检查更多用户意见征求即可触发。需要用户同意,才可以收集数据,同意信息是放到Consent Mode预定义的cookie
  • 必须获得更多用户意见征求才能触发代码:需要用户同意才,才可以收集数据,同意信息是放到用户自定义的Cookie

一般是选「无需更更多用户意见征求」。

调整代码逻辑

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

事件触发器为cookie_consent_update,具体设置如下:

通过Google Tag Manager的Consent Mode给网站部署Cookiebot

 

接下就是将这个触发器添加到pageview代码的触发器里:

通过Google Tag Manager的Consent Mode给网站部署Cookiebot

 

 

调试

最后就是预览调试:

通过Google Tag Manager的Consent Mode给网站部署Cookiebot

 

先清除cookie,然后在预览调试,会弹出cookie banner:

  • 如果用户拒绝,不做数据跟踪
  • 如果用户同意,就可以做数据跟踪

如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (5)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(14)个小伙伴在吐槽
  1. cookiebot我看官方说的有添加地区,咱们的博客内容没有。consent我们针对于欧洲地区的隐私政策,我应该选地区呢,还是向你的一样,这种是全部地区都会弹出的吗?
    excuse2024-07-17 17:20 (4 天前)回复 Windows 10 | Chrome 126.0.0.0
    • Haran
      后台设置可以限制特定国家才弹出,付费版才可以设置
      Haran2024-07-17 17:55 (4 天前)回复 Mac OS X | Chrome 126.0.0.0
  2. 求助 哪一个安装方便呢,还能给app装consent mode?我用consent manager 发现麻烦,不如博主发的这个好安装
    LLLLL2024-07-17 10:03 (4 天前)回复 Windows 10 | Chrome 126.0.0.0
  3. 网站中新建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
  4. 看了几个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
  5. 请问博主,用户同意或者拒绝的结果怎么验证
    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
  6. 博主,请教下,我直接在Cookiebot里面设置,然后在网站上放代码也可以吧?
    Evan2023-07-14 16:36 回复 Mac OS X | Chrome 114.0.0.0
    • Haran
      可以,但还是需要在GTM上做设置
      黄业忠2023-07-14 16:55 回复 Mac OS X | Chrome 114.0.0.0