Cookie Zustimmung einholen geht auch in schön

Cookie Zustimmung einholen geht auch in schön

• WAM
• Tutorials, How to Do
• Dienstag - 25 . August . 2015

Cookie Choices Plicht !? Im Vorfeld gleich mal klar gestellt, ob in Deutschland das Einholen der Zustimmung über die Nutzung der Cookies Pflicht ist oder nicht, ist absolut unklar. Die EU sagt ja, die Bundesregierung sagt, wie so oft nicht! Sie es drum, auf längere Sicht wird es mit Sicherheit zur Pflicht. Das Problem liegt ja auch nicht darin ob es Pflicht ist oder nicht, es liegt darin das diese Bekloppte Infobar aussieht wie gewollt und nicht hinbekommen.

Aber man kann auch die Cookie Zustimmung schön machen. Hier mal ein paar bespiele wie es aussehen könnte.

Cookie Zustimmung Demo

Der Vorteil der Cookie bar (Benachrichtigungsleiste) zum Cookie Splach Screen (Seiten Overlay) ist das die Cookie Bar die Seitenfunktion nicht beeinflusst, im Gegensatz zum Cookie Splach Screen, der die komplette Seiten Funktion bis zur Zustimmung lahmlegt, da es über die gesamte Seite gelegt wird (Overlay).

Wir haben uns mal die Cookie Bar vorgenommen und diese etwas schön gemacht. Vom Prinzip her ganz einfach da man nur ein Paar CSS Styles einfügen muss. Dies kann man direkt in die von Google bereitgestellte cookiechoices.js oder in die CSS eure Seite.

Wir haben zweites bevorzugt weil es so einfacher zu ändern ist.

Als erstes haben wir in der cookiechoices.js aufgeräumt, da wir die Style Angaben in dieser Datei nicht mehr brauchen.

Also Alles was Style Elemente sind kann aus der cookiechoices.js raus. Aus der „span“ Zeile haben wir ein p Tag gemacht.

Die steht in der Unkomprimierten Datei auf Zeile 94.

Um aus der Cookie Bar ein Coolen „Splacher“ zu machen der die Seite nicht beeinflusst, setzten wir die Box an die Gewünschte Position, Oben, Unten, Links, Rechts der genau in die Mitte da habt Ihr alle Freiheiten. Damit das Ihr die Animation reinbekommt, nutzt Ihr am besten des Animate CSS die Ihr Hier runterladen könnt.

Die Styles für die Cookie Bar/Splach sind nur wenige Zeilen groß. Hier der aus Demo 1

#cookieChoiceInfo {
background-color:#fff;
padding:10px;
z-index:1000;
text-align:center;
border:1px solid #111;
position:fixed;
width:300px;
height:240px;
left:50%;
bottom:10%;
margin-left:-150px;
overflow:auto;
-webkit-animation:fadeInUp ease-in 1;
-moz-animation:fadeInUp ease-in 1;
animation:fadeInUp ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.7s;
-moz-animation-duration:0.7s;
animation-duration:0.7s;
-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,5);
box-shadow: 0 0 5px 0 rgba(0,0,0,5);

}

#cookieChoiceInfo a { /*Die Schaltfläsche*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 4px 13px;
color: #fff;
margin-bottom:5px;
display:block;
clear:both;
background: rgba(34,34,34,.9);
border: 2px solid transparent;
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: all .2s cubic-bezier(0.000,0.000,0.580,1.000);
-moz-transition: all .2s cubic-bezier(0.000,0.000,0.580,1.000);
-o-transition: all .2s cubic-bezier(0.000,0.000,0.580,1.000);
-ms-transition: all .2s cubic-bezier(0.000,0.000,0.580,1.000);
transition: all .2s cubic-bezier(0.000,0.000,0.580,1.000);
}

#cookieChoiceInfo a:hover { /*Die Schaltfläsche beim Hover*/
font-weight:400;
color:rgba(255,255,255,.85);
background:rgba(0,0,0,.7);
text-decoration:none;outline:0;}

Mehr ist gar nicht nötig, Have Fun !

Kein Bock auf selber machen? Dann kannst du es hier Runterladen

• william chatman sagt:

  23. Dezember 2015 in 19:15 Antworten

  guten Abend,

  Habe gestern eure seite länger besucht. Sehr informative.
  würde zu gerne Demo 1 zw. cookie verwenden für meine kleine dating seite und leider bekomme ich dies nicht hin.
  habe cookiechoices.js und CookiechoicesCenterStyle.css auf meinem server geladen.
  versuche dieses zum laufen zu bringen, blieb ohne erfolg.
  möchte bitte anfragen ob sie mir hier weiter helfen können.
  Frohe weihnachten und einen guten rutsch ins neue jahr!

  Mit freundlichen grüßen
  william chatman

  • WAM sagt:

    28. Dezember 2015 in 9:32 Antworten

    Hallo

    Ist der Pfad angepasst worden? Die Animate CSS eingebunden? Sollte so aussehen:
    1. Script (Pfad zur cookiechoices.js) natürlich im Format (script)
    2. Die Anweisung mit Text Ausgabe auch im Format Script
    Am Einfachsten ist es wenn man es aus der DEMO kopiert.