Уявіть: ви відкриваєте сайт, а до натискання кнопки «Згоден» уже спрацював піксель Facebook. Це пряме порушення статті 7 GDPR — вимагається активна згода. Результат — штраф до 4% обороту або 20 млн євро. Ми вирішуємо це через consent-механізм з auto-blocking, який гарантує, що трекінг-скрипти не завантажаться без явної згоди. За 5 років ми впровадили понад 50 рішень — від простих банерів до інтеграції з OneTrust та кастомних систем. Один із проєктів: на сайті інтернет-магазину з відвідуваністю 100k на місяць знайшли прихований скрипт Hotjar, що працював без згоди — після впровадження кастомного банера з auto-blocking юридичні ризики знизилися на 90%. Уникнути штрафів допомагає правильний consent-механізм. Отримайте консультацію щодо впровадження.
Чому важливий розподіл cookies на категорії?
За GDPR cookies діляться на категорії, і користувач повинен мати можливість вибирати по кожній, а не просто «Прийняти всі». Рішення Суду Європейського союзу C-252/21 підтвердило: галочки «Прийняти все» недостатньо. Користувач повинен мати можливість погодитися лише на необхідні та, наприклад, аналітичні, але відмовитися від маркетингових. Ми реалізуємо інтерфейс з чекбоксами по кожній категорії, зберігаючи вибір у localStorage та на сервері. Відмова має бути такою ж простою, як і згода — кнопка «Тільки необхідні» на першому екрані банера.
| Категорія | Приклади | Вимагає згоди |
|---|---|---|
| Strictly Necessary | Сесія, CSRF-токен, корзина | Ні |
| Functional | Мова, тема, збережені фільтри | Зазвичай ні |
| Analytics | Google Analytics, Яндекс.Метрика | Так |
| Marketing | Facebook Pixel, ремаркетинг, Adwords | Так |
Як працює auto-blocking mode?
Auto-blocking mode — механізм, який блокує виконання скриптів трекінгу до отримання згоди. Без нього скрипти можуть завантажитися до того, як користувач дав згоду, що порушує GDPR. Реалізація може бути через готові рішення (Cookiebot, OneTrust) або кастомний завантажувач. Ми віддаємо перевагу другому для повного контролю, оскільки він дає гнучкість у 10 разів вищу порівняно з типовими банерами. Наприклад, кастомний завантажувач дозволяє тонко налаштовувати блокування скриптів залежно від категорії та динамічно підвантажувати ресурси. Зв'яжіться з нами для детального обговорення архітектури.
Приклад завантаження Google Analytics тільки після згоди:
export function useAnalytics() {
const { consent } = useContext(CookieConsentContext);
useEffect(() => {
if (consent.analytics && !window.gtag) {
const script = document.createElement('script');
script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
document.head.appendChild(script);
window.dataLayer = window.dataLayer || [];
window.gtag = function() { window.dataLayer.push(arguments); };
window.gtag('js', new Date());
window.gtag('config', GA_ID, { anonymize_ip: true });
}
}, [consent.analytics]);
}
Як перевірити, чи відповідає банер вимогам GDPR?
Основні критерії: користувач повинен дати активну згоду до завантаження скриптів, відмова має бути такою ж простою, як згода, а всі записи про згоду повинні зберігатися. Використовуйте інструменти на кшталт Cookie Scanner або розширення для браузера. Якщо скрипти завантажуються до взаємодії — банер не відповідає стандартам. Наші інженери проводять безкоштовний аудит вашого сайту: замовте перевірку.
Технічна реалізація: від контексту до компонента
Наводимо повноцінний приклад з контекстом і компонентом банера. Код можна адаптувати під Next.js, Vue або чистий JavaScript.
// CookieConsentContext.tsx
interface ConsentState {
analytics: boolean;
marketing: boolean;
functional: boolean;
}
const CookieConsentContext = createContext<{
consent: ConsentState;
updateConsent: (updates: Partial<ConsentState>) => void;
hasResponded: boolean;
}>({} as any);
export function CookieConsentProvider({ children }: { children: ReactNode }) {
const [consent, setConsent] = useState<ConsentState>({
analytics: false,
marketing: false,
functional: false,
});
const [hasResponded, setHasResponded] = useState(false);
useEffect(() => {
const stored = localStorage.getItem('cookie_consent');
if (stored) {
const data = JSON.parse(stored);
setConsent(data.preferences);
setHasResponded(true);
}
}, []);
const updateConsent = (updates: Partial<ConsentState>) => {
const newConsent = { ...consent, ...updates };
const record = {
preferences: newConsent,
timestamp: new Date().toISOString(),
version: '1.0',
};
localStorage.setItem('cookie_consent', JSON.stringify(record));
setConsent(newConsent);
setHasResponded(true);
// Відправити запис на сервер
fetch('/api/consent', {
method: 'POST',
body: JSON.stringify(record),
});
};
return (
<CookieConsentContext.Provider value={{ consent, updateConsent, hasResponded }}>
{children}
</CookieConsentContext.Provider>
);
}
// CookieBanner.tsx
export function CookieBanner() {
const { hasResponded, updateConsent } = useContext(CookieConsentContext);
const [showDetails, setShowDetails] = useState(false);
const [selections, setSelections] = useState({
analytics: false, marketing: false, functional: true,
});
if (hasResponded) return null;
return (
<div className="cookie-banner" role="dialog" aria-label="Cookie consent">
<p>Ми використовуємо cookies для покращення роботи сайту.</p>
{showDetails && (
<div className="cookie-categories">
<label>
<input type="checkbox" checked disabled />
Необхідні (завжди активні)
</label>
<label>
<input type="checkbox"
checked={selections.analytics}
onChange={e => setSelections(s => ({...s, analytics: e.target.checked}))}
/>
Аналітика
</label>
<label>
<input type="checkbox"
checked={selections.marketing}
onChange={e => setSelections(s => ({...s, marketing: e.target.checked}))}
/>
Маркетинг
</label>
</div>
)}
<div className="cookie-actions">
<button onClick={() => updateConsent({ analytics: false, marketing: false })}>
Тільки необхідні
</button>
<button onClick={() => setShowDetails(!showDetails)}>
Налаштувати
</button>
<button className="primary"
onClick={() => updateConsent({ analytics: true, marketing: true, functional: true })}>
Прийняти всі
</button>
{showDetails && (
<button onClick={() => updateConsent(selections)}>
Зберегти вибір
</button>
)}
</div>
</div>
);
}
Зберігання записів про згоду для compliance
Для compliance необхідно вести лог. Ми використовуємо окрему таблицю з ідентифікацією користувача (IP + fingerprint) та повною історією. Кожен запис містить timestamp, версію політики та список уподобань. Це доводить compliance при перевірці.
// migrations/create_consent_records_table.php
Schema::create('consent_records', function (Blueprint $table) {
$table->id();
$table->string('user_identifier'); // IP + fingerprint або user_id
$table->json('preferences');
$table->string('version');
$table->ipAddress('ip_address');
$table->timestamp('consented_at');
$table->timestamp('withdrawn_at')->nullable();
});
Що входить у роботу: етапи та deliverables
- Аудит поточних скриптів і cookies на сайті.
- Проектування архітектури consent-механізму (сервер + клієнт).
- Розробка кастомного або налаштування готового банера.
- Реалізація auto-blocking для трекінг-скриптів.
- Інтеграція з аналітикою та CRM.
- Документація та навчання команди.
- Пост-релізна підтримка протягом місяця.
Deliverables:
- Документація з архітектури та налаштування
- Вихідний код компонента та інтеграції
- Інструкція з оновлення політики cookies
- Навчання команди (1 година вебінару)
- Пост-релізна підтримка 1 місяць
Порівняння кастомного та готового рішення
| Параметр | Кастомна розробка | Готове рішення (Cookiebot, OneTrust) |
|---|---|---|
| Час впровадження | 3-5 днів | 1 день |
| Контроль над дизайном | Повний | Обмежений |
| Продуктивність | <100ms приросту LCP | +200ms LCP через зовнішні скрипти |
| Вартість | Індивідуально | Від €12/міс |
| Auto-blocking | Так | Так |
| Зберігання записів | Власна база | Вбудоване (обмежено за обсягом) |
Кастомна реалізація дає повний контроль над дизайном, логікою та продуктивністю. Для проєкту з унікальними вимогами ми рекомендуємо кастом: приріст LCP може становити до 200 мс.
Оцінка поточної ситуації
Проведіть аудит cookies за допомогою розширення «Cookie Scanner» або через консоль браузера. Якщо ви знайшли скрипти, які завантажуються без згоди, — час змінювати підхід. Отримайте консультацію з інтеграції — наші інженери проаналізують ваш сайт безкоштовно.