Условия cookie на сайте: как создать всплывающее окно с предупреждением
Сайты, использующие файлы cookie, обязаны предупредить пользователя об их использовании в соответствии с законодательством (например, GDPR в Европе). Вывод всплывающего окна с предупреждением позволяет проинформировать пользователя и получать его согласие. В этой статье мы создадим простое окно с предупреждением про условия cookie на сайте, которое автоматически скрывается, если пользователь уже дал согласие. Посмотрим также как это можно реализовать с помощью JavaScript-кода.
Почему важно предупреждать об использовании cookie?
Cookie помогают улучшить взаимодействие пользователя с сайтом, запоминая определенные действия, аналитические данные и многое другое. При этом они могут собирать личные данные, что делает обязательным уведомление и получение согласия посетителей.
Создание всплывающего окна
HTML-разметка окна
Начнем с базовой структуры:
<div class="cookie-warning" role="dialog" aria-labelledby="cookie-title" aria-describedby="cookie-desc">
<h2 id="cookie-title" class="visually-hidden">Уведомление о cookie</h2>
<p id="cookie-desc">Этот сайт использует cookie для улучшения работы. Продолжая, вы соглашаетесь с <a href="#" style="color: #1e90ff;">политикой использования cookie</a>.</p>
<div class="cookie-buttons">
<button class="cookie-btn cookie-btn--accept">Принять</button>
<button class="cookie-btn cookie-btn--decline">Отклонить</button>
</div>
</div>CSS для оформления
Добавим немного простых стилей для этог примера:
.cookie-warning {
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
position: fixed;
bottom: 20px;
left: 20px;
background: #fff;
color: #333;
padding: 15px;
border-radius: 5px;
z-index: 1000;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
max-width: 400px;
border:1px solid #ccc;
}
.cookie-warning.visible {
opacity: 1;
transform: translateY(0);
}
.cookie-buttons {
display: flex;
gap: 10px;
margin-top: 10px;
}
.cookie-btn {
background: #1e90ff;
color: #fff;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 3px;
font-size: 14px;
}
.cookie-btn--decline {
background: #6c757d;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}JavaScript для управления окном
Чтобы показать условия cookie на сайте, и скрыть в случае если пользователь уже нажимал на кнопку «Принять» используем следующий код.
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
function setCookie(name, value, days) {
const expires = new Date();
expires.setDate(expires.getDate() + days);
document.cookie = `${name}=${value}; path=/; expires=${expires.toUTCString()}`;
}
function showCookieBanner() {
document.querySelector('.cookie-warning').classList.add('visible');
}
function hideCookieBanner() {
document.querySelector('.cookie-warning').classList.remove('visible');
}
function handleCookieConsent(accepted) {
setCookie('cookiewarning', accepted ? 'accepted' : 'declined', 365);
hideCookieBanner();
}
document.addEventListener('DOMContentLoaded', () => {
if (!getCookie('cookiewarning')) {
showCookieBanner();
}
document.querySelector('.cookie-btn--accept').addEventListener('click', () => handleCookieConsent(true));
document.querySelector('.cookie-btn--decline').addEventListener('click', () => handleCookieConsent(false));
});Добавление скрипта на сайт
Разместите этот JavaScript-код после html кода формы или внизу html документа, либо подключите отдельный файл.
Как это работает?
- Проверка существующего cookie:
При загрузке страницы выполняется функцияcheckCookie(). Если cookie с именемcookiewarningсуществует, окно с предупреждением скрывается. - Установка cookie при согласии:
Когда пользователь нажимает кнопку «Принять», создается cookie с именемcookiewarning - Повторный показ:
Если cookie не установлено (например, при первом посещении или после его удаления), окно с предупреждением будет отображаться.
Улучшение функционала
Добавим адаптивности
@media (max-width: 768px) {
.cookie-warning {
max-width: 100%;
bottom: 10px;
left:0;
font-size: 14px;
text-align: center;
}
.cookie-buttons {
flex-direction: column;
}
}Локализация текста
Если ваш сайт работает на нескольких языках, добавьте возможность изменять текст в зависимости от языка. Так например можно сделать если вы используете Polylang
<?php
$lang=get_bloginfo("language");
if($lang == 'ru-RU'){
echo 'Данный сайт использует cookie для улучшения работы сайта.';
}else{
echo 'This website uses cookies to improve your experience.';
}
?>Cookie являются важной частью современных веб-сайтов, обеспечивая удобство, безопасность и персонализацию.
Наиболее распространенные случаи их использования:
- Запоминание действий пользователя
- Авторизация и управление сессиями
- Аналитика и сбор статистики
- В корзине магазина и при оформлении заказа
- Персонализация рекламы
Добавление всплывающего окна с предупреждением о cookie — это не только выполнение требований законодательства, но и забота о посетителе, демонстрация прозрачности ресурса. Реализовать этот функционал можно быстро и легко, используя выше изложенный код.
Демонстрация, скачать файл с кодом
Не пропустите эти статьи
Анимация details: два подхода на CSS и JavaScript
С помощью элемента details в HTML удобно реализовать раскрывающиеся блоки, такие как FAQ или аккордеоны.…
Как обрезать текст на CSS: техники и примеры
В процессе верстки блоков контента часто требуется соответствие внешнего интерфейса дизайну макета сайта. Это часто…
Emmet в VS Code для HTML
Emmet — это бесплатный инструмент, напоминающий авто подстановку слов в вашем телефоне, позволяющий значительно ускорить…
Как использовать псевдоэлементы с элементами input after и before
.Псевдоэлементы ::before и ::after часто используют для декорации элементов в html тегах, чтобы избежать нагромождения…
Добавить комментарий