{"id":13804309,"url":"https://github.com/porscheofficial/cookie-consent-banner","last_synced_at":"2025-04-05T05:08:54.265Z","repository":{"id":39374222,"uuid":"406394851","full_name":"porscheofficial/cookie-consent-banner","owner":"porscheofficial","description":"The lightweight and flexible Cookie Consent Banner","archived":false,"fork":false,"pushed_at":"2024-08-15T07:10:22.000Z","size":9580,"stargazers_count":160,"open_issues_count":3,"forks_count":11,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-29T04:11:18.103Z","etag":null,"topics":["cookie-consent","cookie-consent-banner","cookies","gdpr","privacy","react","reactjs","stenciljs","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/porscheofficial.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-14T14:12:42.000Z","updated_at":"2025-03-22T03:29:52.000Z","dependencies_parsed_at":"2024-02-27T11:07:19.580Z","dependency_job_id":"e02e3fe5-f3cb-45bf-8ae7-e5a33eb0fc0f","html_url":"https://github.com/porscheofficial/cookie-consent-banner","commit_stats":{"total_commits":134,"total_committers":8,"mean_commits":16.75,"dds":0.6119402985074627,"last_synced_commit":"527c4d705d2f9e30e8e9831579fa5a209bf1da4f"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/porscheofficial%2Fcookie-consent-banner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/porscheofficial%2Fcookie-consent-banner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/porscheofficial%2Fcookie-consent-banner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/porscheofficial%2Fcookie-consent-banner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/porscheofficial","download_url":"https://codeload.github.com/porscheofficial/cookie-consent-banner/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289429,"owners_count":20914464,"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-consent","cookie-consent-banner","cookies","gdpr","privacy","react","reactjs","stenciljs","webcomponents"],"created_at":"2024-08-04T01:00:45.499Z","updated_at":"2025-04-05T05:08:54.245Z","avatar_url":"https://github.com/porscheofficial.png","language":"TypeScript","funding_links":[],"categories":["**Awesome React** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","GDPR and Data Protection","Uncategorized"],"sub_categories":["React","Uncategorized"],"readme":"![cookie-consent-banner](./assets/heroWide.png)\n\n\u003cdiv align=\"center\"\u003e\n\n# Cookie Consent Banner\n\n[![npm version](http://img.shields.io/npm/v/@porscheofficial/cookie-consent-banner.svg?style=flat)](https://www.npmjs.com/package/@porscheofficial/cookie-consent-banner)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/porscheofficial/cookie-consent-banner/main/LICENSE.md)\n[![npm](https://img.shields.io/npm/dm/@porscheofficial/cookie-consent-banner.svg)](https://www.npmjs.com/package/@porscheofficial/cookie-consent-banner)\n\n👉 _See the component in action on the websites of the following projects: [**Simutrack**](https://www.simutrack.de/) and [**Porsche Digital Customer Relations Hub**](https://crh.porsche.digital/)._ 👈\n\n\u003c/div\u003e\n  \nSometimes it's not possible to avoid cookies for which we need consent of the visitors of our web applications.\nFor that, some kind of component might help which provides a sleek, but customizable UI with an easy to use API.\n\nThat's where the Cookie Consent Banner comes in.\n\nIn order to focus on the things that really matter, the Cookie Consent Banner supports us to fulfill that requirement.\nIt visualizes the available categories, like `technically required` and `analysis`, stores the decision of the user and provides an event-based API for you to handle appropriately. And of course, the consent data is stored locally in the vistor's browser.\n\n![](./assets/example.png)\n\n- [Consent Flow](#arrows_counterclockwise-consent-flow)\n- [Documentation](#spiral_notepad-documentation)\n  - [Web Component – Vanilla JS](#web-component--vanilla-js)\n  - [React Component](#react-component)\n- [Disclaimer](#disclaimer)\n- [Contributing](#contributing)\n- [License](#license)\n\n## :arrows_counterclockwise: Consent Flow\n\nThe consent banner has two tasks: Providing a UI Component to allow visitors of your web application to choose which cookies they want to accept, and the ability to react on the choosen settings via an API.\n\nThere are two typical scenarios: Either the external scripts, which set cookies are managed through a tag manager of your choice using the consent data, or the scripts are loaded or configured directly on code level.\n\n### Using a Tag Manager\n\nThe flow could look like this: Every script that sets cookies which require a consent from the visitor is blocked by default.\nInstead, the Consent Banner is shown. Once the visitor updates its preferences an event is triggered (`cookie_consent_preferences_updated`).\nAdditionally the consent data is stored within a cookie in a format that can be parsed either programmatically or with a tag manager (e.g.: name: `cookies_accepted_categories`, value: `technically_required,analytics,marketing`). A tag manager could read the value of that `1st-Party Cookie` before any other script (tag) is loaded (e.g.: Fire trigger only `if Accepted Cookie Categories contains marketing`).\n\n![](./assets/consentFlow.svg)\n\n### Using the API directly\n\nHave a look on the Real World example using the React Component: [`packages/cookie-consent-banner-react`](packages/cookie-consent-banner-react#-real-world-example-with-tag-manager-and-custom-error-tracking).\n\n## :spiral_notepad: Documentation\n\nThe Cookie Consent Banner supports multiple frontend frameworks, because it is built as an agnostic web component.\nFor easier integration we also provide a wrapper component for React environments.\nIt's necessary to set at least the required properties for the component in order to work properly (see the provided examples).\n\n### Web Component – Vanilla JS\n\nFollow the documentation of the Web Component: [/packages/cookie-consent-banner](/packages/cookie-consent-banner)\n\n### React Component\n\nFollow the documentation of the React Component: [/packages/cookie-consent-banner-react](/packages/cookie-consent-banner-react)\n\n---\n\n## Disclaimer\n\n_Please note that you must individually assess the legal requirements regarding the implementation of the Cookie Consent Banner, in particular which choices to offer in which granularity and which information to provide in which detail and at which point of the user journey. The examples mentioned are not intended to provide any advice regarding legal requirements. All responsibility for the implementation of the Cookie Consent Banner and its compliance with legal requirements lies with the user._\n\n## Contributing\n\nSee [CONTRIBUTING](./CONTRIBUTING.md).\n\n## License\n\nSee [LICENSE](./LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fporscheofficial%2Fcookie-consent-banner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fporscheofficial%2Fcookie-consent-banner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fporscheofficial%2Fcookie-consent-banner/lists"}