cookies-enabler

cookies-enabler.js

Cookies-enabler.js is a easy-to-use pure Javascript solution for preventively blocking third-party cookies installed by js and comply with the EU cookie law.

Download

Click here or bower install cookies-enabler

Or if you're using npm

npm install cookies-enabler

How to install

1 - Load the script

<script src="cookies-enabler.js"></script>

or alternatively using require

var cookiesEnabler = require('cookies-enabler');

2 - Initiate the plugin

COOKIES_ENABLER.init( options );

Default Options

scriptClass: 'ce-script',
iframeClass: 'ce-iframe',

acceptClass: 'ce-accept',
dismissClass: 'ce-dismiss',
disableClass: 'ce-disable',

bannerClass: 'ce-banner',
bannerHTML:
    '<p>This website uses cookies. '
        +'<a href="#" class="ce-accept">'
            +'Enable Cookies'
        +'</a>'
    +'</p>',

eventScroll: false,
scrollOffset: 200,

clickOutside: false,

cookieName: 'ce-cookie',
cookieDuration: '365',
wildcardDomain: false,

iframesPlaceholder: true,
iframesPlaceholderHTML:
    '<p>To view this content you need to'
        +'<a href="#" class="ce-accept">Enable Cookies</a>'
    +'</p>',
iframesPlaceholderClass: 'ce-iframe-placeholder',

// Callbacks
onEnable: '',
onDismiss: '',
onDisable: ''

Notice Banner

You can customize the placeholder HTML by creating a script tag with the ID ce-banner-html.

    <script id="ce-banner-html" type="text/plain">
      <p>
        This websites uses cookies to give you the <i>best</i> possible experience.
      </p>
      <p>
        <a href="#" class="ce-accept">Enable Cookies</a> <a href="#" class="ce-disable">Disable Cookies</a> or <a href="#">Read More</a>
        <a href="#" class="ce-dismiss">X</a>
      </p>
    </script>

You can also set the option as a string containing the HTML:

bannerHTML: '<p>This website uses cookies. <a href="#" class="ce-accept">Enable Cookies</a></p>'

Blocking Cookies from Script Tags

Add the class "ce-script" and type="text/plain" to every script tag that installs cookies

<script type="text/plain" class="ce-script">
    // GA Demo
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _gaq.push(['_trackPageview']);
</script>

<script type="text/plain" class="ce-script">
    // FB Share Demo
    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
</script>

Blocking Cookies from iFrames

For iframes, change the src attribute to data-ce-src and add the class "ce-iframe"

<iframe class="ce-iframe" data-ce-src="https://player.vimeo.com/video/1084537" width="500" height="281">

iFrames Placeholder

You can enable placeholders for blocked iframes using the iframesPlaceholder option:

iframesPlaceholder: true

Doing so, a custom placeholder for blocked iframes will be inserted after the hidden iframe element.

You can customize the placeholder HTML by creating a script tag with the ID ce-iframePlaceholder-html.

<script id="ce-iframePlaceholder-html" type="text/plain">
      <p>This content is not available without cookies.
          <a href="#" class="ce-accept">Enable Cookies</a>
          <a href="#">Read More</a>
      </p>
</script>

You can also set the option as a string containing the HTML:

iFramePlaceholderHTML: '<p>This content is not available without cookies. <a href=#" class="ce-accept">Enable Cookies</a>"</p>',

Triggers

You can choose how to let the user accept or dismiss the cookies.

Scroll

This option will enable cookies when the user scrolls a certain amount in any direction.

// the cookies will be enabled after the user scrolls 200px
eventScroll: true   // default false
scrollOffset: 200

Click on any element of the page

This option will enable cookies when the user clicks on any element on the page that doesn't belong to the notice banner or other script-created elements.

clickOutside: true  // default false

DOM Hooks

Adding the ce-accept class to any element will make it act as an accept button, enabling the cookies on click.

Adding the ce-dismiss class to any element will make it act as a dismiss button, removing the notice banner on click.

Adding the ce-disable class to any element will make it act as a disable button, removing the notice banner and disabling cookies on click.

Callbacks

You can use the callback options to execute a function when cookies are accepted or the notice banner is dismissed.

onEnable: function(){

    console.log('cookies have been enabled');

},
onDismiss: function(){

    console.log('the banner has been dismissed');

},
onDisable: function(){

    console.log('cookies have been disabled');

}

Subdomains

You can enable this cookie to be saved across all your subdomains by enabling the wildcardDomain option.

Problematic Scripts

Some scripts use document.write, that can't be executed asynchronously. We added a workaround using Postscribe. Change the src to data-ce-src and add the class ce-script. Don't forget to download and include Postscribe.

<script data-ce-src="http://pagead2.googlesyndication.com/pagead/show_ads.js" class="ce-script"></script>

<script scr="postscribe.js"></script>
<script src="cookies-enabler.js"></script>

<script>

  COOKIES_ENABLER.init();

</script>

Donations

If you found this script useful, buy us a beer!

---