Cookie Hinweis in Webseite einbauen – HTML-Editor und Magix Webdesigner

Wie erstelle ich einen Cookie Hinweis für meine Webseite?

Cookie-Hinweise sind die Pest, auf jeder Webseite wird man damit genervt. Es gibt sogar Browser-Plugins, welche Cookie-Hinweise automatisch ausblenden. Als Webseitenbetreiber ist man etwas zwischen den Fronten und ist gut beraten einen Hinweis einzubinden.

In dieser Anleitung wollen wir einen Cookie-Hinweis einbinden, welcher uns am Ende der Webseite einen konfigurierbaren Hinweis einblendet.

Download Scriptes und Beispiel

Wir verwenden in unserem Beispiel freie Cookie Consent-Script von Osano. Das Beispielscript kann hier heruntergeladen werden:

Download

Upload des Scriptes

Nach dem Download entpacken wir den Ordner. Dort finden wir die Beispiel-Dateien und die Script- und CSS-Dateien im Ordner “cookieconsent”. Diesen Ordner laden wir mit FTP auf unseren Webspace.

Anpassen des Codes und Einbinden

Nun müssen 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 einem Plugin.

<link rel="stylesheet" type="text/css" href="//assets.ekiwi.de/cookie/cookieconsent.min.css" />
<script src="//assets.ekiwi.de/cookie/cookieconsent.min.js"></script>
<script>
    window.addEventListener("load", function(){
        window.cookieconsent.initialise({
            "palette": {
                "popup": {
                    "background": "#edeff5",
                    "text": "#838391"
                },
                "button": {
                    "background": "#4b81e8"
                }
            },
            "theme": "edgeless",
            "content": {
                "message": "Wir verwenden Cookies auf der Website, um Ihren Besuch effizienter zu machen und Ihnen Benutzerfreundlichkeit bieten zu können.",
                "dismiss": "OK",
                "link": "Informationen",
                "href": "https://ekiwi.de/datenschutzerklaerung.htm"
            }
        })});
</script>

Passen Sie die Links oben entsprechend Ihrer Webseite an. Anschließend können Sie die Farben festlegen und zuletzt folgen die Texte und Links, welche erscheinen sollen.

Den Code fügen wir nun in den Head-Bereich der Webseite ein:

Fertig! Anschließend erscheint die Cookie-Meldung. Hinweis: wird die Meldung einmal bestätigt, erscheint diese erstmal nicht mehr. Sie können die Cookies des Browsers löschen, damit die Meldung wieder erscheint oder den privaten Modus verwenden.

Einbau in Magix Webdesigner

Auch in Software wie den Magix Webdesigner lässt sich der Cookie Hinweis einbinden. Führen Sie den Upload wie oben beschrieben durch. Anschließend muss der Code angepasst werden und in die Webseite eingebunden werden. Der Code ist allerdings geringfügig anders, da Magix in der Standardversion uns kein Einfügen in den Head-Bereich erfolgt, dies kann nur teure Premium Variante. Der Code:

<link rel="stylesheet" type="text/css" href="https://ekiwi.de/cookieconsent/cookieconsent.min.css" />
<script src="https://ekiwi.de/cookieconsent/cookieconsent.min.js">
<script>
    setTimeout(function(){
        window.cookieconsent.initialise({
            "palette": {
                "popup": {
                    "background": "#edeff5",
                    "text": "#838391"
                },
                "button": {
                    "background": "#4b81e8"
                }
            },
            "theme": "edgeless",
            "content": {
                "message": "Wir verwenden Cookies auf der Website, um Ihren Besuch effizienter zu machen und Ihnen Benutzerfreundlichkeit bieten zu können.",
                "dismiss": "OK",
                "link": "Informationen",
                "href": "https://ekiwi.de/datenschutzerklaerung.htm"
            }
        })}, 2000);
</script>

Der Code sieht ähnlich 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önnen Sie den Wert auch anpassen.

Nun gehen wir auf “Extras” und “Webeigenschaften”.

Hier können wir unter “Webseite” – “HTML-Code (body)” den Code einfügen.

Beim Export wird der Code nun in jede Seite eingefügt und erscheint beim Aufruf der Webseite.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.