Реалізація Cookie Consent Banner для сайту (GDPR)

Реалізація Cookie Consent Banner для сайту (GDPR)

Cookie consent banner - це компонент, який отримує інформовану згоду користувача перед встановленням необов'язкових cookies. Вимога GDPR (стаття 7) та ePrivacy Directive для всіх сайтів, доступних користувачам ЄС.

Класифікація cookies

За GDPR cookies розділяються на категорії:

Технічні вимоги до баннеру

• Згода до встановлення cookies (не після)
• Відмова така ж проста, як згода
• Гранулярна згода по категоріях
• Можливість відозвати згоду в будь-який момент
• Зберігання запису про згоду з timestamp

Реалізація через Cookiebot / OneTrust

Готові рішення для відповідності GDPR:

Cookiebot:

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js"
        data-cbid="YOUR-CBID"
        data-blockingmode="auto"
        type="text/javascript">
</script>

Користувацька реалізація (React)

interface ConsentState {
  analytics: boolean;
  marketing: boolean;
  functional: boolean;
}

export function CookieConsentProvider({ children }: { children: ReactNode }) {
  const [consent, setConsent] = useState<ConsentState>({
    analytics: false,
    marketing: false,
    functional: false,
  });
  const [hasResponded, setHasResponded] = useState(false);

  useEffect(() => {
    const stored = localStorage.getItem('cookie_consent');
    if (stored) {
      const data = JSON.parse(stored);
      setConsent(data.preferences);
      setHasResponded(true);
    }
  }, []);

  const updateConsent = (updates: Partial<ConsentState>) => {
    const newConsent = { ...consent, ...updates };
    const record = {
      preferences: newConsent,
      timestamp: new Date().toISOString(),
      version: '1.0',
    };
    localStorage.setItem('cookie_consent', JSON.stringify(record));
    setConsent(newConsent);
    setHasResponded(true);

    fetch('/api/consent', {
      method: 'POST',
      body: JSON.stringify(record),
    });
  };

  return (
    <CookieConsentContext.Provider value={{ consent, updateConsent, hasResponded }}>
      {children}
    </CookieConsentContext.Provider>
  );
}

Зберігання записів про згоду

За GDPR ви повинні зберігати докази згоди:

Schema::create('consent_records', function (Blueprint $table) {
    $table->id();
    $table->string('user_identifier');
    $table->json('preferences');
    $table->string('version');
    $table->ipAddress('ip_address');
    $table->timestamp('consented_at');
    $table->timestamp('withdrawn_at')->nullable();
});

Тривалість реалізації

• Готове рішення (Cookiebot/CookieYes): 1 день
• Користувацький баннер з блокуванням скриптів: 3–5 днів
• Зберігання записів про згоду + API: +1 день