Сайты, производящие сбор и обработку файлов cookie, обязаны информировать об этом своих посетителей. Обычно такое уведомление показывается в виде всплывающего окна при первом входе на ресурс. В этой статье мы рассмотрим различные способы реализации уведомления о согласии на сбор cookie на платформе WordPress.
Существуют несколько способов добавить уведомление об использовании cookie на ваш сайт. Один из самых простых и популярных методов — использование плагинов, таких как Cookie Notice, GDPR Cookie Consent или Complianz. Эти плагины позволяют настроить уведомления без необходимости в программировании, предоставляя пользователям готовые решения и возможность кастомизации.
Если вы предпочитаете более ручной подход, то можете внедрить уведомление с помощью кастомного кода. Для этого вам нужно добавить код в файл functions.php вашей темы или использовать плагин для вставки пользовательского кода. Вы можете создать собственное всплывающее окно с текстом уведомления и кнопками для согласия или отказа от использования cookies.
Не забывайте о том, что текст уведомления должен быть понятным и доступным для пользователей, а также содержать информацию о том, какие именно данные собираются, для каких целей они используются и как пользователь может управлять своими предпочтениями.
Кроме того, важно следить за изменениями в законодательстве о защите данных и обеспечивать соответствие вашим уведомлениям актуальным требованиям. Например, в рамках GDPR требуется не только уведомлять пользователей, но и получить их явное согласие на обработку данных.
В заключение, выбор метода реализации уведомления об использовании cookie зависит от ваших предпочтений и потребностей сайта. Главное — обеспечить соблюдение законодательства и предложить пользователям понятное и доступное решение.
Что такое cookie?
Файлы cookie представляют собой небольшие текстовые файлы, которые создаются во время посещения веб-страниц и сохраняются браузером пользователя. В них содержится информация о пользователе и его взаимодействиях на сайте. Например, куки могут включать данные для входа на сайт, а также персональные сведения, такие как: номер телефона, адрес, электронная почта, данные о платёжных методах и характеристики устройства, с которого производился доступ к сайту.
Существует несколько типов файлов cookie. Сессионные куки временные и удаляются после закрытия браузера, а постоянные остаются на устройстве пользователя до тех пор, пока не истечет их срок действия или пока пользователь их не удалит. Также существуют сторонние куки, устанавливаемые другими доменами, которые могут использоваться для отслеживания активности пользователя на различных сайтах и для показа целевой рекламы.
Использование файлов cookie позволяет улучшить пользовательский опыт: например, они могут запоминать настройки пользователя, осуществлять авторизацию, а также помогать анализировать поведение на сайте для улучшения его функциональности. Однако важно помнить о конфиденциальности: пользователи могут управлять настройками куки в своем браузере, выбрать, какие файлы сохранять, и удалять ненужные куки, что помогает защитить личную информацию.
Зачем сообщать пользователям о сборе cookie?
Уведомления о сборе файлов cookie необходимы по ряду причин:
- Соответствие правилам. Поскольку куки могут хранить личные данные пользователя, компании обязаны информировать пользователей о сборе и обработке их данных, включая файлы cookie. Игнорирование такого уведомления может привести к административным штрафам.
- Защита персональных данных. Уведомление объясняет пользователям, что происходит с их данными, и позволяет им принимать решения по поводу дальнейшего использования сайта.
- Согласие на обработку данных. Для работы с личными данными, включая куки-файлы, требуется явное согласие пользователя. Уведомление о куки позволяет его получить.
- Улучшение пользовательского опыта. Информация о собираемых куках может помочь пользователям понять, как именно они используются для персонализации контента и улучшения навигации по сайту, что может способствовать повышению их удовлетворенности.
- Повышение доверия. Прозрачность в вопросах сбора данных способствует созданию доверительных отношений между пользователем и компанией. Уведомления о куки показывают, что компания заботится о конфиденциальности пользователей и открыто сообщает о своих действиях.
- Управление cookie-предпочтениями. Уведомления позволяют пользователям настроить свои предпочтения относительно использования куков, что дает им больше контроля над своей конфиденциальностью в интернете.
Пример текста уведомления cookie
Уведомление о сборе файлов cookie должно быть понятным, кратким, но при этом включать всю необходимую информацию для пользователя.
Примеры формулировок:
- «Мы используем файлы cookie для улучшения работы нашего сайта. Пожалуйста, ознакомьтесь с более подробной информацией по данной ссылке»
- «На нашем сайте используются файлы cookie и аналогичные технологии. Продолжая пользоваться ресурсом, вы соглашаетесь с нашей Политикой обработки персональных данных.»
- «Продолжая работу на сайте, вы соглашаетесь с обработкой файлов cookie и с Политикой обработки персональных данных.»
Важно отметить, что файлы cookie помогают нам собирать данные о поведении пользователей на сайте, что позволяет анализировать и оптимизировать его функционирование. Вы также можете настроить параметры использования файлов cookie в своем браузере, если не хотите, чтобы они сохранялись на вашем устройстве. Будьте уверены, что сохраненные данные используются исключительно для улучшения вашего опыта на нашем сайте.
Пожалуйста, помните, что отключение файлов cookie может ограничить функциональность сайта и ухудшить качество обслуживания. Если у вас возникли вопросы о нашей Политике конфиденциальности и использовании cookie, не стесняйтесь обращаться к нашей службе поддержки.
Настройка уведомления о сборе куки на WordPress
Мы рассмотрим два способа добавления уведомления: с помощью плагина и вручную.
Уведомление о 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 имеют сложные интерфейсы и ориентированы в основном на соблюдение норм Европейского Союза и США. В то время как наша цель состоит в том, чтобы просто добавить уведомление о куках на сайт.
Плагин LuckyWP Cookie Notice (GDPR)
Сначала установите плагин и перейдите к его настройкам.
Плагин включает 4 раздела настроек:
- Основные настройки. Здесь вы можете изменить текст уведомления и текст кнопок.
- Внешний вид. Этот раздел позволяет настраивать оформление уведомления и его размещение на странице.
- Скрипты. Дополнительный раздел, где можно добавить кастомные скрипты, которые будут выполняться после согласия пользователя на обработку cookie.
- Дополнительные настройки. Другие параметры работы плагина.
В разделе Основные настройки в поле Сообщение введите текст уведомления, можно использовать пример, приведенный выше.
В поле Надпись на кнопке «Принять» пропишите текст своей кнопки или оставьте по умолчанию.
Также вы можете активировать кнопку Отказаться. Эта кнопка, в идеале, должна присутствовать в уведомлении, однако многие сайты не добавляют её.
Если активируете опцию Показать кнопку Подробнее, откроются дополнительные настройки.
При нажатии на кнопку Подробнее, можно указать ссылку на страницу, где изложена политика конфиденциальности. Измените поле Этикетка кнопки, а в выпадающем списке Страница укажите страницу с политикой конфиденциальности.
В разделе Внешний вид можно изменить стили уведомления. Выберите светлую или темную цветовую палитру, а также настройте внешний вид кнопки, чтобы она соответствовала стилю вашего сайта.
В дополнительных настройках обратите внимание на опцию Время жизни кук – через сколько дней окно появится вновь. Опция Интеграция с плагинами кеширования нужна для случаев, когда у вас настроено кеширование страниц. Установите значение Автоматически или Включить.
После завершения настройки плагина вы можете протестировать результат. У меня получилось следующее окно уведомления.
Не забудьте также протестировать отображение уведомления на мобильных устройствах, чтобы убедиться, что оно корректно отображается на всех экранах. Это особенно важно, учитывая, что значительная часть пользователей заходит на сайты с мобильных телефонов.
Кроме того, при добавлении уведомления о куках важно учитывать особенности подхода к защите данных в разных регионах. Поэтому, если ваш сайт ориентирован на международную аудиторию, рекомендуется ознакомиться с местными законами о конфиденциальности и куках, чтобы правильно настроить уведомление.
И завершите процесс, прочитав рекомендации по тестированию и поддержке уведомления, чтобы убедиться, что оно работает корректно и всегда включает актуальную информацию о политике в отношении куки вашего сайта.
Уведомления cookie WordPress вручную
Для создания уведомления с помощью кода потребуются базовые знания редактирования файлов шаблонов WordPress.
Ручная реализация уведомления имеет свои преимущества по сравнению с плагинами. Вы получаете возможность полностью настроить внешность уведомления. В рассматриваемом плагине настройки оформления достаточно ограничены: можно изменить лишь цветовую палитру, а выбрать конкретные цвета для фона или кнопки невозможно.
Добавление уведомления на страницу
Если вы используете тему, получающую регулярные обновления, рекомендуется вносить изменения в дочернюю тему.
Чтобы вставить HTML-код на страницу, мы воспользуемся хуком wp_footer. Он добавляет разметку в самом конце страницы, перед выводом подвала.
Необходимый код нужно вставить в файл functions.php вашей активной темы.
Стилизация уведомления
После добавления сообщения в код сайта, его можно стилизовать. Разместим уведомление в левом нижнем углу экрана и закрепим его при прокрутке.
.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
Мы сделали адаптивное уведомление, которое будет хорошо выглядеть на всех устройствах. В примере цвет кнопки выбран оранжевым (строка 29), так как это соответствует общей стилистике демонстрационного сайта.
Все стили следует разместить в файле style.css в корневой папке вашего шаблона.
Если вы всё правильно добавили, уведомление должно отображаться на вашем сайте. На моем примере оно выглядит следующим образом:
Последний этап – реализовать закрытие уведомления по нажатию кнопки Принимаю и сохранить действие пользователя, чтобы не показывать уведомление снова при каждом входе.
Добавляем 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.
Когда весь код будет добавлен в файлы шаблона, можно проверять функциональность уведомления. Но сначала не забудьте очистить кеш браузера, а если используете плагины кеширования, то и кеш файлов сайта.