Made with ♥ by Alex-D
Trumbowyg A lightweight and amazing
WYSIWYG JavaScript editor
Moda11yze Little JavaScript library making
your modal boxes accessible
More to come soon...

Cookies
EU banner

Download v1.2.7 or bower install cookies-eu-banner npm install cookies-eu-banner
Cookies EU banner is a JavaScript class which manage display of banner
to accept/reject cookies from tracking services like Google Analytics.

Introducing Cookies EU banner

Why you should love it?

Meets EU’s standards

This plugin follows a long search on the sites of the European Commission and the CNIL. It takes into account DoNotTrack and "Read more" page.

Lightweight & simple

One class, no options. You can apply any style as you want on this banner. This class weighs only 2kB of pure JavaScript. You just need to put your analytics code in the callback function of this class.

Optimized for SEO

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.

Getting started

How to use?

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="./en-savoir-plus.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='//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.

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

Buy me a beer

Support the project!

Making a donation will motivate me to keep this project, and others projects you can see in header, going and allow for further development.