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

Куки-баннеры — одна из тех вещей, где большинство реализаций ошибочны в одном из двух направлений: либо нелегальны (предвыбранное согласие, нет кнопки отказа, тёмные паттерны), либо массивный оверкилл (энтерпрайз-платформы управления согласием на портфолио в 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. Согласие должно быть утвердительным действием.