Cookie Zustimmung einholen geht auch in schön

intro_image_cookie_new

Cookie Zustimmung einholen geht auch in schön

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).

cookie

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

Teile uns

KOMMENTARE (2) “Cookie Zustimmung einholen geht auch in schön”

  • 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.

Schreibe einen Kommentar

Über WAM

Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

-
Das Archiv
Werbung
Haendlerbund_Leistungen_265x221_animiert
Datenschutz-Übersicht
logo_wam_gray

Hier können Sie einstellen welche Cookies unsere Webseite auf Ihrem Endgerät speichern „Local Storage“ darf. Diese werden beim nächsten besuch auf unserer Webseite reaktiviert. Diese Einstellungen können Sie jederzeit wieder ändern. Dazu klicken Sie unten Links auf das Zahnradsymbol.

Sie können die Cookies nach dem Besuch unserer Webseite natürlich auch bedenkenlos löschen. Dazu müssen Sie die entsprechenden Einstellungen in Ihrem Browser vornehmen.

Unbedingt notwendige Cookies

Unbedingt notwendige Cookies sollten jederzeit aktiviert sein, damit wir deine Einstellungen für die Cookie-Einstellungen speichern können.

  • pll_language .

Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr

  • reCAPTCHA ist ein CAPTCHA-System,

das es Webhostern ermöglicht, zwischen menschlichen und automatisierten Zugriffen auf Websites zu unterscheiden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten:
KlickpfadSichtbarkeit von Anzeigen messenMausbewegungZeitstempelKlicks auf Anzeigen verfolgenConversion-TrackingIPUhrzeit und Datum verfolgenVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.
Cookies, die in Ihrem Browser gesetzt werden Cookiename Beispielwert Ablaufzeit Typ Domain rc::a MjNxdWs3M2o5ZGt­x Persistent Funktion www.google.com

  • Google Fonts

ist ein Dienst, der es Websites ermöglicht, bestimmte Schriftarten für ihre Gestaltung zu verwenden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

  • Google Maps

ist ein von Google entwickeltes Web-Mapping-Produkt.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten
Betrugserkennung und -präventionSichtbarkeit von Anzeigen messenZeitstempelIPUhrzeit und Datum verfolgenVerfolgen des BenutzergerätsVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.

Drittanbieter-Cookies

Diese Website verwendet Google Analytics, um anonyme Informationen wie die Anzahl der Besucher der Website zu sammeln.

Betreibergesellschaft der Google-Analytics-Komponente ist die Google Inc., 1600 Amphitheatre Pkwy, Mountain View, CA 94043-1351, USA.

Name des Cookies: _ga
Inhalte: GA1.2.1970440283.1622365906
Ablaufdatum des Cookies : 1 Jahr - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gat_gtag_UA_1602708_1
Inhalte: 1
Ablaufdatum des Cookies : 1 Minute - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gid
Inhalte: GA1.2.1949554392.1622365906
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Name des Cookies: chimpstatic
Inhalte: E-Mail Adresse bei Newsletter anmeldung
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Zusätzliche Cookies

Diese Website verwendet die folgenden zusätzlichen Cookies:

Name des Cookies: pll_language
Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr - Nur bei sicheren Verbindungen zur gleichen Website

Name des Cookies: moove_gdpr_popup
Cookie zur Speicherung der Funktion der Cookieseinstellung - Ablaufdatum 1 Jahr - Nur bei Verbindungen zur gleichen Website