пр. Мира 620000 Россия +7900-000-00-00
Логотип блога интернет-бродяги

Уведомление об использовании Cookie на сайте

Уведомление об использовании Cookie на сайте без плагина

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

Зачем вообще нам эта штуковина? Дело в том, что уведомление об использовании файлов cookie на сайте является обязательным по законодательству во многих странах, включая страны Европейского союза.

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

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

Файлы Cookie могут быть полезны для улучшения опыта пользователя, например, для запоминания его предпочтений и автоматического входа на сайт без необходимости повторного ввода имени и пароля. Однако некоторые файлы Cookie могут использоваться для отслеживания пользовательской активности в Интернете, поэтому пользователи должны сами решить, пользоваться тем или иным сайтом, или нет.

Реализуется возможность такого уведомления пользователя при помощи вот такого JS-кода:

Объясню, за что отвечает каждая строка представленного кода:

  • if (!localStorage.getItem(‘notificationShown’)): эта строка проверяет, была ли плашка уже показана пользователю. Если значение ключа ‘notificationShown’ в объекте localStorage равно null, то это означает, что плашка ещё не была показана, и мы можем продолжить её отображение.
  • const notification = document.createElement(‘div’);: создает новый элемент div, который будет использоваться для отображения плашки на странице.
  • notification.classList.add(‘notification’);: добавляет класс notification к элементу div, чтобы мы могли стилизовать его через CSS.
  • notification.textContent = ‘Этот сайт использует Cookie!’;: строчка устанавливает текст, который будет отображаться на плашке.
  • const closeBtn = document.createElement(‘button’);: создает новый элемент button, который будет использоваться для отображения кнопки “Хорошо”.
  • closeBtn.classList.add(‘close-btn’);: добавляет класс close-btn к элементу button, чтобы мы могли стилизовать его через CSS.
  • closeBtn.textContent = ‘Хорошо’;: устанавливает текст, который будет отображаться на кнопке.
  • notification.appendChild(closeBtn);: добавляет кнопку “Хорошо” на плашку.
  • document.body.appendChild(notification);: добавляет плашку в конец тела документа (body).
  • notification.style.transform = ‘translateY(100%)’; notification.style.opacity = ‘0’;: устанавливают начальные значения стилей для анимации появления плашки.
  • setTimeout(() => { notification.style.transform = ‘translateY(0)’; notification.style.opacity = ‘1’; }, 1000);: этот код запускает анимацию появления плашки через секунду после её отображения.
  • closeBtn.addEventListener(‘click’, () => { … });: код добавляет обработчик событий на кнопку “Хорошо”. Когда пользователь нажимает на кнопку, плашка скрывается, и значение ключа ‘notificationShown’ в объекте localStorage устанавливается в true, чтобы в следующий раз не отображать плашку снова.

В целом, этот код создаёт и отображает плашку на странице. Затем добавляет анимацию появления и обработчик событий на кнопку “Хорошо”.

Как добавить скрипт на сайт, работающий на WordPress? Есть несколько способов добавления JavaScript-файлов на сайт. Вот один пример через тему оформления.

Можно добавить свой JavaScript-файл в папку темы WordPress и подключить его в файле functions.php темы. Для этого нужно создать папку js в корневой директории рабочей темы и поместить туда файл скрипта. Затем в файле functions.php темы можно добавить следующий код:

Этот код добавит скрипт на сайт WordPress. Всё очень просто.

Теперь давайте стилизуем плашку. Следующий код надо добавить в файл стилей style.css:

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

ytprevyu

Всем WEB!

Друзья, плюсаните, вдруг пригодится!

Почитайте похожие материалы

Об авторе: Hobo

Стараюсь всё делать своими собственными руками: от починки выключателя до создания веб-сайта. В этом блоге делюсь своим опытом и впечатлениями от использования различной техники, электронных и других устройств, которые побывали у меня в руках.

2 Comments

  1. Дмитрий:

    Супер! Спасибо за простое решение, минус один плагин.

    1. Отлично, рад что информация пригодилась.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *