GDPR Cookie 同意横幅
这是什么?
实施符合GDPR的标语. 它允许用户颗粒选择入出四个不同的饼干类别.
它现在和斯维尔特基特一起工作 没有任何工作!
它的特征是什么?
- 小型、离散和非侵入性
- GDPR 比较器
- 响应
- 提供四个类别
- 选择进入时运行任何函数
- 每次访问都会运行所选择的功能
- 改变选择需要用户再次选择进入.
- 丝绒准备
- 无依赖关系
- 选择每年到期
- 可选 CSS( 带有 BEM ) , 可以马上绑住您的 cookie 消息
- 可修改的标签和信件
我怎么安装?
国家预防机制
简单地将节点模块安装到您的代码库中 .
npm install --save-dev @beyonk/gdpr-cookie-consent-banner
维娅 CDN
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/dist/index.js"
></script>
使用量
丝绒
用它来做一个普通的丝绒组件:
<GdprBanner cookieName="foo" description="bar" on:analytics={initAnalytics} />
<script>
import '@beyonk/gdpr-cookie-consent-banner/banner.css' // optional, you can also define your own styles
import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'
function initAnalytics () {
// do something with segment.io or google analytics etc
}
</script>
HTML / Web 组件
使用自定义 HTML 元素 cookie-consent-banner数字 :
<!-- optional, you can also define your own styles, or override the provided ones -->
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/src/lib/banner.css"
/>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/dist/index.js"
></script>
<cookie-consent-banner cookie-name="foo" description="bar"></cookie-consent-banner>
方法
您可以通过绑定组件实例和呼叫从外部链接调用 cookie 横幅 show() 就在这.
<GdprBanner bind:this={gdprBanner} cookieName="foo" description="bar" on:analytics={initAnalytics} />
<script>
import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'
let gdprBanner
gdprBanner.show()
</script>
道具
缺省情况如下:.
当使用 Web 组件时, 使用属性名称的下大写版本, 将布尔语作为字符串, 对象属性作为 json 字符串
无法选择退出“ 必要的” 饼干 .
const props = {
/**
* You must set the cookie name.
**/
cookieName: 'beyonk_gdpr',
/**
* Whether to display the banner to the user or not. This can be because you're in an iframe
* and there is no room to show it if they haven't already consented, but, if they have already
* consented, you want to action the "enableAnalytics" and similar handlers if they *have*.
*
* Default is true
*
* For Web Components, pass `visible="true"`
**/
visible: true,
/**
* The cookie configuration, such as domain and path.
*
* For web components, pass a JSON string: `cookie-config='{ "domain": "example.com", "path": "/" }'`
**/
cookieConfig: {
domain: 'example.com',
path: '/'
},
/**
* These are the top two lines of text on the banner
* The 'description' field can include html such as links
**/
heading: 'GDPR Notice',
description: 'We use cookies to offer a better browsing experience, analyze site traffic, personalize content, and serve targeted advertisements. Please review our <a href="/privacy-policy">privacy policy page</a>. By clicking accept, you consent to our privacy policy & use of cookies.',
/**
* All the button labels and aria-label content.
Note that either acceptAllLabel or acceptSelectedLabel will appear, depending on whether the user has selected all or only some cookie choices in the configuration dialogue.
**/
acceptAllLabel: 'Accept all',
acceptSelectedLabel: 'Accept selected',
rejectLabel: 'Reject all',
settingsLabel: 'Preferences',
closeLabel: 'Close window',
editLabel: 'Edit settings',
/**
* These are the default opt-ins and their descriptions.
* When value is set to true, the option will automatically be checked on load.
*
* If you want to hide a category, simply set it to false, e.g. 'marketing: false'
**/
choices: {
necessary: {
label: "Necessary cookies",
description: "Used for cookie control. Can't be turned off.",
value: true
},
tracking: {
label: "Tracking cookies",
description: "Used for advertising purposes.",
value: true
},
analytics: {
label: "Analytics cookies",
description: "Used to control Google Analytics, a 3rd party tool offered by Google to track user behavior.",
value: true
},
marketing: {
label: "Marketing cookies",
description: "Used for marketing data.",
value: true
}
},
/**
* Show an icon to edit cookies later, when banner is closed.
**/
showEditIcon: true,
/**
* Show a button to reject all cookies.
**/
canRejectCookies: false
}
活动
事件是你对同意的反应 每种类型的同意在用户设定时都会发出一个事件. 协议状态在事件细节中通过.
为了方便在使用Web组件时——并围绕种族条件工作,在操作器被附加之前,由组件释放出事件,我们也发出同样的事件,并带有前缀 consent打开 window。 。 。 .
指纹
接受分析或跟踪 cookie 将创建一个独特的UUID,允许您在像 CAPI 这样的系统中使用服务器侧的 cookie 时区分出不同用户的事件.
这个"指印"作为饼干上"fp"的属性被曝光.
丝绒
<GdprBanner bind:this={gdprBanner} cookieName="foo" description="bar" on:analytics={handleAnalytics} />
<script>
import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'
function handleAnalytics (event) {
if (event.detail.agreed) {
// some fathom analytics tracking code or similar
} else {
// disable any previously initialized analytics tracking code
}
}
</script>
HTML / Web 组件
<cookie-consent-banner cookie-name="foo" description="bar"></cookie-consent-banner>
<script>
document.getElementsByTagName('cookie-consent-banner')[0].addEventListener('analytics', () => {
// some fathom analytics tracking code or similar
})
// We also emit these events on `window`
window.addEventListener('consent:analytics', () => {
// some fathom analytics tracking code or similar
})
</script>