Реализация региональных Cookie Consent баннеров на сайте

Вы запускаете сайт на европейский рынок, но баннер с надписью «Мы используем куки» одинаков для всех. Пользователь из Германии нажимает «Принять», хотя по закону он должен выбрать категории. Пользователь из Калифорнии хочет отказаться от продажи данных — кнопки нет. Через месяц приходит письмо от регулятора. Мы сталкивались с этим десятки раз и выработали надёжное решение: региональные баннеры на основе геолокации с поддержкой GDPR, CCPA и 152-ФЗ. Ниже — как это устроено и как внедрить за 3–5 дней.

Почему один баннер не работает для всех регионов?

GDPR требует явного согласия на неессенциальные куки до их загрузки. CCPA — право отказа от продажи данных без блокировки работы сайта. 152-ФЗ — достаточно информирования. Если показывать единый баннер, вы либо нарушаете закон (не даёте выбора), либо теряете конверсию (требуете слишком много согласий там, где не нужно). Решение — детектировать юрисдикцию и показывать соответствующий UI.

Как определить юрисдикцию пользователя?

Логика определения юрисдикции:

interface ConsentState { analytics: boolean; marketing: boolean; preferences: boolean; } class CookieConsentManager { private jurisdiction: 'gdpr' | 'ccpa' | 'ru' | 'none'; init(userCountry: string): void { this.jurisdiction = this.detectJurisdiction(userCountry); const saved = this.getSavedConsent(); if (!saved || this.isOutdated(saved)) { this.showBanner(); } else { this.applyConsent(saved.state); } } private detectJurisdiction(country: string): 'gdpr' | 'ccpa' | 'ru' | 'none' { if (EU_COUNTRIES.includes(country)) return 'gdpr'; if (country === 'US') return 'ccpa'; if (country === 'RU') return 'ru'; return 'none'; } accept(categories: ConsentState): void { const consent = { state: categories, version: CONSENT_VERSION, date: new Date().toISOString(), country: this.userCountry, }; localStorage.setItem('cookie_consent', JSON.stringify(consent)); this.applyConsent(categories); this.hideBanner(); this.sendConsentEvent(consent); } } 

Компоненты баннеров по регионам

Каждый баннер отрисовывается отдельным React-компонентом. Для 152-ФЗ достаточно минимального уведомления, для CCPA — кнопка отказа, для GDPR — детальный выбор категорий.

GDPR (ЕС) — обязателен выбор категорий:

function GdprBanner({ onAccept, onCustomize, onDecline }) { return ( <div className="cookie-banner"> <p>Мы используем куки для аналитики и маркетинга...</p> <div className="flex gap-2"> <button onClick={() => onAccept({ analytics: true, marketing: true, preferences: true })}> Принять все </button> <button onClick={onCustomize}>Настроить</button> <button onClick={() => onDecline()}>Только обязательные</button> </div> </div> ); } 

CCPA (США) — право на отказ от продажи данных:

function CcpaBanner({ onOptOut }) { return ( <div className="cookie-banner ccpa"> <p>Мы не продаём ваши данные. <a href="/privacy">Privacy Policy</a></p> <button onClick={onOptOut}>Do Not Sell My Personal Information</button> </div> ); } 

Россия (152-ФЗ) — информационное уведомление:

function RuBanner({ onAccept }) { return ( <div className="cookie-banner minimal"> <p>Используем куки для корректной работы сайта. <a href="/privacy">Подробнее</a></p> <button onClick={onAccept}>Понятно</button> </div> ); } 

Сравнение требований к баннерам

Интеграция с GTM и Google Consent Mode v2

После получения согласия активируем теги в Google Tag Manager. Это критично для корректной работы аналитики и рекламы без нарушения правил:

function applyConsent(state: ConsentState): void { // Google Consent Mode v2 window.gtag('consent', 'update', { analytics_storage: state.analytics ? 'granted' : 'denied', ad_storage: state.marketing ? 'granted' : 'denied', ad_user_data: state.marketing ? 'granted' : 'denied', ad_personalization: state.marketing ? 'granted' : 'denied', }); // Ждём согласия перед загрузкой маркетинговых скриптов if (state.marketing) { loadScript('https://www.googletagmanager.com/gtag/js?id=G-XXXX'); } } 

Как протестировать баннер на разных юрисдикциях?

Локально эмулируйте IP через DevTools (Chrome → Network conditions) или используйте VPN. Для автоматизированного тестирования можно поднять контейнер с GeoIP и прогонять набор стран. Убедитесь, что для Германии показывается GDPR-баннер с выбором категорий, для США — CCPA с кнопкой отказа, для России — уведомление. Типичная ошибка — не учесть Калифорнию как CCPA, но остальные штаты пока не требуют специального баннера.

Что входит в работу

• Аудит текущих кук и скриптов на сайте (Google Analytics, Yandex.Metrica, Facebook Pixel, ретаргетинг).
• Проектирование логики: определение юрисдикции по IP, выбор сценария баннера.
• Разработка React-компонентов для каждого региона (GDPR, CCPA, 152-ФЗ, LGPD).
• Интеграция с Google Consent Mode v2 (обновление gtag).
• Настройка хранения согласия (localStorage, серверный лог).
• Тестирование на реальных IP из разных стран (Германия, США, Россия, Бразилия).
• Документация по поддержке и смене версий согласия.

Сроки и стоимость

Сроки — 3–5 рабочих дней на базовую реализацию (3 региона + GTM). Если нужно больше регионов (LGPD, PIPEDA) или кастомный дизайн, срок увеличивается до 7–10 дней. Стоимость рассчитывается индивидуально — зависит от количества скриптов и сложности интеграции. Наши инженеры с опытом 5+ лет помогут соблюсти закон и не потерять конверсию. Получите консультацию: напишите нам для оценки вашего проекта. Закажите аудит ваших cookie-сценариев уже сегодня.

Типичные ошибки при внедрении

• Одинаковый баннер для всех стран — ведёт к штрафам до 4% от оборота (GDPR).
• Загрузка скриптов до согласия — нарушение ePrivacy Directive. Используйте gtag('consent', 'default', …).
• Отсутствие версионирования согласия — при обновлении политики старые согласия нужно перезапрашивать.
• Игнорирование локального хранения — если пользователь чистит куки, баннер покажется снова. Нормально, но нужно помнить.

Мы внедрили такие баннеры на 30+ проектах — от интернет-магазинов до SaaS-платформ. Гарантируем соответствие требованиям GDPR, CCPA и 152-ФЗ. Получите консультацию — оценим ваш сайт бесплатно.