Реалізація регіональних банерів 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>
  );
}

Інтеграція з Google Tag Manager

Після отримання згоди активуємо теги в 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 робочих днів.