如何设置使用Cookie Consent Mode意见征求模式弹窗

Table of Contents
2
3
受隐私保护政策影响，自2024年3月起，对于在欧洲地区投放广告的企业和个人，Google将强制要求其推广的所有网站和应用须使用Consent Mode意见征求模式弹窗，以便在同意状态下收集用户数据。目前账户投放的有欧洲市场，需要在3月份之前加一下，不然跟踪不到客户轨迹。

 

解决方法：
https://www.termsfeed.com/cookie-consent/

使用方法

使用国外的这个平台提供的代码方法，复制JS 代码加在自己的网站上，一定一定改自己的GA的id。

重点： JS代码在页面下面的评论区

这段代码主要涉及网站数据跟踪和用户同意管理，特别是与Google Tag Manager (GTM) 和Cookie同意相关。下面是对这些代码段的分析：

GTM初始化与配置:

  • 第一段代码通过定义window.dataLayer数组（如果尚未定义）并创建一个gtag函数来初始化Google Tag Manager。这个gtag函数用于将数据和配置推送到dataLayer数组中，这是与Google分析工具进行通信的机制。
  • gtag(‘consent’, ‘default’, …)调用设置了默认的用户同意状态，特别是拒绝了广告存储、用户数据广告、个性化广告和分析存储。
  • 异步加载Google Tag Manager的脚本(https://www.googletagmanager.com/gtag/js?id=G-id)，这行代码异步加载了Google Tag Manager的JavaScript库，id=G-XXX是一个占位符，您需要将其替换为您的Google Analytics（GA）跟踪ID。

第三方Cookie工具

  • 加载了TermsFeed的Cookie同意脚本(cookie-consent.js)，这是一个常用于管理网站上的cookie同意的第三方服务。
  • 在文档加载完毕后，通过cookieconsent.run({…})初始化了一个cookie同意通知条。配置了其样式为简单(simple)、同意类型为显式(express)、色彩方案为亮色(light)、语言为英文(en)，并指定在页面加载时默认同意的cookie级别为strictly-necessary。
  • 通过配置的回调函数scripts_specific_loaded，当用户更改同意级别至targeting时，更新Google Tag Manager的同意状态，允许广告存储、用户数据广告、个性化广告和分析存储。

调整窗口的外观样式

如果你想控制按钮或者窗口的大小颜色背景等样式，你可以复制如下的css代码进行数值更改，按照自己的想法完成设计。

重点： css代码在页面下面的评论区

核心JS代码的分析

这段代码的主要功能是集成和管理网站的用户数据跟踪和Cookie同意政策，具体包括以下几个关键点：

Google Tag Manager (GTM) 集成

初始化并配置Google Tag Manager，以便于网站能够使用Google的分析和广告服务。这包括设置数据层（dataLayer）和加载GTM的JavaScript库。

默认用户同意状态设置

在用户做出选择之前，默认拒绝广告存储、广告用户数据、广告个性化以及分析存储的权限。这是遵守隐私法规（如GDPR或CCPA）的先决条件，确保在用户明确同意之前不收集或处理敏感数据。

Cookie同意管理

通过加载并配置第三方Cookie同意管理脚本（如TermsFeed的cookie-consent.js），在网站上展示同意横幅。这使得网站能够以合规的方式向用户展示关于Cookie使用的信息，并根据用户的选择来调整Cookie的使用和数据收集行为。

用户同意响应

根据用户通过同意管理框架做出的选择，动态更新Google Tag Manager的配置。如果用户同意接受目标定向Cookies，相应地更新GTM配置以允许广告相关的数据存储和个性化设置。

隐私保护和合规

通过上述措施，代码确保网站在收集和处理用户数据时能够遵循适用的法律和隐私政策，同时为用户提供对自己数据使用权限的控制。

总体而言，这段代码实现了一个综合的解决方案，既满足了网站分析和个性化广告的需求，又兼顾了用户隐私权的保护和法律合规性。

有啥

Wordpress建站
外贸独立站
独立站SEO
Wordpress插件
独立站文案
外贸AI用法
谷歌广告投放
Wordpress广告落地页

xxxx
我是这篇文章的作者，我有wordpress外贸独立站运营6年的经验，专注于外贸类的独立站搭建SEO优化

咨询外贸独立站
关于文章作者

关于文章作者

WordPress专家，SEO专家，外贸

我叫Kevin, 在外贸的一线工作多年，曾经各种B2B平台的熟悉操作手，随着时代的发展，必须要开拓一些新的渠道获客，后面偶然间得知wordpress独立站相关的知识，并实践多年，遇到很多建站的问题和挫折，最后自己统统解决，最终实现了外贸独立站询盘获客自由。某一天突然感觉，其实为他人分享我的经验也是另外一种成就感，所以就建立了本网站，从而分享来自外贸一线，操作独立站的各种经验，以帮助外贸人的询盘获客渠道搭建。

你可能感兴趣的其他文章

在外贸wordpress独立站中常用的CSS样式案例

在外贸wordpress独立站中常用的CSS样式案例

[pac_divi_table_of_contents exclude_headings_by_class="on" included_headings="off|on|on|off|off|off" active_link_highlight="on" level_markers_3="icons" title_container_padding="10px|15px|10px|15px|true|false" title_container_bg_color="#333333" body_area_height="800px"...

讨论区

5 评论

  1. 123 于 2024-07-26 在 03:00

    点了同意按钮，怎么关闭不了弹窗

    回复
  2. DDDD 于 2024-03-06 在 01:35 
    /*同意按钮*/
.termsfeed-com---palette-light .cc-nb-okagree {
    color: #fff !important;
    background-color: #025ffd !important;
}
 
/*拒绝按钮*/
.termsfeed-com---palette-light .cc-nb-reject {
    color: #333333 !important;
    background-color: #eaeaea !important;
}

/*设置按钮*/
.termsfeed-com---palette-light .cc-nb-changep {
    background-color: #cd2c2c;
    color: #111;
/* display: none; 设备注：不想显示标题 就生效这个 */
}

  
/*窗口*/
.termsfeed-com---palette-light.termsfeed-com---nb {
    background-color: #ffffff !important;
    color: #111;
  border-radius: 5px 5px 5px 5px;
  border: 1px solid #ff0000;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* 元素的阴影效果 */
}
  
/*调整尺寸*/
.termsfeed-com---nb-simple {
    right: 3%!important;
    top: auto;
    bottom: 5px !important;
    left: 3% !important;
    max-width: 100% !important;
    position: fixed;
}
  
/*方位*/
.termsfeed-com---nb {
    overflow: auto;
    z-index: 99999999999;
    font-size: 16px;
}
  
/*内部距离*/
.termsfeed-com---nb .cc-nb-main-container {
 padding: 10px 30px 10px 30px  !important;
   
}
  
/*控制标题*/
.termsfeed-com---nb .cc-nb-title {
    font-size: 20px !important;
    font-weight: 600;
   /* display: none; 设备注：不想显示标题 就生效这个 */
}
.termsfeed-com---reset p {
    margin-top: 0;
    margin-bottom: 5px !important;
}
  
/*控制内容*/
.termsfeed-com---nb .cc-nb-text {
    font-size: 13px !important;
    margin: 0 0 10px 0 !important;
}
    回复
    • DDDDSEO 于 2024-05-06 在 07:18

      流皮哈

      回复
  3. DDDD 于 2024-02-29 在 13:41 
    <script>
window.dataLayer = window.dataLayer || [];
function gtag(){
	dataLayer.push(arguments);
}
gtag('consent', 'default', {
	'ad_storage': 'denied',
	'ad_user_data': 'denied',
	'ad_personalization': 'denied',
	'analytics_storage': 'denied'
});
</script>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXX改成自己的GA ID"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}

	gtag('js', new Date());
	gtag('config', 'G-XXX改成自己的GA ID');
</script>

<script type="text/javascript" src="//www.termsfeed.com/public/cookie-consent/4.1.0/cookie-consent.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({"notice_banner_type":"simple","consent_type":"express","palette":"light","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false,
                   
  "callbacks": {
	"scripts_specific_loaded": (level) => {
		switch(level) {
			case 'targeting':
				gtag('consent', 'update', {
					'ad_storage': 'granted',
					'ad_user_data': 'granted',
					'ad_personalization': 'granted',
					'analytics_storage': 'granted'
				});
				break;
		}
	}
},
"callbacks_force": true
                  });
});
</script>
    回复

递交一条评论

您的邮箱地址不会被公开。 必填项已用 * 标注