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
- 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
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>
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>
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>
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>
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>
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>
Shows the default popup, sets a cookie on the instamaps.cat domain, manages a Google Analytics tracker and the default configure button popup
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
This cookie consent banner is heavily based on the Insites cookieconsent work and has been adapted to meet the requirements of the ICGC
This library is provided under the MIT licence