Как сделать cookie-баннер: тексты, кнопки, блокировка счётчиков и проверка

Что подготовить до начала

• Доступ к шаблону сайта, админке CMS или менеджеру тегов — туда, где подключены счётчики.
• Список сервисов, которые использует маркетинг: Яндекс Метрика, VK Пиксель, Top.Mail.Ru, онлайн-чат, коллтрекинг.
• Номер счётчика Метрики и коды пикселей — они понадобятся, чтобы перенести их под управление баннера.
• Адрес страницы с политикой обработки персональных данных. Если политики нет, начните с генератора политики.
• Человека, который будет обновлять баннер, когда маркетинг подключит новый сервис.

Результат работы — баннер, который показывается при первом визите, запоминает выбор, запускает необязательные скрипты только после согласия и даёт изменить решение по ссылке «Настройки cookie» в подвале. Зачем это нужно с точки зрения 152‑ФЗ, разобрано в статье Cookie и 152‑ФЗ.

Составьте список cookie и скриптов

Откройте сайт в режиме инкогнито, нажмите F12 и пройдите ключевые страницы: главную, каталог, карточку товара, корзину, страницы с формами. Во вкладке Network видны все внешние домены, во вкладке Application → Cookies — все cookie. Выпишите каждый сторонний домен и сопоставьте его с сервисом.

Отдельно откройте менеджер тегов, если он есть: через него часто подключены пиксели, о которых в команде уже не помнят. Всё, чем не пользуются, удалите до запуска баннера. Иностранные сервисы по возможности замените российскими — так уйдёт и вопрос трансграничной передачи данных.

Разделите cookie на категории

Небольшому сайту хватает трёх-четырёх категорий. Чем их меньше, тем понятнее выбор:

• необходимые — сессия, корзина, авторизация, защита форм, сохранение выбора в самом баннере; включены всегда;
• функциональные — город, язык, просмотренные товары, онлайн-чат;
• аналитические — Яндекс Метрика и другие счётчики статистики;
• рекламные — VK Пиксель, ретаргетинг, рекламные сети и виджеты, которые отслеживают посетителя.

Если на сайте только Метрика, достаточно двух вариантов: «Принять» и «Только необходимые». Настройки по категориям нужны, когда есть и аналитика, и реклама.

Напишите тексты баннера и панели настроек

Текст баннера отвечает на три вопроса: что используете, зачем и что будет при отказе. Два-три предложения, без канцелярита и без английских слов без пояснения.

Короткий баннер для сайта с Метрикой

«Мы используем файлы cookie и Яндекс Метрику, чтобы понимать, как улучшить сайт. Аналитика включится только с вашего согласия. Подробнее — в политике обработки персональных данных».

Баннер с настройками для магазина

«Мы используем файлы cookie: необходимые обеспечивают работу корзины и личного кабинета, аналитические и рекламные помогают улучшать сайт и показывать релевантные предложения. Аналитику и рекламу мы включим только с вашего согласия, выбор можно изменить в любой момент».

Описания категорий в панели

• «Необходимые. Нужны для работы сайта: корзина, вход в личный кабинет, защита форм. Отключить нельзя».
• «Аналитические. Помогают понять, какие страницы полезны посетителям. Сервис: Яндекс Метрика».
• «Рекламные. Позволяют показывать вам наши предложения на других сайтах. Сервис: VK Пиксель».

Формулировки «для улучшения пользовательского опыта» без названия сервисов посетителю ничего не объясняют. Согласие по ст. 9 152‑ФЗ должно быть конкретным и информированным, поэтому называйте сервисы.

Продумайте кнопки и поведение

• «Принять» и «Только необходимые» одного размера и сопоставимой заметности. Серая ссылка «отказаться» мелким шрифтом рядом с яркой кнопкой подталкивает к согласию.
• «Настроить» открывает панель, где все необязательные категории по умолчанию выключены.
• Закрытие крестиком не включает счётчики.
• Баннер не закрывает весь экран и кнопки формы или корзины на телефоне.
• В подвале есть ссылка «Настройки cookie», которая снова открывает баннер.
• Выбор сохраняется вместе с датой и версией настроек. При добавлении нового сервиса версия растёт и баннер показывается снова.

Выберите способ внедрения

Как выбрать плагин или модуль

• Блокирует ли он скрипты до согласия или только показывает плашку.
• Какие скрипты контролирует: только Метрику, счётчики из своих настроек или любой код.
• Есть ли категории и ссылка для изменения выбора.
• Где хранится выбор посетителя и ведётся ли журнал согласий.
• Не подгружает ли сам плагин шрифты и скрипты с иностранных серверов.
• Когда плагин обновлялся в последний раз и совместим ли с вашей версией CMS.

Тильда: как подключить счётчик вручную

Счётчики, подключённые в настройках сайта Тильды, блок T972 включает сам после согласия. Если код Метрики или пикселя вставлен в HTML-блок или в раздел Head, его нужно разметить: у тега script поставить тип text/plain и атрибут data-tilda-cookie-type со значением analytics, advertising или custom. Иначе скрипт выполнится сразу.

Настройте загрузку скриптов после согласия

Главное правило: код аналитики и рекламы не выполняется до выбора посетителя. Стандартный код Метрики в разделе head срабатывает при загрузке страницы, ставит cookie _ym_uid и отправляет первый запрос раньше, чем посетитель увидит баннер.

• Функция загрузки. Код счётчиков убирают из шаблона и оформляют функцией, которую вызывает кнопка «Принять». При повторном визите баннер читает сохранённый выбор и вызывает ту же функцию сразу. Флаг внутри функции не даёт загрузить счётчик дважды.
• Отложенные теги. Необязательным скриптам ставят тип text/plain и пометку категории; браузер их не исполняет. После согласия баннер создаёт из них обычные скрипты.
• Менеджер тегов. Баннер передаёт событие согласия, а теги срабатывают только по нему.
• Заглушки для виджетов. Видео, карты и кнопки соцсетей заменяют картинкой с кнопкой «Загрузить», которая подгружает iframe по клику.
• Цели и события. Вызовы reachGoal до загрузки счётчика складывают в очередь и отправляют после инициализации, иначе они теряются.

Генератор cookie-баннера собирает готовый HTML и JavaScript: баннер с двумя кнопками, сохранение выбора в локальном хранилище браузера, загрузку Метрики только после «Принять» и функцию openCookieSettings для ссылки в подвале. Если кроме Метрики есть пиксели, добавьте их код в ту же функцию загрузки.

Если посетитель отозвал согласие, уже загруженный на странице счётчик продолжит работать до перезагрузки. После отзыва перезагрузите страницу и удалите cookie аналитики, которые ставятся на ваш домен.

Обновите политику

Баннер ссылается на политику, поэтому в ней нужен раздел о cookie с теми же категориями и сервисами, что и в панели настроек. Расхождение — частая находка при проверках: в баннере три сервиса, в политике ни одного, а на сайте фактически пять. Держите один источник — таблицу сервисов из инвентаризации — и обновляйте по ней оба текста. Что ещё включить в политику, описано в статье о политике обработки ПДн.

Проверьте в DevTools, что счётчики не грузятся до согласия

Перед проверкой отключите блокировщик рекламы: он сам режет запросы к счётчикам, и сломанный баннер будет выглядеть рабочим.

1. Откройте сайт в новом окне инкогнито и нажмите F12. Во вкладке Network включите Preserve log и обновите страницу.
2. Не трогая баннер, введите в фильтр mc.yandex, затем vk.com, mail.ru, google. Запросов к счётчикам быть не должно.
3. Во вкладке Application → Cookies и Local storage проверьте, что нет _ym_uid, _ym_d и cookie рекламных сервисов.
4. Нажмите «Только необходимые» и перейдите на две-три страницы. Запросы к счётчикам так и не появляются.
5. Закройте окно, откройте новое инкогнито и нажмите «Принять». Появляются запросы к mc.yandex.ru и cookie Метрики, при переходе на другую страницу баннер не всплывает.
6. Нажмите «Настройки cookie» в подвале, смените выбор на отказ, перезагрузите страницу: счётчики больше не загружаются.
7. Повторите проверку на телефоне или в режиме эмуляции мобильного устройства: баннер не закрывает кнопки и форму.

Повторяйте проверку после каждого подключения нового сервиса или смены шаблона. Быстро посмотреть внешнюю картину — есть ли уведомление, политика и какие счётчики грузятся — можно в бесплатной проверке сайта.

Частые ошибки

• Баннер только уведомляет: одна кнопка «Согласен», счётчики грузятся сразу. Такой баннер не меняет обработку данных — разбор в статье «Cookie-баннер без иллюзий».
• Метрику убрали из шаблона, но она осталась в менеджере тегов или в модуле CMS и грузится оттуда.
• Баннер блокирует Метрику, но пропускает VK Пиксель, видео и чат.
• Выбор не сохраняется, и баннер всплывает на каждой странице.
• Нет ссылки «Настройки cookie»: передумать посетитель не может.
• Список сервисов в баннере и политике не совпадает с тем, что видно в Network.