Як перевірити сайт на cookie‑banner та згоду на cookies
Як перевірити сайт на cookie‑banner та згоду на cookies
1. Що таке cookie banner і навіщо його перевіряти
Cookie banner — це перше вікно, яке бачить людина при заході на сайт. В ньому зазвичай запитують згоду на cookies, тобто на зберігання невеликих файлів у браузері. Для користувача це виглядає як один вибір з 2 або 3 кнопок, а для сайту — як перевірка на акуратну роботу з даними.
Сенс перевірки простий: сайт не повинен ставити маркетингові або аналітичні cookies раніше, ніж людина натиснула потрібну кнопку. Якщо банер з'являється, але згода вже проставлена заздалегідь, це поганий сигнал. І так, іноді проблема ховається в одній зайвій рядку скрипта.
Коли потрібно швидко пояснити, як перевірити сайт на шахрайство, зазвичай шукають помітні ознаки: форму оплати, дивний домен, чужі контакти. З cookie banner логіка схожа, тільки дивитися треба не на візуальний шум, а на те, коли і які cookies з'являються. Один невірний запуск скрипта все ламає.
Проверка потрібна не для галочки. На сайті з банером користувач повинен розуміти, навіщо збираються cookies, а сайт повинен уміти зберігати його вибір. Якщо цього немає, потім важко пояснити, чому аналітика вважає зайві візити або чому банер спливає знову після кожного оновлення сторінки.
2. Які вимоги зазвичай перевіряють
В типовій перевірці дивляться на 4 речі: банер є, відмова доступна, цілі cookies описані, згода фіксується коректно. Якщо на сторінці тільки кнопка «Прийняти», перевірка вже дає привід для зауваження. Якщо банер є, але текст порожній і без сенсу, це також не проходить здоровий тест.
Перший пункт — наявність банера при першому візиті. Другий — можливість відмовитися так само легко, як погодитися. Третій — опис цілей: аналітика, реклама, функціональні cookies, іноді персоналізація. Четвертий — запис вибору, щоб після оновлення сторінки не ставити одне й те саме питання знову.
Іноді корисно дивитися на знайомі цифрові звички ширше. Наприклад, у людей швидко формується роздратування, якщо інтерфейс вимагає дії без пояснення; подібний ефект видно і в банерах, коли текст довгий, а сенс короткий. У цьому місці непогано допомагають найжорстокіші експерименти психологів — не як інструкція, звісно, а як нагадування, що на поведінку людини впливає навіть незначна затримка або нав'язаний вибір.
Ще один практичний пункт — мова повідомлення. Якщо сайт працює російською, банер також має бути російською, без змішування половини фраз англійською та половини німецькою. Користувач не зобов'язаний вгадувати, що означає «Manage preferences». Це всього один екран, але він вирішує багато.
3. Підготовка до перевірки сайту
Перед тестом відкрийте мінімум 3 сценарії: головну сторінку, сторінку з формою і сторінку з зовнішніми скриптами, наприклад картою або відео. Іноді cookie banner поводиться по-різному на різних типах сторінок. На головній все чисто, а в блозі вже спрацьовує сторонній код.
Перевіряти краще в 2 браузерах. Один — ваш основний, другий — для чистого старту. В ідеалі відкрити вікно інкогніто і звичайне вікно, щоб побачити різницю між новим відвідувачем і людиною, яка вже натискала кнопку згоди.
Потрібні ще 2 пристрої, якщо сайт адаптивний: десктоп і телефон. На мобільному банер може з'їжджати вниз, перекривати кнопку меню або взагалі не поміщатися в екран. Це не рідкість, особливо коли інтерфейс зібраний швидко і без ручної перевірки.
Перед початком зафіксуйте 3 речі: дату, браузер та URL сторінки. Без цього потім важко повторити баг. Одна стрічка в нотатці економить півгодини переписки з розробником.
Якщо ви ведете чек-лист, залиште окремі поля для тексту банера, кнопок, посилань на політику та факту встановлення cookies до згоди. У деяких проектах зручно одразу прикріпити скріншот. Сухо? Так. Зато потім не доводиться згадувати, де саме пропав банер.
4. Як перевірити наявність cookie banner на сайті
Почніть з першого візиту в інкогніто. Відкрийте головну сторінку і не натискайте нічого 5–10 секунд. Банер має з'явитися одразу або протягом короткого часу, а не після переходу на третю сторінку. Якщо його немає, вже є питання до логіки показу.
Перевірте, чи не прихований банер під іншими елементами. Частою помилкою є те, що банер є, але його перекриває чат, спливаюча підписка або sticky-меню. На екрані він ніби присутній, а фактично до нього не дістатися. Це особливо помітно на телефоні, де місця менше.
Зробіть переходи по 3–4 сторінках: головна, каталог, картка товару, контакти. Банер повинен поводитися однаково, якщо правила показу однакові. Коли він з'являється тільки на одній сторінці, а на інших зникає, це вже не єдиний сценарій, а випадковість.
Перевірте ще один момент: не показується чи банер повторно після закриття вкладки і нового входу, якщо людина вже залишила вибір. Якщо сайт не зберігає згоду, користувач буде бачити одне і те ж вікно щоразу. Через 2–3 таких візити банер починає дратувати навіть терплячих людей.
Іноді банер завантажується з затримкою через скрипти. Тоді сторінка встигає поставити cookies до появи вікна. Це вже не візуальна дрібниця, а технічна помилка. У такому випадку треба дивитися порядок завантаження скриптів, а не тільки сам текст банера.
5. Як перевірити згоду на cookies
Тут потрібна проста послідовність з 3 дій: натиснути «Прийняти», натиснути «Відхилити» і відкрити «Налаштувати», якщо така кнопка є. Після кожної дії перевіряють, як змінюється поведінка сайту і які cookies з'являються. Згода не повинна бути декоративною.
Після кнопки «Прийняти» відкрийте сторінку заново і подивіться, зник чи банер. Потім закрийте браузер і увійдіть знову. Якщо вибір зберігся, сайт веде себе нормально. Якщо банер повертається, збереження згоди зламане або зберігається занадто недовго.
Окремо перевірте відмову. Кнопка «Відхилити» повинна працювати так само впевнено, як «Прийняти», а не ховатися в тексті або відкривати додаткове вікно. Іноді розробники роблять красиву, але нечесну схему: погодитися легко, відмовитися можна тільки через 4 кліки. Таке рішення краще одразу позначати як проблемне.
Якщо є вікно налаштувань, подивіться, чи можна відключити аналітичні та маркетингові cookies окремо. Корисно, коли людина сама обирає категорії, а не отримує один загальний перемикач на все. Тут як економити гроші без страждань нагадає просту думку: зручність не повинна перетворюватися на втрати, тільки в разі cookies йдеться не про гаманець, а про контроль над своїм вибором.
Після будь-якого вибору оновіть сторінку 1 раз і перевірте, чи не з'являються зайві cookies до повторного згоди. Якщо з'являються, банер працює тільки зовні. Ззовні все красиво, всередині — ні.
6. Як перевірити cookies у браузері та через інструменти розробника
Відкрийте інструменти розробника і перейдіть на вкладку Application або Storage, в залежності від браузера. Там видно cookies, localStorage і іноді sessionStorage. Для перевірки cookie banner це базовий набір. Без нього можна тільки гадати.
Спочатку подивіться список cookies до натискання будь-якої кнопки. Після цього натисніть «Прийняти» і порівняйте список ще раз. Різниця повинна бути зрозумілою і пояснювальною.
Корисно відокремлювати необхідні cookies від інших. Необхідні зазвичай відповідають за сесію, кошик, авторизацію або мову інтерфейсу. Аналітичні та маркетингові з'являються лише після згоди. Якщо все змішано в одну купу, перевірка стає складнішою, але проблема від цього не зникає.
На практиці зручно вести таблицю. Вона допомагає не сперечатися на словах і не шукати баг за пам'яттю.
| Що дивитися | До згоди | Після «Прийняти» | Після «Відхилити» |
|---|---|---|---|
| Банер | Є | Схований | Схований |
| Аналітичні cookies | Ні | Можуть з'явитися | Не повинні з'являтися |
| Маркетингові cookies | Ні | Можуть з'явитися | Не повинні з'являтися |
Якщо сайт використовує сторонні сервіси, перевіряйте їх окремо. Карти, чати, відео та пікселі люблять підключати власні cookies, іноді ще до дії користувача. Для таких випадків потрібно дивитися мережеві запити та порядок завантаження скриптів. Один зовнішній віджет може зіпсувати всю схему.
В звіті краще фіксувати назву cookie, домен, момент появи та дію користувача. Без цих 4 пунктів розробнику доведеться повторювати тест з нуля. Це вже не перевірка, а вгадування.
7. Часті помилки на сайтах
Перша помилка — банер взагалі не показується при першому заході. Друга — кнопка відмови відсутня або схована глибоко в налаштуваннях. Третя — cookies ставляться до вибору користувача. Будь-яка з цих проблем вже є приводом для виправлення.
Четверта помилка — згода зберігається неправильно. Користувач натиснув «Відхилити», але через годину банер знову з'являється як новий. П'ята — на мобільному екрані вікно перекривається шапкою сайту або кнопкою чату. Шоста — текст банера не пояснює, навіщо потрібні cookies, і люди просто закривають сторінку.
Є і менш помітні збої. Наприклад, банер з'являється тільки російською мовою, а налаштування — англійською. Або кнопка «Налаштувати» є, але всередині нічого не можна вимкнути. Ззовні це виглядає як повноцінний сценарій, а насправді — імітація.
Іноді корисно порівняти сайти з іншими інтерфейсними помилками, де користувач повинен здогадуватися про правила сам. У цьому сенсі матеріал про це цікаво нагадує, що старі списки та звички швидко втрачають сенс, якщо ніхто не переглядає їх вчасно. Для cookie banner це також вірно: вчорашній шаблон сьогодні вже може не працювати.
Ще одна проблема — відсутність повторної перевірки після релізу. Банер виправили на тестовому стенді, але на бойовому сайті залишився старий скрипт. Таке трапляється частіше, ніж здається, особливо якщо фронтенд і тег-менеджер живуть різним життям. Тут рятує тільки повторний тест на бойовій версії.
8. Що робити після перевірки
Після тесту оформіть список знахідок у короткому звіті: сторінка, браузер, пристрій, дія, результат. Якщо є скріншот, прикладіть його одразу. 1 хороший звіт краще 10 усних зауважень, тому що в ньому видно порядок дій.
Кожну проблему описуйте конкретно: що натиснули, що очікували, що побачили. Не пишіть «банер працює дивно». Краще так: «Після натискання “Відхилити” analytics cookie з'являється після оновлення сторінки». Розробнику потрібна формулювання, з якою можна йти в код.
Якщо зауважень багато, розділіть їх на 3 групи: критичні, середні та косметичні. Критичні — cookies до згоди. Середні — відсутність відмови. Косметичні — обрізаний текст або з'їхала кнопка. Такий порядок допомагає не сперечатися про дрібниці раніше часу.
Коли виправлення готові, прогоніть перевірку ще раз. Не один екран, а весь сценарій: перший візит, вибір кнопки, перезавантаження, новий вхід, мобільна версія. Без повторного тесту легко прийняти стару помилку за виправлену. І тоді банер знову спливе в найневідповідніший момент.
Якщо потрібно швидко звірити результат вручну, тримайте поруч і чек-лист, і браузерні інструменти. В одній вкладці видно поведінку інтерфейсу, в іншій — самі cookies. На цій парі зазвичай і знаходиться відповідь, що саме зламано, і де шукати наступну правку.
