{"id":17086356,"url":"https://github.com/alex-d/cookies-eu-banner","last_synced_at":"2025-12-12T03:19:38.062Z","repository":{"id":26091081,"uuid":"29535110","full_name":"Alex-D/Cookies-EU-banner","owner":"Alex-D","description":"1kb vanilla JS script which manages cookies consent banner display like asked by GDPR","archived":false,"fork":false,"pushed_at":"2023-05-23T22:25:35.000Z","size":660,"stargazers_count":442,"open_issues_count":11,"forks_count":57,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-16T09:01:56.875Z","etag":null,"topics":["cookie","gdpr","gdpr-cookie","google-analytics","navigator","rgpd"],"latest_commit_sha":null,"homepage":"http://alex-d.github.io/Cookies-EU-banner/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alex-D.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":["Alex-D"],"patreon":"AlexandreDemode"}},"created_at":"2015-01-20T14:57:17.000Z","updated_at":"2025-05-09T08:58:02.000Z","dependencies_parsed_at":"2023-07-13T14:47:09.709Z","dependency_job_id":null,"html_url":"https://github.com/Alex-D/Cookies-EU-banner","commit_stats":{"total_commits":73,"total_committers":18,"mean_commits":4.055555555555555,"dds":0.5616438356164384,"last_synced_commit":"23c44b93e9755388805dfffcc2d7a0ac082f61ac"},"previous_names":["alex-d/cookies-cnil-banner"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-D%2FCookies-EU-banner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-D%2FCookies-EU-banner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-D%2FCookies-EU-banner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-D%2FCookies-EU-banner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alex-D","download_url":"https://codeload.github.com/Alex-D/Cookies-EU-banner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501552,"owners_count":22081527,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cookie","gdpr","gdpr-cookie","google-analytics","navigator","rgpd"],"created_at":"2024-10-14T13:28:24.725Z","updated_at":"2025-12-12T03:19:38.030Z","avatar_url":"https://github.com/Alex-D.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Alex-D","https://patreon.com/AlexandreDemode","https://www.patreon.com/alexandredemode","https://www.paypal.me/demodealexandre/20eur"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eCookies EU banner\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://bundlephobia.com/result?p=cookies-eu-banner\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/cookies-eu-banner.svg?style=for-the-badge\" alt=\"Minzipped size 1kb\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/cookies-eu-banner\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/cookies-eu-banner.svg?color=blue\u0026label=npm%20downloads\u0026style=for-the-badge\" alt=\"Downloads\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/Alex-D/cookies-eu-banner/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/cookies-eu-banner.svg?color=blue\u0026style=for-the-badge\" alt=\"MIT Licence\" /\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://www.npmjs.com/package/cookies-eu-banner\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/cookies-eu-banner.svg?color=blue\u0026style=for-the-badge\" alt=\"Version on npm\" /\u003e\u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/bower/v/cookies-eu-banner.svg?color=blue\u0026style=for-the-badge\" alt=\"Version on bower\" /\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003eScreenshot\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://alex-d.github.io/Cookies-EU-banner/demo\"\u003e\u003cimg src=\"overview.png\" alt=\"\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003eSupporting Cookies EU banner\u003c/h2\u003e\n\nCookies EU banner is an MIT-licensed open source project and completely free to use.\nYou can support it's ongoing development by being a backer or a sponsor:\n \n- [Become a backer or sponsor on Patreon](https://www.patreon.com/alexandredemode)\n- [One-time donation via PayPal](https://www.paypal.me/demodealexandre/20eur)\n\n-----\n\n## Introduction\n\nCookies EU banner manage display of a banner which allows user to accept or reject cookies from tracking services like Google Analytics.\nIt is a GDPR-compliant way to get cookie consent from visitors.\n\n- [Try Cookies EU banner demo in action](https://alex-d.github.io/Cookies-EU-banner/demo)\n- [Go to presentation website](https://alex-d.github.io/Cookies-EU-banner/)\n\n## Installation\n\n### Get the script\n\n- Using npm: `npm install cookies-eu-banner --save`\n- Or using yarn: `yarn add cookies-eu-banner`\n- Or using bower: `bower install cookies-eu-banner --save`\n- Or [download the latest version](https://github.com/Alex-D/cookies-eu-banner/archive/master.zip).\n\n\n### In your pages\n\nInsert the banner before any content at the beginning of the `\u003cbody\u003e` element, with these IDs:\n\n```html\n\u003cdiv id=\"cookies-eu-banner\" style=\"display: none;\"\u003e\n    By continuing to visit this site, you accept the use of cookies by Google Analytics for statistical purposes.\n    \u003ca href=\"./read-more.html\" id=\"cookies-eu-more\"\u003eRead more\u003c/a\u003e\n    \u003cbutton id=\"cookies-eu-reject\"\u003eReject\u003c/button\u003e\n    \u003cbutton id=\"cookies-eu-accept\"\u003eAccept\u003c/button\u003e\n\u003c/div\u003e\n```\n\n\n- `#cookies-eu-banner` is the div that contains all elements to be hidden after user accepts or declines the use of cookies;\n- `#cookies-eu-more` is a link to a \"Read more\" page where you explain your use of cookies;\n- `#cookies-eu-reject` and `#cookies-eu-accept` are the buttons used to reject/accept cookies.\n\n\nBefore the end of `\u003cbody\u003e`, or in a script file inserted at the same place, put the following code:\n\n```html\n\u003cscript src=\"cookies-eu-banner/dist/cookies-eu-banner.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    new CookiesEuBanner(function () {\n        // Your code to launch when user accept cookies\n    });\n\u003c/script\u003e\n```\n\nExample for Google Analytics:\n\n```html\n\u003cscript src=\"cookies-eu-banner/dist/cookies-eu-banner.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    new CookiesEuBanner(function () {\n        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');\n\n        // Don't forget to put your own UA-XXXXXXXX-X code\n        ga('create', 'UA-XXXXXXXX-X', 'auto');\n        ga('send', 'pageview');\n    });\n\u003c/script\u003e\n```\n\n### Options\n\n#### waitAccept\n\nThe 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.\n\n```html\n\u003cscript\u003e\n    new CookiesEuBanner(function () {\n        // Your code to launch when user accept cookies\n    }, true);\n\u003c/script\u003e\n```\n\n#### useLocalStorage\n\nIf you really don't want save the consent in a cookie, you can use localStorage.\n\nThe third parameter (`true` in the example below) define if Cookie EU banner use localStorage (`true`) or cookie (`false`). Set to `false` by default.\n\n*Note: the localStorage method is not as good as the cookie method since the localStorage cannot expires after 13 months as recommended.*\n\n```html\n\u003cscript\u003e\n    new CookiesEuBanner(function () {\n        // Your code to launch when user accept cookies\n    }, false, true);\n\u003c/script\u003e\n```\n\n#### waitRemove\n\nIf you want add some transition on accept/reject, and want to prevent the premature deletion of the banner, you can add\n`data-wait-remove` attribute to the banner, with the time to wait in milliseconds. \n\n```html\n\u003cdiv id=\"cookies-eu-banner\" style=\"display: none;\" data-wait-remove=\"250\"\u003e\n    \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\n## How does it work?\n\nFor a detailed explanation, see comments in the main file: [cookies-eu-banner.js](src/cookies-eu-banner.js).\n\nIn short:\n\n1. Excludes bots, clients who have DoNotTrack activated, and users who have already declined;\n2. Runs your custom function if user has already accepted;\n3. Shows banner, then:\n    - if user accepts, run custom function and put a cookie to save this acceptance;\n    - if user declines, remove all Google Analytics cookies and put a cookie to save this rejection.\n\n\n## Features\n\n- Do Not Track detection (IE9+, Firefox, and all browsers compatible with the `navigator.doNotTrack` JavaScript variable);\n- Disables banner when visitor is a bot: prevents SEO Engines to confuse your cookie advert message with the main content of your pages;\n- Respects [all points imposed by CNIL (FR)](https://www.cnil.fr/fr/solutions-pour-les-cookies-de-mesure-daudience) and [these points](https://www.cnil.fr/fr/cookies-traceurs-que-dit-la-loi).\n\n\n## Contribute\n\nThis project use Gulp.\nTo contribute, you need [Node.js](http://nodejs.org/) and npm (or yarn).\nThen, in the Cookies EU banner folder, run these commands:\n\n```console\nnpm install\nnpm run start\n\n# or\n\nyarn\nyarn start\n```\n\nThe first line install all dependencies.\nThe second line builds the min file and watch for changes to rebuild it on the fly.\n\n\n## Supported browsers\n\nAll browsers desktop/mobile: IE8+, Edge, Firefox, Chrome, Safari, Opera, ...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-d%2Fcookies-eu-banner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falex-d%2Fcookies-eu-banner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-d%2Fcookies-eu-banner/lists"}