Cookies EU banner is an MIT-licensed open source project and completely free to use.
You can support its ongoing development by being a backer or a sponsor:
- [Become a backer or sponsor on Patreon](https://www.patreon.com/alexandredemode)
- [One-time donation via PayPal](https://www.paypal.me/demodealexandre/20eur)
---
## 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.
- [Try Cookies EU banner demo in action](https://alex-d.github.io/Cookies-EU-banner/demo)
- [Go to presentation website](https://alex-d.github.io/Cookies-EU-banner/)
### Features
- Do Not Track detection, using `navigator.doNotTrack`
- Disables banner when the visitor is a bot: prevents SEO Engines from confusing your cookie advert message with the main content of your pages
- Respects GDPR
- Fully typed, since it's written in TypeScript
- [Offers a headless version](#advanced-headless)
## How to use?
### 1. Add the template
Insert the banner at the end of the `` element, using a `` with these IDs:
```html
By continuing to visit this site, you accept the use of cookies by Google Analytics for
statistical purposes.
```
### 2. Import the script
Choose one of these options:
- [Using a build step](#using-a-build-step)
- Using a CDN:
- [Global build, the good old `
```
#### CDN or local copy: ES Module build (ESM)
```html
```
### Advanced: Headless
As an alternative, you can take the full control over the UI side while using the Cookies EU Banner's core logic: you can use your classes, your framework, ...
A simple example of what you can do:
```html
```
#### Headless using Global
```html
```
## How does it work?
For a detailed explanation, see comments in the main files: [src/index.ts](src/index.ts) and [src/headless.ts](src/headless.ts).
In short:
1. Hide the banner from bots, clients who have DoNotTrack activated, and users who have already declined;
2. Runs your custom function if the user has already accepted;
3. Shows the banner, then:
- if the user accepts, run your custom function and put a cookie to save this acceptance;
- if the user declines, remove all Google Analytics cookies (see `trackingCookieNames` option) and put a cookie to save this rejection.
## Technical choices
### Why using `document.cookie` instead of CookieStore?
Safari only supports `cookieStore.set()` in **https**, making it harder to use in local development for beginners.
## Contribute
To contribute, you need [Vite+](https://viteplus.dev/guide/).
Then, in the Cookies EU banner folder, run these commands:
```console
vp install
vp run dev
# or
vp run dev:all
```
The first line installs all dependencies.
The second line builds the min file and watches for changes to rebuild it on the fly.
## Supported browsers
All baseline browsers, desktop/mobile: Edge, Firefox, Chrome, Safari, Opera, ...
