Cookies EU banner is an MIT-licensed open source project and completely free to use. You can support it's ongoing development by being a backer or a sponsor:
Cookies EU banner manage display of a banner which allows user to accept or reject cookies from tracking services like Google Analytics. It is a GDPR-compliant way to get cookie consent from visitors.
npm install cookies-eu-banner --save
yarn add cookies-eu-banner
bower install cookies-eu-banner --save
Insert the banner before any content at the beginning of the <body>
element, with these IDs:
<div id="cookies-eu-banner" style="display: none;">
By continuing to visit this site, you accept the use of cookies by Google Analytics for statistical purposes.
<a href="https://github.com/Alex-D/Cookies-EU-banner/blob/master/read-more.html" id="cookies-eu-more">Read more</a>
<button id="cookies-eu-reject">Reject</button>
<button id="cookies-eu-accept">Accept</button>
</div>
#cookies-eu-banner
is the div that contains all elements to be hidden after user accepts or declines the use of cookies;#cookies-eu-more
is a link to a "Read more" page where you explain your use of cookies;#cookies-eu-reject
and #cookies-eu-accept
are the buttons used to reject/accept cookies.Before the end of <body>
, or in a script file inserted at the same place, put the following code:
<script src="https://github.com/Alex-D/Cookies-EU-banner/raw/master/cookies-eu-banner/dist/cookies-eu-banner.min.js"></script>
<script>
new CookiesEuBanner(function () {
// Your code to launch when user accept cookies
});
</script>
Example for Google Analytics:
<script src="https://github.com/Alex-D/Cookies-EU-banner/raw/master/cookies-eu-banner/dist/cookies-eu-banner.min.js"></script>
<script>
new CookiesEuBanner(function () {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
// Don't forget to put your own UA-XXXXXXXX-X code
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');
});
</script>
The second parameter (true
in the example below) define if Cookie EU banner wait the user acceptation before hide the banner. Set to false
by default.
<script>
new CookiesEuBanner(function () {
// Your code to launch when user accept cookies
}, true);
</script>
If you really don't want save the consent in a cookie, you can use localStorage.
The third parameter (true
in the example below) define if Cookie EU banner use localStorage (true
) or cookie (false
). Set to false
by default.
Note: the localStorage method is not as good as the cookie method since the localStorage cannot expires after 13 months as recommended.
<script>
new CookiesEuBanner(function () {
// Your code to launch when user accept cookies
}, false, true);
</script>
If you want add some transition on accept/reject, and want to prevent the premature deletion of the banner, you can add
data-wait-remove
attribute to the banner, with the time to wait in milliseconds.
<div id="cookies-eu-banner" style="display: none;" data-wait-remove="250">
<!-- ... -->
</div>
For a detailed explanation, see comments in the main file: cookies-eu-banner.js.
In short:
navigator.doNotTrack
JavaScript variable);This project use Gulp. To contribute, you need Node.js and npm (or yarn). Then, in the Cookies EU banner folder, run these commands:
npm install
npm run start
# or
yarn
yarn start
The first line install all dependencies. The second line builds the min file and watch for changes to rebuild it on the fly.
All browsers desktop/mobile: IE8+, Edge, Firefox, Chrome, Safari, Opera, ...