Informacja o ciasteczkach – prosty skrypt

Końcem marca przetoczyła się przez polski internet bardzo burzliwa dyskusja. Zgodnie z wprowadzoną nowelizacją ustawy Prawo Telekomunikacyjne właściciel serwisu internetowego powinien poinformować i uzyskać zgodę internauty na przechowywanie plików cookie. Jako że ustawa dotyczy całości zagadnień telekomunikacyjnych, nie zawiera szczegółowych informacji jak powinna wyglądać taka informacja. Natomiast sposób pozyskania zgody został przedstawiony wyraźnie – „Abonent lub użytkownik końcowy może wyrazić zgodę, o której mowa w ust. 1 pkt 2, za pomocą ustawień oprogramowania zainstalowanego w wykorzystywanym przez niego telekomunikacyjnym urządzeniu końcowym lub konfiguracji usługi”.
W przypadku cookies oznacza to, iż wyrazić zgodę możemy przez odpowiednią konfigurację przeglądarki. Trzeba przyznać, że jest to jedna z najbardziej liberalnych interpretacji w całej Unii Europejskiej.

skrypt cookies

Brak wyraźnych przepisów dotyczących sposobu informowania użytkownika sprawił, że każdy serwis interpretował ustawę po swojemu i tworzył własne rozwiązania. W panice zaczęto importować i stosować wprost rozwiązania z zachodu, głównie z Wielkiej Brytanii, zupełnie nie zwracając uwagi na to, że tamtejsza wersja ustawy jest o wiele bardziej restrykcyjna. W efekcie powstały rozwiązania wręcz kuriozalne, zmuszające internautę do dodatkowych, zbędnych działań – m.in. wymuszające zaznaczenie dodatkowego checkboxa.

Skrypt cookies – zrób to sam

Nasz prosty skrypt cookies będzie działał w oparciu o jQuery, dlatego do obsługi ciastek wykorzystamy bibliotekę jQuery.cookie autorstwa Klausa Hartl.

JS

Zacznijmy od stworzenia pluginu.

Zdefiniujmy podstawowe opcje, które będziemy mogli w prosty sposób zmienić przy inicjalizacji skryptu.

Następnie sprawdźmy czy istnieje już nasze ciastko. Jeśli nie, to dodamy do strony nasz komunikat.

CSS

Odrobiną CSS-a przypudrujmy okienko z komunikatem.

Instalacja

Dołączmy pliki do strony.

I uruchommy skrypt.

Możemy też wykorzystać dodatkowe opcje i zmienić co nieco w komunikacie.

Wady i zalety

Ten skrypt cookies posiada kilka znaczących zalet. Przede wszystkim dostarcza informację w sposób mało inwazyjny, nie zasłaniając dużych obszarów strony. Nie wymaga też od użytkownika żadnych zbędnych interakcji.

Główną wadą wszystkich skryptów typu popup/modal jest jednorazowe dostarczenie informacji, w stylu kliknij i zapomnij. Jeśli z tej samej przeglądarki korzysta kilka osób, to tylko pierwsza z nich ma możliwość zapoznania się z komunikatem. Dlatego warto uświadamiać internautów, że wszelkie informacje na temat bezpieczeństwa mogą zawsze znaleźć w polityce prywatności.

DemoPobierz

Programista (PHP/MySQL, Node.js/MongoDB), koder (HTML/CSS/JS), ale od biedy nawet layout machnie ;)

  • Michał Lipek

    Abstrahując od skryptu, nie denerwuje was to, że na większości stron jest informacja o „plikach cookies”? Nie ma czegoś takiego jak pliki cookies, są po prostu cookies. Dane typu klucz-wartość z czasem ważności zapisywane gdzieś w przeglądarce (np. w bazie sqlite), a tworzone z poziomu JS lub nagłówka http. To mocne nadużycie semantyczne moim zdaniem ludzi mało rozgarniętych wprowadza w błąd.

    • nrm

      Taka pierdoła mnie nie denerwuje. Denerwuje mnie, że w ogóle te komunikaty są w takiej formie w jakiej ich w ogóle nie powinno być 😉

  • Aroo

    hej.
    A jak dodac do tego skryptu link pod którym jest cookies?

  • Szymon B

    a jak ustawić cookies na wygaśniecie np. po 7 dniach?
    Po ponownym włączeniu przeglądarki ciastko się nie zapisuje i ponownie widoczny jest komunikat.

    • mck

      W pliku jquery.cookiepolicy.js musisz podmienić linię:

      $.cookie(options.cookie, true);
      na taką:
      $.cookie(options.cookie, true, { expires: 7 });
      Ewentualnie przerobić nieco skrypt, żeby można było ważność ciastka ustawić poprzez opcje pluginu (tak jak nazwę czy treść komunikatu).

      • Szymon B

        ustawiłem i dalej ciągle wyświetla mi się to okienko cookies…

        ok. Okazało się, że problemem było ustawienie fade out zamiast remove 🙂

Send this to a friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL