https://github.com/zessx/cookiesplease
Little script to quickly comply with EU cookie law
https://github.com/zessx/cookiesplease
Last synced: 4 months ago
JSON representation
Little script to quickly comply with EU cookie law
- Host: GitHub
- URL: https://github.com/zessx/cookiesplease
- Owner: zessx
- License: mit
- Created: 2014-10-01T09:48:29.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2018-04-17T14:56:37.000Z (about 8 years ago)
- Last Synced: 2026-02-10T07:40:29.172Z (5 months ago)
- Language: JavaScript
- Homepage: https://work.smarchal.com/cookiesplease
- Size: 477 KB
- Stars: 7
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
CookiesPlease
=============
Little script to quickly comply with EU cookie law.
It'll allow you to add a message asking the user is he accepts or not cookies' storage for your website.
Installation
------------
CookiesPlease is available on bower:
$ bower install cookiesplease
If you're not using bower you still can install it manually, cloning this repository.
Usage
-----
Simply include CookiesPlease as **the very first JavaScript** in your `` tag.
As it is now self-initialized, you no longer have to call `cookiesplease.init()`.
CookiesPlease offers you two functions to check if cookies were accepted, or not:
if(cookiesplease.wasAccepted()) {
// Run JS if user has accepted cookies' storage
}
if(cookiesplease.wasDeclined()) {
// Run JS if user has refused cookies' storage
}
Furthermore, it'll dispatch an event when user accept/decline cookies. This event allows you to load others scripts without refreshing the page:
document.addEventListener('CookiesPleaseAccepted', function() {});
document.addEventListener('CookiesPleaseDeclined', function() {});
Here's a common example, defering Google Analytics' loading while user hasn't accepted cookies:
function loadGoogleAnalytics() {
(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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');
}
if(cookiesplease.wasAccepted()) {
loadGoogleAnalytics();
}
document.addEventListener('CookiesPleaseAccepted', loadGoogleAnalytics);
Options
-------
CookiesPlease comes with a bunch of options:
| Option | Default value | Usage |
|-------------------------|-------------------|-----------------------------------------------------------|
| `buttonAccept` | true | Show a button to accept cookies' storage |
| `buttonDecline` | false | Show a button to decline cookies' storage |
| `clearCookiesOnDecline` | false | Remove every stored cookie if user refuse their storage |
| `storeChoiceOnDecline` | true | Remember user's decline (...storing a cookie!!) |
| `prependToBody` | false | If you prefer to add the div at the beginning of `` |
| `buttonAcceptText` | 'Continue' | Text used for the accept button |
| `buttonDeclineText` | 'Decline' | Text used for the decline button |
| `message` | 'This website...' | Message displayed |
As it is self-initialiazed, you'll need to declare these options in a variable called `cookiespleaseOptions` (case sensitive) before including the script itself:
var cookiespleaseOptions = {
buttonDecline: true,
prependToBody: true
};
What about the CSS ?
--------------------
CookiesPlease has it's own default CSS, but you can easily customize it. Everything is wrapped in the following element :
CookiesPlease's default CSS use the `.cookiesplease` class, to allow you to use `#cookiesplease` id (then avoiding any conflict) :
#cookiesplease {
background-color: #eee;
border-top: 1px solid #222;
color: #222;
}
#cookiesplease p {}
#cookiesplease a {}
#cookiesplease button {}
#cookiesplease .cookiesplease-accept {}
#cookiesplease .cookiesplease-decline {}
#cookiesplease.cookiesplease-hidden {}
body.cookiesplease-shown {}
Please note that the `.cookiesplease-shown` is added to the `` element, until the user click on any button. This allows you to customize external elements, for pushing down the body for example.
Legals
------
- Author : [zessx](https://github.com/zessx)
- Licence : [MIT](http://opensource.org/licenses/MIT)
- Contact : [@zessx](https://twitter.com/zessx)
- Link : [http://smarchal.com/cookiesplease](http://smarchal.com/cookiesplease)
Donations
---------
[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=KTYWBM9HJMMSE&lc=FR&item_name=Buy%20a%20coffee%20to%20zessx%20%28Samuel%20Marchal%29¤cy_code=EUR&bn=PP%2dDonationsBF%3abmac%3aNonHosted)