ICGC-Cookie-GDPR

August 1, 2018 · View on GitHub

A small cookie consent banner that complies with the EU GDPR.

This library presents the user with a small banner that shows two buttons to comply with the EU GDPR law.

Notice: By default, this library doesn't stop Google Analytics tracking so Google Analytics Cookies must be configured to anomymize the IP to comply with the GDPR. If you want the Google Analytics cookies to be disabled, the removeGACookies configuration option must be set to true

You can see it working in instamaps.cat and all the other prototypes in betaportal

Get the required files

Copy the files found in the dist folder to your project and use it in your html

<link rel="stylesheet" href="./dist/cookies-icgc.min.css">
<script src="./dist/cookies-icgc.js"></script>

or use the github stored files to always use the last version

<link rel="stylesheet" href="https://gencat.github.io/ICGC-Cookie-GDPR/dist/cookies-icgc.min.css">
<script src="https://gencat.github.io/ICGC-Cookie-GDPR/dist/cookies-icgc.js"></script>

Note: If you need to support Internet Explorer 11 use the cookies-icgc-ie11.js

Note: It must be executed before any code that sets cookies, including Google Analytics

<script>
		const cuqui = new icgc.CookiesICGC("yourdomain.com", 	["your-google-analytics-id", "another-google-analytics-id"], {configBtnSelector: "#config-button-selector"});
		cuqui.setCookiesEnabledHandler(() => { console.log("Cookies enabled")});
		cuqui.setCookiesDisabledHandler(() => { console.log("Cookies disabled")});
</script>

Where:

The first parameter should be the domain where the cookies are stored
The second one is a list of Google Analytics Tracking IDs that will be enabled/disabled if the user allows/disallows it. Note: This library just manages already present Google Analytics trackers, it does NOT add or remove trackers.
The third one is an options parameter that's used to configure the popup. You can find the list of possible parameters here but the most important ones are the following ones:

Element	Subelement	Description
cookie	name	This is the name of the cookie that will be set to save the user preferences
content	message	The text used by the popup
	allow	The text used in the Allow button
	deny	The text used in the Deny button
	config	The text used in the configuration button that will be shown when the user has choosen some option
	href	The URL where the user will be directed when the privacy policy link is pressed
configBtnSelector		A div element selector already existing on your HTML where the configure cookies button will be shown. If this parameter is not set, a div with class config-popup will be created. If it's set to a non existing div, one is created in the body

The setCookiesEnabledHandler function is used to set a callback that will be run when the user has enabled the cookies by pressing the Allow button
The setCookiesDisabledHandler function is used to set a callback that will be run when the user has disabled the cookies by pressing the Deny button

Examples

These examples work on the following HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./dist/cookies-icgc.min.css">
</head>
<body>
	<div id="control"></div>
	<script src="./dist/cookies-icgc.js"></script>
</body>
</html>

<script>
	new icgc.CookiesICGC("instamaps.cat", [], {configBtnSelector: "#control"});
</script>

Simple example Shows the default popup, sets a cookie on the instamaps.cat domain and doesn't manage any Google Analytics tracker.

<script>
	new icgc.CookiesICGC("instamaps.cat", ["UA-12345678-1"], {configBtnSelector: "#control"});
</script>

Simple example Shows the default popup, sets a cookie on the instamaps.cat domain, manages a Google Analytics tracker and shows the configure button in the div with id control.

<script>
	new icgc.CookiesICGC("instamaps.cat", ["UA-12345678-1"], {
		configBtnSelector: "#control", 
		content: { 
			allow: "Allow", 
			deny: "Deny"
		}
	});
</script>

Simple customization example Shows the default popup, sets a cookie on the instamaps.cat domain, manages a Google Analytics tracker, shows the configure button in the div with id control and changes the button labels to Allow and Deny

<script>
	new icgc.CookiesICGC("instamaps.cat", ["UA-12345678-1"], {
		configBtnSelector: "#control", 
		palette:{
			popup: {background: "#00b050"}, 
			button: {background: "#222222"},
		}
	});
</script>

<script>
	const cuqui = new icgc.CookiesICGC("127.0.0.1", ["UA-12345678-1"], {
		configBtnSelector: "#control"
	} );
	cuqui.setCookiesEnabledHandler(() => { console.log("Cookies enabled")});
	cuqui.setCookiesDisabledHandler(() => { console.log("Cookies disabled")});
</script>

<script>
	const cuqui = new icgc.CookiesICGC("127.0.0.1", ["UA-12345678-1"]);
	cuqui.setCookiesEnabledHandler(() => { console.log("Cookies enabled")});
	cuqui.setCookiesDisabledHandler(() => { console.log("Cookies disabled")});
</script>

Default popup example

Shows the default popup, sets a cookie on the instamaps.cat domain, manages a Google Analytics tracker and the default configure button popup

Building and testing the library

Install the dependencies

npm install

Building the library

npm run build-dev

Testing the library

npm run lint
npm run test-unit

Building to release

npm run build-min

To see an extensive list of the available scripts you can take a look here

Acknowledgements

This cookie consent banner is heavily based on the Insites cookieconsent work and has been adapted to meet the requirements of the ICGC

License

This library is provided under the MIT licence