A small cookie consent banner that complies with the EU GDPR
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
debug
dist
docs/examples
src
test
.babelrc
.editorconfig
.eslintrc
.flowconfig
.gitignore
LICENSE
README.md
index.html
package-lock.json
package.json

README.md

ICGC-Cookie-GDPR

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.


If the user allows the use of cookies, a cookie is set to remember the selected option and enables the tracking by Google Analytics. If the user denies the use of cookies and the removeGACookies configuration option is set to true, the option is stored and Google Analytics trackers are disabled. If the user denies the use of cookies and the removeGACookies configuration option is set to false(default option), the option is stored, and Google Analytics trackers are enabled so they must be configured to perform IP anonymization. A configure cookies button is shown whenever any option is chosen so the user can change his mind

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

Using the banner on your website

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

Create the cookie manager object in a script

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>

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 colors

<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>

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 colors

<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