Install npm package
// npm way
npm install @strunkie/cookieconsent
// yarn way
yarn add @strunkie/cookieconsent
in project
/* es module */
import Cookieconsent from '@strunkie/cookieconsent';
/* or */
const Cookieconsent = require('@strunkie/cookieconsent');
<!-- native -->
<script src="/node_modules/@strunkie/cookieconsent/dist/js/cookieconsent.js"></script>
<link rel="stylesheet" href="/node_modules/@strunkie/cookieconsent/dist/js/cookieconsent.css">
new Cookieconsent($element, options);
- Type:
String
orDOM element
- Default:
#cookieconsent
see options
- Type:
String
- Default:
push-down
- Options
push-down
fixed-top
stick to the window topfixed-bottom
stick to the window bottom
- Type:
Array
- Default:
[]
- Options
pageload
Accept cookies after pageload. Cookies are set when user refresh pagescroll
Accept cookies on scroll
- Type:
String
- Default:
en
- options
en
nl
- Type:
Array
- Default:
['marketing', 'statistics', 'essential']
- Options:
Marketing
marketing cookiesstatistics
statistics cookiesessential
essential cookies, always enabled
- Type:
Object
- Default: -
- Options: See
examples/translations/en.js
Reopen cookie popup
<a href="javascript:showCookieSettings()">Show cookie settings</a>
Cookie preferences changed.
example:
window.addEventListener('cookieconsent_change');
Create in tagmanager a new tag and trigger this one on pageload
<script>
function CookieconsentCallback(CookieConsent) {
if (CookieConsent.preferences) {
dataLayer.push({'event':'cookieconsent_preferences'});
}
if (CookieConsent.statistics) {
dataLayer.push({'event':'cookieconsent_statistics'});
}
if (CookieConsent.marketing) {
dataLayer.push({'event':'cookieconsent_marketing'});
}
}
</script>
Use for tags with an event trigger the following configuration:
Use for tags with a page trigger the following configuration:
Create for every cookieconsent type a new variable in tagmanager, replace marketing with:
preferences
marketing
statistics
function() {
return Cookieconsent.marketing.toString()
}
And save them as:
Cookieconsent.preferences
Cookieconsent.marketing
Cookieconsent.statistics