Tworzenie pop-upu lub paska z informacją o cookies

W tym wpisie pokażę jak zakodować pop-up lub pasek z informacją o cookies w sposób przyjazny dla SEO i wydajności strony. Wiele wtyczek, które służą do umieszczenia takiego komunikatu zauważalnie spowalniają stronę, bo umieszczają w kodzie strony odniesienia do dodatkowych plików CSS i JS, które razem mogą ważyć nawet kilkanaście kilobajtów. Okno z informacją o ciasteczkach jest często zakodowane w taki sposób, że treść informacji jest indeksowana jako treść strony internetowej, przez co powielony i typowo techniczny tekst często dominuje nad zasadniczą treścią strony internetowej.

Formę zaprezentowania tej informacji pozostawiam każdemu do rozważenia. Skupię się na samym mechanizmie akceptowania informacji i kilku zagadnieniach z obszaru web performance i SEO. Zaprezentowany sposób programowania i umieszczenia kodu na stronie można oczywiście wykorzystać do wielu innych celów, np. prezentacji regulaminu lub przekazywaniu ważnych powiadomień lub nawet informacji marketingowych.

Krok 1: Tworzenie paska lub okna dialogowego

Tak jak napisałem wcześniej, nie będę proponował konkretnego sposobu prezentowania informacji. Okno dialogowe bardzo się wyróżnia i akceptacja nie zostanie pominięta przez użytkownika – co może się zdarzyć w przypadku paska przyklejonego do dolnej lub górnej krawędzi strony.

Jeżeli korzystamy z Bootstrapa okno modalne wygląda mniej-więcej tak:

W przypadku paska – sprawdzi się dowolny div, któremu nadamy klasę fixed-bottom:

.fixed-bottom {
   position: fixed;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
}

Sama informacja powinna posiadać jakikolwiek unikalny atrybut aby łatwo można było wybrać ten element z DOM:

<div id="cookies" class="fixed-bottom">
   Serwis wykorzystuje pliki cookies...
</div>

Obojętnie z jakiej metody skorzystamy, obok informacji tworzymy link lub przycisk, który będzie uruchamiał funkcję odpowiedzialną za ukrywanie informacji i zapamiętanie, że ta została już zaakceptowana:

<button onClick="closeCookies()">Akceptuję</button>

Krok 2: Domyślne ukrywane informacji w CSS

Bardzo ważną kwestią jest ukrycie paska za pomocą styli CSS, aby roboty analizujące treści nie nadawały temu tekstowi wysokiego priorytetu i aby nie dochodziło do takich sytuacji:

Zamiast po prostu wyświetlać i ukrywać okno w przypadku trzeba przyjąć odwrotne podejście, które podpowiada nam logika – ukrywać okno i pokazywać za pomocą JS wtedy, kiedy zgoda nie została udzielona.

<div id="cookies" class="fixed-bottom d-none">
   Serwis wykorzystuje pliki cookies...
</div>

Klasa d-none ma ukryć dany element na stronie internetowej:

.d-none{
   display:none;
}

Krok 3: Mechanizm pokazywania informacji w JavaScript

Za pomocą localStorage sprawdzamy czy użytkownik kiedykolwiek zaakceptował naszą politykę cookies:

if (localStorage.getItem("cookiesAccepted") === null) {
   setTimeout(function(){
      let cookies = document.querySelector('#cookies');
      cookies.classList.remove('d-none');
   }, 5000);
}

Kiedy w localStorage nie znajduje się wartość dla klucza cookiesAccepted, usuwamy klasę d-none, która była odpowiedzialna za domyślne ukrycie pop-upu czy też paska. Po co opóźniamy pojawienie się okienka o 5 sekund? Odpowiedzią jest UX i wydajność strony. Niech informacja o cookies nie konkuruje z właściwą treścią podczas renderowania strony internetowej.

Pozostaje nam jeszcze zakodowanie funkcji closeCookies, która jest odpowiedzialna za ukrycie informacji, po kliknięciu przycisku „Akceptuję” lub krzyżyka, jeżeli informacja dotyczy czegoś innego i nie wymaga zgody:

function closeCookies(){
   let cookies = document.querySelector('#cookies');
   el.classList.add('d-none');
   localStorage.setItem("cookiesAccepted", true);
}

Tutaj – przy akceptacji – ustawiamy wartość true dla klucza cookiesAccepted. To spowoduje, że informacja o cookies nie będzie pokazywana przy następnej odsłonie lub wizycie.

Krok 4: Dodatkowa optymalizacja kodu

Kod JS wklejamy do głównego pliku z kodem JavaScript witryny bądź tworzymy nowy plik, który będzie dołączony do strony wykorzystując atrybut async. Przed wysłaniem kodu na serwer minifikujemy go aby plik z kodem miał jak najmniejszy rozmiar:

<script src="js/cookies.min.js" async></script>

Malutki fragment kodu CSS ze stylem dla klas d-none i fixed-bottom dodajemy do kodu krytycznego CSS lub dopisujemy go do głównego pliku CSS, który jest zminifikowany i ładowany z opóźnieniem.

Podsumowanie

Tak zakodowana informacja o cookies pozwoli zachować wysoką wydajność strony internetowej i nie spowoduje problemów z SEO. Nie ma potrzeby instalowania gotowych wtyczek, które dodają nadmiarowy kod CSS i JS i mogą być uzależnione od bibliotek typu jQuery lub jQuery UI. W skrajnych przypadkach wtyczki te mogą być niekompatybilne z przyszłymi wersjami strony co może doprowadzić do poważnych problemów a zdarzały się przypadki, że wtyczki tego typu posiadały luki bezpieczeństwa.