EasyCookies - cookie-баннер, который знает про ваши счётчики

Вот и последняя статья серии, в которой уже были modSizeControl, EasySettings и EasyFavicon. Как и обещал, представляю вашему вниманию компонент для баннера cookie. Причём не того баннера, который просто висит внизу страницы с кнопкой «Понятно», пока Метрика и Analytics уже давно всё записали, а такого, который сам решает, когда счётчикам можно работать.

Редактор профиля с превью баннера

Обычно всё выглядит так: находим скрипт баннера, вставляем в шаблон, пишем «Мы используем cookie», а коды счётчиков остаются там же, где и были. Посетитель жмёт «Отклонить», а Вебвизор в это время уже смотрит, как он это делает. Формально баннер есть, по факту — декорация.

В EasyCookies счётчики живут не в шаблоне, а в профиле баннера. Баннер сам их запускает, когда посетитель разрешил нужную категорию, а при отказе удаляет их cookie. В основе — отличная библиотека CookieConsent Ореста Биды, так что с внешним видом и доступностью всё в порядке.

Простой или по требованиям

Первым делом при создании профиля компонент спрашивает, какой баннер вам нужен:

Простой — уведомление с кнопкой «Понятно» и, по желанию, «Отказаться». Счётчики работают сразу. В форме только текст, счётчики и вид — больше настраивать нечего.
По требованиям — ничего не запускается до согласия посетителя, как того требуют GDPR, CCPA и похожие законы. Категории, окно настроек с таблицей cookie, переводы, ревизии и Google Consent Mode v2.

Предвижу вопрос «А какой нужен мне?». Это решают законы, которые применяются к вашему сайту, а не компонент. EasyCookies — инструмент, а не юридическая консультация. Но выбор не окончательный: вид меняется одной кнопкой, и ничего при этом не теряется.

Возможности

Счётчики без правки шаблона. Яндекс Метрика (с Вебвизором), Google Analytics, Google Tag Manager, VK Реклама, Meta Pixel и свой код для всего остального.
Превью прямо на странице менеджера. Баннер встаёт у края окна ровно там, где он будет на сайте, и меняется по мере ввода. Работает тот же скрипт, что и на сайте, так что превью не врёт. А чтобы он не закрывал форму, страница редактора отодвигается от него сверху или снизу — любое поле можно докрутить.
Вид как в плейграунде CookieConsent: окно, облако или плашка, девять положений, окно настроек по центру или сбоку, темы и свои цвета.
Журнал согласий со сводкой, фильтрами, выгрузкой в CSV и виджетом на рабочем столе.
Готовые тексты на 14 языках, баннер говорит на языке страницы.
Профили и контексты. У каждой языковой версии или поддомена может быть свой баннер. Копия профиля — чтобы пробовать правки, не трогая сайт. Экспорт и импорт — чтобы перенести на другой сайт.
Google Consent Mode v2 и Global Privacy Control — сигналы ставятся раньше любых тегов Google, даже вставленных в шаблон руками.
«Спросить всех заново», когда поменялись счётчики или политика, и скрытие баннера от поисковых роботов.

Перенос счётчиков из шаблонов

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

Кнопка «Найти на сайте» ищет коды счётчиков в шаблонах и чанках — и в базе, и в файлах .tpl/.html (привет, pdoTools и Fenom), — вычитывает номера и Вебвизор и одной кнопкой переносит их в профиль. Если отметить «Убрать их код из шаблонов и чанков», компонент ещё и аккуратно вырежет блоки <script> и <noscript> со служебными комментариями, иначе счётчик сработал бы дважды.

Найденные на сайте счётчики

Прежнее содержимое элементов при этом сохраняется, и «Вернуть код» всё откатит, если вы успели передумать.

Быстрый старт

Пакеты → EasyCookies → Новый профиль, выбираете вид баннера.
Поправляете текст и указываете адрес политики конфиденциальности (можно просто id ресурса).
Добавляете счётчики или жмёте «Найти на сайте».
Отмечаете «Показывать на сайте» и сохраняете.

Всё, баннер на всех страницах. Плагин сам добавит его в <head>, в шаблон ничего вставлять не нужно. Разве что ссылку в подвал, чтобы посетитель мог передумать:

<a href="#" data-cc="show-preferencesModal">Настройки cookie</a>

Если автовывод вам не по душе, есть сниппет:

[[EasyCookies]]

или на fenom

{'EasyCookies' | snippet}

Проверка согласия на сервере

Бывает, что без согласия нельзя показывать не только счётчики, но и встроенное видео с YouTube, карту или форму с reCAPTCHA. Для этого есть сниппет EasyCookiesAllowed:

[[!EasyCookiesAllowed?
  &category=`marketing`
  &tpl=`youtube`
  &tplElse=`youtube.stub`
]]

или на fenom

{'!EasyCookiesAllowed' | snippet : [
  'category' => 'marketing',
  'tpl' => 'youtube',
  'tplElse' => 'youtube.stub',
]}

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

Для своих сценариев на фронте есть window.EasyCookies:

EasyCookies.accepted('analytics') // разрешена ли категория
EasyCookies.showPreferences() // открыть окно настроек

Журнал согласий

GDPR требует не только спросить согласие, но и уметь его доказать. Баннер по требованиям записывает каждый ответ посетителя: решение, разрешённые категории и сервисы, профиль, язык, страницу, укороченный IP и браузер. ID согласия тот же, что лежит в cookie посетителя, так что по нему находится вся история его выбора.

Журнал согласий

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

Ну и виджет на рабочий стол, куда же нам без него.

Виджет «Согласия на cookie»

Требования

MODX Revolution 2.4+ или 3.x.
PHP 7.4+ с расширением json.
Право settings: профиль добавляет скрипты на все страницы сайта, поэтому уровень доступа такой же, как у системных настроек.

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

На этом серия закончилась. Все четыре компонента сделаны по одним правилам: интерфейс без ExtJS, который при этом выглядит родной частью менеджера MODX 3 и MODX 2, и документация на docs.modx.pro. Если какой-то пропустили — ссылки на прошлые статьи в начале. Спасибо, что дочитали серию до конца!

Баха Волков

2 часа назад

Комментарии: 0

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