Aby dostosować stronę internetową do wymagań związanych z informowaniem użytkownika o plikach cookies, należy wdrożyć widoczny i funkcjonalny baner cookies. Poniżej znajduje się szczegółowy opis procesu implementacji, kod HTML/CSS/JavaScript oraz przykłady rozwiązań.
Czym są cookies i dlaczego informacja jest wymagana?
Cookies to niewielkie pliki tekstowe zapisywane przez przeglądarkę w urządzeniu użytkownika. Służą np. do obsługi sesji, personalizacji treści, analityki czy wyświetlania reklam. Zgodnie z przepisami, każda strona korzystająca z cookies powinna poinformować o tym użytkowników oraz umożliwić wyrażenie zgody na ich wykorzystanie lub zmianę ustawień.
Elementy banera cookies
Najczęściej stosowany komunikat o cookies zawiera:
- Wyraźną informację o wykorzystywaniu plików cookies oraz celu,
- Przyciski do zaakceptowania oraz ewentualnie odrzucenia lub konfiguracji cookies,
- Odnośnik do polityki prywatności lub polityki cookies,
- Mechanizm zapamiętywania decyzji użytkownika (np. w localStorage lub cookie).
Krok po kroku – implementacja prostego banera cookies
Kod HTML komunikatu
Umieść poniższy kod zaraz po tagu <body> swojej strony:
<div id="cookies-message" style="display:none; position:fixed; bottom:0; left:0; width:100%; background:#222; color:#fff; padding:18px 10px; z-index:10000;">
<span>
Ta strona wykorzystuje pliki cookies w celu zapewnienia najlepszej jakości usług oraz analizowania ruchu. Szczegóły znajdziesz w
<a href="/polityka-prywatnosci" style="color: #4ae;">polityce prywatności</a>.
</span>
<button onclick="acceptCookies()" style="margin-left:20px;">Akceptuję</button>
</div>
Stylizacja (CSS)
Możesz użyć wbudowanych stylów (jak powyżej) lub lepszym rozwiązaniem dodać je do stylów strony:
#cookies-message {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #222;
color: #fff;
padding: 18px 10px;
z-index: 10000;
text-align: center;
font-size: 16px;
}
#cookies-message a {
color: #4ae;
text-decoration: underline;
}
#cookies-message button {
margin-left: 20px;
padding: 6px 14px;
background: #4ae;
color: #222;
border: none;
cursor: pointer;
border-radius: 3px;
font-size: 15px;
}
Logika (JavaScript)
Skrypt sprawdza, czy użytkownik zaakceptował cookies – jeśli nie, wyświetla komunikat. Po akceptacji ukrywa informację:
function checkCookies() {
if(!localStorage.getItem('cookies_accepted')) {
document.getElementById('cookies-message').style.display = "block";
}
}
function acceptCookies() {
localStorage.setItem('cookies_accepted', 'true');
document.getElementById('cookies-message').style.display = "none";
}
window.onload = checkCookies;
Przykład bardziej rozbudowanego banera (z odrzuceniem)
Możesz rozwinąć baner o dodatkowy przycisk do odmowy lub konfiguracji cookies:
<div id="cookies-message" style="display:none; position:fixed; bottom:0; left:0; width:100%; background:#222; color:#fff; padding:18px 10px; z-index:10000;">
<span>
Ta strona korzysta z plików cookies. Kontynuując korzystanie z serwisu, akceptujesz ich użycie.
<a href="/polityka-prywatnosci" style="color: #4ae;">Dowiedz się więcej</a>
</span>
<button onclick="acceptCookies()" style="margin-left:20px;">Akceptuję</button>
<button onclick="rejectCookies()" style="margin-left:10px;">Odrzucam</button>
</div>
<script>
function checkCookies() {
if(!localStorage.getItem('cookies_decision')) {
document.getElementById('cookies-message').style.display = "block";
}
}
function acceptCookies() {
localStorage.setItem('cookies_decision', 'accepted');
document.getElementById('cookies-message').style.display = "none";
// Tu można dodać kod aktywujący analitykę itp.
}
function rejectCookies() {
localStorage.setItem('cookies_decision', 'rejected');
document.getElementById('cookies-message').style.display = "none";
// Tu można wyłączyć analitykę lub inne funkcje.
}
window.onload = checkCookies;
</script>
Obsługa cookies za pomocą JavaScript
Zmienne akceptacyjne można również przechowywać bezpośrednio w plikach cookies zamiast w localStorage. Przykład prostych funkcji do ustawiania i pobierania cookies:
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
Najczęstsze błędy i dobre praktyki
- Komunikat powinien być czytelny i pojawiać się od razu po wejściu na stronę, jeśli użytkownik nie podjął jeszcze decyzji.
- Warto zapamiętywać decyzję użytkownika (localStorage lub cookie na kilka miesięcy).
- Umożliwiaj łatwy dostęp do szczegółowej polityki cookies.
- Dobrą praktyką jest wdrażanie pełnej zgody – akceptacja/odrzucenie/pliki niezbędne do działania (zgoda warstwowa).
Dzięki powyższym przykładom łatwo zaimplementujesz funkcjonalność informowania użytkownika o cookies w czystym HTML i JavaScript, bez konieczności korzystania z zewnętrznych bibliotek. Taki komunikat to zarówno wymóg prawny, jak i ważny standard budowania zaufania oraz transparentności wobec użytkowników.
