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

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

GDPR требует получения явного согласия на неессенциальные куки от пользователей ЕС. CCPA требует предоставить возможность отказа от продажи данных. Для пользователей из России и СНГ — информирование по 152-ФЗ. Единый баннер для всех не работает — нужна региональная логика.

Логика показа баннера

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);
  }
}

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

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 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');
  }
}

Сроки

Региональные баннеры с GDPR/CCPA/RU логикой и интеграцией Google Consent Mode: 3–5 рабочих дней.