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

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

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



Когда появится список всех блоков, введите в поисковой строке 'wireframe-series-6-cta' и кликните на нужный блок:



Затем, перейдите в настройки блока (Block Settings) и поставьте 0px для верхних и нижних отступов.



Наполните блок нужной вам информацией о сборе Cookies и не забудьте также изменить текст кнопки. Стилизируйте баннер на свой выбор. Вас может заинтересовать эта статья, если вам необходимы дальнейшие инструкции о том, как менять цвет текста в блоке.

В итоге, ваш блок должен выглядеть примерно вот так:



Важно: чтобы ваш cookie-баннер корректно отображался, поменяйте Block anchor name в настройках блока на #cookies.



После этого, перейдите в настройки (Settings) сайта.



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



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

<script>
window.onload = function() {
var block = document.querySelector("[data-block-name='wireframe-series-6-cta']");
var btn = document.querySelector("[data-block-name='wireframe-series-6-cta'] .w-btns-group__item");
var showCookiePolicy = getCookie('agreementState') === 'agreed' ? false : true;
if (showCookiePolicy === true) {
console.log('first paint' + getCookie('agreementState'))
block.style.display = 'block';
} 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>




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

[data-block-name='wireframe-series-6-cta'] {
display: none;
}

#cookies ~ section {
position: fixed;
width: 100%;
z-index: 3;
background: #000;
bottom: 0;
display: flex;
}




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



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