+ 
+ 
+ 
+
+ 
+ 
+
+ 
+
- Page explaining the use of cookies -
-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur aut laboriosam et adipisci veritatis laborum laudantium optio. Voluptas libero ab repellendus molestiae, consectetur animi alias dignissimos. Quaerat repellendus cumque rerum. -
++ Page explaining cookies purposes. +
++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur aut laboriosam et adipisci veritatis laborum laudantium optio. Voluptas libero ab repellendus molestiae, consectetur animi alias dignissimos. Quaerat repellendus cumque rerum. +
+
+ 
+ + This plugin follows a long search on the sites of the European Commission and CNIL. + It takes into account DoNotTrack and "Read more" page. +
+
+ + Just 1kb of vanilla JavaScript. You can apply any style you want on this banner. + You just need to put your analytics code in the callback function of this class. +
+
+ + The banner is not displayed if the visitor is a search engine bot, + the robot correctly index the content of your page and does not display the cookies warning banner + as description of all your pages. +
++ At the top of your page, add your banner following these IDs: +
+
+<body>
+ <div id="cookies-eu-banner" style="display: none;">
+ By continuing your visit to this site, you accept the use of cookies by Google Analytics to make visits statistics.
+ <a href="./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>
+ <!-- Your code... -->
+
+ Copy the minified JavaScript file called cookies-eu-banner.min.js into your project folder via Bower, npm or direct download (not recommended). Add this line at the bottom of your body (adapt it if you don't use bower).
+
+ <!-- Your code... -->
+ <script src="bower_components/cookies-eu-banner/dist/cookies-eu-banner.min.js"></script>
+ <!-- Use Cookies EU banner class here, see below -->
+</body>
+
+ If you want use it, you just need to put this code after the cookies-eu-banner imported just over it, and add new CookieEuBanner() arround your code:
+
+<script>
+ new CookiesEuBanner(function () {
+ // Your code here
+ });
+</script>
+ + For example, with Google Analytics: +
+
+<script>
+ new CookiesEuBanner(function () {
+ (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+ function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+ e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+ e.src='https://www.google-analytics.com/analytics.js';
+ r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+ ga('create','UA-XXXXX-X');ga('send','pageview');
+ });
+</script>
+
+ You can put this code in your main.js file, but you need to load cookies-eu-banner.min.js before.
+
waitAccept
+ You want wait until the user has accepted cookies? You just need to pass a second parameter to the constructor.
+
+ Default value is false.
+
+<script>
+ new CookiesEuBanner(function () {
+ // Your code here
+ }, true);
+</script>
+ useLocalStorage
+ If you really don't want save the consent in a cookie, you can use localStorage.
+ You can pass a boolean as third parameter which define if Cookie EU banner use localStorage (true) or cookie (false).
+
+ Default value is false (cookie).
+
+ 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 here
+ }, false, true);
+</script>
+ waitRemove
+ 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 (250ms in the example below).
+
+ Default value is 0.
+
+<div id="cookies-eu-banner" style="display: none;" data-wait-remove="250">
+
+</div>
+
+ Cookies EU banner is an MIT-licensed open source project and completely free to use.
+ You can support it's ongoing development by making a donation.
+