Cookiefirst - 官方反应组件
我们的反应帮助组件 反应 cookie 同意由 CookieFirst 的集成能力构建,为管理用户在您的React网站上的同意提供了一个全面的解决方案. 这一组成部分有助于确保遵守国际隐私法,如GDPR、ePrivacy、LGPD和CCPA,允许访问者对您网站使用的饼干和第三方脚本表示同意或更改同意。 CookieFirst是谷歌认证的CMP公司,提供 谷歌同意模式 v2 一体化.
关键特性 :
- 自动饼干协议: 根据用户偏好自动管理 cookie 同意.
- 定期 Cookie 扫描: 定期扫描和更新您网站的饼干用量,以确保持续合规.
- 自定义 Cookie 旗下: 方便地在您的网站中添加并定制一个饼干同意横幅,确保用户体验无缝.
- 同意管理: 包括用户通过横幅直接管理其饼干偏好选项.
- 与 Google 标签管理器整合:可与Google Tag管理器和Google同意模式相兼容,使基于用户同意的第三方脚本易于管理.
- 多语种支持:以40多种语言生成自动化饼干政策,迎合全球受众.
联系人
如果你有任何问题或想要报告问题,请联系我们 https://support.cookiefirst.com/hc/en-us/requests/new 页面存档备份,存于互联网档案馆
最近变动
- 在“ useCookieFirst” 中添加了更具体的返回类型
- 如果横幅无法装入或无法认证的话, 孩子们现在将会被释放
目录
安装
无
npm i @cookiefirst/cookiefirst-react
线条
yarn add @cookiefirst/cookiefirst-react
使用量
import { ReactCookieFirst } from '@cookiefirst/cookiefirst-react'
<ReactCookieFirst url="URL_FROM_ADMIN_PANEL/consent.js">
{... rest of your app}
</ReactCookieFirst>
你可以通过登录到 https://app.cookiefirst.com/ 页面存档备份,存于互联网档案馆
- 导航到菜单中的“ 域 ”
- 在域列表中选择要连接的域的“ 设置”
- 导航到菜单中的“ 嵌入脚本 ”
- 复制 只是我们 从嵌入的脚本
示例
import { useCookieFirst } from '@cookiefirst/cookiefirst-react';
const ExampleComponent = () => {
const { TCFgvl, TCFacceptCategory } = useCookieFirst();
useEffect(() => {
if (TCFgvl) {
TCFacceptCategory([
['purposes', 2],
['purposes', 1],
['purposes', 4],
['purposes', 6],
]);
}
}, [TCFgvl]);
};
属性列表
Cookie 首选中心
整合设置
同意属性
TRF和TCF 同意书
注: 下面的函数和属性需要在管理面板中启用 TCF .
- TCF 同意书
- 更新协议( C)
- TCFis 可启用
- TCF 事件现状
- TCF 国家
- TCFgvl 电话
- TCFgatp 图像
- TCFget 同意结构( )
- TCF 接受类别( )
- TCF 十进制类型( )
- TCF 接受类型
- TCF 十进制类型
- TCFacceptVendor () (中文(简体) )
- TCF 直线Vendor ()
- TCFacceptVendorLegitimate Interest () (中文(简体) )
- TCF 直线 VendorLegitimate Interest () 主题
- 已接受( )
- TCFis VendorLegitimate Interest 已接受()
- 已接受类别( )
- TCFis 类型 被接受
- TCFacceptGatpVendor () (中文(简体) )
- TCF 底线GatpVendor ()
- 已接受 TCFisGatpVendor( )
未分类
属性
打开面板( 名称 )
如果当前没有打开, 打开 Cookie 首选中心 .
-
"名字"("名字") (可选): 字符串 - 当首选项中心打开时应该激活的标签的名称 .
可能的值 :
- "设置",
- "饼干",
- “政策”
const { openPanel } = useCookieFirst();
// open the Settings tab by default
openPanel();
// open the specified tab
openPanel('cookies');
关闭面板( C)
开放时关闭 Cookie 首选中心 . 将会在隐形模式中丢出错误 .
const { closePanel } = useCookieFirst();
closePanel();
隐形模式
当在"隐形模式"中, Cookie First Banner 不做任何同意-管理接口. 唯一提供的内容是支持它的一页上的饼干声明.
更改语言( lang)
此功能允许开发者切换横幅语言.
说明: 我们使用两个字母 ISO-639-1号标准 密码 例如: en 没有 en-GB
- "长": 新语言的字符串-2字母代码.
同意书
获取关于接受类别的信息. 如果你想得到关于接受服务的信息,请前往 已接受的服务
如果获得同意,将成为这一结构的目标:
{
necessary: true, // necessary category can't be disabled
performance: true|false,
functional: true|false,
advertising: true|false,
}
否则就空了.
acceptedCategories === null; // true
已接受的服务
获取接受服务的信息.
如果有同意, 被接受的服务将是一个对象, 关键是配置在我们管理面板的第三方脚本部分中的独特脚本标识符, 并且根据该结构中每项服务的接受状况, 数值是真实的还是虚假的 :
{
unique_script_id: true|false,
other_script_id: true|false,
}
否则就空了.
acceptedServices === null; // true
更新协议( 同意, tCF 同意 ?)
此功能允许开发者更新访问者的同意并设定为给定值.
- "同意" "同意" "concept" : object - 有新同意信息的object.
const { updateConsent } = useCookieFirst();
const newConsent = {
necessary: true, // necessary category can't be disabled
performance: true | false,
functional: true | false,
advertising: true | false,
};
CookieFirst.updateConsent(newConsent);
// or to update existing
const { updateConsent, consent } = useCookieFirst();
const newConsent = { ...consent };
newConsent.functional = true;
CookieFirst.updateConsent(newConsent);
* 联合国要使用此功能, 必须在管理面板中启用 TCF
- "同意书" (可选): 对象 - 有新tcf同意信息的对象。 由于 tcf 同意有非常深入而详细的结构来创建全新的同意,您可以使用助手函数 TCFget 协议结构
const { consent, updateConsent, TCFconsent } = useCookieFirst();
const newConsentTCF = { ...TCFgetConsentStructure() };
newConsentTCF.vendors = { 1: true, 5: true, 10: true };
updateConsent(consent, newConsentTCF);
// or to update existing
const { consent, updateConsent, TCFconsent } = useCookieFirst();
const newConsentTCF = { ...TCFconsent };
newConsentTCF.vendors[5] = true;
updateConsent(consent, newConsentTCF);
同意( )
同意撤销功能将清除访问者的同意,并将这种更改记入我们的同意记录。 完成此动作后,网站会重新加载,允许访问者在域上重新开始. 将再次展示班纳,在游客再次同意之前,不会有任何改变同意的方法.
const { withdrawConsent } = useCookieFirst();
withdrawConsent();
时间戳
用户同意的时间为毫秒.
const { consentTimestamp } = useCookieFirst();
接受类别( 类别/ 名称)
此功能允许开发者接受单一或多类
-
“ 类别” Name: 字符串或字符串数组 - 开发者想要的类别的名称/名称
可能的值 :
- "必须",
- "表现",
- "职能",
- "广告"
const { acceptCategory } = useCookieFirst();
acceptCategory('functional');
// or with multiple
acceptCategory(['functional', 'advertising']);
类别( 类别/ 名称)
此功能允许开发者拒绝单类或多类
-
“ 类别” Name: 字符串或字符串数组 - 开发者想要的类别的名称/名称
可能的值 :
- "表现",
- "职能",
- "广告"
const { declineCategory } = useCookieFirst();
declineCategory('functional');
// or with multiple
declineCategory(['functional', 'advertising']);
接受服务(服务/服务)
此功能允许开发者通过他们独特的标识符接受指定的服务. 如果同意政策选项被设定为"基于类别"而非"基于服务",则该功能将接受该服务所包括的所有类别.
- "服务":字符串或数组字符串 - 唯一应该接受的服务/服务的id.
const { acceptService } = useCookieFirst();
acceptService('service_id');
// or with multiple
acceptService(['service_id_1', 'service_id_2']);
服务(服务/服务)
这个功能允许开发者通过他们独特的标识符来拒绝指定的服务. 如果将同意政策选项设定为"基于类别"而非"基于服务",则该功能会降低该服务所包括的所有类别.
- "服务": 字符串或数组字符串 - 唯一应该被拒绝的服务/服务的id.
const { declineService } = useCookieFirst();
declineService('service_id');
// or with multiple
declineService(['service_id_1', 'service_id_2']);
接受全部类型( C)
这个功能允许开发者同意所有可用的类饼干.
const { acceptAllCategories } = useCookieFirst();
acceptAllCategories();
接受预选类型( )
此功能允许开发者仅接受之前在CookieFirst admin面板的域设置屏幕中预选的类别.
const { acceptPreselectedCategories } = useCookieFirst();
acceptPreselectedCategories();
否认( )
此功能允许开发者完全拒绝同意.
const { deny } = useCookieFirst();
deny();
递减所有类型 ()
此功能允许开发者只接受必要的类别并降低所有其他类别,并带有一行代码. 虽然这似乎与 同意 功能,它不会完全抹去同意,也不会显示饼干横幅. 它更新了只启用必要饼干的同意.
const { declineAllCategories } = useCookieFirst();
declineAllCategories();
注:以下功能和属性要求在管理面板中启用 TCF .
TCF 同意书
获取当前TCF同意的信息.
如果获得同意,将成为这一结构的目标:
{
vendors: {},
categories: {},
vendorsLegitimateInterest: {},
categoriesLegitimateInterest: {},
gatp: {}
}
否则就空了.
const { TCFconsent } = useCookieFirst();
TCFconsent === null; // true
TCFis 可启用
管理面板中是否启用了 TCF 信息 .
const { TCFisEnabled } = useCookieFirst();
TCF 事件现状
特克斯和凯科斯群岛一体化的旗帜现状.
可能的值 :
- 装入,
- 脚踏实地,
- 用户动作完成
您可以在官方 IAB 文件中了解更多事件现状 : 这里
const { TCFeventStatus } = useCookieFirst();
TCF 国家
确定参考立法的国家代码.
const { TCFcountry } = useCookieFirst();
TCFgvl 电话
现有全球供应商名单(GVL),载有所有已登记和核准的供应商、目的、特征、特殊目的、特殊特征、堆积和数据类别的信息.
注: GVL 需要执行任何有关 TCF 同意的行动,所以在试图执行任何有关同意的行动之前,请务必检查是否已经下载过 .
const { TCFgvl, TCFacceptCategory } = useCookieFirst();
if (TCFgvl) {
TCFacceptCategory([
['purposes', 1],
['purposes', 3],
['purposes', 4],
['purposes', 6],
]);
}
TCFgatp 图像
目前Google的Ad Tech提供商(ATP)列表包含所有属于常用列表的Ad技术提供商的信息.
您可以读取更多关于 Google ATP 的信息 这里
注: Google ATP需要执行任何关于Google ATP同意的动作,所以请务必检查它是否已经下载过.
const { TCFgatp, TCFacceptGatpVendor } = useCookieFirst();
if (TCFgatp) {
TCFacceptGatpVendor([2, 7, 10]);
}
TCFget 同意结构( )
此功能允许开发者获得 TCF 同意的空结构, 如果您想通过使用函数同时准备并更新整个同意, 将非常有用 更新协议( C)
示例空结构已显示 这里
类别/类别
此函数允许开发者接受给定的类别或类别列表.
-
"类":数组/数组-单类由类别类型名称和特定类别数量组成.
类型可能值 :
- "目标",
- "特别目的",
- "特产",
- "特质"
const { TCFgvl, TCFacceptCategory } = useCookieFirst();
// single category
if (TCFgvl) {
TCFacceptCategory(['purposes', 2]);
}
// or with multiple
if (TCFgvl) {
TCFacceptCategory([
['purposes', 1],
['purposes', 3],
['purposes', 4],
['purposes', 6],
]);
}
类别(类别)
此函数允许开发者拒绝给定的类别或类别列表.
-
"类":数组/数组-单类由类别类型名称和特定类别数量组成.
类型可能值 :
- "目标",
- "特别目的",
- "特产",
- "特质"
const { TCFgvl, TCFdeclineCategory } = useCookieFirst();
// single category
if (TCFgvl) {
TCFdeclineCategory(['purposes', 2]);
}
// or with multiple
if (TCFgvl) {
TCFdeclineCategory([
['purposes', 1],
['purposes', 3],
['purposes', 4],
['purposes', 6],
]);
}
类别/类别
此功能允许开发人员接受给定的合法权益类别或合法权益类别的列表.
-
"类":数组/数组-单类由类别类型名称和特定类别数量组成.
类型可能值 :
- "目标"
const { TCFgvl, TCFacceptCategoryLegitimateInterest } = useCookieFirst();
// single category
if (TCFgvl) {
TCFacceptCategoryLegitimateInterest(['purposes', 2]);
}
// or with multiple
if (TCFgvl) {
TCFacceptCategoryLegitimateInterest([
['purposes', 2],
['purposes', 7],
['purposes', 8],
]);
}
TCF 十二行分类 合法兴趣(类别)
此功能允许开发人员拒绝给合法权益类别或合法权益类别的列表.
-
"类":数组/数组-单类由类别类型名称和特定类别数量组成.
类型可能值 :
- "目标",
const { TCFgvl, TCFdeclineCategoryLegitimateInterest } = useCookieFirst();
// single category
if (TCFgvl) {
TCFdeclineCategoryLegitimateInterest(['purposes', 2]);
}
// or with multiple
if (TCFgvl) {
TCFdeclineCategoryLegitimateInterest([
['purposes', 2],
['purposes', 7],
['purposes', 8],
]);
}
TCFacceptVendor(供应商/供应商)
此功能允许开发者接受给定的供应商或供应商名单
- "仇报":数字的数目/数量 -- -- 应接受的独特的供应商/供应商编号.
const { TCFgvl, TCFacceptVendor } = useCookieFirst();
// single vendor
if (TCFgvl) {
TCFacceptVendor(10);
}
// or with multiple
if (TCFgvl) {
TCFacceptVendor([2, 6, 10, 30]);
}
TCFdectlineVendor(供应商/供应商)
此功能允许开发者拒绝给定的供应商或供应商名单
- "仇报":数量/数量 -- -- 应减少的销售商/供应商的独特标识.
const { TCFgvl, TCFdeclineVendor } = useCookieFirst();
// single vendor
if (TCFgvl) {
TCFdeclineVendor(10);
}
// or with multiple
if (TCFgvl) {
TCFdeclineVendor([2, 6, 10, 30]);
}
TCFacceptVendorLegitimate Interest(供应商/供应商)
此功能允许开发人员接受特定供应商或供应商名单的合法权益
- "仇报":数字的数目/数量 -- -- 应接受的独特的供应商/供应商编号.
const { TCFgvl, TCFacceptVendorLegitimateInterest } = useCookieFirst();
// single vendor
if (TCFgvl) {
TCFacceptVendorLegitimateInterest(8);
}
// or with multiple
if (TCFgvl) {
TCFacceptVendorLegitimateInterest([8, 11, 15]);
}
TCF 十二行 VendorLegitimate Interest(供应商/供应商)
此功能允许开发者拒绝给定供应商或供应商名单的合法权益
- "仇报":数量/数量 -- -- 应减少的销售商/供应商的独特标识.
const { TCFgvl, TCFdeclineVendorLegitimateInterest } = useCookieFirst();
// single vendor
if (TCFgvl) {
TCFdeclineVendorLegitimateInterest(8);
}
// or with multiple
if (TCFgvl) {
TCFdeclineVendorLegitimateInterest([8, 11, 15]);
}
TCFis Vendor 已接受(毒物处理)
此功能允许开发者检查是否有给定ID的供应商被用户接受.
- "复仇药": 编号 -- -- 独特的供应商编号
const { TCFisVendorAccepted } = useCookieFirst();
TCFisVendorAccepted(10); //false or true
TCFis VendorLegitimate Interest 已接受(供应商)
此功能允许开发者检查是否有用户接受对给定ID的供应商的合法权益.
- "复仇药": 编号 -- -- 独特的供应商编号
const { TCFisVendorLegitimateInterestAccepted } = useCookieFirst();
TCFisVendorLegitimateInterestAccepted(8); //false or true
TCFisCategory 接受(名称, id)
此功能允许开发者检查是否接受带有特定类别类型和 id 的分类
- "名字"("名字"): 字符串 - 类别类型名称
可能值 :
- 目的,
- 特殊目的,
- 特殊特性
- 特性
- 编号: 数字 - 特定类型类别编号
const { TCFisCategoryAccepted } = useCookieFirst();
TCFisCategoryAccepted('specialPurposes', 2); //false or true
TCFis 类型 被接受的兴趣(名称, id)
此功能允许开发者检查是否接受具有特定类别类型的类的合法权益和 id
-
"名字"("名字"): 字符串 - 类别类型名称 可能值 :
- 目的,
-
编号: 数字 - 特定类型类别编号
const { TCFisCategoryLegitimateInterestAccepted } = useCookieFirst();
TCFisCategoryLegitimateInterestAccepted('purposes', 8); //false or true
TCFacceptGatpVendor(供应商/供应商)
此功能允许开发者接受 GATP 供应商或 GATP 供应商列表
- "仇报":数字的数目/数量 -- -- 应接受的GATP供应商/供应商的独特编号.
const { TCFgatp, TCFacceptGatpVendor } = useCookieFirst();
// single vendor
if (TCFgatp) {
TCFacceptGatpVendor(2);
}
// or with multiple
if (TCFgatp) {
TCFacceptGatpVendor([2, 7, 10]);
}
TCF 底线GatpVendor( 供应商/ 供应商)
此功能允许开发者拒绝 GATP 供应商或 GATP 供应商列表
- "仇报": 数字的数目/数量 -- -- 应拒绝的GATP供应商/供应商的独特编号.
const { TCFgatp, TCFdeclineGatpVendor } = useCookieFirst();
// single vendor
if (TCFgatp) {
TCFdeclineGatpVendor(2);
}
// or with multiple
if (TCFgatp) {
TCFdeclineGatpVendor([2, 7, 10]);
}
TCFisGatpVendor 已接受(id)
此功能允许开发者检查给定 d 的 GATP 供应商是否已被接受
- 编号: 编号 - gatp 供应商的独特标识
const { TCFisGatpVendorAccepted } = useCookieFirst();
TCFisGatpVendorAccepted(2); //false or true
访客
独特的id,用于链接用户的同意. 当用户与请求接触以撤销/重置时有用 .
const { visitorId } = useCookieFirst();
编译 Embeds ()
JS API允许您强制渲染嵌入式内容(如饼干政策或饼干表). 这在整合中,在我们的旗子装货时,没有嵌入地的容器。 如果你通过单页应用程序浏览导航,或者仅仅通过简单的JS代码,将它动态地添加到DOM中,可能就是这种情况. 在DOM中加入div后,运行 renderEmbeds() 将嵌入内容放入其中.
获取 LatestScan ()
JS API允许您获取您网站上发现的饼干列表以及最新的扫描日期. 为了做到这一点,使用方法。 它将再次承诺作出以下反应:
{
updated_at: "2020-10-29T13:30:23+00:00", // latest scan date and time in ISO 8601
formatcookies: [], // an array of cookies found on your site together with any custom cookies you may have added as well as our own cookies needed for banner to work
}
已更改 View( )
该功能用于SPA. 为了让旗帜知道页面可能已经改变,出现了新的收听者或者用户导航到新的子页面.