Как настроить баннер cookie-согласия по требованиям GDPR, Google Consent Mode и законодательства разных стран
В современном вебе защита персональных данных – неотъемлемая часть ответственной разработки. Один из ключевых элементов – получение согласия пользователя на использование cookie-файлов. Несоблюдение этих требований может повлечь не только серьёзные штрафы, но и подорвать доверие аудитории.
На связи websecret (member of dev.family). В этой статье мы разберём:
• Зачем нужно согласие на cookie?
• Какие бывают типы cookie?
• Что такое Google Consent Mode?
• Как реализовать баннер согласия?
• Как управлять куки в зависимости от предпочтений пользователя?
• Как проверить, что настройки согласия работают?
А также приведем примеры политик использования файлов cookie.
Зачем нужно согласие на куки?
Согласие на использование файлов cookie необходимо для соблюдения законодательства в области защиты персональных данных. Наиболее строгие и чётко сформулированные требования содержатся в GDPR (Общий регламент по защите данных) и директиве ePrivacy в странах Европейского союза. Однако аналогичные нормы и рекомендации действуют и в других странах, включая Россию, Беларусь и США.
Когда требуется согласие?
Сбор любых не строго необходимых cookie (например, аналитических или маркетинговых) требует предварительного, явного и гранулярного согласия пользователя. Это означает:
- Согласие должно быть дано до активации соответствующих cookie;
- Пользователь должен иметь возможность отклонить или настроить категории cookie до их установки;
- Не допускаются предустановленные чекбоксы или интерпретация бездействия как согласия;
- Необходимо предоставить понятное описание назначения каждой категории файлов;
- Пользователь должен иметь возможность отозвать согласие в любой момент – через футер, настройки профиля и другие инструменты.
✍ Даже если ваш сайт зарегистрирован за пределами ЕС, но работает с пользователями из ЕС, вы обязаны соблюдать правила GDPR и Google Consent Mode.
Как должны выглядеть кнопки согласия?
GDPR требует, чтобы выбор пользователя был свободным и недвусмысленным, что должно быть отражено в дизайне интерфейса:
- Кнопки «Принять» и «Отклонить» должны быть равнозначно заметны и иметь одинаковый или схожий размер, цвет, контрастность и расположение;
- Кнопка «Настроить» может визуально отличаться. Например, быть меньше или другого цвета. Но она должна быть достаточно заметной, чтобы пользователь мог легко получить доступ к настройкам гранулярного согласия.
Эти требования прямо вытекают из рекомендаций Европейского совета по защите данных (EDPB) и национальных надзорных органов. Но такой подход к реализации интерфейса является хорошей практикой и в рамках других законодательств.
Типы согласия
К типам согласия в работе с cookie относятся:
- Явное согласие (Explicit Consent) – чётко выраженное, часто посредством нажатия кнопки или установки флажка. Необходим для большинства cookie в ЕС, РБ и РФ;
- Подразумеваемое согласие (Implied Consent) – основано на действиях пользователя, например, продолжение использования сайта. Не допускается для необязательных cookie по стандартам GDPR, а также в РБ и РФ;
- Гранулярное согласие – возможность выбора отдельных категорий файлов cookie. Например, пользователь может согласиться на использование аналитических файлов cookie, но отказаться от маркетинговых.
- Opt-in – модель согласия, при которой пользователь должен дать явное разрешение на сбор и обработку своих данных, например, через установку соответствующего флажка или нажатие на кнопку «Принять». Без этого действия сбор данных не производится. GDPR, а также законодательство Беларуси и России требуют opt-in согласия для большинства файлов cookie.
- Opt-out – модель, которая предполагает, что пользователь согласен на сбор данных, если он явно не выразит свой отказ. CCPA/CPRA в США в основном используют модель opt-out, но с обязательным opt-in для несовершеннолетних и чувствительных данных.
Какие бывают типы cookie?
Cookies делятся на несколько основных категорий:
Как законодательство разных стран регулирует согласие?
Рассмотрим особенности разработки решений для согласия на cookie в разных странах.
Европейский союз (GDPR)
- Сбор согласия до загрузки не-обязательных cookie (например, аналитика, реклама), т.е требует явного (explicit) opt-in согласия.
- Согласие должно быть гранулярным.
- Пользователь должен иметь возможность отклонить или настроить категории cookie до их активации.
- Должно быть предоставлено понятное описание назначения каждой категории cookie.
- Должна быть возможность в любое время отозвать согласие (например, через футер, настройки профиля и т.д.).
- Политика должна содержать подробный список используемых cookie с указанием их назначения, срока хранения и участия третьих сторон.
Российская Федерация (закону №152 «О персональных данных»)
- Cookie, которые позволяют идентифицировать пользователя (включая аналитические, такие как IP-адрес ), считаются персональными данными и требуют явного согласия пользователя. Особенно это касается случаев передачи данных третьим лицам, как Google.
- Рекомендуется наличие документа «Политика обработки cookie».
- Хотя прямого требования публиковать список cookie нет, рекомендуется обеспечить максимальную прозрачность: описать, какие cookie используются, что они собирают, и кому передаются данные.
Республика Беларусь (Закон № 99-З «О защите персональных данных»)
- Требуется предварительное, явно выраженное согласие (opt-in). Исключение – строго необходимые cookie.
- Рекомендуется разработать и разместить на сайте политику использования cookie, а также список cookie с пояснением их типа, цели использования и срока хранения.
- Рекомендуется добавить возможность в любое время отозвать согласие.
США (CCPA/CPRA)
- В основном применяется opt-out модель.
- Opt-in требуется для:
— продажи или передачи данных несовершеннолетних до 16 лет;
— обработки чувствительных данных.
- Рекомендуется гранулярное согласие для повышения прозрачности.
- Для соответствия требованиям CCPA/CPRA желательно опубликовать список cookie и указать, какие категории информации они собирают, и передаются ли данные третьим лицам.
Что такое Google Consent Mode?
Google Consent Mode – это инструмент, разработанный Google для помощи веб-сайтам и приложениям в управлении согласием пользователей на использование cookie и передачу данных в сервисы Google. Например, Google Analytics, Google Ads. Он позволяет адаптировать поведение тегов Google в зависимости от статуса согласия пользователя.
Рассмотрим основные принципы его работы:
1. Статус согласия.
Consent Mode позволяет передавать в Google информацию о том, дал ли пользователь согласие на использование аналитических и рекламных cookie.
2. Адаптивное поведение тегов.
В зависимости от статуса согласия, теги Google могут вести себя по-разному:
- Согласие дано: Теги работают как обычно, собирая полные данные.
- Согласие не дано (или отозвано): Теги Google переходят в режим ограниченной функциональности. Например, Google Analytics может собирать анонимизированные и обобщенные данные без использования cookie для идентификации. Google Ads может использовать контекстную рекламу вместо персонализированной.
3. Моделирование конверсий (Conversion Modeling).
В расширенном режиме Consent Mode (Advanced), Google может использовать машинное обучение для моделирования конверсий на основе агрегированных и анонимизированных данных, даже если пользователь не дал согласия на рекламные cookie.
Теги Google и сторонние теги, собирающие данные, меняют свое поведение в зависимости от статуса согласия (granted (предоставлено) или denied (отклонено). Они могут содержать встроенный механизм проверки для любого из следующих типов согласия:
Для корректной работы Consent Mode необходимо настроить ваши теги Google для учета статуса согласия. Например, в Google Tag Manager.
Некоторые параметры могут относиться сразу к нескольким категориям – например, personalization_storage можно трактовать и как часть маркетинга, и как отдельную категорию. Всё зависит от вашей политики обработки данных и интерфейса согласия.
Как реализовать баннер согласия?
Рассмотрим основные шаги.
Установка настроек по умолчанию для Consent Mode
Перед тем как начать использовать GTM на сайте, необходимо задать параметры согласия по умолчанию, чтобы Google-скрипты не активировались до получения разрешения пользователя.
Для этого нужно вызвать:
Этот вызов должен происходить раньше всех других команд gtag, таких как gtag('config', ...) или gtag('event', ...), чтобы теги и cookie не активировались до получения согласия.
Пример интеграции Google Consent Mode с настройками по умолчанию:
✍ Важно. Эти значения – пример. Необходимо адаптировать их под свою политику и реальные cookie, которые используются на сайте. Например, если ваш сайт не использует рекламу, параметры ad_storage и ad_personalization можно опустить.
Где подключать GTM в проектах на Next.js:
- Next.js 13+ (App Router): вставьте этот <Script> в файл app/layout.tsx, внутрь тега <head>.
- Next.js 13+ или 12 (Pages Router): используйте файл pages/_document.tsx, вставляя <script dangerouslySetInnerHTML={...} /> внутрь <Head>.
Основные элементы баннера:
- Информационное сообщение. Четко объясните пользователю, что сайт использует cookie и для каких целей.
- Кнопки «Принять все» и «Отклонить все». Предоставьте равнозначные опции для принятия или отклонения необязательных cookie.
- Кнопка «Настройки» или «Подробнее». Дайте пользователю возможность настроить свои предпочтения по категориям cookie (гранулярное согласие).
- Ссылка на политику использования cookie. Обеспечьте легкий доступ к подробной информации о типах используемых cookie, сроках их действия и передаче третьим лицам.
Пример базовой HTML-структуры баннера
Приведённый ниже код реализует баннер согласия на использование cookie-файлов с двумя режимами отображения: кратким уведомлением и детальной настройкой предпочтений.
Баннер переключается между двумя режимами в зависимости от значения переменной showSettings:
- По умолчанию (showSettings – false) отображается вводный текст с кратким описанием политики cookie, кнопками «Принять все cookie», «Отклонить» и возможностью перейти в режим настройки.
- В режиме настроек (showSettings – true) пользователю предлагается выбор между категориями cookie: обязательными (отключены для изменения) и аналитическими, функциональными и маркетинговыми (все они доступны для управления). После выбора пользователь может сохранить настройки.
Также предусмотрена ссылка на политику использования cookie и сообщение о том, что нажатие кнопки означает согласие с условиями обработки.
CookieBanner.tsx
CookieSettings.tsx
Обработка согласия пользователя
Обновления настроек режима согласия (updateGtmConsent)
Функцию (updateGtmConsent) используют для взаимодействия с Google Tag Manager (GTM) и обновления статуса согласия пользователя для различных категорий cookie. Это позволяет GTM корректно управлять тегами в зависимости от предпочтений пользователя.
✍ Важно: Настройки, приведённые в примерах выше, служат шаблоном для реализации режима согласия. Вы можете и должны адаптировать их под требования вашего проекта, юридических норм вашей страны, а также под реальные категории используемых куки. Например, если ваш сайт не использует рекламу, параметры ad_storage и ad_personalization можно опустить.
Для того чтобы избежать ошибок TypeScript при обращении к window.dataLayer и window.gtag, необходимо расширить глобальный объект Window в файле globals.d.ts следующим образом:
Перед отображением баннера согласия важно проверить, давал ли пользователь ранее согласие на использование cookie. Это позволяет избежать повторного показа баннера при каждом посещении сайта.
Полный пример реализации баннера можно найти тут - https://github.com/dev-family/articles/tree/master/cookie-banner.
Примеры баннеров согласия
Пример баннера с Onliner:
Пример с европейской версии сайта Zara:
Пример реализации баннера Facebook:
Как проверить, что настройки согласия работают?
После настройки Google Consent Mode и cookie-баннера важно убедиться, что состояния согласия действительно применяются, и теги не запускаются без разрешения пользователя. Ниже приведены два способа – через DevTools и расширение Tag Assistant.
Использование инструментов разработчика браузера:
До согласия:
- Откройте DevTools → Application → Storage → Cookies
- Убедитесь, что необязательные cookie (аналитика, реклама) не установлены
- На вкладке Network отфильтруйте запросы к:
— google-analytics.com
— googleadservices.com
- Убедитесь, что запросы не отправляются или отправляются только cookieless-пинги в рамках Google Consent Mode
В режиме Consent Mode Google может отправлять так называемые «cookieless пинги» – запросы без использования cookie. Они не содержат персональных данных и не нарушают требования GDPR.После согласия:
- Нажмите на баннере кнопку «Принять все» или «Сохранить настройки»
- Обновите страницу
- Проверьте, что теперь соответствующие cookie установлены
- Убедитесь, что на вкладке Network появляются запросы к Google Analytics / Ads с cookie
Использование Tag Assistant
Google Tag Assistant (расширение для Chrome) позволяет визуально отследить работу Consent Mode в реальном времени.Шаги:
- Установите расширение Tag Assistant для Chrome
- Перейдите на сайт, активируйте Tag Assistant
- Убедитесь, что Consent Mode работает – статус согласия обновляется при взаимодействии с баннером. Перейдите https://tagassistant.google.com/ → проверьте события Consent Default и Consent Update
Состояние по умолчанию до согласия:
- Видно, что параметры вроде ad_storage, analytics_storage и другие находятся в состоянии Denied.
- Это значит, что ни один маркетинговый или аналитический тег не будет активирован до согласия пользователя
Состояние после принятия согласия:
- После взаимодействия с баннером и вызова gtag('consent', 'update', { ... }) статус обновляется на Granted.
- Это значит, что теги Google Analytics, Ads и др. могут быть активированы и начать работать с cookie.
Как оформить список используемых cookies
Политика cookie должна содержать таблицу с перечнем всех файлов cookies, используемых на сайте. Это позволяет пользователю принимать обоснованные решения и соответствует требованиям GDPR и лучшим практикам других юрисдикций.Рекомендуется указывать:
- Название cookie;
- Тип (обязательные, функциональные, аналитические, маркетинговые);
- Назначение – что делает данный cookie;
- Срок хранения;
- Информацию о передаче данных третьим лицам (например, Google, Meta).
Полный список можно создать вручную или автоматически с помощью сервисов вроде Cookiebot, OneTrust, Osano и других инструментов.
Примеры политик использования файлов cookie
Политика использования файлов cookie должна учитывать правовые нормы региона, в котором действует веб-сайт. Такая политика помогает не только соблюсти требования законодательства, но и повысить доверие пользователей за счёт прозрачности в обработке данных.
🇧🇾 Беларусь
Политика должна соответствовать Закону № 99-З «О защите персональных данных» и включать:
- Цели использования cookie (безопасность, функциональность, аналитика);
- Типы файлов (технические, аналитические и др.) и собираемые ими данные;
- Сроки хранения;
- Информацию о правах пользователей: доступ, исправление, отзыв согласия.
🇷🇺 Россия
В соответствии с ФЗ-152 и рекомендациями Роскомнадзора, политика должна содержать:
- Описание целей и конкретных персональных данных (например, IP-адреса);
- Указание на необходимость явного согласия;
- Возможность отзыва согласия;
- Упоминание требований по локализации данных на территории РФ.
🇪🇺 Европейский союз (GDPR)
Политика должна соответствовать статьям 13 и 14 GDPR и включать:
- Контроллера данных и цели обработки;
- Подробный список cookie и обрабатываемых данных;
- Получателей данных и сроки хранения;
- Перечень прав пользователя (удаление, ограничение, переносимость, отзыв согласия и др.);
- Информацию о праве подать жалобу в надзорный орган.
🇺🇸 США (CCPA/CPRA)
Политика ориентирована на прозрачность и отказ от продажи данных. В ней должно быть указано:
- Категории собираемой информации и цели обработки;
- Информация о передаче данных третьим лицам;
- Прямая ссылка на страницу «Не продавать и не передавать мою личную информацию» (если применимо);
- Права на ограничение использования чувствительной информации.
Основные рекомендации:
- Указывайте цели обработки файлов cookie: безопасность, функциональность, аналитика, реклама.
- Разделяйте категории cookie, описывайте их назначение и срок хранения.
- Информируйте о правах пользователя — доступ, исправление, отзыв согласия и др.
- Адаптируйте язык и содержание политики в зависимости от региона.
✍ Примеры ниже даны для понимания общей структуры политики использования cookie-файлов. Они помогут понять, из чего может состоять политика использования cookie-файлов, но не являются готовым юридическим шаблоном. Для продакшна такие тексты нужно адаптировать под реальные цели, региональное законодательство и специфику продукта – желательно с юристом или специалистом по privacy.
Пример для Беларуси и России
Политика должна подчёркивать необходимость явного согласия, указывать, какие персональные данные собираются (например, IP-адреса), и учитывать требования к локализации данных (для России).
Пример для Европейского союза (GDPR)
Политика должна быть максимально прозрачной и соответствовать статьям 13 и 14 GDPR. Особое внимание – описанию контроллера, целей, прав пользователей и механизма согласия.
Пример для США (CCPA/CPRA)
Политика должна акцентировать внимание на праве на отказ от продажи данных, а также на праве на ограничение использования чувствительной информации.
При реализации согласия на cookie также важно помнить про следующие требования и условия:
- Настройки по умолчанию (default consent) – установлены до загрузки тегов и скриптов;
- Согласие пользователя учитывается до активации необязательных cookie – убедитесь, что маркетинговые или аналитические теги запускаются только после явного разрешения;
- Корректное поведение по умолчанию – убедитесь, что в настройках cookie нет предварительно отмеченных чекбоксов для необязательных категорий;
- Равнозначные кнопки «Принять» и «Отклонить» – интерфейс должен давать пользователю реальный выбор, а не склонять его к согласию. Особенно критично в рамках требований GDPR;
- Поддержка гранулярного согласия – возможность выбрать отдельные категории cookie (аналитика, реклама и т.п.).
- Согласие можно отозвать в любое время – стандарт для ЕС и хорошая практика для других регионов;
- Интеграция с Google Consent Mode – управление поведением тегов в зависимости от статуса согласия;
- Регионально адаптированная политика использования cookie – юридически обоснованная, с учётом местного законодательства;
- Проверка работы баннера – с помощью DevTools, Google Tag Assistant и других инструментов.
Реализация согласия на cookie – это не просто вопрос соответствия нормативным актам. Это способ показать пользователю, что его выбор важен. С каждым годом требования к прозрачности обработки данных ужесточаются, а сами пользователи становятся всё более осознанными. Поэтому грамотно реализованный механизм согласия – это одновременно средство правовой защиты, инструмент доверия и элемент пользовательского опыта.
✍ Важно помнить: любая реализация должна учитывать интересы обеих сторон – бизнеса, которому нужны данные для роста и оптимизации, и пользователя, который ожидает честности, контроля и уважения к своей приватности.