Baner cookies, który nie zabija konwersji

Baner zgód jest pierwszą rzeczą, którą widzi osoba wchodząca na Twoją stronę, i jedyną, która wymaga od niej decyzji, zanim cokolwiek przeczyta. Mimo to w większości projektów jest doklejany na końcu, w domyślnej konfiguracji wtyczki, i nikt nigdy na niego nie patrzy z perspektywy klienta.

To błąd, który kosztuje podwójnie: prawnie, bo domyślne ustawienia często nie spełniają wymogu dobrowolności, i biznesowo, bo źle zaprojektowany baner potrafi zasłonić pół ekranu na telefonie w momencie, w którym budujesz pierwsze wrażenie.

Trzy rzeczy, które baner musi spełnić

Zanim zaczniemy o wyglądzie, warto ustalić ramy, bo one ograniczają pole manewru i dobrze o tym wiedzieć od początku.

Zgoda musi być dobrowolna i konkretna. To oznacza, że odmowa ma być równie łatwa jak zgoda. Układ, w którym „Akceptuj wszystkie” jest wyraźnym przyciskiem, a odmowa kryje się pod „Ustawienia” i wymaga odklikania kilku przełączników, jest kwestionowany przez organy nadzorcze w całej Unii. Dwa równorzędne wyjścia w jednym kliknięciu to dziś standard, a nie nadmiarowa ostrożność.

Nic poza niezbędnym nie może się załadować przed decyzją. Baner, który wygląda poprawnie, ale ma pod spodem odpalone Analytics i piksel reklamowy, jest gorszy niż brak banera, bo tworzy pozór zgodności. Techniczną stronę tego opisałem w tekście o wdrożeniu Consent Mode v2.

Decyzja musi dać się zmienić. Link do ustawień prywatności w stopce wystarczy i zajmuje pięć minut pracy.

Gdzie baner realnie szkodzi

Wpływ banera na wyniki nie polega na tym, że ludzie klikają „Odrzuć” i przez to masz mniej danych. Polega na czterech rzeczach, które dzieją się wcześniej.

Zasłania treść w najgorszym momencie. Na telefonie domyślne banery potrafią zająć połowę ekranu. Użytkownik trafia z reklamy albo z wyników wyszukiwania, ma zdanie nagłówka i ścianę tekstu prawnego. Część wychodzi, zanim w ogóle zobaczy ofertę.

Zjada uwagę potrzebną gdzie indziej. Każda decyzja kosztuje. Jeśli pierwsze, co robi klient na Twojej stronie, to przetwarzanie akapitu o plikach cookie, to na Twoją propozycję wartości ma już mniej cierpliwości.

Nakłada się na inne elementy. Baner na dole ekranu bardzo często przykrywa pływający przycisk kontaktu albo pole formularza. To banalny błąd, który wyłapuje się w dziesięć sekund, patrząc na stronę na telefonie, i którego prawie nikt nie sprawdza.

Zlewa się z tłem i przez to wisi dłużej. Tę pułapkę zobaczyłem na własnej stronie. Baner był ciemny, tak jak cała strona, więc nie odcinał się jako osobna warstwa. Efekt był taki, że nie czytało się go jako komunikatu do zamknięcia, tylko jako fragment interfejsu, i zostawał na ekranie znacznie dłużej, niż powinien. Zmiana na jasny panel na ciemnym tle rozwiązała to natychmiast: baner stał się wyraźnie osobną rzeczą, którą się załatwia i idzie dalej.

Jak zaprojektować go dobrze

Zmieść się w jednej trzeciej ekranu

Na telefonie o wysokości 812 pikseli daje to około 250 pikseli na cały baner. Wymusza to dyscyplinę: nagłówek, dwa zdania i przyciski. Cała reszta, czyli lista dostawców, cele przetwarzania i okresy przechowywania, ma swoje miejsce w polityce prywatności i w panelu szczegółowym, a nie na pierwszym ekranie.

Ustaw przyciski obok siebie, a nie jeden pod drugim

Dwa przyciski w jednym rzędzie po połowie szerokości to jeden rząd zamiast dwóch, czyli kilkadziesiąt pikseli mniej. Przy krótkich etykietach, takich jak „Akceptuj” i „Odrzuć”, nie ma powodu, żeby układać je pionowo. Trzeci przycisk, jeśli jest, może pójść niżej jako podkreślony tekst.

Odetnij baner wizualnie od strony

Baner to osobna warstwa i tak ma wyglądać: kontrastujące tło, wyraźna krawędź albo cień. Nie chodzi o krzykliwość, tylko o to, żeby mózg od razu zaklasyfikował go jako element do zamknięcia. To ta sama zasada, którą stosuje się przy oknach modalnych.

Pamiętaj o obszarze bezpiecznym na telefonie

Na telefonach z gestem powrotu dolne kilkanaście pikseli ekranu jest zajęte przez systemowy pasek. Baner przyklejony do samego dołu potrafi wsunąć pod niego przyciski. Wystarczy uwzględnić w stylach wartość env(safe-area-inset-bottom), żeby problem zniknął.

Nie wkładaj tekstu w okno z własnym przewijaniem

Domyślne konfiguracje niektórych platform zgód wstawiają opis w kontener z paskiem przewijania. Na telefonie wygląda to jak błąd strony, a użytkownik i tak tego nie przeczyta. Lepiej skrócić tekst do dwóch zdań i podlinkować politykę prywatności.

Jak sprawdzić, czy baner realnie szkodzi

Wpływ banera trudno zmierzyć klasycznym testem A/B, bo nie wolno pokazywać części użytkowników wersji niezgodnej z przepisami. Są jednak trzy wskaźniki, które sporo mówią.

Odsetek osób, które w ogóle podejmują decyzję. Jeśli duża część użytkowników ignoruje baner i przewija stronę z nim na ekranie, to znaczy, że nie został rozpoznany jako element wymagający reakcji. Zwykle jest za mało kontrastowy albo za bardzo przypomina resztę interfejsu.

Czas do pierwszej interakcji na telefonie. Porównaj go z wersją desktopową. Duża różnica sugeruje, że na małym ekranie baner blokuje treść na tyle, że użytkownik potrzebuje więcej czasu, żeby zacząć cokolwiek robić.

Współczynnik odrzuceń na stronach docelowych kampanii. To tam wpływ jest największy, bo ruch jest zimny i cierpliwość najmniejsza. Jeśli strona docelowa ma wyraźnie gorsze wyniki niż reszta serwisu, warto sprawdzić, ile miejsca zajmuje na niej baner.

Po zmianie banera warto zaznaczyć datę w Analytics i porównać te trzy wskaźniki miesiąc do miesiąca. To nie jest test kontrolowany, ale przy wyraźnej poprawie wystarcza, żeby wiedzieć, że zmiana poszła w dobrą stronę.

Wybór platformy zgód

Rynek jest szeroki i różnice między rozwiązaniami dotyczą raczej wygody niż zgodności. Przy wyborze zwracam uwagę na cztery rzeczy.

Czy platforma natywnie obsługuje Consent Mode i przekazuje wszystkie cztery sygnały, bez dopisywania własnego kodu. To pierwsze pytanie, bo bez tego reszta nie ma znaczenia.

Czy da się zmienić wygląd na poziomie stylów. Domyślne banery są projektowane pod uniwersalność, więc rzadko pasują do konkretnego serwisu. Możliwość nadpisania stylów jest tym, co pozwala zmieścić się w jednej trzeciej ekranu i dopasować kolorystykę do reszty strony.

Czy skanuje serwis i prowadzi rejestr zgód. Automatyczne wykrywanie cookie oszczędza czas przy aktualizacjach, a rejestr zgód bywa potrzebny przy wykazywaniu zgodności.

Ile waży skrypt i skąd się ładuje. Baner jest pierwszą rzeczą na ekranie, więc ładuje się przed treścią i wchodzi w Core Web Vitals. Ciężka platforma potrafi zauważalnie pogorszyć wynik na telefonie.

Czego nie robić, nawet jeśli podnosi zgody

Istnieje cała rodzina wzorców, które podnoszą odsetek akceptacji i jednocześnie podnoszą ryzyko prawne: odmowa ukryta o dwa kliknięcia dalej, przycisk odmowy w kolorze tła, przełączniki domyślnie włączone, zamknięcie krzyżykiem traktowane jako zgoda albo baner blokujący całą stronę do momentu akceptacji.

Warto policzyć to na chłodno. Podniesienie akceptacji z 60 na 75 procent poprawia jakość danych w Analytics. Nie zmienia natomiast liczby klientów, bo nikt nie kupuje dlatego, że zgodził się na cookie. Po drugiej stronie stoi ryzyko postępowania i rozmowa, w której trzeba tłumaczyć, dlaczego odmowa była trudniejsza niż zgoda. To zła wymiana.

Test, który zajmuje dwie minuty

Otwórz własną stronę na telefonie, w oknie prywatnym. Sprawdź trzy rzeczy: ile procent ekranu zajmuje baner, czy widzisz jednocześnie nagłówek strony i oba przyciski, oraz czy baner czegoś nie przykrywa. Potem kliknij odmowę i sprawdź, czy strona zachowuje się normalnie.

Jeśli którykolwiek z tych punktów wypada źle, poprawka to zwykle kilka linijek stylów, a nie zmiana platformy zgód. Przy okazji warto przejść ten sam test na formularzu kontaktowym, bo to drugie miejsce, w którym drobne decyzje projektowe najmocniej przekładają się na liczbę zapytań.

Najczęstsze pytania

Czy przycisk odrzucenia musi być na pierwszym ekranie banera?

Tak. Zgoda musi być dobrowolna, a odmowa równie łatwa jak akceptacja. Konstrukcja, w której „Akceptuj” jest dużym przyciskiem, a odmowa wymaga wejścia w ustawienia i odklikania przełączników, jest kwestionowana przez organy nadzorcze w całej Unii. Oba wyjścia mają być dostępne w jednym kliknięciu.

Czy baner można wyświetlać dopiero po chwili od wejścia?

Nie warto. Do momentu uzyskania zgody i tak nie wolno ustawiać cookie innych niż niezbędne, więc opóźnianie banera niczego nie zmienia prawnie, a psuje odbiór: użytkownik zaczyna czytać i po chwili dostaje przykrycie treści. Lepiej pokazać baner od razu i zrobić go możliwie niskim.

Ile miejsca powinien zajmować baner na telefonie?

Docelowo jedną trzecią ekranu albo mniej. Przy 812 pikselach wysokości oznacza to około 250 pikseli. Powyżej tej granicy baner przestaje być komunikatem, a staje się ścianą, i rośnie liczba osób, które akceptują odruchowo albo wychodzą.

Czy kolor banera ma znaczenie?

Ma, ale nie w kategoriach konwersji, tylko czytelności. Baner musi odcinać się od tła strony, bo jest osobną warstwą i decyzją. Na ciemnej stronie ciemny baner zlewa się z treścią i użytkownik nie rozpoznaje go jako elementu do zamknięcia, przez co wisi na ekranie dłużej, niż powinien.