Добавляем уведомление об использовании cookie на сайте WordPress

Сайты, которые собирают и обрабатывают cookie должны сообщать об этом своим пользователям. Чаще всего такое сообщение делают всплывающим и показывают один раз при первом заходе на сайт. В этой статье разберем варианты создания уведомления на согласие сбора куки на сайте WordPress.

Что такое cookie?

Файлы cookie — это набор данных, которые генерируются при посещении сайта и сохраняются в браузере пользователя. В них хранится информация о посетителе и его действиях на сайте. Например, куки могут содержать данные для авторизации на сайте, личные данные, такие как: номер телефона, адреса, e-mail, платежная информация, данные об устройстве, с которого посещали сайт.

Зачем сообщать пользователям о сборе cookie?

Уведомления о сборе cookie необходимы по нескольким причинам:

1. Соответствие законодательству. Так как куки могут сохранять личные данные пользователей, компании обязаны сообщать пользователям о сборе и обработке их персональных данных, включая cookie-файлы. Отсутствие уведомления может привести к штрафу.
2. Защита данных. Уведомления разъясняют пользователям, что происходит с их данными и позволяют принимать решения о продолжении использования сайта.
3. Согласие на обработку данных. Чтобы использовать персональные данные пользователя, включая cookie, необходимо получить явное согласие. Уведомление cookie позволяет получить согласие.

Пример текста уведомления cookie

Уведомление о сборе cookie должно быть четким, лаконичным, но при этом содержать всю необходимую информацию для пользователя.

Примеры сообщения:

1. «Мы используем файлы cookie, чтобы улучшить работу сайта. Подробная информация по ссылке»
2. «Мы используем файлы cookie и рекомендательные технологии. Пользуясь сайтом, вы соглашаетесь с Политикой обработки персональных данных.»
3. «Продолжая использовать сайт, вы соглашаетесь на обработку файлов cookie и Политикой обработки персональных данных».

Настройка уведомления о сборе куки на WordPress

Мы рассмотрим 2 варианта добавления уведомления: с плагином и вручную.

Уведомление cookie плагином WordPress

По запросу «cookie notice» репозиторий плагинов WordPress содержит более 600 плагинов.

Я протестировал плагины из топа и остановился на плагине LuckyWP Cookie Notice (GDPR). Его главное преимущество – простота.

Другие плагины, такие как Complianz – GDPR/CCPA Cookie Consent, CookieYes – Cookie Banner for Cookie Consent, Cookie Notice & Compliance for GDPR / CCPA очень громоздкие для интеграции с сайтом, заточены исключительно под законодательство ЕС и USA и реализуют сложный функционал анализа сайта на соответствие требованиям. Наша же задача простая – разместить на сайте уведомление о сборе cookie.

Плагин LuckyWP Cookie Notice (GDPR)

Установите плагин и зайдите в настройки.

Плагин имеет 4 раздела настроек:

• Основные. Раздел для изменения текста сообщения, текста кнопок.
• Внешний вид. В нем можно изменять оформление уведомления, позиционирование.
• Скрипты. Дополнительная секция для добавления кастомных скриптов, которые будут выполняться после того, как пользователь дал согласие на обработку cookie.
• Дополнительно. Прочие настройки плагина.

Откройте раздел Основные и в поле Сообщение введите текст, который будет содержать уведомление. Можно взять текст из примера выше.

В поле Надпись на кнопке "Принять" укажите свой текст кнопки или оставьте по-умолчанию.

Так же, вы можете включить кнопку Отказаться. По идее, эта кнопка должна быть всегда добавлена в уведомление, но большинство сайтов ее игнорируют.

Если вы активируете чекбокс Показать кнопку Подробнее откроются дополнительные настройки.

По кнопке Подробнее вы можете выводить ссылку на страницу с текстом политики конфиденциальности. Измените поле Этикетка кнопки, а в выпадающем списке Страница выберите страницу политики конфиденциальности.

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

В дополнительных настройках на интересует опция Время жизни кук – через столько дней окно появится снова. Опция Интеграция с плагинами кеширования нужна в случае, если у вас настроено кеширование страниц сайта. Установите в значение Автоматически или Включить.

Когда настройка плагина завершена, можно проверять результат. У меня получилось такое окно с уведомлением.

Уведомления cookie WordPress вручную

Для реализации уведомления с помощью кода необходимы навыки редактирования файлов шаблона WordPress.

Ручное создание уведомления имеет преимущества над плагинами. У вас есть возможность полной кастомизации «окошка» cookie. В рассмотренном плагине достаточно скудные настройки внешнего вида. Мы могли поменять только цветовую схему, выбор конкретных цветов для фона или кнопки недоступен.

#1

Добавляем уведомление на страницу

Если вы используете тему, которая регулярно получает обновления, то все изменения файлов делайте в дочерней теме.

Чтобы добавить HTML-код на страницу, мы будем использовать хук wp_footer. Он добавляет разметку в конце страницы, прямо перед выводом подвала.

<?php
add_action('wp_footer', 'output_cookie_notice');

function output_cookie_notice() {
	if( isset( $_COOKIE['cookieNotice'] ) ) {
		return;
	} ?>
	<div class="cookie-notice">
		<div class="cookie-notice__text">Продолжая использовать сайт, вы соглашаетесь на обработку файлов cookie и <a href="<?php echo get_the_privacy_policy_link() ?>">Политикой обработки персональных данных</a></div>
		<div class="cookie-notice__buttons">
			<a href="#" class="cookie-notice__confirm">Принимаю</a>
		</div>
	</div>
<?php }

Этот код нужно добавить в файл functions.php вашей активной темы.

Как добавить php код на сайт WordPressДва способа добавления кода: плагином и вручную

#2

Оформление уведомления

Когда сообщение добавлено в код сайта, его можно стилизовать. Разместим уведомление с левой стороны экрана и прикрепим его при промотке.

Пишем css-стили.

.cookie-notice {
  position: fixed;
  bottom: 20px;
  left: 30px;
  max-width: 420px;
  border-radius: 12px;
  padding: 32px;
  box-sizing: border-box;
  box-shadow: 0 0 24px rgba(25, 25, 25, 0.15);
  background-color: #fff;
  z-index: 2;
}

@media (max-width: 576px) {
  .cookie-notice {
    font-size: 15px;
    max-width: calc(100% - 20px);
    left: 10px;
    bottom: 10px;
    padding: 24px;
  }
}

.cookie-notice__buttons {
  margin-top: 16px;
}

.cookie-notice__confirm {
  background-color: #d73301;
  height: 48px;
  width: 100%;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 15px;
}

@media (max-width: 576px) {
  .cookie-notice__confirm{
    font-size: 14px;
    height: 42px;
  }
}

.cookie-notice__confirm:hover {
  background-color: #000;
}

Мы сделали адаптивное уведомление, которое хорошо выглядит на всех устройствах. Цвет кнопки в примере – оранжевый (строка 29), так как он подходит под общую стилистику сайта-примера.

Стили нужно разместить в файле style.css в корневой папке вашего шаблона.

Если вы правильно добавили весь код, то у вас на сайте появится уведомление. На моем сайте-примере оно выглядит так:

Остался последний шаг – реализовать закрытие окна по кнопке Принимаю и запомнить действие пользователя, чтобы не показывать уведомление при каждом заходе.

#3

Добавляем JavaScript

JavaScript записывает информацию о нажатии на кнопку Принимаю. После нажатия уведомление больше не будет показываться пользователю.

// Получает значение куки
function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[ 1 ]) : undefined;
}

var cookieName = 'cookieNotice';
var cookieNotice = document.querySelector('.cookie-notice');

if (typeof getCookie(cookieName) == 'undefined') {
    document.querySelector('.cookie-notice__confirm').addEventListener('click', function (e) {
        e.preventDefault();
        document.cookie = cookieName + '=true; max-age=15552000; path=/'; // установка куки на 6 месяцев
        cookieNotice.style.display = 'none';
    });
}

Мы сохраняем информацию о закрытии уведомления куки на 6 месяцев (параметр max-age в строке 15). Это значит, что в течение полугода пользователь больше не увидит сообщение (если не почистит куки в браузере).

Разместите этот код в файле scripts.js вашей темы. Чаще всего он находится в папке js.

итог

Когда весь код добавлен в файлы шаблона, можно проверять работоспособность уведомления. Но прежде, очистите кеш браузера, и, если используете плагины кеширования, еще и кеш файлов сайта.