Реалізація Cookie-бару на сайті

Впровадження cookie-баннеру

Cookie-баннер інформує відвідувачів про використання cookies та отримує согласу до їх встановлення. GDPR вимагає: согласа добровільна, явна, гранульована (по категоріях), легко відозвана.

Категорії cookies

React компонент

import { useState, useEffect } from 'react';

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

const CONSENT_KEY = 'cookie_consent_v2';

function useCookieConsent() {
  const [consent, setConsent] = useState<CookieConsent | null>(null);
  const [showBanner, setShowBanner] = useState(false);

  useEffect(() => {
    const saved = localStorage.getItem(CONSENT_KEY);
    if (saved) {
      const parsed = JSON.parse(saved);
      setConsent(parsed);
      applyConsent(parsed);
    } else {
      setShowBanner(true);
    }
  }, []);

  const save = (c: CookieConsent) => {
    localStorage.setItem(CONSENT_KEY, JSON.stringify({
      ...c,
      updatedAt: new Date().toISOString(),
    }));
    setConsent(c);
    setShowBanner(false);
    applyConsent(c);
    reportConsent(c);
  };

  return { consent, showBanner, save };
}

function applyConsent(consent: CookieConsent) {
  if (consent.analytics) {
    loadGoogleAnalytics();
    loadYandexMetrica();
  }
  if (consent.marketing) {
    loadFacebookPixel();
  }
}

async function reportConsent(consent: CookieConsent) {
  await fetch('/api/cookie-consent', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ consent }),
  });
}

export function CookieBanner() {
  const { showBanner, save } = useCookieConsent();

  if (!showBanner) return null;

  return (
    <div className="cookie-banner" role="dialog">
      <h2>Ми використовуємо cookies</h2>
      <p>Ми використовуємо необхідні cookies. З вашої згоди — аналітичні та маркетингові.</p>
      <div className="actions">
        <button onClick={() => save({ functional: false, analytics: false, marketing: false })}>Відхилити</button>
        <button onClick={() => save({ functional: true, analytics: true, marketing: true })}>Прийняти все</button>
      </div>
    </div>
  );
}

Сервер: фіксація согласу

class CookieConsentController extends Controller
{
    public function store(Request $request): JsonResponse
    {
        $request->validate([
            'consent.functional' => 'required|boolean',
            'consent.analytics'  => 'required|boolean',
            'consent.marketing'  => 'required|boolean',
        ]);

        CookieConsent::create([
            'user_id'       => auth()->id(),
            'session_id'    => $request->session()->getId(),
            'ip'            => $request->ip(),
            'user_agent'    => $request->userAgent(),
            'consent'       => $request->consent,
            'version'       => config('cookies.policy_version', '2.0'),
            'consented_at'  => now(),
        ]);

        return response()->json(['status' => 'saved']);
    }
}

Google Analytics з согласом

function loadGoogleAnalytics() {
  if (document.getElementById('ga-script')) return;

  const script = document.createElement('script');
  script.id = 'ga-script';
  script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
  document.head.appendChild(script);

  window.dataLayer = window.dataLayer || [];
  window.gtag = function() { window.dataLayer.push(arguments); };
  window.gtag('config', GA_ID, { anonymize_ip: true });
}

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

Cookie-баннер з 3 категоріями, localStorage согласи, API: 2–3 дні. З аудит-логом у БД та GDPR-сумісним відозванням: 3–4 дні.