{"id":2388,"date":"2022-02-28T18:01:28","date_gmt":"2022-02-28T17:01:28","guid":{"rendered":"https:\/\/ekiwi.de\/?p=2388"},"modified":"2023-05-09T21:06:28","modified_gmt":"2023-05-09T19:06:28","slug":"cookie-consent-banner-mit-javascript","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/2388\/cookie-consent-banner-mit-javascript\/","title":{"rendered":"Cookie-Consent-Banner mit JavaScript"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/2388\/cookie-consent-banner-mit-javascript\/#Videoanleitung_zum_Einbau\" >Videoanleitung zum Einbau<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/2388\/cookie-consent-banner-mit-javascript\/#%E2%80%9ECookie_Banner_Generator%E2%80%9C_Software\" >&#8222;Cookie Banner Generator&#8220; Software<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/2388\/cookie-consent-banner-mit-javascript\/#Das_Cookie-Consent-Script\" >Das Cookie-Consent-Script<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/2388\/cookie-consent-banner-mit-javascript\/#Fazit\" >Fazit<\/a><\/li><\/ul><\/nav><\/div>\n<p>Ohne Plugin, ohne WordPress, ohne extra Software, Cookie-Consent als Java-Script L\u00f6sung.<\/p>\n<p><!--more--><\/p>\n<p>Cookie-Banner d\u00fcrften zu den nervigsten Elementen aktueller Webseiten geh\u00f6ren. Die Anwender sind genervt, da diese auf jeder Webseite genervt werden, sofern sie nicht mittels <a href=\"https:\/\/ekiwi-blog.de\/5903\/cookie-meldungen-in-firefox-und-chrome-automatisch-ausblenden\/\" target=\"_blank\" rel=\"noopener\">Browserplugin die Cookie-Meldungen einfach ausblenden<\/a>. Auch die Webseitenbetreiber sind genervt, da die korrekte Umsetzung jede Menge Arbeitszeit kostet und oft auch Geld, wenn man an die vielen kommerziellen WordPress-Plugins denkt.<\/p>\n<p>Auch sind diese nicht immer nutzbar, beispielsweise, wenn die Webseite nicht in WordPress oder einem anderen CMS erstellt worden ist. Wir stellen daher in diesem Artikel die Umsetzung mit Java-Script vor. Damit l\u00e4sst sich die L\u00f6sung auf jeder Webseite nutzen und auch in Programmen wie Magix Webdesigner.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2022\/02\/cookieconsent_beispiel.zip\">Das Beispielscript gibt es hier zum Download<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Videoanleitung_zum_Einbau\"><\/span>Videoanleitung zum Einbau<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/SCtf_5-HUME\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E2%80%9ECookie_Banner_Generator%E2%80%9C_Software\"><\/span>&#8222;Cookie Banner Generator&#8220; Software<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Unsere neue kostenlose Software &#8222;<a href=\"https:\/\/da-software.net\/cookiebannergenerator\/\">Cookie Banner Generator<\/a>&#8220; hilft Ihnen bei der Erstellung der Schritte f\u00fcr dieses Script. In der Software k\u00f6nnen Sie die hier gezeigten Scripte in einer komfortablen Benutzeroberfl\u00e4che vornehmen und das Ergebnis exportieren.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/02\/cookie_banner_generator.jpg\" alt=\"\" width=\"800\" height=\"516\" class=\"alignnone size-full wp-image-5130\" srcset=\"\/wp-content\/uploads\/2022\/02\/cookie_banner_generator.jpg 800w, \/wp-content\/uploads\/2022\/02\/cookie_banner_generator-300x194.jpg 300w, \/wp-content\/uploads\/2022\/02\/cookie_banner_generator-768x495.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Das_Cookie-Consent-Script\"><\/span>Das Cookie-Consent-Script<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00fcr unsere Anleitung verwenden wir das <a href=\"https:\/\/github.com\/orestbida\/cookieconsent\" target=\"_blank\" rel=\"noopener\">Cookie-Consent-Script<\/a>. Dieses ist kostenlos, Open-Source und basiert rein auf Java-Script. Das Script l\u00e4sst sich vielf\u00e4ltig anpassen und konfigurieren, wie die <a href=\"https:\/\/orestbida.com\/demo-projects\/cookieconsent\/\" target=\"_blank\" rel=\"noopener\">Demo-Seite eindrucksvoll demonstriert<\/a>.<\/p>\n<p>Im einfachsten Fall binden wir das Script einfach via CDN ein, nat\u00fcrlich l\u00e4sst es sich auch selbst hosten.<\/p>\n<pre>&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/gh\/orestbida\/cookieconsent@v2.8.0\/dist\/cookieconsent.css\" \/&gt;\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/gh\/orestbida\/cookieconsent@v2.8.0\/dist\/cookieconsent.js\" defer&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Design, Texte, Rubriken lassen sich mittels JSON konfigurieren. Hier legen wir Position, Texte, Funktionen fest und k\u00f6nnen auch festlegen, welche Rubriken wir anlegen wollen, z.B. essenzielle Cookies oder welche nur f\u00fcr analytische Zwecke ben\u00f6tigt werden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2389\" src=\"\/wp-content\/uploads\/2022\/02\/cookieconsent_1.png\" alt=\"\" width=\"670\" height=\"310\" srcset=\"\/wp-content\/uploads\/2022\/02\/cookieconsent_1.png 670w, \/wp-content\/uploads\/2022\/02\/cookieconsent_1-300x139.png 300w\" sizes=\"auto, (max-width: 670px) 100vw, 670px\" \/><\/p>\n<p>Der Anwender kann Cookies entweder annehmen, ablehnen oder selbst konfigurieren.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2390\" src=\"\/wp-content\/uploads\/2022\/02\/cookieconsent_2.png\" alt=\"\" width=\"628\" height=\"246\" srcset=\"\/wp-content\/uploads\/2022\/02\/cookieconsent_2.png 628w, \/wp-content\/uploads\/2022\/02\/cookieconsent_2-300x118.png 300w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/p>\n<p>Zu jeder Rubrik lassen sich die einzelnen Cookies darstellen, optional mit Detailinformationen. Hier kann der Anwender dann einzelne Rubriken auch an oder abw\u00e4hlen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2391\" src=\"\/wp-content\/uploads\/2022\/02\/cookieconsent_3.png\" alt=\"\" width=\"751\" height=\"624\" srcset=\"\/wp-content\/uploads\/2022\/02\/cookieconsent_3.png 751w, \/wp-content\/uploads\/2022\/02\/cookieconsent_3-300x249.png 300w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/p>\n<p>Neben der reinen Auswahl m\u00fcssen die abgew\u00e4hlten Scripte nat\u00fcrlich auch blockiert werden. Auch hier unterst\u00fctzt das Script, indem sich Script-Tags mit entsprechenden Attributen ausstatten lassen.<\/p>\n<pre>&lt;script type=\"text\/plain\" data-cookiecategory=\"analytics\"&gt;\r\n  document.getElementById(\"cookie\").innerText = \"Ich erscheine nur, wenn ich zustimme!\";\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>So wird dieses Element nur geladen, wenn der Benutzer der Gruppe &#8222;analytics&#8220; zustimmt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fazit\"><\/span>Fazit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das Script l\u00e4sst kaum W\u00fcnsche offen, erfordert aber etwas Handarbeit, da die einzelnen Cookie-Verursacher zuerst identifiziert und eingebunden werden m\u00fcssen. Auch die Scripte, welche blockiert werden sollen, m\u00fcssen h\u00e4ndisch erfasst werden.<\/p>\n<p>Daf\u00fcr ist die Software am Ende kostenlos und hat sonst keine weiteren Abh\u00e4ngigkeiten, ben\u00f6tigt keine Datenbank und kommt ohne serverseitige Scriptsprachen aus.<\/p>\n<p>Auf die genauen Funktionen und Konfigurationsm\u00f6glichkeiten gehen wir in unserem Video ein.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2022\/02\/cookieconsent_beispiel.zip\">Das Beispielscript gibt es hier zum Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Ohne Plugin, ohne WordPress, ohne extra Software, Cookie-Consent als Java-Script L\u00f6sung.<\/p>\n","protected":false},"author":1,"featured_media":2260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[207,613,44],"class_list":["post-2388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-cookie","tag-dsgvo","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=2388"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2388\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/2260"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=2388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=2388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=2388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}