Artykuł

flickr.com/photos/shellewill79 flickr.com/photos/shellewill79
kwi 11 2013
0

Jak szybko, prosto i bezpłatnie dodać do strony monit o ciasteczkach

22 marca bieżącego roku weszły w życie nowe regulacje w prawie telekomunikacyjnym wymuszone przez niezastąpioną w tego typu sprawach Unię Europejską. Od teraz właściciele stron internetowych, w których są wykorzystywane ciasteczka śledzące zachowania użytkownika, powinni o nich wcześniej poinformować. W praktyce dotyczy to większości stron, które możecie znaleźć w polskim Internecie, ponieważ takie ciacha wstawia np. bardzo popularny Google Analytics.

Dużym problemem jest fakt, że wciąż wiele stron tych ostrzeżeń nie posiada. Abstrahując od ich sensowności - prawo jest prawem i głupio byłoby dostać karę za brak ostrzeżenia o czymś tak prozaicznym jak ciasteczka. Problem, a tym samym potencjalne źródło zysku zwietrzyły już niektóre podmioty i tak np. dziś widziałem już reklamę firmy, która za jedyne 49 zł udostępnia skrypt monitu o ciasteczkach. Za kolejne 50 zł jest go nawet w stanie wspaniałomyślnie zainstalować na Waszej witrynie - czysta okazja;-)

Na szczęście monit o ciasteczkach można mieć za darmo, a za oszczędzoną gotówkę z pewnością trochę uciechy;-)

Kto, co jak i dlaczego? Czyli mały chaos

Nowa regulacja tak na dobrą sprawę wprowadza totalny chaos. Po kilku tygodniach od jej wprowadzenia, ostrzeżenia pojawia się na większości dużych stron, ale wciąż jest sporo miejsc w naszej rodzimej sieci, gdzie tej informacji brakuje, choć być powinna.

Nie wiadomo też tak na dobrą sprawę jak powinno być skonstruowane te ostrzeżenia oraz gdzie i kiedy powinny się pojawiać na stronie.

Ogólnie przyjęło się, że komunikat z reguły umieszczany jest na warstwie u góry lub u dołu strony (u mnie jak widać pojawia się on obecnie w górnej części). Treść ostrzeżenia również budzi kontrowersje, ponieważ nie została jakoś odgórnie narzucona.

W tym miejscu pojawiają się różne szkoły. Osobiście piszę krótko o tym, że na danej stronie pojawiają ciasteczka, które są wykorzystywane w celu takim i siakim. Dodaje również, że użytkownik który korzysta ze strony, automatycznie akceptuje politykę ciasteczek (w przeciwnym przypadku musiałby opuścić stronę). Niektórzy użytkownicy ograniczają się do krótkiej informacji, że strona używa cookies. Odsyłają przy tym do osobnej podstrony z polityką prywatności (cookies), a czasem nawet nie. Inni wypisują na stronie całe elaboraty, skutecznie przysłaniając przy tym obszar roboczy (niestety).

Osobiście jestem zwolennikiem opcji z krótką ale treściwą informacją. W dalszej części wpisu zaprezentuje rozwiązanie, które zaimplementowałem na Usługi stolarskie.

Masz CMS? Poszukaj wtyczki!

Jeśli używasz gotowego rozwiązania CMS, które obsługuje wtyczki, to prawdopodobnie Twoja praca ograniczy się tylko do wyszukania tej jedynej. W przypadku Wordpressa, czy Joomli będzie ich zapewne całkiem sporo:-)

Rozwiązanie: jQuery + CSS + HTML

Najprostszym rozwiązaniem będzie wykorzystanie tercetu: jQuery, CSS oraz HTML. jQuery ze względu na swoją popularność znajduje się na sporej ilości stron w sieci. W przypadku gdy nie macie go na swojej witrynie, możecie go podpiąć bezpośrednio z sieci umieszczając poniższy kod w sekcji HEAD strony, lub przed samym zamknięciem znacznika BODY (ewentualnie można pokusić się o wariację z czystym JavaScriptem - jQuery mimo wszystko jednak trochę zajmuje):

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

W kolejnym kroku należy dodać odpowiedni kod HTML zawierający treść ostrzeżenia. Najlepiej umieścić go na końcu strony (tak na dobrą sprawę lokalizacja nie ma znaczenia, ponieważ element zpozycjonujemy tam gdzie chcemy za pomocą CSS):

<section id="cookie-warn">
    <p><strong>UWAGA!</strong> Niniejsza strona wykorzystuje pliki cookies. 
	Informacje uzyskane za pomocą cookies wykorzystywane są głównie 
	w celach statystycznych. Pozostając na stronie godzisz się na 
	ich zapisywanie w Twojej przeglądarce. 
	<a href="javascript:void(0);" id="close-cookie-warn"
	>Zamknij ostrzeżenie</a></p>
</section>

Komunikat możecie zmienić wedle własnych potrzeb. Znacznik SECTION wykorzystywany jest w HTML5 - w przypadku HTML4 oraz XHTML można po prostu zastosować DIV.

W kolejnym kroku należy dodać style CSS. Jeśli macie osobny arkusz, wystarczy umieścić poniższe reguły na jego końcu. Możliwe jest również ich ulokowanie w sekcji HEAD strony. W tym przypadku należy pamiętać o tym żeby opakować je znacznikiem STYLE:

/* Cookie warning */
#cookie-warn{
    position: fixed;
    bottom: 0;
    background: #EEE;
    margin: 0;
    padding: 15px;
    width: 100%;
    display: none;
    z-index: 99;
}

#cookie-warn a{
    color: #D66E1A;
    text-transform: uppercase;
    float: right;
    padding-right: 20px;
}

#cookie-warn p{
    font-size: 12px;
    color: #333;
}

Powyższy kod spowoduje umieszczenie ostrzeżenia o ciachach u dołu strony. Szczególnie ważne w tym przypadku są reguły position oraz bottom (determinują położenie sekcji) oraz z-index, który pozwala na wyświetlenie sekcji nad zawartością strony. Ostrzeżenie powinno mieć zawsze najwyższą wartość parametru z-index by nie przysłoniła go treść samej witryny.

Zwieńczeniem rozwiązania jest kod jQuery:

$().ready(function() {
    var sName = "cookiesok";
    $("#close-cookie-warn").click(function(){
        var oExpire = new Date();
        oExpire.setTime((new Date()).getTime() + 3600000*24*365);
        document.cookie = sName + "=1;expires=" + oExpire;
        $("#cookie-warn").hide("slow");
    });

    var sStr = '; '+ document.cookie +';';
    var nIndex = sStr.indexOf('; '+ escape(sName) +'=');
    if (nIndex === -1) {
        $("#cookie-warn").show();
    }
});

W powyższym listingu dzieje się kilka interesujących rzeczy. Po pierwsze musimy określić nazwę ciasteczka (2). Może być ona dowolna, ale mimo wszystko lepiej żeby była czytelna dla nas, a także dla użytkowników którzy weryfikują ciasteczka w swojej przeglądarce.

W kolejnym kroku dodajemy obsługę kliknięcia przycisku ZAMKNIJ OSTRZEŻENIE. Przy tej akcji musimy zadbać o ukrycie sekcji (7) oraz przede wszystkim o ustawienie ciasteczka (4-6). Moje ciacha zostawiam użytkownikom na rok (wartość należy zapisać w milisekundach).

W liniach 10-14 sprawdzamy natomiast, czy użytkownik posiada już nasze ciasteczko. Jeśli nie, to wyświetlamy domyślnie ukryte ostrzeżenie (domyślnie ukryte za sprawą reguły CSS display z wartością none).

Cały ten powyższy kod jQuery, powinniście umieścić albo w zewnętrznym pliku JS (jeśli już taki posiadacie) albo w znaczniku SCRIPT umieszczonym najlepiej zaraz po deklaracji importu samego jQuery.

Podsumowanie

Kwestia ostrzegania przed ciasteczkami jest dość absurdalna, bo zamiast informować o rzeczywistym zagrożeniu (?), tak na dobrą sprawę wywołuje tylko złość użytkowników, którzy na każdej odwiedzonej witrynie muszą zamykać niekończące się ostrzeżenia.

W całej tej sytuacji pojawia się spora dawka ironii. Ponowne wyświetlenie ostrzeżenia jest blokowane tylko w sytuacji gdy użytkownik posiada już odpowiednie ciasteczko z danej strony;-) Tym samym jest to pstryczek w nos dla użytkowników, którzy naprawdę dbają o swoją prywatność, czyszcząc ciasteczka przy zamykaniu przeglądarki. W ich przypadku ostrzeżenia nigdy nie odejdą...

P.S. Testowy monit zbudowany właściwie tylko z kodu z tego wpisu, możecie sprawdzić tutaj.

P.S. 2 Taki monit można oczywiście wykorzystać do dowolnych innych celów na swojej stronie - np. do powitania nowych użytkowników :-)

Data ostatniej modyfikacji: 30.05.2013, 16:20.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus