Как сделать предупреждение об использовании cookie на сайте
Обновлено: 05.07.2024
Этот сайт использует файлы cookie Google. Это необходимо для его нормальной работы и анализа трафика. Информация о вашем IP-адресе и агенте пользователя, а также показатели производительности и безопасности передаются в Google. Это помогает обеспечивать качество услуг, накапливать статистику использования, а также выявлять и устранять нарушения.
Если вы ведёте свой блог в России или Украине, как большинство читателей моего блога, то на ваш блог Blogger не встраивает данное полосу-уведомление для жителей этих стран.
Как добавить полосу предупреждение об использовании куков на ваш сайт
Минусы данного генератора в том, что нет настройки, и уведомление будет показываться на каждой странице одному пользователю многократно. В конце концов, посетитель уйдет с вашего сайта, и впредь постарается его избегать. Этого недостатка лишен виджет
Второй генератор кода полосы вы найдете на сайте Getsitecontrol. Я уже писала об этом многофункциональном сервисе для создания виджетов. Необходима рестрация, но она не займет у вас много времени. При регистрации, вам придётся установить код getsitecontrol перед закрывающимся тегом
Навигация по статье:
Ранее я уже писала статью об этом законе и о возможных проблемах и штрафах, которые могут вам грозить в случае его несоблюдения.
Принцип работы таких уведомлений заключается в том что при первом заходе на сайт высвечивается уведомление об использовании cookie и если его закрыть, то оно больше появляться не будет, во всяком случае в течении какого-то промежутка времени.
Для сайтов, работающих на CMS WordPress, для реализации этой задачи существуют различные плагины и сегодня я покажу вам наиболее простой и удобный из них.
Установка плагина уведомления об использовании cookie
Плагин, который мы будем использовать, называется Cookie Notice for GDPR & CCPA
Основные настройки плагина
О том как создать страницу с политикой конфиденциальности я рассказывала в статье:
Как добавить политику конфиденциальности на сайт?
Далее меняем текст надписи и выбираем страницу с политикой конфиденциальности из раскрывающегося списка
Данный плагин имеет ещё множество дополнительных настроек, в том числе и небольшую панель с выводом данных о коронавирусе. Более подробно обо всех дополнительных настройках плагина я рассказала в видео инструкции.
Оформление уведомления об использование куки
Хотя плагин и имеет некоторые настройки оформления уведомления в административной части, но их не всегда достаточно для того чтобы подонгать стиль уведомления о cookie под дизайн сайта. Для более гибкого управления оформлением нам придется прибегнуть к помощи CSS.
В самом конце этого файла мы можем добавить CSS код для изменения цвета кнопки уведомления, фона блока с уведомлением или цвета шрифта.
Я подготовила для Вас несколько заготовок, которые вы можете использовать на своем сайте.
Приветствую вас в данной статье. Речь пойдет об файлах Cookies, а конкретно о том, что необходимо уведомлять пользователей о том, что сайт использует файлы Cookies. В куки-файлах могут храниться некоторые данные пользователя, например, персональные предпочтения и настройки, информация об аутентификации и т.п. Более подробно о куки вы можете почитать в Википедии.
Вообще, вывод информера о Cookies файлах — это требование закона 152-ФЗ, в том случае, если вы собираете персональные данные пользователя. Например, вывели форму обратной связи или установили форму авторизации и автоматически подпали под действие закона.
Наша задача состоит в том, чтобы показать информационное окошко в том случае, если мы ранее не посещали данный сайт и не соглашались с условиями использования сайта. У данного окошка есть время жизни, можно установить любой интервал, спустя который окошко будет показываться вновь. Это может быть 1 день, неделя, месяц и т.д.
Демо / Исходники
Давайте уже начнем писать код, но прежде давайте глянем на демо, что мы вообще получим на выходе. Исходный код можете глянуть на Github.
Писать данное информер я буду на чистом HTML, CSS, JavaScript. Чтобы не тратить много времени на написание базовых стилей я подключил Normalize.css. Далее в качестве сборщика я тут использовал такой инструмент, как Parcel. Очень удобная вещь, особенно когда нужно быстро что-то собрать. Данный инструмент практически не требует никаких настроек. Можно было конечно обойтись и без него, но мне так удобнее, тем более, что в JS я использую ES6 синтаксис. А тут уже необходимо использовать полифил для поддержки более старых браузеров. Короче, parcel сделает тут все за меня.
Если вы загляните в файл index.html на Github, то увидите, что кроме небольшого текста-заглушки там ничего нет, я имею ввиду исходный код информационного окошка Cookies. Код окошка будет вставляться динамически через JS, если нет установленной куки.
Я не буду тут говорить про стилизацию данного окошка, так как тут все элементарно и вообще можно оформить под стиль вашего сайта. Тут больше будет интересен вопрос программирования на JavaScript.
Для работы с файлами куки я установил небольшую js-библиотеку под названием JavaScript Cookie. Можно конечно и свой плагин написать, но я предпочитаю не изобретать велосипеды, так как любой код требует отладки и устранения багов, а это время…
Показывать информер мы будет при условии, что нет установленной куки, поэтому начинаем с условия:
Методом Cookies.get() мы получаем куки по названию. Название я сразу вынес в отдельную константу. То есть, если данный метод вернет false (и это говорит о том, что установленной cookie нет) мы выполним код, заключенный в фигурных скобках. Обратите внимание на знак инверсии ! .
И так, если кука с названием visit (название можно задать любое) не установлена, то выполним следующие действия — добавим динамически html-код окошка перед закрывающим тегом body . И сразу же получим объекты самого окна и кнопочки согласия с условиями.
Обратите внимание на селекторы по классам. Обычно для работы с js я задаю класс с приставкой --js , так легко можно отделить классы стилистики от классов программирования.
Html-код вставляется метом insertAdjacentHTML, который принимает два обязательных параметра — первое, строка, которая указывает на место вставки, второе — строка с html-кодом объекта. Функция getHtml возвращает строку с html кодом.
И так, объект окна мы добавили в DOM, но оно по умолчанию скрыто. Для показа добавим с определенной задержкой (1 сек.) класс is-show , чтобы сработала анимация. Стили я тут приводить не буду, можете подсмотреть в исходники файла scss на Github.
Блок у нас появился. Отлично! Теперь обработаем клик по кнопки согласия с условиями сайта. По клику нам необходимо выполнить две задачи: 1. Скрыть окошко, удалив класс is-show ; 2. установить куку с определенным временем жизни.
Если вы обратили внимание, после того, как мы удалили класс is-show далее с задержкой в 1 сек. удаляется и сам блок окна. По сути нам оно уже не нужно. То есть мы проинформировали пользователя, он согласился и все, задача выполнена. Не вижу смысла оставлять в DOM ненужный объект.
Установка куки происходит методом Cookies.set() . Здесь мы передаем 3 параметра, два из которых обязательны:
- Название куки (обязательно)
- Значение куки (обязательно)
- Объект с доп. опциями
Теперь давайте посмотрим на полный код данного окошка.
Я обернул весь код в функцию cookieNotify , и вызываю ее, когда DOM дерево загружено и готово.
Хранилище Cookies
Теперь мы можем заглянуть в браузер, а конкретно в хранилище куки и посмотреть все ли правильно там установилось. Для веб-разработки я использую браузер Mozilla Firefox Developer Edition. Вы можете воспользоваться Chrome браузером или другим.
Открываем консоль разработчика, переходим во вкладку Хранилище (Storage), далее Куки (Cookies) и видим, что для нашего домена установлена кука с названием visit и значением true . Также обратите внимание на срок действия — указана конкретная дата с временем.
Чтобы проверить работоспособность окошка заново достаточно удалить нужную куку, в данном случае — visit. Кликаем правой кнопкой мыши и удаляем либо все, либо то, что нужно.
Напоследок хочу сказать, что если из данной статьи вам что-то непонятно, то вы можете посмотреть видео ниже, в котором я подробно изложил весь процесс шаг за шагом. Ну и конечно, можете завать вопросы в комментариях.
Приветствую! При соблюдении закона про обработку персональных данных одним из требований является наличие на блоге политики конфиденциальности и информации про использование куки-файлов.
Это нужно, как минимум, тем блогам и сайтам, где есть форма комментариев (пользователь вводит туда свое имя, емейл), контактная форма, а также форма подписки. А куки используются практически на любом сайте, так как запоминают информацию о визите пользователя и служат для:
• идентификации пользователя;
• хранения персональных предпочтений и настроек пользователя;
• ведения статистики о пользователях.
В этой статье я покажу, как добавить на свой блог Вордпресс такое оповещение об использовании куки и ссылку на текст политики конфиденциальности. А также покажу, где эту политику можно для своего сайта сделать.
Это формальности, однако, по законам их нужно соблюдать. Да и настраивается на самом деле все не так сложно.
Вы можете посмотреть урок к статье:
Как добавить уведомление об использовании куки на блог Вордпресс?
На своем блоге я пошла максимально простым путем и для этой цели использовала плагин Cookie Notice for GDPR.
У плагина есть некоторые настройки, чтобы к ним перейти, нужно кликнуть по этому названию.
Во-первых, можно изменить текст уведомления во всплывающей строке.
Можно поменять надпись на кнопке согласия с использованием куки. После нажатия на эту кнопку уведомление скроется.
Настройки ниже я не трогала.
Срок действия куки оставила по умолчанию 1 месяц, можно выбрать период больше или меньше.
Размещение скрипта указала в подвале сайта.
Позицию всплывающего окна установила в нижней части сайта.
Класс кнопки оставила по умолчанию – button.
Цвет текста уведомления – белый, а фон всплывающей строки – черный. Это такой классический строгий вариант. Здесь также можно играться с визуальной настройкой под цветовую гамму своего сайта.
В конце не забываем сохранить внесенные настройки.
Где можно быстро сделать политику конфиденциальности для сайта?
Можно для этих целей воспользоваться специальным генератором по адресу: tilda.cc/ru/privacy-generator. И заполнить специальные поля:
5) Далее отметьте данные, которые вы собираете. Стандартно – это имя и емейл.
6) Укажите цель обработки персональных данных. Я выбрала первый и последний пункты.
Ниже вы увидите образец текста политики для вашего сайта.
Как добавить политику конфиденциальности на сайт?
1) Можно сделать ее отдельной страницей на сайте Вордпресс.
А именно — скопировать текст, созданный генератором.
Создать новую страницу на сайте и в редакторе добавить этот текст. Опубликовать эту страницу.
нажмите на скриншот для четкости
Опубликованная страница с политикой конфиденциальности отобразится в меню сайта (если у вас оно используется). При необходимости ее можно скрыть из меню.
2) Второй способ добавления политики конфиденциальности на сайт – загрузка в виде PDF-файла через хостинг. В таком случае вам понадобится сначала скопировать текст политики в файл Word, затем пересохранить его в PDF-формате, дать ему название латиницей (такое же, как вы указали в генераторе, например: politika) и загрузить этот файл в корневую папку сайта на хостинге.
Ссылка на политику будет иметь вид: домен сайта/название файла.pdf
Затем полученную ссылку на политику вы добавляете в настройки плагина Cookie Notice for GDPR и сохраняете изменения.
В качестве альтернативы плагина об использовании куки для одностраничника: можно просто в футере (нижней части сайта) текстом прописать, что на сайте используются куки и добавить ссылку на вашу политику конфиденциальности, сделанную по инструкции в статье.
Настройка WordPress
Принятый в 2016 году GDPR (Общий регламент по защите данных) Европейским Союзом обязывает вебмастеров оповещать посетителей об использовании файлов cookie. Не обошло стороной это и владельцев сайтов на WordPress.
Зачем делать оповещение о сборе куки?
На это у вебмастера есть целый ряд причин:
- Для заключения контракта с Google AdSense или другими официальными рекламными сетями требуется наличие оповещения (не важно какого оно будет формата, но обычно используют PopUp).
- Отсутствие такого сигнала расценивается судом как кража персональных данных в собственных целях. Как следствие — компанию оштрафуют.
Если Вы не сотрудничаете с крупными рекламными сетями или среди трафика нет посетителей из стран ЕС, то пока что такая формальность не обязательна. Можно просто сделать отдельную страницу (или подраздел в политике конфиденциальности) касательно использования cookie файлов пользователей.
Как настроить веб уведомления для вордпресса?
Существует два способа: вручную (через код) и с помощью дополнений. Естественно, что расширение для wordpress будет намного удобнее и не засорять лишний раз код. По этому рекомендую рассмотреть готовые решения.
Расширение LuckyWP Cookie Notice (GDPR)
Одно из самых легких дополнений, что я когда-либо встречал. Весит меньше 50 килобайт, запускается даже на самых древних версиях php (5.6.20 и выше).
Само дополнение очень опционально при составлении модалки. Возможность редактировать каждую кнопку, цвет, длительность периода, в который не будет появляться PopUp.
Плагин GDPR Cookie Consent (CCPA Ready) для WordPress
Меньше настроек, чем в LuckyWP Cookie Notice, да и весит больше в разы (500 килобайт). Установка через панель управления WordPress займет не больше пары минут.
Баннер.
Посетители разницы не заметят, а сервер сильно не будет перегружен. Неплохой модуль, но весит архив больше.
Легендарный Cookie Notice for GDPR & CCPA
Самый легкий, понятный и быстрый модуль на wp. На данный момент имеет свыше 8 миллионов установок.
Раньше модуль назывался Cookie Notice (by dFactory). Нагружает систему меньше предыдущих претендентов. Изменение через админку wordpress производится в пару кликов.
Плагин для улучшения SEO – Clearfy Pro
Известная модификация среди wp-юзеров. В рамках общей сео-оптимизации сайта предлагает также возможность вывода заметки о конфиденциальности.
Помешают ли сторонние модули работе всплывающих окон?
Нет. Даже тяжелые расширения по типу Woocommerce никак не мешают всплывающим предупреждениям о куки. Единственное из-за переизбыткаы окон посетитель с большой вероятностью покинет сайт.
Какой текст сделать для уведомления о сборе куки?
Не стоит сильно переживать за текст оповещения. Оптимальный вариант выглядит так:
На этом сайте используются файлы cookie. Мы собираем их для анализа трафика и улучшения работы сервиса.
Function button — кнопка со ссылкой на статью с политикой использования куки. Текст можно любой, однако я предпочитаю “подробнее про использование cookie”.
Читайте также: