Реалізація форми згоди на обробку даних за категоріями
Ми розробляємо форми згоди з розбивкою за цілями обробки — не просто «я погоджуюсь на все», а конкретний вибір для кожної категорії. Такий підхід потребує не лише фронтенд-логіки, але й надійного бекенду для журналювання та застосування згод. Наш досвід впровадження GDPR-сумісних рішень для веб-сервісів показує: без категорій ви ризикуєте отримати штрафи до 20 млн євро або 4% річного обігу. Зв'яжіться з нами, щоб оцінити проект — ми реалізуємо все під ключ за 2–3 робочих дні.
Категорії згод
Стандартний набір для веб-сервісу:
| Категорія | Опис | Обов'язковість |
|---|---|---|
| Necessary | Функціонування сервісу | Завжди включено |
| Analytics | Покращення сервісу, Google Analytics | Опціонально |
| Marketing | Персоналізована реклама | Опціонально |
| Preferences | Запам'ятовування налаштувань | Опціонально |
| Third-party | Сторонні сервіси (чат, карти) | Опціонально |
Як налаштувати категорії згод?
Категорії визначаються на основі цілей обробки, які ви вказуєте в політиці конфіденційності. Для кожної категорії потрібно вирішити, чи є вона обов'язковою для функціонування. Необов'язкові категорії користувач може вимкнути. Ми використовуємо адаптивний компонент, який завантажує список категорій із конфігу або з сервера — це дозволяє змінювати набір без перескладання фронтенду.
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
- Скрипти для ініціалізації аналітики та маркетингу з урахуванням згод
- Документація з розгортання та тестування
- Навчання команди або передача вихідних кодів
Порівняння підходів до зберігання згод
| Критерій | Тільки localStorage | Серверне логування |
|---|---|---|
| Юридична сила | Низька | Висока (доказ) |
| Відновлення при скиданні | Втрачається | Завжди доступно |
| Можливість аудиту | Ні | Повний журнал |
| Навантаження на бекенд | Ні | Незначне |
Серверне зберігання в 3 рази краще за надійністю для compliance.
Кроки з впровадження
- Аналіз всіх цілей обробки та категоризація.
- Проєктування схеми даних (категорії, версії, лог).
- Реалізація фронтенд-компонента з валідацією обов'язкових полів.
- Розробка серверного ендпоінта та інтеграція з Consent Mode.
- Тестування: перевірка, що всі скрипти блокуються до згоди.
- Аудит логів та коригування політики.
Типові помилки при реалізації форми згоди
Перша та найпоширеніша помилка — попередньо встановлені галочки на маркетингові та аналітичні категорії. За вимогами GDPR згода має бути добровільною: будь-які необов'язкові категорії за замовчуванням вимкнені. Регулятор може виписати штраф навіть за цей один недолік. Друга помилка — єдина кнопка «Прийняти все» без можливості вибору. Це порушує принцип гранулярності згоди. Третя — банер закривається хрестиком без збереження вибору: натискання на хрест не дорівнює «прийняти все», але багато реалізацій так трактують цю дію. Коректний варіант — хрест закриває банер, але застосовує лише обов'язкові категорії. Четверта помилка — невідповідність категорій фактично використовуваним скриптам: аналітика «заблокована», але Google Tag Manager все одно завантажує теги. Google Consent Mode v2 вирішує це через signals-механізм, але лише за правильної інтеграції. П'ята — зберігання лише «прийняв/відмовив» без деталізації за категоріями: регулятор вимагатиме довести, на що саме була дана згода, а не просто факт кліку. Ми перевіряємо всі ці моменти в рамках технічного аудиту та виправляємо до передачі проекту.
Термін виконання
Реалізація форми згоди за категоріями зі збереженням на сервері та інтеграцією Google Consent Mode v2 — 2–3 робочих дні. Ми виконали понад 50 проектів з GDPR-комплаенсу. Замовте консультацію — оцінимо ваш проект безкоштовно.