Как сделать всплывающее окно cookie

Обновлено: 16.05.2024

Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя.

Для хранимых данных существуют несколько ограничений:

Одна пара запись не должна занимать более 4Кб.
Общее количество кук на один домен ограничивается примерно 20.

В старых браузерах navigator.cookieEnabled может быть неопределенным.

Запись в document.cookie происходит особым образом, например следующий пример обновит только данные с ключом «name», но при этом не затронет все остальные.

Max-age и Expires

max-age устанавливает время жизни куки в секундах, а параметр expires задает непосредственно дату окончания в формате RFC-822 или RFC-1123 ( Mon, 03 Jul 2021 10:00:00 GMT ).

Следующие примеры устанавливают куки name=user сроком на один месяц:

Куки сроком на год:

Параметр указывает URL-префикс пути т.е. на каких страницах будут доступны установленные куки. Значение path должно быть относительным URL (без домена).

Как правило, в качестве пути указывают корень сайта path=/ , чтобы куки были доступны на всем сайте.

Domain

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

Secure

Чтение кук не совсем удобное, в JS нет нативного метода, который получит значение по ключу. Объект document.cookie возвращает все установленные значения в виде строки, например:

Удаление данных происходит путём установки новой куки с параметром max-age=-1 или expires с прошедшей датой.

Удаление всех кук сайта:

Просмотр, редактирование и удаление кук доступно в браузерах, в панелях для разработчиков:

Google Chrome

В DevTools (Windows: F12 , MacOS: ⌘ + ⌥ + i ), вкладка «Application», раздел «Storage» – «Cookies».

Mozilla Firefox

В веб-консоли (Windows: F12 , MacOS: ⌘ + ⌥ + k ), вкладка «Хранилище», раздел «Куки».

В примере выполняется сохранение выбранного пункта селекта на нескольких страницах:

Привет всем, у кого есть свой сайт. Вы, скорее всего, знаете, что если у вас есть сайт, то он постоянно требует каких-то доработок и улучшений. То закон какой-то новый выйдет, то в SEO что-то изменится и так далее. Сегодня я покажу вам простой способ, как можно добавить на сайт предупреждение об использовании cookie без использования плагинов.

Конечно же, если у вас сайт на какой-то популярной платформе типа WordPress, то для предупреждения об использовании cookie можно установить любой из огромного количества плагинов, которые сделают всю работу за вас. Однако опытные вебмастера прекрасно знают, что чем больше на сайте плагинов, тем медленнее он работает, а это уже напрямую влияет на SEO. Поэтому если вы хоть немного понимаете код (CSS, JS, HTML), то лучше всего сделать предупреждение об использовании Cookie своими руками.

Все ли сайты используют Cookie

Этим вопросом задаются многие владельцы сайтов. Ответ очень простой – почти со 100% вероятностью ДА. Исключением могут быть только сайты, на которых нет вообще ничего, кроме текстового контента: ни счетчиков посещаемости, ни рекламы, ни форм обратной связи и так далее. В общем, если у вас хоть сколько-нибудь нормальное подобие современного сайта, то предупредить об использовании Cookie вы просто обязаны.

Почему я использовал Local Storage при написании предупреждения

Честно вам скажу, перед тем, как сделать такое предупреждение на своем сайте, я просмотрел несколько похожих статей с готовыми решениями. Но они мне не понравились. Объясняю чем. Во всех решениях были использованы cookie для работы этого функционала. Оно и не сильно странно, и даже логично. Но сейчас есть решение гораздо более удобное и простое – локальное хранилище браузера (local storage).

Работа локального хранилища очень похожа на работу cookie, но есть существенные отличия.

Каждый раз, когда что-то записывается в cookie (или стирается оттуда), то эта информация отправляется на сервер. А это дополнительная нагрузка на сервер. А если вы обрабатываете cookie сервером, а не клиентской частью, то это еще и дополнительные задержки времени. Local Storage же в отличие от Cookie никуда дальше браузера пользователя не уходит и хранится только там.
С локальным хранилищем удобнее работать, так как это самый обыкновенный объект. Cookie же представляют собой строку, которую постоянно приходится распарсивать, использовать регулярки или подключать дополнительный библиотеки для удобной работы с Cookie. А дополнительные библиотеки опять же негативно влияют на скорость работы вашего сайта.

Вот и во всех примерах, которые я находил в интернете для работы с cookie используют библиотеку jQuery да еще и с дополнительной мини библиотекой, которая позволят jQuery удобнее работать с кукисами. Есть примеры кода и на чистом Java Script, но они, как правило, очень громоздкие и неудобные.

Как я сделал предупреждение об использовании cookie на сайте без плагина

Код будет состоять из трех частей. Первый кусок – html разметка. Его нужно поместить куда-то в футер вашего сайта (в самый низ). Если у вас сайт на CMS, то ищите у него в корне шаблона файл footer.php. Если у вас какой-то простенький одностраничный сайт, то в самом низу найдите тег . Внутри него обязательно будет еще какой-то код. Нет большой разницы, куда именно вы поместите наш код, но я бы советовал в самом конце этого тега, как раз перед .

Второй кусок – стили (CSS). Тут все просто. Вам нужно найти файл style.css или main.css и закинуть этот код в самый конец. Теперь ваше «предупреждение» должно выглядеть красиво и стильно, но… но на самом деле вы его не увидите вообще, пока не добавить код Java Script. Кстати стили я написал сразу адаптивными, чтобы ваше предупреждение об использовании Cookie выглядело ровно и адекватно не только на компьютерах, но также и на мобильных устройствах.

Третья часть – JS (Java Script) – самое вкусное во всем это творении. Как раз тут я использовал локальное хранилище браузера – быстрое, удобное, доступное. Код со скриптами вам нужно добавить в основной скриптовый файл (если у вас их несколько), который срабатывает абсолютно на всех страницах сайта.

Когда вы все закончите, то вот, как у вас будет это выглядеть:

Сразу после использования кода

Cookie предупреждение в контексте сайта и с кнопкой стилизованной под общий стиль сайта

Как работает предупреждение об использование Cookie, которое я сделал

Да, для большинства из вас этот пункт, наверное, будет неинтересен. Вы просто вставите код, все заработает, и вы мысленно скажете мне спасибо. Но для тех из вас, кому интересно разобраться подробнее, я объясню некоторые ключевые моменты скрипта.

При каждой загрузке страницы выполняется коротенькая функция, которая проверяет объект Local Storage по ключу «cookieDate». Значение этого ключа по моей задумке будет какая-то дата в системе UNIX (точнее дата соглашения отдельного пользователя с тем, что ваш сайт использует cookie).

UNIX время — это количество секунд, прошедших с полуночи (00:00:00 UTC) 1 января 1970 года (источник — википедия)

Если прошло уже больше года с момента, когда мы показывали пользователю предупреждение, то есть если дата была получена по ключу и она на год (точнее, на 31536000000 миллисекунд) меньше текущей даты — мы показываем предупреждение, добавив ему класс «.show».

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

В противном случае мы ничего не делаем, и пользователь просто не видит предупреждение, потому что по умолчанию оно у нас скрыто, насколько вы помните.

Вывод

Надеюсь, я смог помочь решить вашу проблему, и теперь вы знаете, как сделать на своем сайте предупреждение об использовании Cookie. Если у вас остались какие-то вопросы по поводу использования этого кода, то смело задавайте их в комментариях.

Кстати, если вы знаете, почему традиционно предупреждение о Cookie пишут с использованием самих же Cookie, а не Local Storage, сообщите мне, пожалуйста, об этом. Вдруг я делаю что-то не так. Хотя чисто технически код выполняет именно то, чего от него ждут.

Всем спасибо за внимание.

А также мы будем рады услышать ваши пожелания, если вам по какой-то причине неудобно пользоваться сайтом.

Не будьте равнодушными к проекту. Спасибо! :-)

Нам очень приятно! Не могли бы вы поделиться этой статьей с друзьями? А также мы будем рады, если вы оставите комментарий.

Добавить комментарий Отменить ответ

Здравствуйте!
Спасибо за интересные мысли и идею. Для меня — чем проще код, тем лучше.
Мне кажется, что в коде ошибка и указанное в Java Scriptе UNIX время 31536000000 секунд на 3 порядка больше 1 года, т.е. эта цифра соответсвует 1000 годам и это предупреждение по второму разу не увидит ни один пользователь сайта 🙂
Если я прав, исправте пожалуйста.

Вы наверняка видели на разных сайтах всплывающий блок снизу.

Выглядит он примерно так:

Давайте заверстаем нечто подобное =)

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

Основной CSS

Позиционируем плашку в нижний левый угол и растягиваем ее по ширине.

JavaScript

В нашем скрипте нам необходимо:

Убедиться, что блок есть — иначе остановить работу
Найти блок и кнопку подтверждения
Навесить на кнопку «Слушатель»
При клике на кнопку удалить класс warning--active с блока, тем самым скрыв его
Сохранить куки, которые будут говорить нам о том, что пользователь нажал на кнопку.

Если блока на странице нет — функция вернет false:

На самом деле вернет undefined , но он преобразуется в false

findElements()

Находим сам блок и кнопку внутри:

subscribe()

Добавляем кнопке обработчик события «клик»:

onClick()

hideContainer()

В разделе основной css можно увидеть, что у класса warning задано свойство display: none; , а у warning--active — display: flex;

Удалив warning--active , мы скрываем блок.

setCookie()

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

2592000 — количество секунд в месяце

После установки куки предполагается, что блок больше не будет появляться на странице.

Этого можно достичь двумя способами

Через бэк

Просим бэкенд или самостоятельно (если вы и есть бэк) не выводить блок, если заданные вами куки есть у пользователя.

Автор статьи предпочитает способ через бэк =)

Через фронт

Перепишем функцию who() , которая вместо проверки на наличие блока будет искать куки:

Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя.

Для хранимых данных существуют несколько ограничений:

Одна пара запись не должна занимать более 4Кб.
Общее количество кук на один домен ограничивается примерно 20.

В старых браузерах navigator.cookieEnabled может быть неопределенным.

Max-age и Expires

Следующие примеры устанавливают куки name=user сроком на один месяц:

Куки сроком на год:

Как правило, в качестве пути указывают корень сайта path=/ , чтобы куки были доступны на всем сайте.

Domain

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

Secure

Удаление данных происходит путём установки новой куки с параметром max-age=-1 или expires с прошедшей датой.

Удаление всех кук сайта:

Просмотр, редактирование и удаление кук доступно в браузерах, в панелях для разработчиков:

Google Chrome

В DevTools (Windows: F12 , MacOS: ⌘ + ⌥ + i ), вкладка «Application», раздел «Storage» – «Cookies».

Mozilla Firefox

В веб-консоли (Windows: F12 , MacOS: ⌘ + ⌥ + k ), вкладка «Хранилище», раздел «Куки».

В примере выполняется сохранение выбранного пункта селекта на нескольких страницах:

По новым законам РФ если сайт автоматически собирает и сохраняет информацию о посетителях, то необходимо предупредить, что поддерживаются cookie в wordpress. Обычно это выезжающий блок снизу экрана, с надписью и кнопкой согласия. Как ее сделать опишу в статье.

С помощью плагина Clearfy PRO

Посмотреть на оф. сайте

Панель настроек Clearfy в WordPress

Включаем уведомления путем перемещения ползунка в зеленую зону и пишем текст, который должен выводиться, по умолчанию он присутствует, можно заменить на свой
Позиция – где отображать, имеет три положения: внизу слева справа
Цвет текста и фона – задаем оформление окна cookie
Текст подтверждения согласия на сбор данных
Цвет самой кнопки

Получаем такие cookie на сайте WordPress.

Предварительный просмотр

Clearfy улучшает, чистит и оптимизирует сайт WordPress по 48 пунктам, включая: SEO, убирает ненужные подключения, очищает дубли страниц, добавляет необходимые серверные заголовки Last modified и еще много полезных функций.

Дополнение на русском LuckyWP Cookie Notice (GDPR)

Легкий плагин LuckyWP Cookie Notice (GDPR) преследует одну цель это вывести предупреждение о куки на блоге WordPress. Устанавливается стандартно из админки, распространяется на русском языке. Переходим в Настройки – Уведомления о куках.

LuckyWP

В разделе основные, расположены настройки cookie.

Далее идут вкладки внешний и скрипты, их разбирать не буду, понятно что первый отвечает за оформление, второй за ввод дополнительных js. Перейду в Дополнительно.

Задаем время жизни

В разделе настраиваем время сколько куки будут жить в базе WordPress. Настройка перезагрузки страницы после нажатия на любую из кнопок. Интеграция с плагинами для кэширования – лучше оставить автоматически либо отключить, временами не правильно работает. В итоге получим такое оповещение.

Красивая форма с уведомлением

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

Уведомления Cookie без плагина

На просторах интернета нашел один простой и на 100% рабочий метод, на основе скрипта от команды cookieinfoscript.

Вставляем в файл где есть закрывающий тег body, обычно в footer.php.

footer

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

Оформление скрипта в WordPress

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

Cookies заблокированы из-за неожиданного вывода на экран wordpress при авторизации

Какой–либо плагин показывает на экране информацию раньше, чем задано в настройках сервера. К сожалению путь решения только один, это заходить на хостинг через FTP и по одному переименовывать или удалять из папки plugins
Активная тема тоже может давать ошибки ввиду неправильного кодирования. По FTP заходим на хостинг, в папке с шаблонами wp-content/themes, находим активный шаблон и переименовываем
Последний вариант – наличие BOM кодировки в документах wp-config.php (в корне сайта) или functions.php (находится в папке с темой). Просто скачайте оба файла на компьютер и перекодируете их в формат UTF-8 без BOM в любом редакторе кода (например используя Notepad++).

Подведем итог каким способом все же пользоваться.

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

Читайте также: