Hide und Internet Explorer

schenja2000 commented 3 years ago

Hallo Philipp,

die Anwendung ist klasse geworden.

Ich habe die Datei cookieyesno.min.js im Header eingebunden und die Anwendung mit Google Analytics in verschiedenen Browsern getestet.

Bis auf folgende Punkte habe ich keine Probleme festgestellt:

1. Beim Reload der Webseite wird nicht erkannt, dass das Cookie gesetzt wurde 1.1 Cookie ist gesetzt: grafik

1.2 Cookie-Banner bleibt auf display:block; grafik

2. Fehler in allen Versionen vom Internet Explorer 2.1 Wenn das Script cookieyesno.min.js ohne die Befehle unter "Usage" geladen werden, wird der Cookie-Banner angezeigt.

2.2 Sobald die Befehle unter "Usage" eingebunden sind, wird das Cookie-Banner nicht mehr geladen und folgender Fehler angezeigt: grafik grafik

philippG777 commented 3 years ago

Hallo,

versuche einmal

cyn.onChange(function(settings) {
    // cookie settings have changes
});

statt der Pfeil Syntax, denn diese wird von älteren Browsern nicht unterstützt.

In welchem Browser ist der Fehler mit dem Banner, der sichtbar geblieben ist, aufgetreten?

schenja2000 commented 3 years ago

Habe den (Leichtsinns)-Fehler gefunden. Habe die Current-Settings mitaufgerufen.

Vielen Dank für Deine Hilfe!

philippG777 commented 3 years ago

Kein Problem.

Wünscht Du dir noch andere Features bzw. hast Du irgendwelche Verbesserungsvorschläge?

Ich würde gerne eine Liste mit Webseiten, die diesen Banner verwenden ins README stellen. Wenn es Dir nichts ausmacht würde ich auch gerne deine dazugeben.

schenja2000 commented 3 years ago

Ich werde die Anwendung in den nächsten Wochen auf einigen Webseiten implementieren. Ich sende Dir dann die Links zu.

Ich suche seit langem nach einem Tool mit genau dem von Dir gebotenen Funktionsumfang. Es ist für DSGVO-Anforderungen perfekt geeignet, verständlich geschrieben und flexibel anpassbar. Folgende Vorteile sehe ich an der Software:

Keine monatlichen Zahlung für Basis-Funktionalitäten (im Vergleich zu den kostenpflichtigen Tools)
Code extrem sauber mit Liebe zum Detail (z.B. die Möglichkeit der Versions-Änderung)
Sehr performant (z.B. usercentrics ist 50x größer)
Einfache Möglichkeit das Tool an die eigenen Anforderungen anzupassen und zu erweitern
Kein Reload notwendig, um Tracking-Code nachzuladen
Läuft auf allen getesteten Browsern (IE, Safari, Firefox, Chrome, ...)

Großer Respekt!

philippG777 commented 3 years ago

Danke!

Ich lass das Issue noch ein paar Wochen für die Links offen.

schenja2000 commented 3 years ago

Hallo Philipp, tut mir leid ... jetzt sind aus einigen Wochen Monate geworden und ich habe die Anwendung immer noch nicht im Live-Betrieb. Ich habe irgendwann aufgegeben, weil ich es nicht geschafft habe, JavaScript aus dem HTML-Code ausgeführt zu bekommen:

Habe versucht nachfolgend das Tag type beim Befehl accepted umzuwandeln von text zu javascript:

Aber es ist mir nicht gelungen. Hast Du eine Idee?

philippG777 commented 3 years ago

Hallo,

wenn ich Dich recht verstehe, hast Du ein Script-Element das so irgendwie ausschaut:

<script>
    // irgendein code - zum Beispiel Google Analytics
</script>

Und Du möchtest dieses Script nur ausführen, wenn die analytics Kategorie akzeptiert wird. Nun gibt es drei Möglichkeiten:

Blockiertes Inline Script (Unsicher)

Verändere einfach den script Tag, damit er folgendermaßen aussieht:

<script type="text/plain" data-cyn-require="analytics">
    // irgendein code - zum Beispiel Google Analytics
</script>

Es kann sein, dass dieses Script in älteren Firefox Versionen nicht blockiert wird. Verwende besser eine der anderen beiden Möglichkeiten.

Externes JavaScript

Kopiere den Inhalt des Script-Elements in ein neues JS-File, in diesem Beispiel nenne ich es myotherscript.js. Ersetze nun Dein Script Element durch folgendes:

<script type="text/plain" data-cyn-src="myotherscript.js" data-cyn-require="analytics"></script>

Die eleganteste Möglichkeit: Events

Erweitere Deinen Code wie folgt:

// Die folgende Zeile solltest Du in irgendeiner Form schon haben:
var cyn = new CookieYesNo(DEINE_CONFIG);

// Erstelle eine Funktion, die den Code aus dem Script Tag enthält, der ausgeführt werden soll wenn analytics akzeptiert werden
function analyticsAccepted()
{
    // irgendein code - zum Beispiel Google Analytics
}

// Nun füge ein Event dazu, dass analyticsAccepted aufruft, wenn analytics akzeptiert werden.
cyn.onAccept("analytics", analyticsAccepted);

Ich hoffe das hat geholfen. Aber Achtung, damit die obigen Beispiele funktionieren muss die neue Version (1.1.0) verwendet werden, die kann viel mehr als die alte. Wenn Du noch etwas brauchst, dann melde Dich einfach wieder.

LG Philipp

schenja2000 commented 3 years ago

Hallo Philipp,

ich habe einen Test mit Version 1.1.0 aufgesetzt und vom Layout etwas angepasst: https://www.uflow.de/

Position der einzelnen Elemente (Titel, Beschreibung, Recht-URLs, Cookie-Tabelle, Buttons)
Ein Teil des CSS habe ich in die CSS-Datei verschoben (für meine Übersicht)
"Details" Button bei den einzelnen Kategorien

Habe alle aktuellen Browser getestet (Firefox, Google/Edge, Safari) - läuft überall super, nur der Internet Explorer macht Probleme: grafik grafik

philippG777 commented 3 years ago

Hallo,

es sollte jetzt mit der neuen Version (https://github.com/philippG777/cookieyesno/releases/tag/v1.1.1) funktionieren und es gibt laut meinen Tests zufolge nun auch keine Bugs in IE11mehr.

Der Banner auf https://www.uflow.de/ sieht ziemlich gut aus. Besonders gut gefällt mir, dass man die Details aufklappen kann. Darf ich den Link ins README-File stellen?

Mir ist folgendes aufgefallen:

1. Konsens im nachhinein bearbeiten

An und für sich sollte der Benutzer die Möglichkeit haben, den Konsens zu widerufen oder zu bearbeiten, dies kann man zum Beispiel mit folgendem Link im Footer realisieren:

<a href="#" onclick="cyn.reviewSettings()">Cookie-Einstellungen widerufen oder bearbeiten</a>

(Mehr Info dazu: https://datenschutz-generator.de/bgh-cookies-opt-in-faq-checkliste/#Wo_muessen_die_Moeglichkeiten_zu_nachtraeglichen_Aenderungen_der_Einwilligung_platziert_werden)

2. Verwendung von `cookieyesno.min.js`

Für eine möglichst effiziente Verwendung ist es ratsam, dass man das cookieyesno.min.js einbindet, und die Veränderungen des Banners über die übergebene Config bzw. CSS vornimmt. Der Text kann beispielsweise auf folgende Weise verändert werden:

var cyn = new CookieYesNo({
   ...
    text: {
        above: "Text über der Auswahl der Kategorien",
        below: "Text unter der Auswahl der Kategorien"
    },
   ...
});

Das Aussehen kann durch die Verwendung von CSS rules beeinflusst werden, manchmal muss man !important verwenden, um das existierende Styling sicher zu überschreiben. Mehr Info zu !important: https://www.elegantthemes.com/blog/design/css-important

Der Vorteil von cookieyesno.min.js ist, dass es schon verkleinert ist (ungefähr um den Faktor 2 kleiner als das normale nicht minifizierte File) und dadurch schneller übertragen werden kann.

Bei Fragen einfach wieder melden. LG Philipp

P.S.: Ich bin sehr erfreut darüber, dass der Banner auch aktiv verwendet wird.

philippG777 / cookieyesno