01 — Клієнт
Про проєкт
Банер згоди — єдине, що відвідувач бачить раніше за контент. Якщо він важить більше за саму сторінку і ставить cookie до кліку, він ламає і швидкість, і закон.
02 — Контекст
Завдання
Сайту потрібен піксель Meta для реклами книжок. За німецькою практикою піксель можна вантажити лише після явної згоди. Готові плагіни-банери часто роблять навпаки: вставляють скрипт у шапку і потім «блокують» його, а cookie встигають з’явитися.
Друга вимога — вага. Готові рішення тягнуть десятки кілобайт стилів і скриптів, окремі запити і телеметрію. На сайті, де вся тема важить сім кілобайт, банер не має бути найважчим елементом сторінки.
Третє: сайт веде сама авторка. Налаштування потрібні, візуальний конструктор ні.
03 — Рішення
Як це влаштовано
3.1
Нічого до вибору
Скрипти сервісів друкуються в сторінку як text/plain з міткою категорії і оживають лише після згоди на неї. Iframe отримують адресу за тим самим принципом. Навіть cookie із самим рішенням з’являється лише після кліку. Cookie перемикача мов вимкнено на рівні плагіна: мова живе в адресі сторінки.
3.2
Три кілобайти, нуль запитів
Один inline-стиль і один inline-скрипт у підвалі, без окремих файлів, залежностей і jQuery. Стилі і скрипт разом — 3,2 КБ у gzip. Банер закріплений унизу екрана і не зсуває контент, тому не впливає на CLS.
3.3
За практикою DSK
Перший шар: «Відхилити» і «Прийняти» одного розміру, нижче «Налаштувати» і посилання на Datenschutzerklärung. Без хрестика: закрити банер означає зробити вибір. У налаштуваннях нічого не позначено заздалегідь. Рішення зберігається 182 дні і для згоди, і для відмови; при зміні набору сервісів питання ставиться знову.
3.4
Відкликання і доказ
Посилання «Cookie-Einstellungen» у підвалі відкриває налаштування будь-якої миті. При вимкненні маркетингу видаляються cookie пікселя і сторінка перезавантажується. У cookie рішення зберігаються версія конфігу, час, випадковий ідентифікатор згоди і вибрані категорії.
3.5
Доступність
Діалог оголошено для читалок, фокус переходить на банер при появі, Tab обходить усі кнопки, Esc не закриває. Кнопки не менші за 44 пікселі на телефоні, анімація вимикається при prefers-reduced-motion.
3.6
Для наступних сайтів
Категорії і сервіси — конфіг із фільтрами, а не хардкод. Публічний JS API і подія на документі, щоб тема чи інший плагін могли спитати, на що є згода. Рядки перекладено чотирма мовами. Плагін не прив’язаний до теми і поїде на наступні сайти студії.
04 — Підсумок
Результат
На чистому профілі браузера до кліку: нуль cookie від сайту, нуль зовнішніх запитів. Після «Лише необхідні» піксель не вантажиться і після перезавантаження. Після «Прийняти» піксель вантажиться, а відкликання через підвал знову його вимикає.
LCP і CLS після встановлення не змінилися. Datenschutzerklärung описує саме те, що банер робить насправді.