Содержание
Правовые основы
GDPR (Общий регламент по защите данных)
- Обязательное согласие пользователей при обработке данных, включая cookie, если сайт ориентирован на аудиторию ЕС.
- Необходимо предоставить информацию о целях сбора данных и ссылку на политику конфиденциальности.
Российский закон №152-ФЗ
- Статья 18 пункт 4 освобождает от необходимости получения явного согласия, если сайт разместил уведомление о сборе данных.
- Рекомендуется всё же получать согласие пользователя для минимизации юридических рисков.
Техническая реализация
HTML-структура
<!-- START Cookie-Alert -->
<div id="cookie_note">
<p>Продолжая пользоваться сайтом, вы соглашаетесь на обработку файлов cookie и других пользовательских данных в соответствии с <a href="/policy.html" target="_blank">политикой конфиденциальности</a>. Заблокировать использование cookies сайтом можно в настройках браузера.</p>
<button class="button cookie_accept btn btn-primary btn-sm">Понятно</button>
</div>
<!-- END Cookie-Alert -->CSS-стили
#cookie_note {
display: none;
position: fixed;
z-index: 100;
bottom: 15px;
left: 50%;
max-width: 90%;
transform: translateX(-50%);
padding: 20px;
background-color: white;
border-radius: 4px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}
#cookie_note p {
margin: 0;
font-size: 0.7rem;
text-align: left;
color: black;
}
#cookie_note .btn-sm {
display: block;
margin: 0 auto;
}
.cookie_accept {
width: 20%;
}
#cookie_note.show {
display: flex;
}Примечание. Некоторые скрывают всплывающее окно на мобильном, если вы один из них, тогда замените последние правила CSS:
#cookie_note.show {
display: flex;
}на
@media (min-width: 576px) {
#cookie_note.show {
display: flex;
}
}
@media (max-width: 575px) {
#cookie_note.show {
display: none; /* Скрыть уведомление на мобильных */
}
}JavaScript-логика
<script>
// Установка cookie с возможностью указания срока
function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// Получение значения cookie по имени
function getCookie(name) {
let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
// Основная функция проверки наличия cookie
function checkCookies() {
const cookieNote = document.getElementById('cookie_note');
const cookieBtnAccept = cookieNote?.querySelector('.cookie_accept');
// Проверка наличия cookie
if (!getCookie('cookies_policy') && cookieNote && cookieBtnAccept) {
cookieNote.classList.add('show');
// Обработчик клика на кнопку согласия
cookieBtnAccept.addEventListener('click', function () {
setCookie('cookies_policy', 'true', 90); // Срок хранения 3 месяца (90 дней)
cookieNote.classList.remove('show');
});
}
}
// Инициализация
document.addEventListener('DOMContentLoaded', checkCookies);
</script>Как установить на сайт
- Вставьте HTML-блок в конец
<body>шаблона сайта - Добавьте CSS в файл стилей или тег
<style>в<head> - Подключите JavaScript-скрипт в
<script>перед закрытием</body> - Создайте страницу политики конфиденциальности (
/policy.html) с подробной информацией о сборе данных
Возможные доработки
- Поддержка темного режима . Добавьте класс
dark-themeи соответствующие стили. - Кнопка закрытия . Реализуйте крестик для принудительного скрытия уведомления.
- Анализ геолокации . Показывать уведомление только пользователям из ЕС/РФ.
- Логирование согласий . Отправка данных о согласии в систему аналитики.
Заключение
Представленное решение соответствует требованиям законодательства и обеспечивает баланс между юридической безопасностью и удобством пользователей. Изменение срока хранения cookie на 3 месяца демонстрирует приверженность принципам минимального сбора данных и повышает доверие аудитории.
