Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicholasruggeri/cookies-enabler
Easy-to-use pure Javascript solution for preventively blocking third-party cookies installed by js and comply with the EU cookie law.
https://github.com/nicholasruggeri/cookies-enabler
Last synced: 12 days ago
JSON representation
Easy-to-use pure Javascript solution for preventively blocking third-party cookies installed by js and comply with the EU cookie law.
- Host: GitHub
- URL: https://github.com/nicholasruggeri/cookies-enabler
- Owner: nicholasruggeri
- License: mit
- Created: 2015-05-22T13:13:08.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-03-24T15:38:51.000Z (over 4 years ago)
- Last Synced: 2024-07-19T01:41:33.800Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 99.6 KB
- Stars: 121
- Watchers: 26
- Forks: 27
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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```#### How to install
1 - Load the script
```
```
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:
'This website uses cookies. '
',
+''
+'Enable Cookies'
+''
+'eventScroll: false,
scrollOffset: 200,clickOutside: false,
cookieName: 'ce-cookie',
cookieDuration: '365',
wildcardDomain: false,iframesPlaceholder: true,
iframesPlaceholderHTML:
'To view this content you need to'
',
+'Enable Cookies'
+'
iframesPlaceholderClass: 'ce-iframe-placeholder',// Callbacks
onEnable: '',
onDismiss: '',
onDisable: ''
```
#### Notice BannerYou can customize the placeholder HTML by creating a script tag with the ID ```ce-banner-html```.
```
<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>
```You can also set the option as a ```string``` containing the HTML:
```
bannerHTML: 'This website uses cookies. Enable Cookies
'
```#### Blocking Cookies from Script Tags
Add the class ```"ce-script"``` and ```type="text/plain"``` to every script tag that installs cookies
```
// GA Demo
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);// FB Share Demo
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;```
#### Blocking Cookies from iFrames
For ```iframes```, change the ```src``` attribute to ```data-ce-src``` and add the class ```"ce-iframe"```
``````
##### 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```.
```
<p>This content is not available without cookies.
<a href="#" class="ce-accept">Enable Cookies</a>
<a href="#">Read More</a>
</p>```
You can also set the option as a ```string``` containing the HTML:
```
iFramePlaceholderHTML: 'This content is not available without cookies. Enable Cookies"
',
```#### 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].```
COOKIES_ENABLER.init();```
#### Donations
If you found this script useful, [buy us a beer]!
----------
[here]:https://github.com/nicholasruggeri/cookies-enabler/archive/master.zip
[buy us a beer]:https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=A5FJ9N7B87WLE
[Postscribe]:https://github.com/krux/postscribe