Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
cookies-eu-banner
Advanced tools
cookies-eu-banner
Manage display of banner to accept/reject cookies from tracking services like Google Analytics
Cookies EU banner
Screenshot
Supporting Cookies EU banner
Cookies EU banner is an MIT-licensed open source project and completely free to use. You can support it's ongoing development by being a backer or a sponsor:
Introduction
Cookies EU banner manage display of a banner which allows user to accept or reject cookies from tracking services like Google Analytics. It is a GDPR-compliant way to get cookie consent from visitors.
Installation
Get the script
- Using npm:
npm install cookies-eu-banner --save - Or using yarn:
yarn add cookies-eu-banner - Or using bower:
bower install cookies-eu-banner --save - Or download the latest version.
In your pages
Insert the banner before any content at the beginning of the <body> element, with these IDs:
<div id="cookies-eu-banner" style="display: none;">
By continuing to visit this site, you accept the use of cookies by Google Analytics for statistical purposes.
<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>
#cookies-eu-banneris the div that contains all elements to be hidden after user accepts or declines the use of cookies;#cookies-eu-moreis a link to a "Read more" page where you explain your use of cookies;#cookies-eu-rejectand#cookies-eu-acceptare the buttons used to reject/accept cookies.
Before the end of <body>, or in a script file inserted at the same place, put the following code:
<script src="cookies-eu-banner/dist/cookies-eu-banner.min.js"></script>
<script>
new CookiesEuBanner(function () {
// Your code to launch when user accept cookies
});
</script>
Example for Google Analytics:
<script src="cookies-eu-banner/dist/cookies-eu-banner.min.js"></script>
<script>
new CookiesEuBanner(function () {
(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','//www.google-analytics.com/analytics.js','ga');
// Don't forget to put your own UA-XXXXXXXX-X code
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');
});
</script>
Options
waitAccept
The second parameter (true in the example below) define if Cookie EU banner wait the user acceptation before hide the banner. Set to false by default.
<script>
new CookiesEuBanner(function () {
// Your code to launch when user accept cookies
}, true);
</script>
useLocalStorage
If you really don't want save the consent in a cookie, you can use localStorage.
The third parameter (true in the example below) define if Cookie EU banner use localStorage (true) or cookie (false). Set to false by default.
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 to launch when user accept cookies
}, 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.
<div id="cookies-eu-banner" style="display: none;" data-wait-remove="250">
<!-- ... -->
</div>
How does it work?
For a detailed explanation, see comments in the main file: cookies-eu-banner.js.
In short:
- Excludes bots, clients who have DoNotTrack activated, and users who have already declined;
- Runs your custom function if user has already accepted;
- Shows banner, then:
- if user accepts, run custom function and put a cookie to save this acceptance;
- if user declines, remove all Google Analytics cookies and put a cookie to save this rejection.
Features
- Do Not Track detection (IE9+, Firefox, and all browsers compatible with the
navigator.doNotTrackJavaScript variable); - Disables banner when visitor is a bot: prevents SEO Engines to confuse your cookie advert message with the main content of your pages;
- Respects all points imposed by CNIL (FR) and these points.
Contribute
This project use Gulp. To contribute, you need Node.js and npm (or yarn). Then, in the Cookies EU banner folder, run these commands:
npm install
npm run start
# or
yarn
yarn start
The first line install all dependencies. The second line builds the min file and watch for changes to rebuild it on the fly.
Supported browsers
All browsers desktop/mobile: IE8+, Edge, Firefox, Chrome, Safari, Opera, ...
FAQs
Manage display of banner to accept/reject cookies from tracking services like Google Analytics
The npm package cookies-eu-banner receives a total of 1,202 weekly downloads. As such, cookies-eu-banner popularity was classified as popular.
We found that cookies-eu-banner demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 08 Jul 2019
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah Gooding - Nov 26, 2024