Programmieren lernen | Codebeispiele | Jobbörse | Webentwicklung

DSGVO | Einfaches Cookie Popup ohne Plugin selbst erstellen

UPDATE: 18.01.2019 – Kleinere Optimierungen

Externe Skripte für ein Cookie Popup gibt es zahlreiche. Seit die DSGVO in Kraft getreten ist möchte man aber ungern unnötige externe Tools nutzen bzw. einbinden. Folgend also eine Möglichkeit ein Cookie Hinweis auf deiner Webseite zu platzieren.

Zu allererst benötigen wir folgenden JavaScript Code. Solltest du schon eine JavaScript Datei haben, kannst du diesen Code einfach rein kopieren. In meinem Beispiel nenne ich die Datei custom.js.

function cookieOk() {
  var now = new Date(); // Variable für aktuelles Datum
  var lifetime = now.getTime(); // Variable für Millisekunden seit 1970 bis aktuelles Datum
  var deleteCookie = lifetime + 2592000000; // Macht den Cookie 30 Tage gültig.
	
  now.setTime(deleteCookie);
  var enddate = now.toUTCString();
	
  document.cookie = "setCookieHinweis = set; path=/; secure; expires=" + enddate;
  document.getElementById("cookie-popup").classList.add("hidden");
}

Diese Datei muss noch in deinen PHP-Dateien verknüpft werden. Je nachdem wo du die Datei speicherst, muss du evtl. den Pfad anpassen.

<script type="text/javascript" src="js/custom.js"></script>

Cookie Popup im HTML hinterlegen

Am Anfang deiner PHP-Dateien platzierst du folgenden PHP Code:

<?php 
  if( isset($_COOKIE['setCookieHinweis']) ) { 
    $showPopup = false;
  } else {
    $showPopup = true;
  }
?>

Das Cookie Popup Skript selbst sieht fertig so aus:

<?php if($showPopup) { ?>
  <div id="cookie-popup">
    <div class="hinweis">
      <p>Wir verwenden Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.</p>
    </div> 
    <span class="more">
      <a href="datenschutz.php">Details</a>
    </span>
    <button onclick='cookieOk()'>OK, ich bin einverstanden.</button>
  </div>
<?php  }; ?>

Jetzt noch ein wenig CSS und schon ist das Cookie Popup fertig.

#cookie-popup { 
  text-align: center; 
  background: #fff;
  position: fixed;
  top: 0px; 
  left: 0;
  right: 0;
  z-index: 9999;
  font-size:14px; 
  line-height:20px;
  padding: 20px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  }

#cookie-popup.hidden {
  display: none;
}

36 Gedanken zu „DSGVO | Einfaches Cookie Popup ohne Plugin selbst erstellen“

  • Benjamin
    3.01.2019 um 7:29

    Hallo,

    ich bin absoluter Neuling und habe das Tutorial abgearbeitet.
    Jetzt erhalte ich den Hinweis: undefined index: setCookieHinweis in …….*php on line 21.
    Leider funktioniert hierbei auch der Ok verstanden-Button nicht, bzw. die Meldung schließt sich nicht.
    Hängt das irgendwie zusammen?

    Grüße Benni

  • Markus
    4.01.2019 um 17:55

    Hallo Benni,

    wenn dich die Notiz nicht stört, kannst du die mit error_reporting(0); deaktivieren.
    Funktionieren sollte das Popup dennoch.
    Beachte das Cookies unter „localhost“ nicht ohne weiteres funktionieren.

    Viele Grüße
    Markus

  • Bellone
    20.01.2019 um 16:50

    Hallo,

    ich habe die Anleitung auch getestet. Der OK-Button zeigt keine Reaktion. Der Hinweis wird dauerhaft eingeblendet.
    Woran kann das liegen?

  • Markus
    21.01.2019 um 18:48

    Hallo Bellone,

    hast du auch wirklich die custom.js mit deinem richtigen Pfad eingebunden? Testweise kannst du auch das komplette Skript auf Github am Ende des Artikels herunterladen.

    Viele Grüße
    Markus

  • Detlef Garbrecht
    15.02.2019 um 9:42

    Hallo Markus

    In das Javascript scheint sich ein kleiner Fehler eingeschlichen zu haben, der verhindert dass das Cookie gesetzt wird. Die Zeile sollte wohl lauten:
    document.cookie = „setCookieHinweis = set“; path=/; secure; expires = + enddate;
    Ansonsten vielen Dank für die Anleitung.

    Gruß
    Detlef

  • Anonymous
    15.02.2019 um 11:10

    Hallo Markus

    Ich habe vorhin die falsche Zeile eingefügt. Sollte heißen:
    document.cookie = „setCookieHinweis = set; path=/; secure; expires =“ + enddate;

  • Markus
    17.02.2019 um 20:11

    Hallo Detlef, danke für deinen Hinweis, ich kann allerdings keine Fehler erkennen. So wie du geschrieben hast, so steht es auch in dem Skript. Oder hab ich was übersehen?

  • Jens L.
    17.02.2019 um 21:53

    Moin,

    funktioniert grundsätzlich. Aber bei meinem Projekt kommt bei jedem neuen Aufruf der Seite das PopUp wieder. Details & OK-Button funktionieren soweit augenscheinlich.

    Da es ein One-Pager ist fällt es nicht so auf. Aber beim nächsten Besuch ist es wieder da.

    Also die 30 Tage funktionieren bei mir nicht.

    Woran könnte das liegen?

  • Markus
    18.02.2019 um 19:05

    Hallo Jens,

    hast du vielleicht die Einstellung in deinem Browser aktiviert dass dieser beim Beenden Cookies und Daten löscht?
    Wenn du z.B. beim Google Chrome links neben der Adresszeile klickst (Website Informationen anzeigen), kannst du Details des Cookies einsehen.

  • Jens L.
    18.02.2019 um 19:46

    Hallo Markus,

    nein, das ist es nicht. habe es auch in drei verschieden Browsern gestestet.

    Hab auch geprüft, ob der Code drin ist und stimmt und die Scriptdatei ist ordentlich verknüpft (CSS auch). Sonst würde das Bestätigen ja auch nicht funktioneren.

    Kann der Zeitstempel von einem anderen Script überschrieben werden? Ich habe aber alle anderen Scripte testweise komplett entfernt. Bleibt aber dabei.

  • Markus
    19.02.2019 um 17:07

    Hast du mir mal einen Link zu deiner Seite wo man sich das anschauen kann?

  • Jens L.
    23.02.2019 um 13:21
  • Markus
    23.02.2019 um 14:39

    Hallo Jens, deine Entwicklungsumgebung läuft unter http. Wenn du in der Zeile 9 „secure“ änderst auf „secure: false“ funktioniert das setzen des Cookies. Nach dem Umstellen auf https aber nicht vergessen secure wieder zu aktivieren. 🙂

  • André
    13.10.2019 um 9:00

    Hallo Markus,
    du hast die Cookie-Abfrage auf dieser Seite eingebaut, diese legt sich über deine Seite
    und die eigentliche Seite wird invers ausgegeben.
    Mit dem Beispiel oben legt sich die Abfrage über die Seite.
    Wie kann ich die Cookie-Abfrage so einbauen wie du derzeit hast?
    Gibt es dazu eine Anleitung?
    Gruss André

  • Markus
    13.10.2019 um 10:17

    Hallo André,

    dazu gibt es keine Anleitung, aber es lässt sich auch schnell und einfach mit CSS realisieren.
    Du hast einen umschließenden DIV mit folgenden CSS Eigenschaften:
    position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 8000;
    Und deinen eigentlichen DIV vom Cookie Popup:
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 9000;

    Feinheiten wie Breite etc. kannst du dann auch noch mit CSS anpassen.

  • André
    13.10.2019 um 11:03

    Hallo Markus,
    vielen Dank für das schnelle Feedback.
    Habe „position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 8000;“ in der CSS unter
    #page-wrapper kopiert.
    Habe einen Link in die index eingebaut um zu testen ob das Popup die Seite abdeckt.
    Die Abfrage wird korrekt zentriert ausgegeben, nur deckt das Popup nicht die Seite ab.
    Der eingefügte Link kann angeklickt werden.
    Was habe ich falsch gemacht?

    Gruss André

  • Markus
    13.10.2019 um 15:48

    Hallo André,

    du musst dem umschließenden DIV natürlich eine Hintergrundfarbe deiner Wahl geben.
    Ich verwende: background-color: rgba(0,0,0,0.5);
    Die ersten drei Zahlen sind die rgb Werte und der vierte der Alpha-Wert (Transparenz)

  • André
    13.10.2019 um 16:38

    Hallo Markus,
    die Hintergrundfarbe ist drin, der Link kann trotzdem angeklickt werden.
    Gruss André

  • Markus
    13.10.2019 um 16:59

    Hallo André,

    hast du einen Link für mich wo ich mir das anschauen kann?

  • Jan
    22.10.2019 um 17:48

    Hallo Markus,
    vielen Dank für die Anleitung!
    Das popup lässt sich intern problemlos einbinden und darstellen.
    Auf meiner veröffentlichen Webseite (bei strato) wird es zwar angezeigt, nimmt die css-Konfiguiration aber nicht an. Ich probiere es schon ewig mit unterschiedlicher Platzierung innerhalb des Seitenaufbaus, so kann ich es ganz oben oder zb. zu Beginn des erscheinen lassen, die css aber spricht nicht an. Hast du eine Idee was ich machen kann?
    Mit besten Grüßen
    Jan

  • Markus
    22.10.2019 um 18:21

    Hallo Jan,
    das könnte mehrere Gründe haben:
    – Nach CSS Änderungen Browsercache gelöscht?
    – CSS für #cookie-popup in Zeile 907 und 2988 – überschreibst du deine Änderungen weiter unten?
    – Wenn es immer noch nicht geht versuche an die CSS Eigenschaft !important zu setzen und schau ob es dann geht.

    Was mir noch aufgefallen ist aber nicht damit zu tun hat, du lädst das jquery easing mittels http. Stell es um auf https.

  • Jan
    23.10.2019 um 10:14

    Hallo Markus,
    vielen Dank für deine schnelle Antwort!
    Das Darstellungsproblem lag am Browser …beim ständigen Testen der Kompatibilität mit verschiedenen Browser war ich in Chromium hängengeblieben, der das Popup trotz der üblichen Freigaben in den Einstellungen nicht anzeigt. Chrome und Firefox stellen es richtig dar.
    Allerdings habe ich jetzt die ganze Nacht mit dem Versuch verbracht den Cookie zu setzen und diesen anzusprechen …vergeblich! Beim aktualisieren der Seite wird das Popup immer wieder angezeigt. Und das schon nur auf der Startseite… was bedeuten soll das ich eigentlich einen „Domain-Cookie“ setzen und so an alle Seiten unter der Startseite (Domain) ausgeben will.
    Das gelingt mir soweit mit: ‚?php setcookie („setCookieHinweis“, „1“, time () + (60*60*24*30), ‚/‘, ‚.meine-domain.de‘); ?‘, nicht aber diesen mit dem Popup-Script anzusprechen.
    Ich bin völlig fertig jetzt…
    und würde mich sehr darüber freuen wenn du mir noch einmal deine Aufmerksamkeit schenken würdest und evtl. weiterhelfen kannst!

    Danke für den Hinweis, ich habe die jquery-easing-src zu https geändert! (Wenn es so das richtige Vorgehen war?!)

    Liebe Grüße
    Jan

  • Markus
    23.10.2019 um 10:57

    Hallo Jan, auf den ersten Blick verwendest du Dateien mit html Endung, stimmts? PHP-Funktionen funktionieren damit nicht. Kannst du statt .html -> .php verwenden? Wenn nicht, benötigst du ein Cookie-Popup aus reinem Javascript ohne PHP-Funktionen.

  • Jan
    23.10.2019 um 11:45

    Ja, das stimmt. Ich verwende html-Dateien. Und ja, ich kann wohl auch php verwenden…
    Ich habe es so verstanden das man php-code auch in html-Dateien schreiben kann?
    (Strato FAQ: … Der PHP-Code wird einfach in eine HTML-Seite integriert. Dazu wird der PHP-Code zwischen die Zeichenfolge gesetzt. PHP-Kommandos werden innerhalb des PHP-Bereiches in der Regel mit einem Semikolon abgeschlossen. …)
    Also geht das nicht???
    Muss/kann ich dann die .html-Dateien einfach in .php-Dateien umbenennen und als diese auf den Server hochladen? (Sie können Ihre Internet-Seiten selbstverständlich auch in einem grafischen HTML-Editor anlegen und den PHP-Code im HTML-Modus (Strato FAQ: …sofern vorhanden) oder anschließend in einem Texteditor einfügen. Die Datei speichern Sie schließlich nicht mit der Endung „.html“ sondern „.php“ oder „.php4“, damit der Server auf Anhieb erkennt, dass hier ein PHP-Script ausgeführt werden muss. Laden Sie die Internet-Seite mit dem PHP-Script anschließend wie normale Internet-Seiten per FTP auf unseren Server hoch.) Verstehe ich das richtig?

  • Markus
    23.10.2019 um 12:21

    Hallo Jan, speicher dir deine komplette Webseite auf deinen PC und ändere einfach direkt auf dem Server die Dateiendung. Sollte etwas nicht funktionieren, ändere wieder auf html zurück.

  • Jan
    23.10.2019 um 13:27

    Hallo Markus,
    😀 Es geht!!! Ich habe alle Dateiendungen sowie die Endungen aller im html -code referenzierten links von html auf php geändert. Alles läuft Reibungslos und das CookieHinweisPopup setzt und spricht einen cookie wie gewünscht an.
    Vielen Dank für die ausführliche und gute Anleitung und deine schnelle persönliche Unterstützung! Dein Rat war mir eine große Hilfe.
    Alles Liebe und Gute
    Jan

  • Markus
    23.10.2019 um 13:32

    Hallo Jan, freut mich dass es jetzt geht 🙂

  • Michael
    29.10.2019 um 15:30

    Hallo Jens L,
    habe das ganze bei mir auf der seite eingebunde aber es geht nicht ganz wie auf deiner demo seite könntest du mir bitte helfen oder sagen was ich falsch gemacht habe danke im vorraus

    Michael

  • Claudia
    2.11.2019 um 10:53

    ich habe es auch versucht. ich habe die js erstellt, da ich vorher keine hatte und die Skritdaten in meine Seite eingebaut also zur Probe und leider funktioniert, dass „wegdrücken“ nicht.
    http://www.trainer-meets-trainer.de/indexmitdatenschutz

    wo liegt der Fehler? Irgendein Verweis muss fehlen 🙁
    Vllt kannst du ja mal schauen – ich bin jedoch keine Programmiererin – bräuchte also die Hinweise so einfach wie möglich.

  • Markus
    3.11.2019 um 8:34

    Hallo Claudia,

    die Pfadangabe zur custom.js scheint falsch zu sein.
    Und du verwendest kein https. Beachte dazu meinen Kommentar vom 23.02.2019.

  • Tobias
    26.11.2019 um 21:40

    Hallo Markus,
    leider habe ich das gleiche Problem wie einige vor mir. Der Cookiehinweis kann mit „ok“ nicht weggeklickt werden. Bei erneutem Laden der Seite ist er zwar weg, aber für die Sitzung bleibt er erst einmal stehen.
    siehe https://www.result-marketing.net/

    woran kann dies liegen?

  • Markus
    27.11.2019 um 19:04

    Hallo Tobias,

    danke dir für den Hinweis. Füge folgendes deinem CSS hinzu:
    #cookie-popup.hidden {
    display: none;
    }

  • Alexander
    21.01.2020 um 11:41

    Guten Tag,
    zwar haben wir geschafft den Cookie Hinweis einzubauen aber jetzt kommt er jedes mal aufs neue. Sollte aber nicht der Hinweis nur alle 30 Tage, solange wie die Cookies gespeichert werden hoch kommen?

    Wir haben die Seite noch derzeit, solange wir daran arbeiten in einem Ordner drinnen, liegt es vielleicht daran? Hier könnt ihr mal anschauen: https://www.crearen.de/CSC/

  • Markus
    21.01.2020 um 12:31

    Hallo Alexander, so auf den ersten Blick kann ich nichts erkennen. Die erste if Abfrage ist auch ganz oben eingefügt?

  • Ingo
    17.02.2020 um 9:43

    Sehrt feines Ding, das Script.
    Ich danke ausdrücklich – War genau, was ich gesucht habe 🙂

  • Markus
    17.02.2020 um 9:57

    Bitte gern 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.