Как разместить сообщение о конфиденциальности и cookie на сайте
Последнее время часто прилетает задачи о размещении плашки cookie на сайте.
Это можно сделать, разместив страницу кусок из Html , Javascript и Css кода.
Файлы cookie — это небольшие текстовые файлы, которые сохраняются на устройстве пользователя при посещении веб-сайта. Cookies могут быть использованы для запоминания предпочтений пользователя, аналитики и других целей.
Лучше разместить сообщение внизу страницы – это стандартное место для уведомлений, которые не отвлекают от основного контента.
Кусок html кода, разместите в нем текст сообщения :
<div id="cookie-banner" class="cookie-banner">
<p>Продолжая просмотр этого сайта, Вы соглашаетесь на обработку файлов cookie в <a href="https://site.com/" target="_blank">соответствии с политикой использования</a> файлов cookie.</p>
<button id="accept-cookie">Принять</button>
<button id="decline-cookie">Отклонить</button>
</div>Javascript код . Параметр 10 * 24 * 60 * 60 * 1000 отвечает за количество дней, которое сообщение не будет показываться после нажатия кнопки Принять . В данном случае 10 дней :
<script>
if (!localStorage.getItem('cookies-accepted')) {
document.getElementById('cookie-banner').style.display = 'block';
}
document.getElementById('accept-cookie').addEventListener('click', function () {
localStorage.setItem('cookies-accepted', 'true');
document.getElementById('cookie-banner').style.display = 'none';
});
document.getElementById('decline-cookie').addEventListener('click', function () {
localStorage.setItem('cookies-accepted', 'false');
document.getElementById('cookie-banner').style.display = 'none';
});
if (localStorage.getItem('cookies-accepted') === 'true') {
setTimeout(function () {
localStorage.removeItem('cookies-accepted');
}, 10 * 24 * 60 * 60 * 1000);
}
</script>Css код . Стили , которые вы можете подредактировать для себя :
<style>
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
color: white;
padding: 15px;
text-align: center;
z-index: 9999;
display: none;
}
.cookie-banner button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
}
.cookie-banner button:hover {
background-color: #45a049;
}
.cookie-banner a {
color: #4CAF50;
text-decoration: none;
}
.cookie-banner a:hover {
text-decoration: underline;
}
</style>Вот общий код , который можно разместить внизу страницы , перед закрывающимся тэгом body . Отредактируйте для своего сайта.
<div id="cookie-banner" class="cookie-banner">
<p>Продолжая просмотр этого сайта, Вы соглашаетесь на обработку файлов cookie в <a href="https://site.com/" target="_blank">соответствии с политикой использования</a> файлов cookie.</p>
<button id="accept-cookie">Принять</button>
<button id="decline-cookie">Отклонить</button>
</div>
<style>
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
color: white;
padding: 15px;
text-align: center;
z-index: 9999;
display: none;
}
.cookie-banner button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
}
.cookie-banner button:hover {
background-color: #45a049;
}
.cookie-banner a {
color: #4CAF50;
text-decoration: none;
}
.cookie-banner a:hover {
text-decoration: underline;
}
</style>
<script>
if (!localStorage.getItem('cookies-accepted')) {
document.getElementById('cookie-banner').style.display = 'block';
}
document.getElementById('accept-cookie').addEventListener('click', function () {
localStorage.setItem('cookies-accepted', 'true');
document.getElementById('cookie-banner').style.display = 'none';
});
document.getElementById('decline-cookie').addEventListener('click', function () {
localStorage.setItem('cookies-accepted', 'false');
document.getElementById('cookie-banner').style.display = 'none';
});
if (localStorage.getItem('cookies-accepted') === 'true') {
setTimeout(function () {
localStorage.removeItem('cookies-accepted');
}, 10 * 24 * 60 * 60 * 1000);
}
</script>Для упрощения процесса размещения уведомлений и управления cookies на вашем сайте, можно использовать готовые решения. Существуют плагины и сторонние сервисы, которые помогут вам автоматически создавать уведомления о конфиденциальности и cookie. Вот несколько популярных инструментов:
- Cookiebot — сервис для соблюдения GDPR, который автоматически собирает согласие пользователей на cookies.
- OneTrust — платформа для управления согласием пользователей и соблюдения стандартов защиты данных.
- Termly — сервис, предоставляющий инструменты для создания уведомлений и политики конфиденциальности.
Если вы хотите заказать услугу по размещению cookie на вашем сайте, вы может связаться со мной через Контакты , а также заказать различные услуги.
Выглядит такое сообщение примерно так :
