Реалізація форми згоди на обробку даних за категоріями

Реалізація форми згоди на обробку даних за категоріями

Ми розробляємо форми згоди з розбивкою за цілями обробки — не просто «я погоджуюсь на все», а конкретний вибір для кожної категорії. Такий підхід потребує не лише фронтенд-логіки, але й надійного бекенду для журналювання та застосування згод. Наш досвід впровадження GDPR-сумісних рішень для веб-сервісів показує: без категорій ви ризикуєте отримати штрафи до 20 млн євро або 4% річного обігу. Зв'яжіться з нами, щоб оцінити проект — ми реалізуємо все під ключ за 2–3 робочих дні.

Категорії згод

Стандартний набір для веб-сервісу:

Як налаштувати категорії згод?

Категорії визначаються на основі цілей обробки, які ви вказуєте в політиці конфіденційності. Для кожної категорії потрібно вирішити, чи є вона обов'язковою для функціонування. Необов'язкові категорії користувач може вимкнути. Ми використовуємо адаптивний компонент, який завантажує список категорій із конфігу або з сервера — це дозволяє змінювати набір без перескладання фронтенду.

Frontend реалізація

// ConsentBanner.jsx
import { useState, useEffect } from 'react'

const CONSENT_KEY = 'user_consent_v2'

const CATEGORIES = [
  { id: 'necessary', name: 'Необхідні', description: 'Авторизація, безпека, базовий функціонал', required: true },
  { id: 'analytics', name: 'Аналітика', description: 'Google Analytics, Яндекс.Метрика для покращення сервісу', required: false },
  { id: 'marketing', name: 'Маркетинг', description: 'Персоналізована реклама та ретаргетинг', required: false },
  { id: 'preferences', name: 'Налаштування', description: 'Запам'ятовування мови, теми та інших вподобань', required: false }
]

function ConsentBanner() {
  const [visible, setVisible] = useState(false)
  const [showDetails, setShowDetails] = useState(false)
  const [consents, setConsents] = useState({
    necessary: true,
    analytics: false,
    marketing: false,
    preferences: false
  })

  useEffect(() => {
    const stored = localStorage.getItem(CONSENT_KEY)
    if (!stored) setVisible(true)
    else applyConsents(JSON.parse(stored))
  }, [])

  const acceptAll = () => {
    const all = Object.fromEntries(CATEGORIES.map(c => [c.id, true]))
    saveConsents(all)
  }

  const rejectOptional = () => {
    const minimal = Object.fromEntries(
      CATEGORIES.map(c => [c.id, c.required])
    )
    saveConsents(minimal)
  }

  const saveConsents = (consent) => {
    localStorage.setItem(CONSENT_KEY, JSON.stringify({
      ...consent,
      version: 'v2024-03',
      timestamp: new Date().toISOString()
    }))
    applyConsents(consent)
    setVisible(false)
    reportConsentToServer(consent)
  }

  const applyConsents = (consent) => {
    if (consent.analytics) initAnalytics()
    if (consent.marketing) initMarketing()
  }

  if (!visible) return null

  return (
    <div className="consent-banner" role="dialog" aria-label="Налаштування cookie">
      <h3>Ми використовуємо cookie</h3>
      <p>Для роботи сайту та покращення вашого досвіду.</p>
      {showDetails && (
        <div className="consent-categories">
          {CATEGORIES.map(cat => (
            <label key={cat.id} className="consent-category">
              <input
                type="checkbox"
                checked={consents[cat.id]}
                disabled={cat.required}
                onChange={e => setConsents(prev => ({ ...prev, [cat.id]: e.target.checked }))}
              />
              <div>
                <strong>{cat.name}</strong>
                <p>{cat.description}</p>
              </div>
            </label>
          ))}
        </div>
      )}
      <div className="consent-actions">
        <button onClick={acceptAll}>Прийняти всі</button>
        <button onClick={rejectOptional}>Тільки необхідні</button>
        {showDetails ? (
          <button onClick={() => saveConsents(consents)}>Зберегти налаштування</button>
        ) : (
          <button onClick={() => setShowDetails(true)}>Налаштувати</button>
        )}
      </div>
    </div>
  )
}

Чому згоди потрібно зберігати на сервері?

Зберігання в localStorage зручне для швидкого доступу, але не дає юридичного захисту. При перевірці регулятором ви повинні надати докази: хто, коли і на що погодився. Серверний журнал фіксує IP, user-agent, версію політики та точний час. GDPR Article 7 вимагає, щоб згода була доказовою. Тільки бекенд-логування забезпечує compliance. Ми реалізуємо endpoint, який приймає дані та зберігає в PostgreSQL з jsonb-полем.

Збереження згод на сервері

@app.route('/api/consent', methods=['POST'])
def save_consent():
    data = request.json
    user_id = current_user.id if current_user.is_authenticated else None
    consent_record = {
        'user_id': user_id,
        'session_id': session.get('id'),
        'ip': request.remote_addr,
        'user_agent': request.user_agent.string,
        'consent_data': data['consents'],
        'version': data.get('version'),
        'timestamp': datetime.utcnow(),
        'method': 'banner'
    }
    db.execute("""
        INSERT INTO consent_log (user_id, session_id, ip, user_agent, consent_data, version, accepted_at, method)
        VALUES (%(user_id)s, %(session_id)s, %(ip)s, %(user_agent)s, %(consent_data)s::jsonb, %(version)s, %(timestamp)s, %(method)s)
    """, consent_record)
    return jsonify({'status': 'saved'})

Застосування згод до сторонніх скриптів

function applyConsents(consents) {
  // Google Analytics
  if (consents.analytics) {
    window['ga-disable-G-XXXXXXXX'] = false
    gtag('consent', 'update', {
      analytics_storage: 'granted'
    })
  } else {
    window['ga-disable-G-XXXXXXXX'] = true
    gtag('consent', 'update', {
      analytics_storage: 'denied'
    })
  }

  // Facebook Pixel
  if (consents.marketing) {
    fbq('consent', 'grant')
  } else {
    fbq('consent', 'revoke')
  }
}

// Google Consent Mode v2 (обов'язково для Google Ads з травня 2024)
gtag('consent', 'default', {
  analytics_storage: 'denied',
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
  wait_for_update: 500
})

Що входить в роботу

• React-компонент з підтримкою кастомних категорій (TypeScript, Next.js ready)
• Серверний REST API на Python/Node.js для збереження та отримання згод
• Інтеграція Google Consent Mode v2 з дефолтними denials
• Скрипти для ініціалізації аналітики та маркетингу з урахуванням згод
• Документація з розгортання та тестування
• Навчання команди або передача вихідних кодів