Регіональні Cookie Consent банери: GDPR, CCPA, 152-ФЗ

Ви запускаєте сайт на європейський ринок, але банер із написом «Ми використовуємо куки» однаковий для всіх. Користувач із Німеччини натискає «Прийняти», хоча за законом він має обрати категорії. Користувач із Каліфорнії хоче відмовитися від продажу даних — кнопки немає. Через місяць приходить лист від регулятора. Ми стикалися з цим десятки разів і виробили надійне рішення: регіональні банери на основі геолокації з підтримкою 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-ФЗ. Отримайте консультацію — оцінимо ваш сайт безкоштовно.