CMP 客户端

一个客户端库来帮助您在应用程序中添加一个CMP(目前由Sourcepoint提供).

安装

安装为 < cript> 标记 (建议:

<script async src="https://consent-notice.ft.com/cmp.js"></script>

为了启用开发分支预览(建议),将脚本引用者政策设置如下:

<script async src="https://consent-notice.ft.com/cmp.js" referrerpolicy="no-referrer-when-downgrade"></script>

从国家预防机制安装库:

npm install @financial-times/cmp-client

使用脚本标签

这个 src 属性 script 标记指向在主机页面上设置CMP客户端的立即被引用的函数表达式(IIFE). 当CMP客户端以这种方式安装时,不需要再做更多的工作.

使用这种集成方法的主要好处是,您的用户一旦获得新的更新,就会自动获得CMP客户端的更新,而不是要求版本的突起和应用程序的发布. 然而,要使这种方法成功,主机页必须是我们 注册属性。如果您不确定或想要注册一个财产,请联系 Ads & 隐私小组.

默认情况下,源链接整合了最新版本的CMP客户端. 如果您想要插入不同的版本, 您可以附加 version 查询参数到源链接如下:

<script async src="https://consent-notice.ft.com/cmp.js?version=4.0.0"></script>

使用国家防范机制一揽子计划

[!注] 我们将增加新的属性(即FT组下的网站)及其配置.

如果您认为您的域名需要新属性配置, 请联系 Ads 隐私小组

非FT.com属性上的用法

import {
  initSourcepointCmp,
  properties,
  interceptManageCookiesLinks,
  debug,
} from "@financial-times/cmp-client";

/**
 * Optionally enable debug mode to see CMP events in the console
 */
debug.logCmpEvents();

/**
 * Import your domain's CMP configuration from the `properties` module:
 * e.g. properties.MM_IGNITES_ASIA, properties.SP_THE_BANKER, etc.
 *
 * We will add more domains as we create new properties in Sourcepoint
 *
 * See below for the full list of initialisation options
 */
initSourcepointCmp({
  propertyConfig: properties["YOUR_PROPERTY_CONFIG_KEY"],
  useConsentStore: false, // Specialist Titles _must_ opt out of Single Consent Store
});
/**
 * Optionally enable "Manage Cookies" link util
 */
interceptManageCookiesLinks(properties["YOUR_PROPERTY_CONFIG_KEY"]);

FT.com 上的用户

import {
  initSourcepointCmp,
  properties,
  interceptManageCookiesLinks,
  debug,
} from "@financial-times/cmp-client";

/**
 * Optionally enable debug mode to see CMP events in the console
 */
debug.logCmpEvents();

/**
 * We suggest using a feature flag to disable the existing cookie banner
 * and enable the new one
 */
if (flagsClient.get("adsDisableInternalCMP")) {
  initSourcepointCmp({
    propertyConfig: FT_DOTCOM_TEST,
  });
  interceptManageCookiesLinks();
}

打开隐私管理器

使用 openPrivacyManager 打开应用的隐私管理器而无需导航 到 FT.com 首选项页面 :

import { initSourcepointCmp, openPrivacyManager, properties } from "@financial-times/cmp-client";

initSourcepointCmp({ propertyConfig: properties.FT_DOTCOM_PROD });

manageCookiesButton.addEventListener("click", () => {
  openPrivacyManager();
});

当 CMP 客户端作为静态脚本被加载时, 请使用在 window.FTConsent数字 :

window.FTConsent.cmp.openPrivacyManager();

函数使用传递到的属性配置 initSourcepointCmp 财务报告和审定财务报表 等待源点报告适用的立法,然后打开 隐私经理 当源点等待用户交互时它不会打开 当隐私管理器已经打开或可见时, 并忽略更多呼叫.

《议定书》/《公约》缔约方会议的配置方案:

可用属性( 正在不断更新)

应对《议定书》/《公约》缔约方会议的活动

如果您需要针对CMP 供应商模块(例如,初始化符合用户所赋予目的的供应商软件包)所引发的事件开展额外工作,您可以通过 window._sp_.addEventListener 方法 :

window._sp_.addEventListener("onMessageReady", (messageType) => {... });
window._sp_.addEventListener("onConsentReady", (legislation, consentUUID, consentString, consentMeta) => { ... });

[!注] 这个 onConsentReady 事件已启动

1. 一旦CMP 装入完毕, 用户的同意选择即可使用
2. 随后,每当用户同意的选择发生变化时

见 源点文件 完整列出您可以聆听的事件和向召回的参数.

调试

您可以使用 logCmpEvents 导出的方法 debug 模块 :

import { debug } from "@financial-times/cmp-client";

debug.logCmpEvents();

如果一切正常,你就会看到CMP模块 记录其生命周期事件到控制台, 即使它的UI没有显示。 。 。 .

这很容易发生 当你做了一个事先同意的选择 而CMP现在从本地存储。 为此,我们建议在开发期间在无人知晓的窗口中运行.

[!注] 请确保您的应用程序始终使用最新的 CMP 客户端库 .

您可以通过运行浏览器控制台中的以下操作来检查您的活应用程序所使用的版本 :

window.FT_CMP_CLIENT_VERSION

发展

如果你能接触到Github上的线人 你可以看看 参考执行 src/examples/cmp-client。 。 。 .

要在浏览器中看到演示, 请运行 :

npm run dev -w src/examples/cmp-client

访问 https://localhost: 5173 (请参见设置详情) src/examples/cmp-client)与横幅互动,看如何相应设置饼干

重置您的同意 cookie/record 和其他常见的故障排除问题, 请参看 解决问题指南

分支预览

在使用静态加载器脚本且配置如上描述的耗用应用程序中,也可以预览您分支上的更改. 附录a cmp_preview 查询参数如下, 其值设定为分支承诺散列的前七个位数 。 在基于 Git 的 VCS UI 中或使用时,这很容易获得 git rev-parse --short HEAD。然后作为附件附上: https://ft.com?cmp_preview=<SHORT_COMMIT_SHA>

资源

对于静态部署过程如何运作的详细深度(仅内部)设计 此处记录。如果需要允许访问,请联系Ads & Prive团队.