Regional cookie consent banners on website

Implementation of Regional Cookie Consent Banners

GDPR requires explicit consent for non-essential cookies from EU users. CCPA requires providing option to opt-out from data sale. For users from Russia and CIS — notification per 152-FL. Single banner for all doesn't work — need regional logic.

Banner Display Logic

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

Banner Components by Region

GDPR (EU) — category selection mandatory:

function GdprBanner({ onAccept, onCustomize, onDecline }) {
  return (
    <div className="cookie-banner">
      <p>We use cookies for analytics and marketing...</p>
      <div className="flex gap-2">
        <button onClick={() => onAccept({ analytics: true, marketing: true, preferences: true })}>
          Accept All
        </button>
        <button onClick={onCustomize}>Customize</button>
        <button onClick={() => onDecline()}>Only Essential</button>
      </div>
    </div>
  );
}

CCPA (USA) — right to opt-out from data sale:

function CcpaBanner({ onOptOut }) {
  return (
    <div className="cookie-banner ccpa">
      <p>We do not sell your data. <a href="/privacy">Privacy Policy</a></p>
      <button onClick={onOptOut}>Do Not Sell My Personal Information</button>
    </div>
  );
}

Russia (152-FL) — informational notification:

function RuBanner({ onAccept }) {
  return (
    <div className="cookie-banner minimal">
      <p>We use cookies for proper site operation. <a href="/privacy">More</a></p>
      <button onClick={onAccept}>Got it</button>
    </div>
  );
}

Google Tag Manager Integration

After getting consent, activate tags in 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',
  });

  // Wait for consent before loading marketing scripts
  if (state.marketing) {
    loadScript('https://www.googletagmanager.com/gtag/js?id=G-XXXX');
  }
}

Timeline

Regional banners with GDPR/CCPA/RU logic and Google Consent Mode integration: 3–5 business days.