Cookie-Banner

[red]

Ich habe lange gesucht, natürlich auch hier im Forum; leider nichts gefunden bzw. es ist komplizierter als ich dachte.

Eigentlich bedarf es ja einer Checkbox, so wie ich das verstanden hatte, um einzelne Cookies an - bzw. abzuwählen, z.B. wenn man auf einer Unterseite auf google maps verlinkt oder für den WB-Stats Besucherzähler/-statistics.

Wie löst ihr das, wenn ich fragen darf? Ich dachte, ich ändere den link "Mehr Infos" beim  "Diese Website nutzt Cookies, um bestmögliche Funktionalität bieten zu können. Mehr Infos" und erwähne diese Extras? Falls das Sinn ergibt meine Anschlussfrage, wo finde ich den link?

Für Anregungen bin ich sehr dankbar!

[sternchen8875]

Ich hoffe, du meinst den Klaro-Consent-Manager im DefaultTemplate von WB...
wenn JA: was du dort hast, ist ein minimales Beispiel zur Einbindung, das den aktuellen Regeln der DSGVO entspricht nach einer Neuinstallation, also ohne weitere Apps, ohne weitere Sprachen außer DE und EN.
Konfiguriert wird das Ganze über die Datei klaro_config.js im Ordner /templates/DefaultTemplate/js.
Eine kommentierte JS-Datei findest du im gleichen Ordner und ein komplexeres Beispiel mit mehr definierten Apps findest du im Anhang. Nicht definiert in diesen Dateien ist der Pfad zu deiner Datenschutz-Erklärung im Projekt. Diese sogenannte privacyPolicyUrl kann für jede Sprache definiert werden, in dem sie im jeweiligen Block unter translation/de bzw translations/en hinterlegt wird, so wie in dieser Dokumentation hier -> https://klaro.org/de/doku/integration/kommentierte-konfiguration.
Unter translations/zz wird dann noch eine Url zu einer Seite hinterlegt, falls noch keine Sprachvariable vom CMS erzeugt wurde, i.d.R. also die Startseite.
Unter o.a. Link findest du auch Möglichkeiten zum Testen deiner Konfiguration.
Das CSS läßt sich ganz normal über das CSS abwickeln, die Datei dazu ist im Ordner /templates/DefaultTemplate/css

Ansonsten wird jede verwendete Sprachvariable über die klaro_config.js definiert. Beachte bitte, das nach jeder Änderung dieser Datei das Leeren des Browser-Cache nötig ist.

P.S.: der Cookie-Manager übernimmt nur eine Schaltfunktion. Zu jeder definierten App (z.b. Google Font oder Google Map usw) ist ein eigener Eintrag in der Datenschutzverordnu ng notwendig, wenn du der DSGVO entsprechen möchtest.

P.S.: WB-Stats benötigt keinen Cookie-Eintrag, da dieses Modul keine Cookies im Sinne der meldepflichtigen Einträge lt DSGVO erzeugt.

[red]

Vielen Dank!
Ich habe mich da durchgearbeitet, was du geschrieben hast, das fällt mir leider etwas schwer.

Ich nutze kein Standard-template.
Zu deinem Beispiel mit dem google fonts.
Stimmt es, dass ich entweder die fonts lokal einbinden muss oder dass ein Hinweis darauf in der Datenschutzerklärun g nicht reicht, sondern der User mit einer cookie Info beim Erstaufruf der Seite bestätigen muss, dass er einverstanden ist, wenn für die fonts auf google verwiesen wird?

Anschlussfrage, wie würde ich denn diese Option bei der Cookie Info integrieren (Stichwort Checkbox) und anschließend den url-Verweis in der editor.css des templates löschen?

Oder kann man das einfacher lösen? Habe jetzt genannten url-Verweis einfach gelöscht und Folge ist, dass lediglich eine "Standardschrift" verwendet wird?

Nochmal danke für alle, die helfen können.

[sternchen8875]

Stimmt es, dass ich entweder die fonts lokal einbinden muss oder dass ein Hinweis darauf in der Datenschutzerklärun g nicht reicht, sondern der User mit einer cookie Info beim Erstaufruf der Seite bestätigen muss, dass er einverstanden ist, wenn für die fonts auf google verwiesen wird?

Zum besserem Verständnis braucht es wohl ein paar technische Erläuterungen
Sobald man einen x-beliebigen Google-Service benutzt, egal, ob Maps, Fonts, YouTube, Fotos, Suche usw, usw, wird der Besucher mit seinen Daten von IP-Adresse, eventuell dem Wohnort bis hin zur Bildschirmauflösung und dem benutzten Browser von Google getrackt. Das bedeutet mit anderen Worten, das man lt DSGVO verpflichtet ist, dem User darüber zu informieren, das ein Cookie verwendet wird, welcher das ist und das es zu jedem verwendeten Cookie auch eine Auswahlmöglichkeit geben muß, in der der Besucher die Verwendung dieses speziellen Cookies auch ablehnen kann und nicht-technischen Cookies auch aktiv zustimmen muß.
Das Tracken gilt dann analog für so fast alle Dienste, Facebook, X (Twitter), Insta usw

Bleiben wir beim Font: Die DSGVO besagt, das ein Cookiebanner über allem Content auf der Eingangsseite zu sehen sein muß und das, ohne den Content scrollen zu müssen. Damit ist eigentlich die Frage, ob es nicht reicht, ein Google-Cookie auf der Datenschutzseite zu erwähnen, eigentlich schon beantwortet. Nein, das ist nicht ausreichend.
Eine Datenschutzseite ist eher eine weitergehende Erläuterung der im Cookie-Banner verwendeten Einstellungen..
Nehmen wir an, ich verwende Google-Fonts vom externen Google-Server als Standardschrift meiner Webseite und verwende die von dir genannte Methode mit der Erwähnung auf meiner Datenschutzseite.
- dann hätte der Besucher die Möglichkeit, vor dem Besuch der Datenschutzseite erst andere Unterseiten zu besuchen, die eben auch diesen Google-Font benutzen würde
- besucht der Visitor statt meiner Datenschutzseite eine andere, ist es u.U. nicht mehr möglich, den Link zu meiner Datenschutzseite ohne Scrollen zu erreichen, z.b. weil der Link in meinem Footer liegt und ich dafür scrollen müßte. Dies wäre mit der Verwendung eines CookieBanners aber immer sicher gestellt
- dann hätte ich nicht zuerst seine aktive Zustimmung zur Nutzung der Google-Fonts geholt
- dann hätte der Besucher keine Möglichkeit, diesen oder auch andere als technisch-notwendige Cookies abzulehnen
- dann würde ich gegen die DSGVO verstoßen, die bei Cookie-Nutzung ein Banner vorschreibt.

 

Anschlussfrage, wie würde ich denn diese Option bei der Cookie Info integrieren (Stichwort Checkbox) und anschließend den url-Verweis in der editor.css des templates löschen?

Das Grundprinzip ist recht einfach:
- kopiere dir aus dem Ordner /templates/DefaultTemplate/js die Datei config.js und füge sie ein in einen Ordner /js in deinem Frontend-Template. Diese Datei hat alle gängigen Einträge schon und man muß dann nur das nicht benötigte auskommentieren. Ist der Ordner /js in deinem Template-Ordner noch nicht vorhanden, erstelle ihn. Das hilft, die Übersicht zu behalten und ermöglicht das Kopieren der Links aus der index.php des DefaultTemplate

- aus dieser index.php vom DefaultTemplate kopierst du dir diese Zeilen (fast ganz unten

<script defer  src="<?= TEMPLATE_DIR; ?>/js/klaro_config.js"></script>
<script defer data-config="klaroConfig" src="<?= WB_URL;?>/include/plugins/default/klaro/klaro_v0.7.16.js">
</script>

und fügst sie in die index.php deines Frontend-Templates ein. Ändere dann diesen kopierten Namen klaro_config.js in config.js

Möchte man auch noch das CSS des Banners anpassen, muß auch noch die Datei klaro.css aus dem Ordner /templates/DefaultTemplate/css kopiert werden und in den gleichnamigen Ordner des verwendeten Frontend-Templates eingefügt werden und natürlich auch im head-Bereich der index.php des Frontend-Templates eingebunden werden.. Ich habe mir dabei angewöhnt, diese Datei umzubenennen, z.b. mit Namen des Templates, also z.b. so: klaro_agentur.css. Das erspart später mögliche Unfälle. Im Anhang zwei Bilder, die zeigen, das ein Color-Styling kein Problem ist.

In der JS-Datei findest du Einträge wie diese hier:

            purposes: {
                wbfunction: 'Funktion / Security',
//                analytics: 'Analytics',
                security: 'Security',
//                livechat: 'Livechat',
//                advertising: 'Advertising',
                styling: 'Styling',
            },

durch Ein- oder Auskommentieren werden dann die vordefinierten Apps freigeschalten oder eben deaktiviert.

Der Vollständigkeit halber noch diese Hinweise: Verwendet man mehrere Sprachen auf der Webseite, benötigt die config.js (von klaro) für jede Sprache eine eigene Definition der zu verwendenen Apps.
Werden im Projekt mehrere Frontend-Templates verwendet, benötigt jedes Frontend-Template auch diese CookieBanner-Definition, also diese klaro_config.js bzw config.js und ggf eine CSS-Datei dazu

Oder kann man das einfacher lösen? Habe jetzt genannten url-Verweis einfach gelöscht und Folge ist, dass lediglich eine "Standardschrift" verwendet wird?

Was "einfach" ist, hängt von den Fähigkeit ab, die du mitbringst und von den Ansprüchen, die du an das Design deiner Webseite hast. Reicht dir diese Standardschrift aus, ist dies natürlich die einfachste Lösung, jeden Verweis auf Importe zu unterdrücken. Abgängig von Endgerät und den dort verwendeten Browsern muß man aber einkalkulieren, das es dann auch unterschiedliche Ansichten in diesen Geräten geben kann, weil jeder eine andere Schriftart verwendet.

Ich persönlich bin eher ein Freund der lokalen Einbindung von Google-Fonts, weil es meine Möglichkeiten, eine Webseite anders zu gestalten, durch solche Fonts deutlich gesteigert wird. Das lokale Einbinden erspart mir dann auch das Google-Problem, denn wenn der Besucher einen Font ablehnt, was er beim Import vom Google-Server ja kann, stehe ich wieder mit der Standardschrift der Browser da oder ich muß halt von Anfang an in der CSS mit Alternativen arbeiten.
Hier mal ein Link mit einer Beschreibung, wie die lokale Einbindung von Google-Fonts funktioniert ->
https://www.mittwald.de/blog/mittwald/howtos/dem-datenschutz-zuliebe-wie-ihr-google-fonts-lokal-in-eure-webseiten-einbindet


mit  95% Seitenbreite


andere Farben

[ruebenwurzel]

Hallo,

ich häng mich da mal kurz dazwischen. Ich wollte den Cookie-Banner wie von sternchen8875 beschrieben auf meiner Seite einbauen. Technisch funktioniert das auch einwandfrei. Das CSS meines Templates scheint aber mit dem CSS des Banners nicht zusammenzupassen. Würde für den Banner gerne ausschließlich das CSS von Klaro verwenden. Steh grad auf dem Schlauch, wie ich das am Besten lösen könnte. Oder andersrum, kann man das Laden des Klaro css verhindern, so dass nur das CSS des Templates greift. Wäre ja vielleich auch nicht schlecht. Momentan schaut es fürchterlich aus.

Beispiellink: www.familie-gallas.de

[sternchen8875]

Oder andersrum, kann man das Laden des Klaro css verhindern, so dass nur das CSS des Templates greift. Wäre ja vielleich auch nicht schlecht.

Hier hab ich gleich eine Antwort
Das CSS im Klaro kommt als Inline-CSS aus der Datei /include/plugins/default/klaro/klaro_v0.7.16.js. Das ist eine minified CSS-Datei, also komprimiert
Mit der Methode, wie ich sie im vorherigen Beitrag beschrieben habe (klaro.css im Template-Ordner) wird dieses CSS dann überschrieben, allerdings benötigen die meisten Angaben ein !important.
Die 2 Bilder oben stammen von meiner kommerziellen Homepage. Dort hab ich das minified JS dekomprimiert, angepasst und wieder komprimiert. Ist damals mehr oder weniger aus Unkenntnis über den Gesamtaufbau so passiert.
Das hier ist über die CSS so gemacht, nur mal als Spielerei, also bitte kein Augenkrebs bekommen

Das CSS meines Templates scheint aber mit dem CSS des Banners nicht zusammenzupassen.

Eigentlich hat Klaro eine sehr gute und auch komplexe Auf- und Zuteilung der CSS-Klassen im Objekt und schaut man sich ein paar Seiten an, die Klaro nutzen, ist es auch kein Problem, das anders zu gestalten. Aber ich geb gern zu, das es recht aufwändig ist.

Beispielseiten mit Klaro-Consent-Manager
https://www.fabian-kleiser.de/blog/integrate-klaro-consent-management/
https://www.aalen.de/startseite.1.htm
https://www.spd-rottenburg-neckar.de/mto/1/
https://www.sindele.de/index.html


Ich schau mal, wo sich deine Farben da überlagern

[ruebenwurzel]

Hallo,

klaro.css ist im Template Ordner und wird über die index.php auch geladen.

Ich würde das ausschließliche Laden der claro.css bevorzugen. Irgendwie scheinen aber auch einig classes der main.css (Css des Templates) da noch reinzuspielen. Werde das mit !important mal testen.

[sternchen8875]

So mal getestet mit deiner main.css und deiner klaro.css

Es scheint wohl so, das die Anpassungen in einer klaro.css innerhalb des Templates-Ordner nicht deine Definitionen in aus der Main.css überschreiben, weil sie auf der Rangebene immer unterhalb des CSS aus der main.css liegen. Mit anderen Worten: ein Div mit der Klasse=klaro ist ja immer nur ein Unterelement eines in der main.css bereits definierten Blocks. Man muß, um die Inline-Definitionen von klaro zu überschreiben, entweder auf die gleiche Ebene kommen oder noch eines höher.

Einfachste Lösung dafür wäre das Einfügen der gewünschten Änderungen direkt in die main.css des Templates. Hier mal etwas Code als Beispiel

Code: [Select]

@media (min-width: 400px) {
  #klaro .klaro .cookie-modal-notice {
    max-width: 1200px !important;
    height: auto;
    width: auto;
  }
}
.klaro .cookie-modal .cm-btn.cm-btn-info, .klaro .context-notice .cm-btn.cm-btn-info, .klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: #008000!important;
}
.klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn, .klaro .cookie-notice .cm-btn {
  color: #fff!important;
  background-color: #f5383d!important;
}
.klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: #ff8040 !important;
}
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
  color: #fff!important;
  color: var(--white, #fff!important);
  box-shadow: inset 0 0 0 2px #ff00ff!important;
}
Sind zwar etwas "komische" Farben, die dienen aber nur dazu, Unterschiede gleich sichtbar zu machen



Zum Ändern am Einfachsten, rechter Mausklick auf das gewünschte Element und Untersuchen wählen. Auf der Entwicklerseite den Inline-Code kopieren, in die main.css einfügen und dann entsprechend anpassen. Mit STRG + F5 die Seite neu laden, sollte gehen



Ich schau mal noch nach weiteren Möglichkeiten, eine separate CSS wäre mir ja am liebsten, schon der Übersicht halber

Andere Variante wäre halt das Arbeiten mit der (erstmal) dekomprimierten klaro_v0.7.16.js. Die kann (nach meinen Test's) dann auch im Template-Ordner liegen. Dort müßte man aber das Inline-CSS anpassen, was sehr unübersichtlich ist.

P.S.: noch eine Korrektur: ich hatte einen Schreibfehler beim Link zur CSS-Datei, darum ging es zuerst nur über die main.css. Nach Korrektur des Links funktioniert es auch über eine separate CSS-Datei. Und deren Inhalt ist aktuell nur obiger Code. Für alles weitere muß ich mich dann Schritt für Schritt vortasten

[ruebenwurzel]

Hallo,

wollte noch ein kurzes Feedback geben, dass ich den Klaro Cookie Banner von WB erfolgreich auf meiner Seite einbinden konnte.

https://www.familie-gallas.de


Die Probleme mit den CSS Überschneidungen habe ich wie folgt gelöst:

1.) Die klaro.css muss als erste .css noch vor den .css Files des Templates geladen werden, damit sie wirkt.
2.) weitere Anpassungen (lediglich 4 Auskommentierungen) habe ich dann im .css meines Templates vorgenommen. Im Firefox über rechte Maustaste und Element untersuchen die Stellen ausfindig gemacht und dann im .css File des Templates angepasst.
3.) In meiner Template .css dann noch die übergelagerten Klaro-slider der Inputfelder mit !important ausgeblendet, so dass lediglich die Inputfelder des Templates angezeigt werden.

Danke an sternchen8875 für die entscheidenden Hinweise, an welcher Stelle ich ansetzen soll.

[dbs]

Hi, schönes Template.
Eigentlich klingt dein Punkt 1 (Die klaro.css muss als erste .css ...) unlogisch, aber wenn es funktioniert muss es ja richtig sein.

Man sieht gar kein Frontendlogin, aber aus dem account Ordner werden frontend.css und frontend_body.js geladen.
Würde mich stören, aber das macht WB einfach so.

[ruebenwurzel]

Hallo,

klaro.css: Hatte die css zuerst in einer anderen Reihenfolge geladen, da sah es fürchterlich aus. Erst nachdem das klaro.css als erstes geladen wurde sah der Cookie-Banneres dem des default Templates ähnlich. Geb dir recht, auch für mich unlogisch, wenns aber so funzt, dann will ich da gar nicht weiterbohren 

account.css: Ja, wird leider von WB immer geladen ohne die Möglichkeit das zu deaktivieren. Vielleicht kann Dietmar in einer kommenden Version das an die Einstellungen in den settings koppeln, so dass es nur geladen wird, wenn dort Anmeldung und/oder Registrierung aktiviert ist. Das laden der account/frontend.css und frontend_body.js stört auch mich. Bin ein Freund dessen, dass immer nur das nötige geladen wird.

Template: Bin gerade dabei das Template (und noch ein paar andere von HTML5UP) für die WB Template Repository aufzuarbeiten. Technisch alles fertig, hängt momentan nur an der Doku (entfernen style Anweisungen in Core-Files, Einbindung Form, Einbindung Cookie Banner, ...)

[hgs]

Da bin ich gespannt und schon mal

Danke!

im Voraus.