MODUL: OIL.js Cookie Consent Management

[voodoopupp]

Noch ein Verbesserungsvorschlag (kenn ich von einer anderen Webseite)

Könnte man nicht, wenn man auf "Mehr Informationen" klickt, weiterhin den Button "Alle akzeptieren" einblenden?
Denn aktuell wird er dort dann vom Button "Speichern" abgelöst, welcher eben nur die Auswahl speichert.

Wenn dort aber weiterhin der Button "Alle akzeptieren" eingeblendet wird und eventuell noch schön knallig hervorgehoben ist, und der normale "Speichern" Button nur grau, dann werden selbst dort noch aus Versehen einige Kunden alle Cookies akzeptieren, obwohl sie eigentlich einschränken wollten.

OIL.js - modified
[ Für Gäste sind keine Dateianhänge sichtbar ]
[ Für Gäste sind keine Dateianhänge sichtbar ]

Idee von andere Seite
[ Für Gäste sind keine Dateianhänge sichtbar ]
[ Für Gäste sind keine Dateianhänge sichtbar ]

Durch die Hervorhebung und des Buttons und die leicht verwirrende Bezeichnung der Buttons sorgt dies sicherlich nochmals für höhere Raten an "kompletten Cookies". Gerade bei der detaillierten Ansicht ist man hier oft versucht, mit "Alle Cookies zulassen und speichern" dann eigentlich seine Auswahl zu bestätigen.

Als Shopbetreiber ist man natürlich schon darauf angewiesen, dass man möglichst viele Kunden tracken kann, damit man vernünftige Verkaufsstatistiken etc. nutzen kann.

Grüße
Dominik

[noRiddle (revilonetz)]

Weitere kleine Verbesserungsvorschläge:

• Bei der Bearbeitung der Cookies im Backend sind die input-Felder etwas kurz.
  Bei mehreren Cookies kann man deshalb nicht alles lesen was im Feld steht (das ist übrigens an solchen Stellen im Backend generell der Fall).
  Dazu kann man update-sicher eine Datei, z.B. namens extra_css.css.php, generieren in /admin/extra/css/ mit folgendem Inhalt:

Code: PHP  [Auswählen]

<?php
/**********************************************
* file: extra_css.css.php
* path: /admin/extra/css/
* use: define some extra css for the backend
*
* (c) 06-2020, WHO_EVER
**********************************************/
?>
<style>
.infoBoxContent input, .infoBoxContent textarea {width:90%;}
</style>
?>

• Nach Klick auf "Weitere Informationen" im Cookie-Banner im Frontend ist der Klickbereich der Überschriften ("Notwendig", "Statistik", usw.) zum Öffnen der einzelnen Container sehr flach und man muß sehr genau mit der Maus zielen.
  Das liegt an einer sehr geringen line-height und einem hohen padding im umgebenden Container, siehe Screenshot (wo der hell-blaue Bereich der Klickbereich ist).
  [ Für Gäste sind keine Dateianhänge sichtbar ]
  
  Dazu der Vorschlag in /templates/YOUR_TEMPLATE/css/jquery.cookieconsent.css folgende Änderungen vorzunehmen:

Suche:

Code: CSS  [Auswählen]

.as-oil-cpc__category{background:#ddd;border:1px solid #eaeaea;border-radius:5px;padding:15px 10px 15px 10px;margin:16px 0}

und ändere in:

Code: CSS  [Auswählen]

.as-oil-cpc__category{background:#ddd;border:1px solid #eaeaea;border-radius:5px;padding:0 10px 0 10px;margin:16px 0} /*was padding:15px 10px 15px 10px;, WHO_EVER*/

Suche:

Code: CSS  [Auswählen]

.as-oil-cpc__category-header{text-transform:uppercase;color:#999;line-height:1;font-weight:700;padding:0 80px 0 20px;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yOTEsMTQuMjc2TDE0LjcwNSw0LjY5Yy0wLjg3OC0wLjg3OC0yLjMxNy0wLjg3OC0zLjE5NSwwbC0wLjgsMC44Yy0wLjg3OCwwLjg3Ny0wLjg3OCwyLjMxNiwwLDMuMTk0ICBMMTguMDI0LDE2bC03LjMxNSw3LjMxNWMtMC44NzgsMC44NzgtMC44NzgsMi4zMTcsMCwzLjE5NGwwLjgsMC44YzAuODc4LDAuODc5LDIuMzE3LDAuODc5LDMuMTk1LDBsOS41ODYtOS41ODcgIGMwLjQ3Mi0wLjQ3MSwwLjY4Mi0xLjEwMywwLjY0Ny0xLjcyM0MyNC45NzMsMTUuMzgsMjQuNzYzLDE0Ljc0OCwyNC4yOTEsMTQuMjc2eiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==) no-repeat 0 0/contain;cursor:pointer}

und ändere in:

Code: CSS  [Auswählen]

.as-oil-cpc__category-header{
    text-transform:uppercase;
    color:#999;
    line-height:44px; /*was 1, WHO_EVER*/
    font-weight:700;
    padding:0 80px 0 20px;
    background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yOTEsMTQuMjc2TDE0LjcwNSw0LjY5Yy0wLjg3OC0wLjg3OC0yLjMxNy0wLjg3OC0zLjE5NSwwbC0wLjgsMC44Yy0wLjg3OCwwLjg3Ny0wLjg3OCwyLjMxNiwwLDMuMTk0ICBMMTguMDI0LDE2bC03LjMxNSw3LjMxNWMtMC44NzgsMC44NzgtMC44NzgsMi4zMTcsMCwzLjE5NGwwLjgsMC44YzAuODc4LDAuODc5LDIuMzE3LDAuODc5LDMuMTk1LDBsOS41ODYtOS41ODcgIGMwLjQ3Mi0wLjQ3MSwwLjY4Mi0xLjEwMywwLjY0Ny0xLjcyM0MyNC45NzMsMTUuMzgsMjQuNzYzLDE0Ljc0OCwyNC4yOTEsMTQuMjc2eiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==) no-repeat 0 15px/14px; /*was 0 0/contain, WHO_EVER*/
    cursor:pointer
}

Suche:

Code: CSS  [Auswählen]

.as-oil-cpc__switch{position:absolute;display:inline-block;width:50px;height:26px;right:0;top:-6px;float:right}

und ändere in:

Code: CSS  [Auswählen]

.as-oil-cpc__switch{position:absolute;display:inline-block;width:50px;height:26px;right:0;top:10px;float:right} /*was top:-6px;, WHO_EVER*/

Nach diesen Änderungen wird der Klickbereich dreimal so hoch sein, nämlich so hoch wie im oben geposteten Screenshot die Summe aus dem hell-blauen und den beiden violetten Bereichen.

Damit sich niemand wundert:
WHO_EVER steht für das Kürzel dessen der die Änderung durchgeführt hat. Ich bin ein absoluter Verfechter des Kommentierens, immer und bei allem was man ändert.

Gruß,
noRiddle

[voodoopupp]

Sehr schön, wenn es hier weiter geht.

Weitere kleine Verbesserungsvorschläge:

• Bei der Bearbeitung der Cookies im Backend sind die input-Felder etwas kurz.
  Bei mehreren Cookies kann man deshalb nicht alles lesen was im Feld steht (das ist übrigens an solchen Stellen im Backend generell der Fall).
  Dazu kann man update-sicher eine Datei, z.B. namens extra_css.css.php, generieren in /admin/extra/css/ mit folgendem Inhalt:

Code: PHP  [Auswählen]

<?php
/**********************************************
* file: extra_css.css.php
* path: /admin/extra/css/
* use: define some extra css for the backend
*
* (c) 06-2020, WHO_EVER
**********************************************/
?>
<style>
.infoBoxContent input, .infoBoxContent textarea {width:90%;}
</style>
?>

Dann könnte man vielleicht gleich noch hierbei das erweitern

Code: PHP  [Auswählen]

.infoBoxContent small {
    font-size: 10px;
}

Denn die Schrift bei den von dir genannten Cookie Input Feld ist echt superklein geschrieben und nicht wirklich lesbar:
[ Für Gäste sind keine Dateianhänge sichtbar ]

Grüße
Dominik

[noRiddle (revilonetz)]

Mmh, bei mir ist die nicht zu klein, lässt sich noch gut lesen.
Hast du evtl. deinen Browser ins Minus gezoomt ?

Andererseits ist es auch egal. In dem vorgeschlagenen File kann man ja seine eigenen Vorlieben an CSS verwirklichen.

Gruß,
noRiddle

[voodoopupp]

Nee, habe ich nicht, habe es auch von mehreren Rechnern/Laptops getestet. Überall gleich klein....

Wie auch immer, macht ja nichts, du hast schon Recht: das kann man selber machen, wenn es sonst kein anderer so hat - da gibt es sinnvollere/bessere Dinge zur Optimierung.

Viele Grüße
Dominik

[voodoopupp]

Hmm, ist das nun gut oder schlecht, dass oil.js soeben eingestellt wurde:
https://www.oiljs.org/
https://github.com/as-ideas/oil

  

[Tomcraft]

Das ist völlig irrelevant, da das Modul macht, was es soll.

Grüße

Torsten

[noRiddle (revilonetz)]

Nachtrag zu meinem CSS-Vorschlag:
Aus dem

Code: CSS  [Auswählen]

.infoBoxContent input

sollte man das machen

Code: CSS  [Auswählen]

.infoBoxContent input[type="text"]

damit nicht auch die Submit-Buttons so breit werden.

Gruß,
noRiddle

[noRiddle (revilonetz)]

Just for the record:

Ich bekomme diesen Fehler in der Konsole:
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data    oil.min.js:2:11490
[...]

• Wenn man Matomo aktiviert hat und die Matomo-Cookies nicht akzeptiert wird trotzdem ein Matomo-Cookie gesetzt, anscheinend ein Session-Cookie (MATOMO_SESSID).
• [...]

[...]

Beides lag an dem Spacko vor dem Rechner.
Zum SyntaxError: /includes/extra/ajax/ nicht richtig hochgeladen
Zu Matomo: War das Cookie welches das Matomo Backend setzt, nicht der Shop. Firefox hat es in den Tools aber auch im Shop angezeigt, weil selbe Domain,

Fazit:


Gruß,
noRiddle

[Tomcraft]

Danke für die Rückmeldung.

Wie hast du es denn geschafft die "/includes/extra/ajax/cookie_consent.php" Datei nicht richtig hoch zu laden?

Grüße

Torsten

[noRiddle (revilonetz)]

Tja, ääh, ich will ehrlich sein,..., wenn man beim Hochladen den Zwischen-Ordner /extra/ weglässt, sich wundert, daß es keinen /includes/ajax/-Ordner per Default gibt, denkt, dann gibt's den eben jetzt mit dem neuen Cookie-Modul, diesen Gedanken dann aber wieder vergisst..., und,..., ääh, tja,..., was immer ich sage, es war einfach ERROR.
Soll ich nochmal ?... Ja, muß:

Gruß,
noRiddle

[Tomcraft]

Alles klar, kein Problem... passiert einfach mal.

Grüße

Torsten

[Tomcraft]

Das Modul aus Beitrag 1 wurde nochmal überarbeitet. Eingeflossen sind die Korrekturen aus r12809 & r12814.

Grüße

Torsten

[noRiddle (revilonetz)]

Wie im Thread zum alten Cookie-Modul (Cookie Banner mit Einwilligung für Google Analytics, Matomo & Facebook #63) für eben jenes Modul bereits von mir erwähnt und dann (*edit* von euch) korrigiert wurde, ist es auch hier der Fall, daß das HTML für das Cookie-Banner nach dem öffnenden body-tag injiziert wird.

Ich habe damit bei dem von mir bereits 2014 ins Forum gestellten und in diesem Thread schon zitierten Cookie-Plugin schlechte Erfahrungen gemacht.
Texte des Cookie-Banners erschienen in den Google-SERPs.
Man sollte das nötige HTML deshalb vor dem schließenden body-tag injizieren.

Mein Vorschlag dazu:
Suche in /templates/YOUR_TEMPLATE/javascript/oil.min.js das

Code: Javascript  [Auswählen]

document.body.insertBefore(e,document.body.firstElementChild)

*EDIT* Corrected orginial code *END_EDIT*

und ersetze mit

Code: Javascript  [Auswählen]

document.body.appendChild(e)

*EDIT 2*
Alternative:

Code: Javascript  [Auswählen]

document.body.insertBefore(e,null)

*END_EDIT 2*

Gruß,
noRiddle

[noRiddle (revilonetz)]

*NACHTRAG*

Ein schlichtes

Code: Javascript  [Auswählen]

document.body.append(e)

sollte übrigens auch gehen.

Gruß,
noRiddle