Cookie Consent
A flexible, highly configurable, mobile friendly, drop in JavaScript consent script that interacts directly with Google Tag manager Consent Overview.
Built with EU cookie consent and the dreaded GDPR standards in mind!
Installation
NPM
npm install @motomedialab/cookie-consent --save
// import the module within your javascript
// this must be done after configuring tag manager and options
import '@motomedialab/cookie-consent';
CDN
<script src="https://cdn.jsdelivr.net/npm/@motomedialab/cookie-consent@latest" type="module"></script>
Configuring Google Tag Manager
There is a little pre-work as detailed in the example code below. Once installed, the script will automatically apply
the Tag Manager consent settings, and will emit a cookieConsent event to Tag Manager when these preferences
are initialised/changed.
If you haven’t done so already, you need to enable ‘Consent Overview’ in your Tag Manager account. This can be found within Admin > Container Settings > Additional Settings
For information on configuring Tag Manager for Consent Overview, see the documentation: Consent Overview
Once this is done, you can then create a custom event trigger in Tag Manager to listen for this event, and use it to fire your tags, based on the users consent level.
You can then add your newly created trigger to as a firing trigger for each event and configure each tag according to the required consent level:
That’s it, your Tag Manager should now be ready! Make sure to test your configuration in Preview Mode before publishing your changes.
JavaScript implementation
<script>
window.gtmId = 'GTM-XXXXXXX';
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments)
}
// configure our cookie consent
window.cookieConsent = {
cookiePolicy: '/privacy',
styling: {
buttonColor: '#333',
},
settings: {
functionality: {
essential: true,
description: 'There are some cookies that we have to include in order for certain web pages to function. For this reason, they do not require your consent.',
cookies: [
{
name: 'laravel_session',
expires: '2 hours',
description: 'This cookie is used to identify your unique session on the website.',
},
]
},
analytics: {
description: 'We use these for internal research on how we can improve the service we provide for all our users. These cookies assess how you interact with our website.',
cookies: [
{
name: '_ga, _ga_*',
expires: '2 years',
description: 'This cookie is used by Google Analytics to distinguish unique users by assigning a randomly generated number as a client identifier. It is included in each page request in a site and used to calculate visitor, session and campaign data for the sites analytics reports.',
},
{
name: 'initialReferer',
expires: '5 days',
description: 'We store the initial referer in a cookie to help us understand how users find our website.'
}
]
},
}
}
</script>
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', window.gtmId);</script>
<!-- End Google Tag Manager -->
<!-- Cookie Consent Script -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@motomedialab/cookie-consent@latest/dist/index.js"></script>
Configuration
Below is a full configuration example, with all available options:
window.cookieConsent = {
// flag to show/hide for the current page (optional)
hide: false,
// the title displayed at the top of the cookie consent banner (optional, defaults to 'We use cookies')
title: 'We use cookies',
// the description displayed at the top of the cookie consent banner (optional, will use default)
description: 'Our website uses cookies to improve your experience. In compliance with EU laws, we need to know if you agree to our use of cookies.',
// link to privacy policy (optional, hides link if not defined)
cookiePolicy: '/privacy',
// ability to change basic styling options
styling: {
buttonColor: '#FF0000', // defaults to grey
},
// per cookie settings. This gives the ability to customise the cookie settings
// these are in five categories, ad, analytics, functionality, personalization & security
// and you can have one, none, all or some of these categories
settings: {
functionality: {
// title of the cookie group (optional, will be auto calculated by default)
title: 'Functionality Cookies',
// whether the preference is essential and cannot be turned off (optional, false by default)
essential: true,
// a description of what this block is for
description: 'There are some cookies that we have to include in order for certain web pages to function. For this reason, they do not require your consent.',
// an array of cookies that are set with this preference
cookies: [
{
// the cookie name
name: 'laravel_session',
// the cookie expiry (optional)
expires: '2 hours',
// the cookie usage description
description: 'This cookie is used to identify your unique session on the website.',
},
]
},
security: {
essential: true,
description: 'We use these cookies to help identify and prevent potential security risks. For this reason, they do not require your consent.',
cookies: [
{
name: 'XSRF-TOKEN',
expires: '2 hours',
description: 'This cookie is used to prevent cross-site request forgery (CSRF) attacks.',
},
]
},
analytics: {
description: 'We use these for internal research on how we can improve the service we provide for all our users. These cookies assess how you interact with our website.',
cookies: [
{
name: '_ga, _ga_*',
expires: '2 years',
description: 'This cookie is used by Google Analytics to distinguish unique users by assigning a randomly generated number as a client identifier. It is included in each page request in a site and used to calculate visitor, session and campaign data for the sites analytics reports.',
},
{
name: 'initialReferer',
expires: '5 days',
description: 'We store the initial referer in a cookie to help us understand how users find our website.'
}
]
},
ad: {
title: 'Ads data',
description: 'We use Google Ads to measure the performance of our advertising campaigns and to provide advertising based on visitors\' interests. We do not use cookies to collect personal information.',
// if no cookies are provided, a 'more details' option will be hidden for this preference
},
personalization: {
// personalization storage options, with nothing defined it'll simply show as 'Personalization cookies' with a toggle
}
}
}
