452 слова | 2 минуты

Cookie Consent System

Полнофункциональная система управления согласием на использование cookie с поддержкой категорий, skeleton loader и встроенной консолью для отслеживания всех действий.

Демо версия

Обзор

Это система управления согласием на использование cookie для веб-страниц. Система позволяет пользователям контролировать, какие типы cookie могут быть использованы на сайте, с соблюдением требований GDPR и других законов о защите данных.

Ключевые возможности

  • 4 категории cookie (Необходимые, Функциональные, Аналитические, Маркетинговые)
  • Skeleton Loader - визуальный эффект загрузки модального окна
  • Консоль логирования - отслеживание всех действий в реальном времени
  • LocalStorage - сохранение настроек пользователя
  • Условная загрузка скриптов - активация только разрешенных категорий
  • Адаптивный дизайн - работает на всех устройствах
  • Повторное открытие настроек - кнопка управления в углу экрана
  • Сброс настроек - возврат к начальному состоянию

Функционал

1. Категории Cookie

  • Необходимые (Necessary)

    • Статус: Всегда активны (нельзя отключить)
    • Назначение: Базовая функциональность сайта
    • Примеры: Сессии, аутентификация, безопасность

  • Функциональные (Functional)

    • Статус: Опционально
    • Назначение: Расширенные возможности и предпочтения
    • Примеры: Язык интерфейса, тема оформления, настройки UI

  • Аналитические (Analytics)

    • Статус: Опционально
    • Назначение: Сбор статистики и анализ поведения
    • Примеры: Google Analytics, Yandex Metrika, heatmaps

  • Маркетинговые (Marketing)

    • Статус: Опционально
    • Назначение: Таргетированная реклама и ретаргетинг
    • Примеры: Facebook Pixel, Google Ads, рекламные сети

2. Логика работы

Первый визит (нет согласия)

Загрузка страницы
    ↓
Проверка localStorage → НЕТ данных
    ↓
Показать overlay с блюром
    ↓
Skeleton Loader (1.5 сек)
    ↓
Модальное окно "Мы используем cookie"
    ↓
Пользователь выбирает:
    ├─→ "Принять все" → Все категории = TRUE
    └─→ "Настроить" → Выбор отдельных категорий
    ↓
Сохранение в localStorage
    ↓
Активация разрешенных скриптов
    ↓
Закрытие модального окна

Повторный визит (есть согласие)

Загрузка страницы
    ↓
Проверка localStorage → ЕСТЬ данные
    ↓
Загрузка сохраненных настроек
    ↓
Автоматическая активация скриптов
    ↓
Overlay остается скрытым
    ↓
Страница готова к работе

Изменение настроек

Клик на "Настройки Cookie"
    ↓
Показать overlay
    ↓
Контент показывается БЕЗ skeleton (уже есть согласие)
    ↓
Открыть Settings Modal
    ↓
Изменить чекбоксы
    ↓
"Сохранить" → Обновление localStorage + активация скриптов
"Сбросить" → Удаление данных + перезагрузка страницы

3. API и методы

Класс CookieConsentManager

Основные методы:

// Инициализация
new CookieConsentManager()

// Проверка наличия согласия
cookieManager.hasConsent() // → true/false

// Проверка разрешения категории
cookieManager.isAllowed('analytics') // → true/false

// Принять все cookie
cookieManager.acceptAll()

// Обновить настройки
cookieManager.update({
    functional: true,
    analytics: false,
    marketing: true
})

// Показать/скрыть модальное окно
cookieManager.showOverlay()
cookieManager.hideOverlay()

// Открыть настройки
cookieManager.showSettings()

// Сбросить настройки
cookieManager.resetSettings()

Структура сохраненных данных:

localStorage.getItem('cookieConsent')
// Возвращает:
{
    necessary: true,     // Всегда true
    functional: true,    // Выбор пользователя
    analytics: false,    // Выбор пользователя
    marketing: true,     // Выбор пользователя
    timestamp: "2024-11-14T15:30:00.000Z"
}

4. Интеграция скриптов

Блокировка встроенных скриптов:

<!-- НЕ ЗАГРУЖАЕТСЯ по умолчанию -->
<script 
    type="text/plain" 
    data-cookie-category="analytics" 
    data-script-name="Google Analytics">

    // Код Google Analytics
    console.log('Google Analytics загружен');
</script>

Блокировка внешних скриптов:

<script 
    type="text/plain" 
    data-cookie-category="marketing" 
    data-script-name="Facebook Pixel"
    data-src="https://connect.facebook.net/en_US/fbevents.js">
</script>

Блокировка iframe:

<iframe 
    data-cookie-category="marketing"
    data-src="https://www.youtube.com/embed/VIDEO_ID"
    width="560" 
    height="315">
</iframe>

Блокировка изображений:

<img 
    data-cookie-category="marketing"
    data-src="https://example.com/tracking-pixel.gif"
    alt="Tracking pixel">

После получения согласия скрипты автоматически активируются:

// type="text/plain" → type="text/javascript"
// Скрипт начинает выполняться

5. Встроенная консоль

Типы сообщений:

  • Информационное сообщение
  • Успешная операция
  • Предупреждение
  • Загрузка скрипта
  • Сохранение данных
  • Изменение настроек
  • Сброс
  • Разблокировка категории

Примеры логов:

[15:30:25]: Требуется согласие на использование cookie
[15:30:27]: Модальное окно cookie загружено
[15:30:35]: Пользователь принял все cookie
[15:30:35]: Категория "necessary" разблокирована
[15:30:35]: Загружен скрипт: Необходимый скрипт
[15:30:35]: Категория "functional" разблокирована
[15:30:35]: Загружен скрипт: Preferences Manager

Технические детали

Используемые технологии

  • Bootstrap 5 - для UI компонентов
  • Vanilla JavaScript - без внешних зависимостей
  • LocalStorage API - для хранения настроек
  • CSS3 Animations - для skeleton loader и эффектов

Архитектура кода

Код организован в объектно-ориентированном стиле:

  • CookieConsentManager - главный класс управления
  • logging() - функция логирования событий
  • Event Handlers - обработчики событий для кнопок и форм

Хранение данных

Что хранится в localStorage:

Ключ: 'cookieConsent'
Значение: JSON с настройками пользователя
Размер: ~150 байт
Срок хранения: Бессрочно (до очистки браузера)

GDPR совместимость

  • Пользователь может отказаться от всех необязательных cookie
  • Настройки можно изменить в любой момент
  • Скрипты не загружаются до получения согласия
  • Прозрачная информация о каждой категории
  • Возможность полного сброса настроек

Примеры использования

Пример 1: Проверка разрешения перед действием

if (window.CookieConsent.isAllowed('analytics')) {
    // Загрузить Google Analytics
    gtag('config', 'GA_MEASUREMENT_ID');
} else {
    console.log('Аналитика заблокирована пользователем');
}

Пример 2: Динамическое обновление настроек

// Разрешить все категории программно
window.CookieConsent.update({
    functional: true,
    analytics: true,
    marketing: true
});

Пример 3: Собственное логирование

// Используйте функцию logging() для добавления записей в консоль
logging('Пользовательское событие произошло');
logging(`Значение: ${someValue}`);

Пример 4: Проверка состояния при загрузке

document.addEventListener('DOMContentLoaded', function() {
    if (window.CookieConsent.hasConsent()) {
        console.log('Пользователь уже дал согласие');

        // Загрузить зависимые компоненты
        initializeAnalytics();
        initializeMarketing();
    } else {
        console.log('Ожидание согласия пользователя');
    }
});

Настройка и кастомизация

Изменение времени skeleton loader

// В методе showOverlay()
setTimeout(() => {
    document.getElementById('modalSkeleton').style.display = 'none';
    document.getElementById('modalContent').style.display = 'block';
    logging('Модальное окно cookie загружено');
}, 1500); // ← Измените значение (в миллисекундах)

Изменение цветов

/* Основной цвет кнопок */
.btn-cookie-primary {
    background: #0066cc; /* ← Ваш цвет */
    color: white;
}

/* Цвет overlay */
.overlay {
    background: rgba(0, 0, 0, 0.5); /* ← Прозрачность фона */
    backdrop-filter: blur(8px);     /* ← Размытие */
}

/* Цвет консоли */
.console {
    background-color: #1e1e1e;
    color: #00ff00; /* ← Цвет текста консоли */
}

Изменение текста

Отредактируйте содержимое модальных окон в HTML:

<h2>Мы используем cookie</h2>
<p>
    Ваш текст о политике cookie...
</p>

Частые вопросы

Почему skeleton loader появляется каждый раз?

Проверьте, что в HTML overlay имеет класс hidden по умолчанию:

<div id="overlay" class="overlay hidden">

Как изменить время показа skeleton?

В методе showOverlay() измените таймаут:

setTimeout(() => { ... }, 1500); // миллисекунды

Скрипты не активируются после согласия

Убедитесь, что:

  • Атрибут type="text/plain" установлен
  • Атрибут data-cookie-category соответствует категории
  • Категория разрешена в настройках

Как сбросить настройки для тестирования?

Используйте кнопку "Сбросить" или выполните в консоли:

localStorage.removeItem('cookieConsent');
location.reload();

Как проверить localStorage?

В консоли браузера:

console.log(localStorage.getItem('cookieConsent'));

Как очистить данные вручную?

В консоли браузера:

localStorage.removeItem('cookieConsent');
location.reload();

Как проверить активированные скрипты?

В консоли браузера:

console.log(window.CookieConsent.activatedScripts);

Отладка

Проверка localStorage:

// В консоли браузера
console.log(localStorage.getItem('cookieConsent'));

Очистка данных вручную:

// В консоли браузера
localStorage.removeItem('cookieConsent');
location.reload();

Проверка активированных скриптов:

// В консоли браузера
console.log(window.CookieConsent.activatedScripts);
Следующая
Как создать и использовать popup-окна на сайте