Informacja o ciasteczkach – prosty skrypt

5 sierpnia 201311 listopada 2016 Mariusz Kuta komentarzy 6 cookies, jquery, tutorial

Total: 3
0
1
1
0
1

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.

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

(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 || {});

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();
            });
    }

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.

.cookiepolicy {
	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;
}

.cookiepolicy {

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>

$(document).ready(function () {

$.cookiepolicy();

});

</script>

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

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

1	$.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.

Demo Pobierz

Skrypt cookies – zrób to sam

JS

CSS

Instalacja

Wady i zalety

Zobacz też