Создаем текстовое предупреждение об использовании куков на веб-сайте

Зачем нужны куки на веб-сайте

• Удобство / автозаполнение форм, сохранение настроек.
• Персонализация / рекомендации на основе поведения.
• Аналитика / подсчёт посетителей, анализ поведения.
• Безопасность / контроль сеансов входа.
• Реклама / показ релевантных объявлений.

Создаем текстовое предупреждение об использовании куков

На страницу вашего веб-сайта, перед закрывающим тегом </body> вставьте следующий код:

<div id="cookie-banner" class="hidden">
    Мы используем файлы cookie для улучшения вашего опыта на нашем сайте.<br>
    Продолжая просмотр, вы соглашаетесь с нашей <a href="#">Политикой конфиденциальности</a>.<br>
    <button onclick="acceptCookies()">Принять</button>
</div>

Далее необходимо подключить файл стилей style.css со следующим содержимым:

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding: 15px;
    text-align: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.hidden {
    display: none;
}
button {
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
    padding: 8px 16px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    border: none;
}
button:hover {
    background-color: #0056b3;
}

И перед закрывающим тегом </body> подключаем файл со скриптом script.js следующего содержания:

document.addEventListener("DOMContentLoaded", function () {
    const cookieBanner = document.getElementById('cookie-banner');
    
    // Проверяем наличие ранее сохраненного согласия
    if (!localStorage.getItem('cookiesAccepted')) {
        cookieBanner.classList.remove('hidden'); // Показываем баннер
    }
});

// Функция принятия согласия на использование cookies
function acceptCookies() {
    localStorage.setItem('cookiesAccepted', true); // Сохраняем согласие в Local Storage
    document.getElementById('cookie-banner').classList.add('hidden'); // Скрываем баннер
}

При первом посещении веб-сайта посетителем, он увидит информационный блок с текстом:

и кнопку "Принять", после нажатия на которую, данное сообщение закрывается и больше не отображается на веб-сайте.

Почему обязательно предупреждать

Закон требует информировать пользователя и получать согласие на сбор куки:

• GDPR (ЕС) — штрафы до 4 % годового оборота.
• ФЗ‑152 (РФ) — приравнивает куки к персональным данным.
• CCPA (США) — право на отказ от сбора данных.

Без предупреждения — риски:

• штрафы;
• блокировка сайта;
• судебные иски;
• ущерб репутации.

вернуться в раздел «Блог»