Кнопка «Управлять cookie» — гайд по настройке

Зачем нужна кнопка «Настроить cookie»

Кнопка «Управлять cookie» или «Настроить» — это не просто требование закона, а инструмент повышения доверия пользователей. Согласно 152-ФЗ и европейскому GDPR, посетители должны иметь возможность выбирать, какие категории файлов cookie разрешить.

Исследования показывают: сайты с понятными настройками cookie получают на 23% больше добровольных согласий, чем те, где есть только кнопки «Принять всё» и «Отклонить».

Требования 152-ФЗ к кнопке настроек

По российскому законодательству кнопка «Настроить cookie» должна соответствовать следующим требованиям:

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

UX-принципы для кнопки «Настроить»

Расположение и дизайн

Кнопка «Настроить cookie» не должна быть менее заметной, чем «Принять всё». Лучшие практики:

• Одинаковый размер и стиль с основными кнопками
• Нейтральные цвета (серый, белый контур) vs. акцентный для «Принять»
• Расположение слева от кнопки «Принять всё»
• На мобильных — отдельная строка или столбец

Категории cookie в настройках

Современный подход — разделение на 3-4 основные категории:

Готовый HTML-код кнопки настроек

Пример простой реализации кнопки «Настроить cookie» с модальным окном:

<!-- Cookie Banner -->
<div id="cookieBanner" class="cookie-banner">
  <div class="cookie-content">
    <p>Мы используем cookie для улучшения работы сайта.</p>
    <div class="cookie-buttons">
      <button onclick="openCookieSettings()" class="btn-secondary">
        Настроить
      </button>
      <button onclick="acceptAll()" class="btn-primary">
        Принять всё
      </button>
    </div>
  </div>
</div>

<!-- Settings Modal -->
<div id="cookieModal" class="cookie-modal hidden">
  <div class="modal-content">
    <h3>Настройки cookie</h3>
    
    <div class="cookie-category">
      <label class="cookie-toggle">
        <input type="checkbox" checked disabled>
        <span>Необходимые cookie</span>
      </label>
    </div>
    
    <div class="cookie-category">
      <label class="cookie-toggle">
        <input type="checkbox" id="analytics">
        <span>Аналитические cookie</span>
      </label>
    </div>
    
    <div class="cookie-category">
      <label class="cookie-toggle">
        <input type="checkbox" id="marketing">
        <span>Маркетинговые cookie</span>
      </label>
    </div>
    
    <div class="modal-buttons">
      <button onclick="saveSettings()" class="btn-primary">
        Сохранить настройки
      </button>
    </div>
  </div>
</div>
        

JavaScript для управления настройками

function openCookieSettings() {
  document.getElementById('cookieModal').classList.remove('hidden');
}

function saveSettings() {
  const analytics = document.getElementById('analytics').checked;
  const marketing = document.getElementById('marketing').checked;
  
  // Сохраняем выбор
  localStorage.setItem('cookieSettings', JSON.stringify({
    necessary: true,
    analytics: analytics,
    marketing: marketing,
    timestamp: Date.now()
  }));
  
  // Загружаем соответствующие скрипты
  if (analytics) {
    loadAnalytics();
  }
  if (marketing) {
    loadMarketing();
  }
  
  // Скрываем баннер и модальное окно
  document.getElementById('cookieBanner').style.display = 'none';
  document.getElementById('cookieModal').classList.add('hidden');
}

function loadAnalytics() {
  // Загрузка Яндекс.Метрики или Google Analytics
  console.log('Аналитические скрипты загружены');
}

function loadMarketing() {
  // Загрузка маркетинговых пикселей
  console.log('Маркетинговые скрипты загружены');
}
        

Типичные ошибки при создании кнопки настроек

1. Кнопка-обманка

Ошибка: Кнопка «Настроить» выглядит как ссылка или спрятана мелким шрифтом.
Решение: Одинаковый визуальный вес с кнопкой «Принять».

2. Слишком сложные настройки

Ошибка: 10+ переключателей для разных сервисов.
Решение: Максимум 4 категории с понятными названиями.

3. Отсутствие описаний

Ошибка: Только названия категорий без объяснения их назначения.
Решение: Краткое описание (1-2 предложения) под каждой категорией.

4. Плохая мобильная адаптация

Ошибка: Кнопки «Настроить» не видно на смартфоне.
Решение: Вертикальное расположение кнопок, увеличенные области касания.

Готовые решения от LoveCookie

Наш сервис автоматически генерирует полностью готовый код кнопки «Настроить cookie» с учётом всех требований 152-ФЗ:

• 🎨 Адаптивный дизайн — красиво выглядит на всех устройствах
• ⚖️ Юридическая корректность — соответствие российскому и европейскому праву
• 📊 Логирование согласий — автоматическое сохранение выборов пользователей
• ⚡ Лёгкая интеграция — просто вставить код перед </body>
• 🔧 Гибкие настройки — можно изменить категории под ваш сайт
• 🚀 Быстрая загрузка — код весит меньше 5 КБ

Аналитика использования кнопки настроек

LoveCookie предоставляет подробную статистику взаимодействий с кнопкой «Настроить»:

• Сколько пользователей открывают настройки
• Какие категории чаще всего отключают
• Процент согласий по каждой категории
• Динамика изменений с течением времени

Эти данные помогают оптимизировать UX и увеличивать долю добровольных согласий.

Интеграция с популярными CMS

WordPress

Для WordPress код кнопки настроек можно добавить через:

• Виджет «HTML-код» в футере
• Файл footer.php активной темы
• Плагин для вставки кода в <head>

Tilda

В Tilda используйте блок T123 «HTML-код» или вставьте в настройки сайта → Футер.

1С-Битрикс

Для Битрикс добавьте код в шаблон сайта или используйте компонент «Пользовательский HTML».

Оптимизация конверсии кнопки

Несколько A/B-тестов помогут найти оптимальную формулировку:

Техническая реализация блокировки скриптов

Важная часть кнопки «Настроить» — это блокировка ненужных скриптов до получения согласия:

// Проверяем согласие перед загрузкой скриптов
function checkConsent(category) {
  const settings = JSON.parse(localStorage.getItem('cookieSettings') || '{}');
  return settings[category] === true;
}

// Условная загрузка Яндекс.Метрики
if (checkConsent('analytics')) {
  (function(m,e,t,r,i,k,a){
    // код Яндекс.Метрики
  })(window,document,"script","dataLayer","YM_COUNTER_ID");
}

// Условная загрузка Facebook Pixel
if (checkConsent('marketing')) {
  !function(f,b,e,v,n,t,s){
    // код Facebook Pixel
  }(window,document,'script','fbq');
}
        

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

Обязательно ли делать кнопку «Настроить»?

Да, согласно 152-ФЗ пользователь должен иметь возможность управлять категориями персональных данных, включая cookie.

Можно ли скрыть кнопку мелким шрифтом?

Нет, это нарушение принципа информированного согласия. Кнопка должна быть заметной.

Сколько категорий cookie делать?

Оптимально 3-4 категории: необходимые, аналитические, маркетинговые, функциональные.

Нужно ли переспрашивать согласие?

Да, рекомендуется обновлять согласие каждые 12 месяцев или при изменении политики cookie.

Заключение

Правильно настроенная кнопка «Управлять cookie» — это баланс между требованиями закона и удобством пользователей. Она должна быть:

• Заметной — равный статус с кнопкой «Принять всё»
• Понятной — простые категории с описаниями
• Функциональной — реально блокирует ненужные скрипты
• Быстрой — не замедляет загрузку сайта

Использование готовых решений, таких как LoveCookie, экономит время на разработку и гарантирует соответствие всем требованиям российского законодательства.