{"id":20918554,"url":"https://github.com/karstenj/cookie-consent-banner","last_synced_at":"2026-04-16T09:04:35.054Z","repository":{"id":143983536,"uuid":"271884677","full_name":"karstenj/cookie-consent-banner","owner":"karstenj","description":null,"archived":false,"fork":false,"pushed_at":"2020-06-14T09:58:51.000Z","size":1746,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-19T16:49:43.348Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/karstenj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-06-12T20:29:04.000Z","updated_at":"2020-06-14T09:58:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"cf1c0d56-8d47-46d5-87c6-c6573092d710","html_url":"https://github.com/karstenj/cookie-consent-banner","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karstenj%2Fcookie-consent-banner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karstenj%2Fcookie-consent-banner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karstenj%2Fcookie-consent-banner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karstenj%2Fcookie-consent-banner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/karstenj","download_url":"https://codeload.github.com/karstenj/cookie-consent-banner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243312916,"owners_count":20271160,"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":[],"created_at":"2024-11-18T16:39:18.279Z","updated_at":"2025-12-25T09:42:07.830Z","avatar_url":"https://github.com/karstenj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CCB - A Free Cookie Consent Banner for Jekyll\nCCB is a flexible and responsive cookie consent banner for Jekyll. It doesn't\nrequire an additional plugin to be installed. It comes only with a set of 3 files.\n\nPlease check this [demo](https://karstenj.github.io/cookie-consent-banner/) of the cookie consent banner.\n\n![banner example](docs/images/screenshot.png)\n\n## Prerequisites\n- [Bootstrap 4](https://getbootstrap.com/)\n- [jQuery 3](https://jquery.com/)\n- [Font Awesome 6](https://fontawesome.com/)\n\nA good introduction of how to setup jekyll with boostrap can you find here:\n\n- [Creating a Jekyll Bootstrap Template](https://www.danielsieger.com/blog/2019/01/12/creating-jekyll-bootstrap-template.html)\n\n## Features\n- Responsiveness due to the use of bootstrap \n- Easily configurable via Jekyll's _config.yml\n- Banner can be enabled on page level by using the frontmatter\n\n## Installation\n### Copy files\nCopy the following 3 files to the corresponding directories of you Jekyll site.\n\n```\n+-- _includes\n|   +-- cookieconsent.bootstrap.html\n+-- assets\n    +-- css\n    |   +-- cookieconsent.bootstrap.css\n    +-- js\n        +-- cookieconsent.bootstrap.js\n```\n\n### Add CSS to your site\nThe CSS file has to be added to the header section where other CSS are referenced.\n\n```html\n\u003chtml\u003e\n  ...\n  \u003clink rel=\"stylesheet\" href=\"/assets/css/cookieconsent.bootstrap.css\"\u003e\n\u003c/head\u003e\n```\n\n### Include script code\nInclude cookieconsent.bootstrap.html right after the boostrap and jquery script tags. \nIt contains the script tag and the initial function call.\n\n```html\n\u003cscript src=\"/assets/js/jquery-3.3.1.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/assets/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n{% include cookieconsent.bootstrap.html %}\n```\n\n### Configuration\nThe last step is to add the configuration data to your _config.yml\n\n```yaml\ncookieconsent:\n  style: \"dark\"\n  notificationHead: \"This web site uses cookies\"\n  notificationText:\n    We use cookies for providing our services on this page. \n    While some of them are necessary, others help us to improve our online offering and operate it economically. \n    Accept the optional cookies or reject them by clicking on the \\\"Accept Only Selected\\\" button. \n    These settings can be revoked at any time. \n    For more information please refer to our \u003ca href=\\\"/datapolicy\\\"\u003edata policy\u003c/a\u003e.\n    \n  btnAcceptAll: \"Accept All\"\n  btnAcceptSelected: \"Accept Only Selected\"\n  btnMore: \"More\"\n  cookies:\n    -\n      name: ccb_necessary\n      title: \"Essential\"\n      description: \"Essential cookies enable basic functions and are necessary for the proper functioning of the website.\"\n      expirydays: 365\n      disabled: true\n      allowed: true\n    -\n      name: ccb_analytics\n      title: \"Statistic\"\n      description: \"Statistics cookies help to understand how visitors use websites by collecting and reporting information anonymously.\"\n      expirydays: 365\n      disabled: false\n      allowed: false\n    -\n      name: ccb_advertising\n      title: \"Advertising\"\n      description: \"Advertising cookies are used to display personalized advertising and to measure the effectiveness of advertising campaigns.\"\n      expirydays: 365\n      disabled: false\n      allowed: false\n```\n\n## Usage\n### Display the banner\nThe banner is displayed on each page load until the user has confirmed the cookie settings.\nYou can exclude pages by using the fronmatter section of that page.\n\n```yaml\nccb_show_banner: false\n```\n\nThe banner can be displayed by calling the showBanner() javascript function.\n\n```html\n\u003cp\u003e\u003ca href=\"javascript:ccb.showBanner();\"\u003eCookie Settings\u003c/a\u003e\u003c/p\u003e\n```\n### Activate/Deactivate script code\nCookies are usually set by javascript code. (e.g. Google Analytics tracking code)\nIn order to avoid the script execution until the user has allowed the usage of the related script category, the script\nexecution has to be stopped. The necessary steps are:\n- add or change the script type to text/plain\n- add a class attribute to the script tag with the value \"ccb-cookie-consent\"\n- add a ccb-cookie-type attribute to the script tag with the value which defines the script category\n\n#### Google Analytics\nThe following example shows how the Google Analytics script has to be modified.\n\n```html\n\u003cscript src=\"https://www.googletagmanager.com/gtag/js?id=\u003cyour id\u003e\" type=\"text/plain\" class=\"ccb-cookie-consent\" ccb-cookie-type=\"ccb_analytics\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/plain\" class=\"ccb-cookie-consent\" ccb-cookie-type=\"ccb_analytics\"\u003e\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n  gtag('config', '\u003cyour id\u003e', { 'anonymize_ip': true });\n\u003c/script\u003e\n```\n\n#### Google AdSense\nFor ad blocks inside your page the code looks like this:\n```html\n\u003cscript async src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"\u003e\u003c/script\u003e\n\u003cins class=\"adsbygoogle\"\n     style=\"\u003csome styles\u003e\"\n     data-ad-client=\"\u003cyour pub id\u003e\"\n     data-ad-slot=\"\u003cslot id\u003e\"\u003e\u003c/ins\u003e\n\u003cscript\u003e\n     (adsbygoogle = window.adsbygoogle || []).push({});\n\u003c/script\u003e\n```\n\nYou have to remove the script tag in front and after the ins-tag.\n\n```html\n\u003cins class=\"adsbygoogle\"\n     style=\"\u003csome styles\u003e\"\n     data-ad-client=\"\u003cyour pub id\u003e\"\n     data-ad-slot=\"\u003cslot id\u003e\"\u003e\u003c/ins\u003e\n```\n\nAdd the following lines before the closing body-tag.\n\n```html\n\u003cscript data-ad-client=\"\u003cyour pub id\u003e\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\" type=\"text/plain\" class=\"ccb-cookie-consent\" ccb-cookie-type=\"ccb_advertising\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/plain\" class=\"ccb-cookie-consent\" ccb-cookie-type=\"ccb_advertising\"\u003e\n  (adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=ccb.isPersonalAdsAllowed() ? 0 : 1;\n  $(\".adsbygoogle\").each(function () { (adsbygoogle = window.adsbygoogle || []).push({}); });\n\u003c/script\u003e\n```\n\nThese changes will prevent loading of AdSense code at page load and waits until the cookies have been loaded\nor the user has confirmed the usage of cookies.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarstenj%2Fcookie-consent-banner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkarstenj%2Fcookie-consent-banner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarstenj%2Fcookie-consent-banner/lists"}