使用 UnicScript 管理页面元素和代码

您可以使用 UnicScript 管理页面元素,根据用户对特定目的 ID 或自定义供应商 ID 的同意来加载代码,这些 ID 由 IAB TCF 2.3 目的、Easy Mode 目的或 Google Consent Mode 类型定义。

两种同意模式

UniConsent 支持两种同意模式。适用的模式取决于您的 CMP 配置和访客所在的地区:

  • IAB TCF 模式 — 用于符合 IAB 透明度和同意框架的 GDPR(欧盟)合规。使用 unic-purpose-id 属性和 TCF 目的 ID(1–11)。
  • Easy Mode(简易模式) — 适用于非 TCF 地区的简化同意模式,如 LGPD(巴西)、PIPL(中国)、POPIA(南非),或任何您启用了 Easy Mode 的地区。使用 unic-e-purpose-id 属性和 Easy 目的 ID(1–4)。

重要提示: 当某个地区启用了 Easy Mode 时,只有 unic-e-purpose-id 属性会被处理。使用 unic-purpose-id 的脚本将不会被激活。请确保根据您的 CMP 配置使用正确的属性。

如果您不确定适用哪种模式,请检查您的 CMP 仪表板中的"Easy Mode"和"Region"配置。

Easy Mode 目的 ID

目的 ID描述
1严格必要 — 网站基本功能所必需的 Cookie(始终允许)
2性能/分析 — 分析和衡量 Cookie
3功能性 — 用于增强功能和个性化的 Cookie
4定向/广告 — 用于广告和跟踪的 Cookie

基于 Easy Mode 目的 ID 加载脚本

示例 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>

基于 Easy Mode 目的 ID 加载 Iframe

<iframe
  data-unicscript
  unic-e-purpose-id="2"
  width="560"
  height="315"
  data-src="https://example.com/analytics-widget"
  frameborder="0"
></iframe>

IAB TCF 模式

IAB TCF 2.3 目的 ID

目的 ID描述
1在设备上存储和/或访问信息
2使用有限数据选择广告
3创建个性化广告档案
4使用档案选择个性化广告
5创建个性化内容档案
6使用档案选择个性化内容
7衡量广告效果
8衡量内容效果
9通过统计数据或来自不同来源的数据组合来了解受众
10开发和改进服务
11使用有限数据选择内容

基于 TCF 目的 ID 加载脚本

您可以根据特定目的 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 加载内联 JavaScript

示例:为多个目的 ID 加载脚本

<script type="text/unicscript" unic-purpose-ids="1,2,3">
  console.log('Consent granted for purposes 1, 2, and 3');
</script>

基于自定义供应商 ID 同意加载内联 JavaScript

示例:

<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。

示例:为单个目的 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

示例:为多个目的 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

示例:为单个供应商 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>

基于自定义目的 ID 加载内联 JavaScript

您可以使用 unic-cp-idunic-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_storageTargeting and Advertising启用广告 Cookie。
analytics_storagePerformance启用分析 Cookie。
functionality_storageFunctionality启用网站功能和设置的功能性 Cookie。
personalization_storageFunctionality启用用户个性化的功能性 Cookie。
security_storageStrictly Necessary启用网站安全、保护和界面偏好所必需的 Cookie。这些 Cookie 不需要同意。
ad_user_dataTargeting and Advertising启用广告 Cookie 并设置向 Google 核心服务发送个人数据的同意。
ad_personalizationTargeting and Advertising启用广告 Cookie 以用于广告个性化中的数据使用,例如再营销。

示例:加载内联 JavaScript

使用以下格式根据用户同意加载内联 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。以下是示例:

<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_storagead_personalization)后才加载。

使用 UnicScript 管理 Google Adsense

将:

<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 对话框

* 需要一个目的属性。

屏蔽 Div 内的内容

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 会自动复制到 srctype="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" 用于个性化广告)。

还有其他问题?

联系我们:support@uniconsent.com