Кукі-банери по-правильному (і за законом) — мінімум для Словаччини/ЄС

Кукі-банери — одна з тих речей, де більшість реалізацій помилкові в одному з двох напрямків: або нелегальні (попередньо обрана згода, немає кнопки відмови, темні патерни), або масивний оверкіл (ентерпрайз-платформи керування згодою на портфоліо в 5 сторінок).

Ось мінімальний сетап, що відповідає закону для малих сайтів у ЄС (включаючи Словаччину), на основі того, що реально важливо за GDPR та Директивою ePrivacy.

Коли потрібен кукі-банер

Потрібен, якщо ставиш кукі, які не є строго необхідними для роботи сайту. Найчастіші тригери:

Google Analytics (або будь-яка аналітика з кукі)
Facebook Pixel, Google Ads, будь-який рекламний трекер
Hotjar, Clarity або аналогічні інструменти запису сесій з кукі
Сторонні вбудовування (YouTube, Vimeo), що ставлять свої кукі

Не потрібен, якщо використовуєш тільки:

Сесійні кукі для автентифікації (строго необхідні)
Безкуковую аналітику (Plausible, Fathom, Umami, PostHog у cookieless-режимі)
Немає сторонніх вбудовувань або вбудовування завантажуються тільки після згоди

Найпростіший легальний шлях: переключися на безкуковую аналітику і пропусти банер повністю. Plausible та Fathom GDPR-сумісні без згоди. Це те, що я рекомендую для більшості клієнтських сайтів — жодного банера, керування згодою, юридичного ризику.

Якщо банер все ж потрібен: юридичні вимоги

За GDPR + Директива ePrivacy (як імплементовано в словацькому законодавстві та по всьому ЄС):

1. Попередня згода на необов'язкові кукі

Потрібно отримати згоду до встановлення будь-яких необов'язкових кукі. Це означає: жодного трекінгу Google Analytics при завантаженні сторінки. Скрипт завантажується тільки після кліку користувача на «Прийняти».

Попередньо обрані чекбокси явно нелегальні за GDPR (рішення Planet49, CJEU 2019). Згода має бути стверджувальною дією — кліком по кнопці, а не відсутністю зняття чекбокса.

2. Рівна помітність для прийняття та відмови

Кнопки «Прийняти» та «Відхилити» мають бути однаково легко знаходимі та клікабельні. Темні патерни — «Відхилити» як крихітне посилання, а «Прийняти» як велика зелена кнопка — порушують вимогу GDPR про вільно дану згоду.

Французький CNIL оштрафував Google на €150М та Facebook на €60М у 2022 саме за це: один клік для прийняття і кілька кліків для відмови.

3. Гранулярний контроль по категоріях

Користувачі повинні мати можливість давати згоду на конкретні категорії (аналітика, маркетинг, вподобання), а не «все або нічого». На практиці для малого сайту тільки з аналітикою двох опцій достатньо: «Прийняти аналітику» та «Відхилити все».

4. Легке відкликання

Користувачі повинні мати можливість відкликати згоду так само легко, як дали. Посилання у футері («Налаштування кукі»), що відкриває банер заново — стандартний підхід.

5. Задокументоване підтвердження

Потрібно довести, що згода була дана. Зберігай запис: часову мітку, на що дано згоду, версію тексту згоди. Простий рядок у БД або localStorage-запис достатній.

Мінімальна реалізація

Для малого Next.js-сайту з Google Analytics:

'use client'

import { useState, useEffect } from 'react'

const CONSENT_KEY = 'cookie-consent'

type Consent = 'accepted' | 'rejected' | null

export function CookieBanner() {
  const [consent, setConsent] = useState<Consent>(null)
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const stored = localStorage.getItem(CONSENT_KEY)
    if (stored === 'accepted' || stored === 'rejected') {
      setConsent(stored)
      if (stored === 'accepted') loadAnalytics()
    } else {
      setVisible(true)
    }
  }, [])

  function accept() {
    localStorage.setItem(CONSENT_KEY, 'accepted')
    setConsent('accepted')
    setVisible(false)
    loadAnalytics()
  }

  function reject() {
    localStorage.setItem(CONSENT_KEY, 'rejected')
    setConsent('rejected')
    setVisible(false)
  }

  if (!visible) return null

  return (
    <div role="dialog" aria-label="Згода на кукі" className="...">
      <p>
        Ми використовуємо кукі для аналітики, щоб покращити сайт. Див.{' '}
        <a href="/privacy">політику конфіденційності</a>.
      </p>
      <div className="flex gap-3">
        <button onClick={reject} className="...">
          Відхилити
        </button>
        <button onClick={accept} className="...">
          Прийняти
        </button>
      </div>
    </div>
  )
}

function loadAnalytics() {
  const script = document.createElement('script')
  script.src = `https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX`
  script.async = true
  document.head.appendChild(script)
}

Ключові моменти:

Жодної аналітики при завантаженні сторінки. Скрипт завантажується тільки після accept().
Обидві кнопки однаково стилізовані. Однаковий розмір, однакова помітність.
Запам'ятовує вибір. Не питає знову при кожному завантаженні.
Посилання у футері для повторного відкриття. Додай посилання «Налаштування кукі» у футер.

Посилання згоди у футері

<button
  onClick={() => {
    localStorage.removeItem(CONSENT_KEY)
    window.location.reload()
  }}
  className="text-sm text-gray-400 hover:text-white"
>
  Налаштування кукі
</button>

Очищує збережену згоду та перезавантажує сторінку, показуючи банер заново. Просто, легально, жодної ентерпрайз-платформи.

Специфіка Словаччини

Словаччина імплементує Директиву ePrivacy через Закон про електронні комунікації (zákon č. 452/2021). Вимоги збігаються з EU-стандартом — жодних словацьких підводних каменів. Регуляторний орган — Úrad na ochranu osobných údajov.

Для малого сервісного бізнесу ризик правозастосування низький — регулятори фокусуються на великих компаніях. Але дотримання достатньо просте, щоб не було причини пропускати. Реалізація вище займає 30 хвилин.

Чого не варто використовувати

OneTrust, Cookiebot, CookieYes на малому сайті. Ці платформи для ентерпрайзу з десятками сторонніх скриптів. Для портфоліо з Google Analytics — оверкіл: додають 50–200КБ JavaScript, уповільнюють завантаження, і часто мають власні проблеми комплаєнсу.
Кукі-банери, що не блокують кукі. Я бачив реалізації, де банер показується, але аналітика завантажується одразу незалежно від вибору. Це гірше, ніж відсутність банера — це доказ знання вимог та їх ігнорування.
«Продовжуючи перегляд, ви приймаєте кукі». Це не валідна згода за GDPR. Згода має бути стверджувальною дією.