This article is also available in:
Примечание: статья подскажет, как добавить баннер глобально на сайт. Если вы хотите добавить баннер на определенную страницу, следуйте инструкциям тут: Добавление на страницу баннера, предупреждающего о сборе Cookies.

Каждой компании необходимо иметь баннер, предупреждающий о сборе Cookies, чтобы поддерживать политику конфиденциальности на сайте. Исходя из Общих положений о защите данных (General Data Protection Regulation), вы должны получить согласие пользователей, прежде чем использовать любые файлы cookie, кроме строго необходимых. Вы также можете посмотреть наши GPDR здесь.

Важно: данная опция доступна только для сайтов с ПРО-подпиской.
Чтобы приступить к добавлению баннера, содержащего Cookie Policy, перейдите в настройки (Settings) сайта.


Зайдите во вкладку Custom code:



Вставьте ниже описанный код в раздел Before </BODY> .

<div class="cookie_banner">
<div class="cookie_content">
<div class="cookie_text_left">
<span class="cookie_text ui-text"> We use cookies to impove browsing experience on our site. By continuing to use the site, you agree to our Cookie Policy. </span>
</div>
<div class="cookie_button">
<a class="button_ok ui-button ui-button--primary-dark ui-button--size-sm">
<span class="cookie__border"> </span>
<span class="cookie_button_content"> Ok </span>
</a>
</div>
</div>
</div>
<script>
window.onload = function() {
var block = document.querySelector(".cookie_banner");
var btn = document.querySelector(".cookie_banner .button_ok");
var showCookiePolicy = getCookie('agreementState') === 'agreed' ? false : true;
if (showCookiePolicy === true) {
console.log('first paint' + getCookie('agreementState'))
block.style.display = 'flex';
} else {
console.log('first paint' + getCookie('agreementState'))
block.style.display = 'none';
}
btn.addEventListener('click', function(e) {
e.preventDefault();
setCookie('agreementState', 'agreed');
showCookiePolicy = false;
if (!showCookiePolicy) {
console.log('click repaint' + getCookie('agreementState'))
block.style.display = 'none';
}
});
function getCookie(name) {
var value = '; ' + document.cookie;
var parts = value.split('; ' + name + '=');
if (parts.length == 2) return parts.pop().split(';').shift();
}
function setCookie(name,value,days) {
var expires = '';
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = '; expires=' + date.toUTCString();
}
document.cookie = name + '=' + (value || '') + expires + '; path=/';
}
}
</script>



Подсказка: Чтобы изменить текстовое содержимое баннера, введите необходимый текст после <span class="cookie_text ui-text">.

После этого, стилизируйте выбранный блок с помощью данного фрагмента кода. Вставьте его в раздел CSS.

.cookie_banner{
display: none;
position: fixed;
height: auto;
bottom: 0;
width: 100%;
margin: 0 auto;
z-index: 200;
padding: 20px;
background-color: #212121;
}

.button_ok{
cursor: pointer;
align-self: center;
text-decoration: none;
}

.cookie_text_left{
display: flex;
width: 80%;
}

.cookie_text{
align-self: center;
text-align: left;
color: #fff;
line-height: 24px;
}

.cookie_button{
display: flex;
width: 20%;
justify-content: center;
}

.cookie_content{
width: 100%;
max-width: 1200px;
display: flex;
margin: 0 auto;
}

@media(max-width:767px){

.cookie_text_left{
width: 100%;
justify-content: center;
}

.cookie_text{
line-height: 20px;
text-align: center;
padding-top: 0px;
padding-bottom: 5px;
}

.cookie_button{
width: 100%;
justify-content: center;
margin: 15px 0px 6px 0px
}

.cookie_content{
width: 100%;
flex-direction: column !important;
}
}

@media(max-width:374px){

.cookie_text{
font-size: 14px !important;
}

.cookie_button{
margin: 15px 0px 4px 0px
}
}




Подсказка: вы можете заменить цвет текста в баннере на любой другой, изменив #fff на другой код цвета. Кроме этого, если вы хотите поменять фон баннера, замените #212121 нужным кодом цвета в скрипте выше.

Нажмите на кнопку 'Save', чтобы сохранить интеграции.



Готово! Откройте опубликованный сайт, чтобы убедиться, что баннер отрабатывает как требуется.
Была ли эта статья полезна?
отменить
Спасибо!