Гайд для веб-разработчика: минималистичный скрипт уведомления о файлах cookies

В этом руководстве представлен простой инструмент для информирования пользователей о использовании cookies на сайте. Скрипт реализован на чистом JavaScript без использования сторонних библиотек, что упрощает его интеграцию. По умолчанию уведомление скрыто на мобильных устройствах за счет CSS-стилей.

Как добавить код на сайт?

Просто вставьте этот HTML-блок в нужное место вашей страницы (рекомендуется перед закрывающим тегом </body>

<!-- Блок уведомления о cookies -->
<div id="cookie_note">
    <p>Для корректной работы сайта мы используем файлы cookies. Продолжая использование ресурса, вы соглашаетесь с правилами их обработки. Подробнее о политике конфиденциальности, сборе данных и использовании cookies читайте <a href="/policy.html" target="_blank">здесь</a>.</p>
    <button class="button cookie_accept btn btn-primary btn-sm">Согласен</button>
</div>

JavaScript-логика работы

Скрипт отвечает за проверку согласия пользователя и управление отображением уведомления. Вот ключевые компоненты:

// Функция для установки cookie
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // Конвертация дней в миллисекунды
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = `%%%LATEX_BLOCK_0%%%{value || ""}%%%LATEX_BLOCK_1%%%&') + "=([^;]*)");
    const match = document.cookie.match(regex);
    return match ? decodeURIComponent(match[1]) : undefined;
}

// Основная функция проверки согласия
function checkCookies() {
    const cookieBanner = document.getElementById('cookie_note');
    const acceptButton = cookieBanner.querySelector('.cookie_accept');

    // Показываем уведомление, если согласие не дано
    if (!getCookie('cookies_policy')) {
        cookieBanner.classList.add('show');
    }

    // Обработчик клика по кнопке "Согласен"
    acceptButton.addEventListener('click', () => {
        setCookie('cookies_policy', 'true', 365); // Кука действует 1 год
        cookieBanner.classList.remove('show'); // Скрываем уведомление
    });
}

// Запускаем проверку при загрузке страницы
checkCookies();

CSS-стили для оформления

Стили настраивают позиционирование, внешний вид и адаптивность уведомления. Изначально блок скрыт на мобильных устройствах:

#cookie_note {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 100; /* Гарантирует отображение поверх других элементов */
    bottom: 15px;
    left: 50%;
    max-width: 90%; /* Адаптация под узкие экраны */
    transform: translateX(-50%); /* Центрирование */
    padding: 20px;
    background-color: #ffffff;
    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: #000000;
}

#cookie_note .btn-sm {
    display: block;
    margin: 10px auto 0; /* Отступ сверху */
}

.cookie_accept {
    width: 20%; /* Ширина кнопки */
}

/* Адаптация под разные экраны */
@media (min-width: 576px) { /* Для планшетов и десктопов */
    #cookie_note.show {
        display: flex; /* Выравнивание содержимого по горизонтали */
        align-items: center; /* Центрирование вертикально */
        gap: 15px; /* Расстояние между текстом и кнопкой */
    }
}

@media (max-width: 575px) { /* Для мобильных */
    #cookie_note.show {
        display: none; /* Скрыто по умолчанию */
    }
}

Особенности скрипта

• Нет зависимостей: Работает на чистом JS, не требует подключения jQuery или других библиотек.
• Адаптивность: Автоматически подстраивается под размер экрана (скрыто на мобильных, показано на десктопах).
• Простота настройки: Легко изменить текст, ссылку на политику или стили под дизайн сайта.
• Соответствие GDPR: Корректно работает с политикой cookies — уведомление появляется только при отсутствии согласия, которое фиксируется в cookie на год.

Для использования достаточно скопировать HTML, JS и CSS-код в свой проект, а при необходимости адаптировать стили и тексты под ваши нужды.

Пример работы