RYZE Digital Cookie Consent

!Run linter(s) workflow status

Install

``sh
npm i @ryze-digital/cookie-consent --save
`

Usage

Place the following
`

Now you have to decide between one of the following implementations.

$3

Add the following src and data-domain-script attributes the
`

If this attribute is added to any element (iFrame, Google Map, etc.) which is not a
`

You can also combine values via comma separation (e.g., data-cookieconsent="YouTube Video, marketing"). Before consent the element is hidden or shows a placeholder. After consent, the library sets src from data-src and executes queued scripts.

Google Tag Manager and Matomo

You can also load GTM or Matomo synchronously with this library. There are some custom data that are getting pushed
to the dataLayer object when consent has changed, so tags can be triggered depending on those data as well.

1. PreferencesCategoryAccepted
2. MarketingCategoryAccepted
3. StatisticsCategoryAccepted


To use it, you have to update your webpack.config.js.
Add the line below to your entry configuration.

`js
CookieConsentTagManager: ['./node_modules/@ryze-digital/cookie-consent/dist/CookieConsentTagManager']
`

And exclude it from bundling to vendors chunk.

`js
vendors: {
test: (mod) => {
// Include all node_modules except cookie consent
return !(!mod.context.includes('node_modules') || mod.context.includes('@ryze-digital/cookie-consent/dist'));
},
name: 'vendor',
chunks: 'all',
enforce: true
}
`

$3

Apart from custom data, this library also supports Google consent mode. This means that it pushes consent mode data in
addition to custom data to GTM dataLayer based on user consent. So, if a Google container is configured for consent mode
then it should work out of the box.

`js
data-tag-manager="google"
src="{WebResource->scripts:file=CookieConsentTagManager.js}"
id="//yourTagmanagerID"
>
`

$3

`js
data-tag-manager="matomo"
src="{WebResource->scripts:file=CookieConsentTagManager.js}"
id="//yourTagmanagerUrl"
>
`

#### Note

If you don't want to use the tag loading functionality and want to load whole GTM, Matomo or any other platform after
user consent is given, then simply set the data attribute.

`js

`

$3

If you are using a restrictive CSP that disallows inline scripts without a nonce you can set the nonce by adding the data-nonce attribute to the script tag.

`js
data-tag-manager="matomo"
src="{WebResource->scripts:file=CookieConsentTagManager.js}"
id="//yourTagmanagerUrl"
data-nonce="//yourNonceValue"
>
``