Compliant with GDPR, CCPA, COPPA, LGPD, PECR, PDPA, PIPEDA, and more.
您可以使用 UnicScript 管理页面元素,根据用户对特定目的 ID 或自定义供应商 ID 的同意来加载代码,这些 ID 由 IAB TCF 2.3 目的、Easy Mode 目的或 Google Consent Mode 类型定义。
UniConsent 支持两种同意模式。适用的模式取决于您的 CMP 配置和访客所在的地区:
unic-purpose-id 属性和 TCF 目的 ID(1–11)。unic-e-purpose-id 属性和 Easy 目的 ID(1–4)。重要提示: 当某个地区启用了 Easy Mode 时,只有
unic-e-purpose-id属性会被处理。使用unic-purpose-id的脚本将不会被激活。请确保根据您的 CMP 配置使用正确的属性。
如果您不确定适用哪种模式,请检查您的 CMP 仪表板中的"Easy Mode"和"Region"配置。
| 目的 ID | 描述 |
|---|---|
| 1 | 严格必要 — 网站基本功能所必需的 Cookie(始终允许) |
| 2 | 性能/分析 — 分析和衡量 Cookie |
| 3 | 功能性 — 用于增强功能和个性化的 Cookie |
| 4 | 定向/广告 — 用于广告和跟踪的 Cookie |
示例 1:为分析同意加载脚本(Easy Mode)
<script type="text/unicscript" unic-e-purpose-id="2">
console.log('Analytics consent granted');
</script>
示例 2:为分析加载外部脚本(Easy Mode)
<script type="text/unicscript" unic-e-purpose-id="2" src="https://example.com/analytics.js"></script>
示例 3:使用 Easy Mode 加载 Google Analytics (gtag.js)
<script type="text/unicscript" unic-e-purpose-id="2" async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script type="text/unicscript" unic-e-purpose-id="2">
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>
示例 4:为广告同意加载脚本(Easy Mode)
<script type="text/unicscript" unic-e-purpose-id="4" src="https://example.com/ads.js"></script>
<iframe
data-unicscript
unic-e-purpose-id="2"
width="560"
height="315"
data-src="https://example.com/analytics-widget"
frameborder="0"
></iframe>
| 目的 ID | 描述 |
|---|---|
| 1 | 在设备上存储和/或访问信息 |
| 2 | 使用有限数据选择广告 |
| 3 | 创建个性化广告档案 |
| 4 | 使用档案选择个性化广告 |
| 5 | 创建个性化内容档案 |
| 6 | 使用档案选择个性化内容 |
| 7 | 衡量广告效果 |
| 8 | 衡量内容效果 |
| 9 | 通过统计数据或来自不同来源的数据组合来了解受众 |
| 10 | 开发和改进服务 |
| 11 | 使用有限数据选择内容 |
您可以根据特定目的 ID 的同意动态加载内联 JavaScript。
示例 1:为单个目的 ID 加载脚本
<script type="text/unicscript" unic-purpose-id="1">
console.log('Consent granted for purpose 1');
</script>
示例 2:使用目的 ID 加载外部脚本
<script type="text/unicscript" unic-purpose-id="1" src="path-to-external-script.js"></script>
示例:为多个目的 ID 加载脚本
<script type="text/unicscript" unic-purpose-ids="1,2,3">
console.log('Consent granted for purposes 1, 2, and 3');
</script>
示例:
<script type="text/unicscript" unic-vendor-id="1">
console.log('hello vendor 1');
</script>
示例 2:
<script type="text/unicscript" unic-vendor-id="1" src="xxxxx"></script>
您可以根据特定目的 ID 的同意动态加载 iframe。
示例:为单个目的 ID 加载 iframe
<iframe
data-unicscript
unic-purpose-id="1"
width="560"
height="315"
data-src="https://www.youtube.com/embed/XXXX"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
示例:为多个目的 ID 加载 iframe
<iframe
data-unicscript
unic-purpose-ids="1,2,3"
width="560"
height="315"
data-src="https://www.youtube.com/embed/XXXX"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
示例:为单个供应商 ID 加载 iframe
<iframe
unic-vendor-id="1"
width="560"
height="315"
data-src="https://www.youtube.com/embed/XXXX"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
您可以使用 unic-cp-id 和 unic-cp-ids 属性,根据 Custom Purposes 的同意来加载脚本和 iframe。
示例 1:为单个自定义目的 ID 加载脚本
<script type="text/unicscript" unic-cp-id="custom_analytics">
console.log('Custom analytics consent granted');
</script>
示例 2:为自定义目的 ID 加载外部脚本
<script type="text/unicscript" unic-cp-id="custom_analytics" src="https://example.com/analytics.js"></script>
示例 3:为多个自定义目的 ID 加载脚本(所有目的都必须已同意)
<script type="text/unicscript" unic-cp-ids="custom_analytics,ab_testing">
console.log('Both custom purposes consented');
</script>
示例 4:为自定义目的 ID 加载 iframe
<iframe
data-unicscript
unic-cp-id="custom_analytics"
width="560"
height="315"
data-src="https://example.com/widget"
frameborder="0"
></iframe>
本节介绍如何根据 Google Consent Mode 中的同意类型加载内联 JavaScript,并与 UniConsent 的 Simple Mode 同意类型相匹配。
下表展示了各种 Google Consent Mode 同意类型如何映射到 UniConsent Simple Mode 同意类型及其各自用途:
| Google Consent 类型 | UniConsent Simple Mode 类型 | 用途 |
|---|---|---|
ad_storage | Targeting and Advertising | 启用广告 Cookie。 |
analytics_storage | Performance | 启用分析 Cookie。 |
functionality_storage | Functionality | 启用网站功能和设置的功能性 Cookie。 |
personalization_storage | Functionality | 启用用户个性化的功能性 Cookie。 |
security_storage | Strictly Necessary | 启用网站安全、保护和界面偏好所必需的 Cookie。这些 Cookie 不需要同意。 |
ad_user_data | Targeting and Advertising | 启用广告 Cookie 并设置向 Google 核心服务发送个人数据的同意。 |
ad_personalization | Targeting and Advertising | 启用广告 Cookie 以用于广告个性化中的数据使用,例如再营销。 |
使用以下格式根据用户同意加载内联 JavaScript:
<script type="text/unicscript" unic-gcm-id="functionality_storage">
console.log('Consent for functionality storage is granted, script is executed.');
</script>
您可以使用 unic-gcm-ids 属性指定多个同意类型,如下所示:
<script type="text/unicscript" unic-gcm-ids="analytics_storage,ad_user_data">
console.log('Consent for analytics storage and ad user data is granted, script is executed.');
</script>
您也可以将同意设置应用于 iframe。以下是示例:
<iframe data-unicscript unic-gcm-ids="functionality_storage,ad_personalization"
width="560" height="315"
data-src="https://www.youtube.com/embed/XXXXXXX"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
此示例确保 iframe 内容仅在用户同意指定类别(functionality_storage 和 ad_personalization)后才加载。
将:
<script
async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
type="text/javascript"
></script>
修改为:
<script
async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
unic-purpose-id="3"
type="text/unicscript"
></script>
修改页面上添加的 Google Adsense 广告位代码,将:
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script type="text/javascript">
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
修改为:
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script type="text/unicscript" unic-purpose-id="3" >
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
当内容因缺少同意而被屏蔽时,显示一个带有自定义消息的内联占位符。一旦授予同意,占位符将消失并显示原始内容。
这适用于 YouTube 视频、社交媒体嵌入、分析小部件或第三方脚本等嵌入内容,您可以向用户展示内容被屏蔽的原因,并让他们直接授予同意。
将您的内容包装在带有 data-unicscript 和相应目的属性的 <div> 中:
<div data-unicscript
style="display:none"
unic-e-purpose-id="2"
unic-consent-message="我们需要您的同意来显示此内容。"
unic-consent-button="允许">
<iframe data-src="https://www.youtube.com/embed/XXXX"
width="560" height="315" allowfullscreen></iframe>
</div>
重要提示: 始终添加
style="display:none"以防止 CMP 加载前内容闪烁。
| 属性 | 必需 | 描述 |
|---|---|---|
data-unicscript | 是 | 标记 div 用于同意控制 |
style="display:none" | 是 | 防止 CMP 加载前内容闪烁 |
unic-purpose-id | * | 单个 IAB TCF 目的 ID(例如 "1") |
unic-purpose-ids | * | 多个 IAB TCF 目的 ID,逗号分隔(例如 "1,3,4" — 所有都必须已授予) |
unic-cp-id | * | 自定义目的 ID |
unic-e-purpose-id | * | Easy 目的 ID |
unic-gcm-id | * | Google Consent Mode 信号(例如 "analytics_storage") |
unic-vendor-id | * | 自定义供应商 ID |
unic-consent-message | 否 | 自定义消息(默认:"This content requires your consent to be displayed.") |
unic-consent-button | 否 | 按钮文本(默认:"Accept") |
unic-consent-action | 否 | "grant" = 通过 API 静默授予同意,"open" 或省略 = 打开 CMP 对话框 |
* 需要一个目的属性。
Iframe — 使用 data-src 代替 src 以防止在同意前加载:
<iframe data-src="https://www.youtube.com/embed/XXXX" width="560" height="315"></iframe>
脚本 — 使用 type="text/plain" 以防止在同意前执行:
<script type="text/plain" src="https://example.com/analytics.js"></script>
<script type="text/plain">
console.log('仅在授予同意后运行');
</script>
授予同意后,data-src 会自动复制到 src,type="text/plain" 的脚本会自动激活。
YouTube 视频:
<div data-unicscript
style="display:none"
unic-e-purpose-id="4"
unic-consent-message="请接受广告 Cookie 以观看此视频。"
unic-consent-button="接受并播放"
unic-consent-action="grant">
<iframe data-src="https://www.youtube.com/embed/XXXX"
width="560" height="315" allowfullscreen></iframe>
</div>
X (Twitter) 帖子:
<div data-unicscript
style="display:none"
unic-e-purpose-id="4"
unic-consent-message="请接受 Cookie 以查看此 X 帖子。"
unic-consent-button="显示帖子"
unic-consent-action="grant">
<blockquote class="twitter-tweet">
<a href="https://twitter.com/user/status/XXXX"></a>
</blockquote>
<script type="text/plain" src="https://platform.twitter.com/widgets.js"></script>
</div>
Instagram 帖子:
<div data-unicscript
style="display:none"
unic-e-purpose-id="4"
unic-consent-message="请接受 Cookie 以查看此 Instagram 帖子。"
unic-consent-button="显示帖子"
unic-consent-action="grant">
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/XXXX/">
</blockquote>
<script type="text/plain" src="https://www.instagram.com/embed.js"></script>
</div>
Facebook 帖子:
<div data-unicscript
style="display:none"
unic-e-purpose-id="4"
unic-consent-message="请接受 Cookie 以查看此 Facebook 帖子。"
unic-consent-button="显示帖子"
unic-consent-action="grant">
<div class="fb-post" data-href="https://www.facebook.com/user/posts/XXXX"></div>
<script type="text/plain" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"></script>
</div>
TikTok 视频:
<div data-unicscript
style="display:none"
unic-e-purpose-id="4"
unic-consent-message="请接受 Cookie 以查看此 TikTok 视频。"
unic-consent-button="显示视频"
unic-consent-action="grant">
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@user/video/XXXX">
</blockquote>
<script type="text/plain" src="https://www.tiktok.com/embed.js"></script>
</div>
Google 地图:
<div data-unicscript
style="display:none"
unic-e-purpose-id="3"
unic-consent-message="请接受 Cookie 以查看地图。"
unic-consent-button="显示地图"
unic-consent-action="grant">
<iframe data-src="https://www.google.com/maps/embed?pb=XXXX"
width="600" height="450" style="border:0;" allowfullscreen loading="lazy"></iframe>
</div>
Disqus 评论:
<div data-unicscript
style="display:none"
unic-e-purpose-id="3"
unic-consent-message="我们需要您的同意来显示评论。"
unic-consent-button="显示评论"
unic-consent-action="grant">
<div id="disqus_thread"></div>
<script type="text/plain">
var disqus_config = function () { this.page.url = PAGE_URL; this.page.identifier = PAGE_IDENTIFIER; };
(function() { var d = document, s = d.createElement('script');
s.src = 'https://EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s); })();
</script>
</div>
注意: 以上示例使用
unic-e-purpose-id(Easy Mode)。如果您的网站使用 IAB TCF 模式,请替换为相应的unic-purpose-id(例如unic-purpose-id="1"用于设备存储,unic-purpose-id="4"用于个性化广告)。