Реализация формы согласия на обработку персональных данных по категориям
Мы разрабатываем формы согласия с разбивкой по целям обработки — не просто «я согласен на всё», а конкретный выбор для каждой категории. Такой подход требует не только фронтенд-логики, но и надёжного бэкенда для журналирования и применения согласий. Наш опыт внедрения 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-комплаенсу, работаем с 2016 года. Закажите консультацию — оценим ваш проект бесплатно.