{"id":1146,"date":"2020-10-16T19:00:20","date_gmt":"2020-10-16T17:00:20","guid":{"rendered":"https:\/\/ekiwi.de\/?p=1146"},"modified":"2020-10-17T16:18:16","modified_gmt":"2020-10-17T14:18:16","slug":"cookie-hinweis-in-webseite-einbauen-html-editor-und-magix-webdesigner","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/1146\/cookie-hinweis-in-webseite-einbauen-html-editor-und-magix-webdesigner\/","title":{"rendered":"Cookie Hinweis in Webseite einbauen &#8211; HTML-Editor und Magix Webdesigner"},"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\/1146\/cookie-hinweis-in-webseite-einbauen-html-editor-und-magix-webdesigner\/#Download_Scriptes_und_Beispiel\" >Download Scriptes und Beispiel<\/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\/1146\/cookie-hinweis-in-webseite-einbauen-html-editor-und-magix-webdesigner\/#Upload_des_Scriptes\" >Upload des Scriptes<\/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\/1146\/cookie-hinweis-in-webseite-einbauen-html-editor-und-magix-webdesigner\/#Anpassen_des_Codes_und_Einbinden\" >Anpassen des Codes und Einbinden<\/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\/1146\/cookie-hinweis-in-webseite-einbauen-html-editor-und-magix-webdesigner\/#Einbau_in_Magix_Webdesigner\" >Einbau in Magix Webdesigner<\/a><\/li><\/ul><\/nav><\/div>\n<p>Wie erstelle ich einen Cookie Hinweis f\u00fcr meine Webseite?<\/p>\n<p><!--more--><\/p>\n<p>Cookie-Hinweise sind die Pest, auf jeder Webseite wird man damit genervt. Es gibt sogar Browser-Plugins, welche <a href=\"https:\/\/ekiwi-blog.de\/4767\/cookie-hinweise-in-firefox-automatisch-ausblenden\/\" target=\"blank\" rel=\"noopener noreferrer\">Cookie-Hinweise automatisch ausblenden<\/a>. Als Webseitenbetreiber ist man etwas zwischen den Fronten und ist gut beraten einen Hinweis einzubinden.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/pwIjWBF0_8w\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>In dieser Anleitung wollen wir einen Cookie-Hinweis einbinden, welcher uns am Ende der Webseite einen konfigurierbaren Hinweis einblendet.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_1.jpg\" alt=\"\" width=\"750\" height=\"334\" class=\"alignnone size-full wp-image-1147\" srcset=\"\/wp-content\/uploads\/2020\/10\/cookie_1.jpg 750w, \/wp-content\/uploads\/2020\/10\/cookie_1-300x134.jpg 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Download_Scriptes_und_Beispiel\"><\/span>Download Scriptes und Beispiel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wir verwenden in unserem Beispiel freie Cookie <a href=\"https:\/\/www.osano.com\/cookieconsent\" target=\"_blank\" rel=\"noopener noreferrer\">Consent-Script von Osano<\/a>. Das Beispielscript kann hier heruntergeladen werden:<\/p>\n<p><a href=\"\/wp-content\/uploads\/2020\/10\/cookieconsent.zip\">Download<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Upload_des_Scriptes\"><\/span>Upload des Scriptes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nach dem Download entpacken wir den Ordner. Dort finden wir die Beispiel-Dateien und die Script- und CSS-Dateien im Ordner &#8222;cookieconsent&#8220;. Diesen Ordner laden wir mit FTP auf unseren Webspace.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_consent_zip.png\" alt=\"\" width=\"295\" height=\"154\" class=\"alignnone size-full wp-image-1163\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_3.jpg\" alt=\"\" width=\"300\" height=\"276\" class=\"alignnone size-full wp-image-1149\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anpassen_des_Codes_und_Einbinden\"><\/span>Anpassen des Codes und Einbinden<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nun m\u00fcssen wir den Code anpassen und in den Head-Bereich unserer Webseite einbinden, entweder mit einem Editor oder bei WordPress funktioniert es auch sehr gut mit <a href=\"https:\/\/ekiwi.de\/index.php\/971\/code-in-head-bereich-von-wordpress-einfuegen\/\" target=\"_blank\" rel=\"noopener noreferrer\">einem Plugin<\/a>.<\/p>\n<p><strongDer Code:<\/strong><\/p>\n<pre>&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;\/\/assets.ekiwi.de\/cookie\/cookieconsent.min.css&quot; \/&gt;\r\n&lt;script src=&quot;\/\/assets.ekiwi.de\/cookie\/cookieconsent.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n    window.addEventListener(&quot;load&quot;, function(){\r\n        window.cookieconsent.initialise({\r\n            &quot;palette&quot;: {\r\n                &quot;popup&quot;: {\r\n                    &quot;background&quot;: &quot;#edeff5&quot;,\r\n                    &quot;text&quot;: &quot;#838391&quot;\r\n                },\r\n                &quot;button&quot;: {\r\n                    &quot;background&quot;: &quot;#4b81e8&quot;\r\n                }\r\n            },\r\n            &quot;theme&quot;: &quot;edgeless&quot;,\r\n            &quot;content&quot;: {\r\n                &quot;message&quot;: &quot;Wir verwenden Cookies auf der Website, um Ihren Besuch effizienter zu machen und Ihnen Benutzerfreundlichkeit bieten zu k\u00f6nnen.&quot;,\r\n                &quot;dismiss&quot;: &quot;OK&quot;,\r\n                &quot;link&quot;: &quot;Informationen&quot;,\r\n                &quot;href&quot;: &quot;https:\/\/ekiwi.de\/datenschutzerklaerung.htm\"\r\n            }\r\n        })});\r\n&lt;\/script&gt;<\/pre>\n<p>Passen Sie die Links oben entsprechend Ihrer Webseite an. Anschlie\u00dfend k\u00f6nnen Sie die Farben festlegen und zuletzt folgen die Texte und Links, welche erscheinen sollen.<\/p>\n<p>Den Code f\u00fcgen wir nun in den Head-Bereich der Webseite ein:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_code.jpg\" alt=\"\" width=\"600\" height=\"532\" class=\"alignnone size-full wp-image-1154\" srcset=\"\/wp-content\/uploads\/2020\/10\/cookie_code.jpg 600w, \/wp-content\/uploads\/2020\/10\/cookie_code-300x266.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Fertig! Anschlie\u00dfend erscheint die Cookie-Meldung. Hinweis: wird die Meldung einmal best\u00e4tigt, erscheint diese erstmal nicht mehr. Sie k\u00f6nnen die Cookies des Browsers l\u00f6schen, damit die Meldung wieder erscheint oder den privaten Modus verwenden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Einbau_in_Magix_Webdesigner\"><\/span>Einbau in Magix Webdesigner<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Auch in Software wie den Magix Webdesigner l\u00e4sst sich der Cookie Hinweis einbinden. F\u00fchren Sie den Upload wie oben beschrieben durch. Anschlie\u00dfend muss der Code angepasst werden und in die Webseite eingebunden werden. Der Code ist allerdings geringf\u00fcgig anders, da Magix in der Standardversion uns kein Einf\u00fcgen in den Head-Bereich erfolgt, dies kann nur teure Premium Variante. Der Code:<\/p>\n<pre>&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;https:\/\/ekiwi.de\/cookieconsent\/cookieconsent.min.css\" \/&gt;\r\n&lt;script src=&quot;https:\/\/ekiwi.de\/cookieconsent\/cookieconsent.min.js\"><\/script>\r\n&lt;script&gt;\r\n    setTimeout(function(){\r\n        window.cookieconsent.initialise({\r\n            &quot;palette&quot;: {\r\n                &quot;popup&quot;: {\r\n                    &quot;background&quot;: &quot;#edeff5&quot;,\r\n                    &quot;text&quot;: &quot;#838391&quot;\r\n                },\r\n                &quot;button&quot;: {\r\n                    &quot;background&quot;: &quot;#4b81e8&quot;\r\n                }\r\n            },\r\n            &quot;theme&quot;: &quot;edgeless&quot;,\r\n            &quot;content&quot;: {\r\n                &quot;message&quot;: &quot;Wir verwenden Cookies auf der Website, um Ihren Besuch effizienter zu machen und Ihnen Benutzerfreundlichkeit bieten zu k\u00f6nnen.&quot;,\r\n                &quot;dismiss&quot;: &quot;OK&quot;,\r\n                &quot;link&quot;: &quot;Informationen&quot;,\r\n                &quot;href&quot;: &quot;https:\/\/ekiwi.de\/datenschutzerklaerung.htm\"\r\n            }\r\n        })}, 2000);\r\n&lt;\/script&gt;<\/pre>\n<p>Der Code sieht \u00e4hnlich aus, die gleichen Anpassungen sind auch hier vorzunehmen. Im Gegensatz zu dem anderen Code, wird das Cookiefenster zeitgesteuert eingeblendet. Hier nach 2 Sekunden (2000). Ggf. k\u00f6nnen Sie den Wert auch anpassen.<\/p>\n<p>Nun gehen wir auf &#8222;Extras&#8220; und &#8222;Webeigenschaften&#8220;.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_4.jpg\" alt=\"\" width=\"344\" height=\"280\" class=\"alignnone size-full wp-image-1150\" srcset=\"\/wp-content\/uploads\/2020\/10\/cookie_4.jpg 344w, \/wp-content\/uploads\/2020\/10\/cookie_4-300x244.jpg 300w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/p>\n<p>Hier k\u00f6nnen wir unter &#8222;Webseite&#8220; &#8211; &#8222;HTML-Code (body)&#8220; den Code einf\u00fcgen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_magix_code_body.jpg\" alt=\"\" width=\"740\" height=\"576\" class=\"alignnone size-full wp-image-1160\" srcset=\"\/wp-content\/uploads\/2020\/10\/cookie_magix_code_body.jpg 740w, \/wp-content\/uploads\/2020\/10\/cookie_magix_code_body-300x234.jpg 300w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/p>\n<p>Beim Export wird der Code nun in jede Seite eingef\u00fcgt und erscheint beim Aufruf der Webseite.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_6.jpg\" alt=\"\" width=\"827\" height=\"112\" class=\"alignnone size-full wp-image-1152\" srcset=\"\/wp-content\/uploads\/2020\/10\/cookie_6.jpg 827w, \/wp-content\/uploads\/2020\/10\/cookie_6-300x41.jpg 300w, \/wp-content\/uploads\/2020\/10\/cookie_6-768x104.jpg 768w\" sizes=\"auto, (max-width: 827px) 100vw, 827px\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Wie erstelle ich einen Cookie Hinweis f\u00fcr meine Webseite?<\/p>\n","protected":false},"author":1,"featured_media":403,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[207,22,4,44,206,52],"class_list":["post-1146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-cookie","tag-css","tag-html","tag-javascript","tag-magix-webdesigner","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1146","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=1146"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1146\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/403"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=1146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=1146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=1146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}