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.

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.

(function($) {
$.fn.cookiepolicy = function(options) {
    new jQuery.cookiepolicy($(this), options);
	return this;
};
 
$.cookiepolicy = function(options) {
};
})(jQuery);

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

options = $.extend({
	cookie: 'cookiepolicyinfo',
	info: 'Korzystanie z witryny oznacza zgodę na wykorzystywanie plików cookie.',
	close: 'Zamknij'
}, options || {});

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

if($.cookie(options.cookie) != 'true') {
        var wrapper = $('<div/>').addClass('cookiepolicy').appendTo('body');
        $('<span/>').html(options.info).appendTo(wrapper);
        $('<a/>').addClass('button').html(options.close).appendTo(wrapper)
            .on('click', function(e) {
                e.preventDefault();
                $.cookie(options.cookie, true);
                $(this).parents('.cookiepolicy').remove();
            });
}

CSS

Odrobiną CSS-a przypudrujmy okienko z komunikatem.

policy {
	background: #efefef;
	bottom: 0;
	font: 14px Arial, Helvetica, sans-serif;
	left: 0;
	padding: 15px 50px;
	position: fixed;
	right: 0;
	text-align: center;
}

.cookiepolicy .button {
	background: #444;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: #fff;
	cursor: pointer;
	margin-left: 5px;
	padding: 5px 10px;
}

Instalacja

Dołączmy pliki do strony.

<link href="css/jquery.cookiepolicy.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.cookiepolicy.js"></script>

I uruchommy skrypt.

<script type="text/javascript">
	$(document).ready(function () {
 		$.cookiepolicy();
 	});
</script>

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

$.cookiepolicy({close: 'OK'});

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.

Zobacz demo Pobierz .zip

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