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 описывает ровно то, что баннер делает на самом деле.