68publishers-cookie-consent 中文文档教程
Cookie Consent
An extended integration of [orestbida/cookieconsent](https://github.com/orestbida/cookieconsent) with support of the Google Tag Manager.- :whitecheckmark: Easy configurable GTM template
- :whitecheckmark: Five configurable storages standardized by Google
- :whitecheckmark: Possibility to synchronize consents between more storages
- :whitecheckmark: Default translations
Table of contents
- Integration into the GTM
- Configuration
- Settings modal trigger
- Triggering tags based on the consent
- Accessing the wrapper in the JavaScript
- How the GTM integration works
- How to update already published container
- Development
- License
Integration into the GTM
打开 Google 跟踪代码管理器网络管理并为您的网站选择一个容器。 接下来,浏览左侧导航中的Templates
链接,然后单击Tag Templates
部分内的New
按钮。
您只需要此包根目录中的 gtm_template.tpl
文件。 下载文件并在模板编辑器中导入:
导入成功后点击按钮Save< /code>,离开模板编辑器,然后通过左侧导航中的
Tags
链接。 然后使用导入的模板创建新标签,作为触发器设置选项 Consent Initialization - All Pages
并保存。
现在您可以打开网站预览,您可以看到 cookie 小部件就在这里! 但是让我们稍微配置一下。
Configuration
:exclamation: 强烈建议在成功配置模板后锁定包版本(请参阅下面的
Package version
字段)。 避免在生产容器中使用latest
版本!
该插件可以使用标签定义中的字段进行配置。
Basic options
Field | Description |
---|---|
Package version | Version of the package 68publishers/cookie-consent . Valid inputs are the latest or a version in formats x.x.x , x.x.x-beta.x and x.x.x-alpha-x . For available versions see the releases. |
Make consent required | The page will be blocked until a user action. |
Show the widget as soon as possible | The widget will be displayed automatically on the page load. You must trigger the widget manually by calling CookieConsentWrapper.unwrap().show() if the option is disabled. |
Hide from bots | Enable if you don't want the plugin to run when a bot/crawler/webdriver is detected. |
Revision | Revision number of your terms of use of cookies. For more information see below. |
Delay | Number of milliseconds before showing the consent modal. |
Consent & Setting modal options
这两个部分都包含以下字段:Layout
、Position
、Transition
。 这些设置会影响模态框出现的位置以及它们的形状。 同意模式按钮的行为可以通过字段 Primary button role
、Secondary button role
(接受必要的 cookie 或打开设置模式)和 Buttons order 进行配置。 有关详细信息,请参阅小部件文档。
设置模式有一个特殊选项,名称为 Settings modal trigger selector
。 该选项的值可以是 CSS 选择器,用于自动创建打开模式的触发按钮。 检查示例。
Cookies options
Field | Description |
---|---|
Cookie name | The name of a cookie value that holds information about the user's consent. |
Cookie expiration | Expiration of the cookie in days. |
Enable cookies auto-clear | All cookies will be deleted based on the user's consent and a selected strategy if the option is enabled. |
Cookies auto-clear strategy | Strategy for cookies auto-clear feature. |
Cookie names | Names of the cookies that will be deleted or kept (based on a selected strategy). |
实施了以下策略:
1) Clear all except defined
- 当用户拒绝任何存储时,除了您在字段 Cookie names
中定义的 cookie 之外的所有 cookie 将被删除。 2) Clear defined only
- 当用户拒绝任何存储时,您在字段 Cookie names
中定义的所有 cookie 将被删除。
无需从 Cookie 名称
字段定义名称,因为此 cookie 永远不会自动删除。 当前不支持原始 插件 中的选项 autoclear_cookies
,因为此包中未实现 cookie 表。
Storage options
有五种类型的存储可用:
- Functionality storage
- Security storage
- Personalization storage
- Ad storage
- Analytics storage
每种存储都定义了一个触发器的名称,如果用户同意,该触发器将被调用。 没有必要使用或显示小部件中的每个存储。 此外,对存储的同意可以与另一个存储的同意同步。
Field | Description |
---|---|
Enabled by default | A storage has granted consent by default if the option is checked. Triggers will be invoked as soon as possible. |
Display in the widget | A storage will be displayed inside the settings modal if the option is checked. |
Readonly | A toggle button for storage inside the settings modal will be disabled if the option is checked. Commonly used for functionality storage. The option is available only if the option Display in the widget is checked. |
Synchronize consent with | The consent can be synchronized with another storage. The option is available only if the option Display in the widget is not checked. |
Show the modal again if storage is denied | The settings modal will be opened again after the specified number of days if the storage is denied. The option is available only if the option Display in the widget is not checked. |
Event trigger name | The name of an event trigger that will be invoked on granted consent with storage. The name may not be unique for each storage (unique triggers are invoked only). No trigger is invoked if the option has an empty value. |
Event triggers based on composite consent
如上所述,每个存储都可以定义一个触发器,当存储同意被授予时调用该触发器。 在某些情况下,您可能希望仅当用户同意使用多种存储类型时才触发某些触发器。 例如,如果您有一个名为 fb_pixel_trigger
的触发器,并且您只想在用户同意使用 analytics_storage
和 ad_stroage
时触发它。 然后你的配置可能看起来像
这样
Translation settings
: languages:
将从字段 Locales
中获取将为小部件加载和访问的翻译。 必须在新行上定义每个语言环境。 如果你想重写默认翻译或者你想为新的语言环境添加翻译,那么你可以在表 Translations
中定义它们。
Locale detection
区域设置检测可能会受到以下字段
Field | Description |
---|---|
Locale detection strategy | Browser to get user's browser language or Document to read a value from <html lang="..."> of the current page. |
Locale | You must define the website locale when the detection strategy is disabled. The locale must be one of the previously defined locales in the field Locales . |
How to manage revisions
的影响:默认修订号为 0
并且可以通过字段 Revision
更改该号码。 当您更改值时,同意模式将再次显示给所有用户。 您可以定义一条消息,该消息将显示在同意模式的描述中。 如果您想这样做,请使用键 consent_modal_revision_message
定义自定义翻译,并使用键 consent_modal_description
重写翻译。 该插件会将同意模式描述中的占位符 [[revision_message]]
替换为您的修订消息。
注意:cookieconsent 插件 使用占位符 {{revision_message}}
但 GTM 使用此符号表示变量,因此包附带占位符 [[revision_message]]
。
Stylesheets
Field | Description |
---|---|
Include default stylesheets | The default stylesheet for the widget will be loaded into the page if the option is checked. We recommend keeping the option checked and adding custom stylesheets through the next options. |
External stylesheets | The list of custom CSS stylesheets. One URL per line. |
Internal stylesheet | Custom CSS rules that will be injected into the page after default stylesheets and other external stylesheets. |
Page scripts
Field | Description |
---|---|
Manage page scripts | Enable if you want to easily manage existing <script> tags. |
Script selector | The name of a data attribute that is used for managed |
Cookie Consent
An extended integration of [orestbida/cookieconsent](https://github.com/orestbida/cookieconsent) with support of the Google Tag Manager.- :whitecheckmark: Easy configurable GTM template
- :whitecheckmark: Five configurable storages standardized by Google
- :whitecheckmark: Possibility to synchronize consents between more storages
- :whitecheckmark: Default translations
Table of contents
- Integration into the GTM
- Configuration
- Settings modal trigger
- Triggering tags based on the consent
- Accessing the wrapper in the JavaScript
- How the GTM integration works
- How to update already published container
- Development
- License
Integration into the GTM
Open Google Tag Manager web administration and select a container for your website. Next, go through the Templates
link in the left navigation and click on the button New
inside a section Tag Templates
.
All you need is a file gtm_template.tpl
from the root directory of this package. Download the file and import it in the Template editor:
After successful import click on the button Save
, leave the Template editor, and go through the Tags
link in the left navigation. Then create the new tag with the imported Template, as trigger set an option Consent Initialization - All Pages
and save it.
Now you can open a preview of the website and as you can see the cookie widget is here! But let's configure it a bit.
Configuration
:exclamation: Locking the package version is highly recommended (see the field
Package version
below) after you successfully configure the template. Avoid using thelatest
version in production containers!
The plugin is configurable using fields inside the tag definition.
Basic options
Field | Description |
---|---|
Package version | Version of the package 68publishers/cookie-consent . Valid inputs are the latest or a version in formats x.x.x , x.x.x-beta.x and x.x.x-alpha-x . For available versions see the releases. |
Make consent required | The page will be blocked until a user action. |
Show the widget as soon as possible | The widget will be displayed automatically on the page load. You must trigger the widget manually by calling CookieConsentWrapper.unwrap().show() if the option is disabled. |
Hide from bots | Enable if you don't want the plugin to run when a bot/crawler/webdriver is detected. |
Revision | Revision number of your terms of use of cookies. For more information see below. |
Delay | Number of milliseconds before showing the consent modal. |
Consent & Setting modal options
Both sections contain these fields: Layout
, Position
, Transition
. These settings affect where modals appear and what shape they take. The behavior of the consent modal buttons can be configured through fields Primary button role
, Secondary button role
(accept necessary cookies or open the settings modal), and Buttons order
. See the widget documentation for more details.
The settings modal has one special option with the name Settings modal trigger selector
. A value of the option can be CSS selector for automatic creation of the trigger button that opens the modal. Check the example.
Cookies options
Field | Description |
---|---|
Cookie name | The name of a cookie value that holds information about the user's consent. |
Cookie expiration | Expiration of the cookie in days. |
Enable cookies auto-clear | All cookies will be deleted based on the user's consent and a selected strategy if the option is enabled. |
Cookies auto-clear strategy | Strategy for cookies auto-clear feature. |
Cookie names | Names of the cookies that will be deleted or kept (based on a selected strategy). |
The following strategies are implemented:
1) Clear all except defined
- All cookies except those you define in the field Cookie names
will be deleted when the user denies any storage. 2) Clear defined only
- All cookies you defined in the field Cookie names
will be deleted when the user denies any storage.
There is no need to define a name from the Cookie name
field because this cookie is never automatically deleted. The option autoclear_cookies
from the original plugin is not currently supported because cookie tables are not implemented in this package.
Storage options
Five types of storage are available:
- Functionality storage
- Security storage
- Personalization storage
- Ad storage
- Analytics storage
Each storage defines the name of a trigger that will be invoked if the user provides consent. It is not necessary to use or display each storage in the widget. Also, the consent for the storage can be synchronized with the consent of another storage.
Field | Description |
---|---|
Enabled by default | A storage has granted consent by default if the option is checked. Triggers will be invoked as soon as possible. |
Display in the widget | A storage will be displayed inside the settings modal if the option is checked. |
Readonly | A toggle button for storage inside the settings modal will be disabled if the option is checked. Commonly used for functionality storage. The option is available only if the option Display in the widget is checked. |
Synchronize consent with | The consent can be synchronized with another storage. The option is available only if the option Display in the widget is not checked. |
Show the modal again if storage is denied | The settings modal will be opened again after the specified number of days if the storage is denied. The option is available only if the option Display in the widget is not checked. |
Event trigger name | The name of an event trigger that will be invoked on granted consent with storage. The name may not be unique for each storage (unique triggers are invoked only). No trigger is invoked if the option has an empty value. |
Event triggers based on composite consent
As mentioned above, each storage can define a trigger that is invoked when consent with the storage has been granted. In some situations, you may want some trigger to be fired only if the user gives consent with multiple storage types. For example, if you have a trigger called fb_pixel_trigger
and you want to fire it only if the user gives consent with the analytics_storage
and the ad_stroage
. Then your configuration may look like this:
Translation settings
The package comes with the default translations for the following languages:
Translations that will be loaded and accessible for the widget are taken from the field Locales
. Each locale must be defined on a new line. If you want to rewrite default translations or you want to add translations for a new locale then you can define them in a table Translations
.
Locale detection
Locale detection can be affected with the following fields:
Field | Description |
---|---|
Locale detection strategy | Browser to get user's browser language or Document to read a value from <html lang="..."> of the current page. |
Locale | You must define the website locale when the detection strategy is disabled. The locale must be one of the previously defined locales in the field Locales . |
How to manage revisions
The default revision number is 0
and the number can be changed through the field Revision
. When you change the value the consent modal will be displayed for all users again. You can define a message that will be displayed in the consent modal's description. If you want to do that define custom translation with the key consent_modal_revision_message
and rewrite a translation with the key consent_modal_description
. The plugin will replace the placeholder [[revision_message]]
in the consent modal description with your revision message.
Note: the cookieconsent plugin uses the placeholder {{revision_message}}
but this notation is used by GTM for variables so the package comes with the placeholder [[revision_message]]
instead.
Stylesheets
Field | Description |
---|---|
Include default stylesheets | The default stylesheet for the widget will be loaded into the page if the option is checked. We recommend keeping the option checked and adding custom stylesheets through the next options. |
External stylesheets | The list of custom CSS stylesheets. One URL per line. |
Internal stylesheet | Custom CSS rules that will be injected into the page after default stylesheets and other external stylesheets. |
Page scripts
Field | Description |
---|---|
Manage page scripts | Enable if you want to easily manage existing <script> tags. |
Script selector | The name of a data attribute that is used for managed |
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。