# RYZE Digital Cookie Consent
## Install
```sh
npm i @ryze-digital/cookie-consent --save
```
## Usage
Place the following `
```
Now you have to decide between one of the following implementations.
### OneTrust
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](https://webpack.js.org/concepts/entry-points/).
```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
}
```
### Google Tag Manager
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
```
### Matomo
```js
```
#### 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
```
### Nonce
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
```