CMP-платформа Cookiebot и Google Tag Manager

08 апреля, 2021

Продолжая темы GDPR, режима согласия Google, функции для рекламодателей и персонализации рекламы, в этом посте я покажу вам, как реализовать файлы cookie на сайте с помощью сервиса Cookiebot и Google Tag Manager.

Cookiebot - это CMP-провайдер (Consent Management Platform), который помогает проверить, соответствует ли использование на вашем сайте файлов cookie и требованиям GDPR и Директиве о конфиденциальности и электронных средствах связи (ePrivacy Directive, ePR). Также платформа автоматически создает и обновляет политику работы с cookie-файлами и отображает баннер для получения согласия на обработку персональных данных от пользователей.

Баннер Cookiebot на разрешение/запрет использования кук

Но почему именно Cookiebot? Я для себя определил несколько критериев:

  • совместимость с режимом согласия Google;
  • есть бесплатный тариф;
  • популярный на рынке продукт;
  • поддержка Google Tag Manager (для Cookiebot есть готовый тег, который упрощает настройку).

Безусловно, на рынке присутствует много других интересных решений, и вы можете использовать любое из них. Например, Iubenda, OneTrust, Osano, Sourcepoint также поддерживают режим согласия Google и имеют готовые интеграции. Тем более, что в интернете можно встретить много разных мнений относительно Cookiebot. Якобы, он найдет нарушение GDPR даже в относительно безобидных куках, чтобы продать свою платную подписку:

Комментарии на habr

Я не призываю вас использовать именно Cookiebot, а лишь хочу показать на его примере настройку файлов cookie в интерфейсе самой CMP-платформы (настройки схожи и с другими сервисами) и с помощью Google Tag Manager.

Первым делом необходимо перейти на сайт и зарегистрироваться через кнопку Try for free:

Регистрация на Cookiebot

Укажите ваш адрес электронной почты, пароль, примите условия предоставления услуг (Terms of Service) и нажмите Next (Далее):

Создание аккаунта

В следующем окне вставьте ключ, который вам отправили на электронную почту:

Активация подписки

Нажмите Submit (Подтвердить). Подписка активирована. Теперь можно перейти к настройке Cookiebot.

Перейдите на вкладку Settings и на вкладке Domains добавьте домен вашего сайта:

Вкладка Settings

Сохраните изменения с помощью кнопки Save.

Сохранение изменений

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

Сканирование вашего сайта на наличие файлов cookie

Сканирование может доходить до 24 часов, в зависимости от вашего тарифа. Вы можете пока закрыть вкладку/сайт и вернуться к продолжению настройки после окончания сканирования. Для сканирования моего сайта примерно потребовалось 15 минут.

Когда все будет готово, вы увидите все файлы cookie, включая куки счетчиков веб-аналитики и другие.

Примеры найденных кук на сайте

Если у вас что-то изменилось в списке cookie, вы добавили новый сервис, отслеживание, то вы всегда можете просканировать свой сайт повторно для обнаружения новых кук с помощью кнопки Scan domain now:

Сканирование сайта

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

Пример баннера от Cookiebot

Перейдите на вкладку Settings и в Dialog:

Настройки диалогового окна

На этой вкладке задаются все необходимые настройки отображения всплывающего окна. Давайте разберем каждую опцию.

Template (Шаблон)

Шаблон баннера

Вы можете использовать один из доступных вариантов положения всплывающего окна:

  • Top – показывать баннер вверху окна;
  • Bottom – показывать баннер внизу окна;
  • Push down – баннер с эффектом «выталкивания» страницы;
  • Slide down – баннер со скользящим движением сверху-вниз;
  • Slide up - баннер со скользящим движением снизу-вверх;
  • Pop up - всплывающее окно в центре экрана (модальное окно);
  • Overlay – всплывающее окно в центре экрана (модальное окно) с наложением, затемнением задней области;
  • Custom – использование собственных HTML/CSS/Javascript (доступно только для подписки Premium).

В Cookiebot есть полезная функция Preview, которая позволяет посмотреть итоговый способ отображения данного окна. Нажмите на нее и на странице отобразится баннер в том виде, в котором вы его настроили, и с тем же шаблоном, который вы выбрали:

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

На примере выше выбран шаблон Top (показывать баннер вверху окна). Обычно разрешение на использование файлов cookie размещают внизу окна, поэтому вы можете выбрать Bottom.

Method (Метод)

Метод

Эта настройка имеет два варианта:

  1. Implied Consent – посетители сайта, которые проигнорировали данное окно, автоматически соглашаются с использованием всех файлов cookie;
  2. Explicit Consent – диалог согласия cookie будет отображаться при каждом обновлении страницы, пока посетитель не сделает выбор.

В случае выбора режима Implied Consent вы можете добавить дополнительные действия, при выполнении которых будет считаться, что пользователь согласился с использованием всех файлов cookie. Это скроллинг страницы (Page scroll) и перезагрузка страницы (Page refresh).

Дополнительные действия Page scroll и Page refresh

Type (Тип)

Тип

В Cookiebot есть различные типы отображения баннеров согласия. Вы можете использовать наиболее подходящий для вашей страны и тематики проекта.

  • Decline only – показывать только кнопку отказа. В этом случае пользователь соглашается с нашими условиями, игнорируя диалог. Может использоваться только с методом Implied Consent и только с необходимыми куками;

Decline only

  • Accept only – показывать только кнопку согласия для всех файлов cookie. Может использоваться с любым методом;

Accept only

  • Accept/Decline – показывать кнопки отказа и согласия;

Accept/Decline

  • Multilevel – пользователь может включать и отключать отдельные категории файлов cookie;

Multilevel (с возможностью выбора варианта отображения)

Inline multilevel – пользователи могут включать и отключать отдельные категории файлов cookie внутри баннера с подробными сведениями. Можно задать настройки выбранных куки по умолчанию;

Inline multilevel

  • Do Not Sell (Opt-in) – показать настройку об отказе продавать личную информацию (закон Калифорнии о защите персональных данных потребителей (CCPA)).

Do Not Sell (Opt-in)

Выберите один из наиболее подходящих вариантов отображения. Как правило, используют вариант Multilevel. Сохраните изменения.

В Cookiebot, как и в других CMP-платформах, существуют категории файлов cookie:

  • Necessary (Необходимые) - помогают сделать сайт удобным, позволяя реализовать основные функции, такие как навигация по странице и доступ к защищенным областям сайта. Сайт не может нормально функционировать без этих файлов куки;
  • Preferences (Настроечные) - позволяют сайту запоминать информацию, которая изменяет способ работы или вид сайта, например, с учетом вашего предпочтительного языка и региона, в котором вы находитесь;
  • Statistics (Статистические) - помогают владельцам сайтов понять, как посетители взаимодействуют с сайтами, путем сбора и представления анонимной информации;
  • Marketing (Маркетинговые) - используются для отслеживания перемещения посетителей по сайтам. Цель этого отслеживания — показ рекламных объявлений, которые актуальны и интересны для конкретного пользователя и тем самым более ценны для издателей и сторонних рекламодателей;
  • Other (Без категории) - это файлы cookie, которые Cookiebot пытается классифицировать вместе с поставщиками конкретных файлов куки.

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

Вкладка "Content"

В каждом поле есть описание категории файлов cookie - Necessary, Preferences, Statistics, Marketing и т.д.

Сохраните изменения. На этом настройка режима согласия в интерфейсе Cookiebot завершена. Теперь нам необходимо перейти в Google Tag Manager и настроить тег, чтобы он запускался (или не запускался) в зависимости от выбора пользователя.

Но перед тем, как это сделать, нам требуется добавить наш баннер Cookiebot на все отслеживаемые страницы сайта. Для этого перейдите в диспетчер тегов Google и раздел Шаблоны - Шаблоны тегов - Поиск в галерее и найдите Cookiebot:

Шаблоны - Шаблоны тегов - Cookiebot CMP

Добавьте тег в свою рабочую область. Теперь перейдите в раздел Теги и создайте тег на основе данного шаблона. Он будет находиться в разделе Специальные теги.

После выбора вы должны вставить в поле Cookiebot ID свой идентификатор скрипта из интерфейса Cookiebot. Для этого перейдите в раздел Settings, на вкладку Your script и скопируйте свой Domain Group ID:

Копирование идентификатора домена Cookiebot

Вставьте его в соответствующее поле в теге Google Tag Manager

Cookiebot ID

В поле Language оставьте значение Default (auto-detect). Язык баннера будет подставляться тот, который вы выбрали в интерфейсе Cookiebot.

Галочку Enable IAB Transparency and Consent Framework можно не ставить, поскольку настройка спецификации фреймворка TCF доступна только в пользовательском шаблоне Cookiebot (платный тариф).

В качестве триггера активации выберите All Pages (Все страницы). Сохраните тег.

Итоговый тег Cookiebot

Вы можете проверить показ баннера на сайте, активировав предварительный просмотр или опубликовав контейнер GTM.

Проверка отображения баннера Cookiebot

Как видим, тег активируется и баннер отображается. Все хорошо.

Также Cookiebot позволяет с помощью всего некольких строчек кода добавить на сайт декларацию cookie. Это тот самый список ваших кук, которые Cookiebot после сканирования домена нашел. Он нужен для того, чтобы пользователь смог перейти на отдельную страницу и в простом и понятном виде понять, какие файлы cookie вы собираете, за что каждый из них отвечает и т.д. Для этого нужно на вкладке Your script скопировать код из поля Cookie Declaration и вставить его на ту страницу или место вашего сайта, где вы хотите ее отображать.

Cookie Declaration

В результате выглядеть на сайте это будет примерно так:

Пример декларации на сайте

Если вы не используете шаблон тега Cookiebot, а хотите добавить код его режима согласия в код сайта напрямую, вам необходимо соблюсти порядок загрузки скриптов:

  1. Google Tag Manager;
  2. код Cookiebot.

Причем перед контейнером GTM обязательно следует добавить такую строчку кода:

Она гарантирует, что диспетчер тегов Google не будет заблокирован функцией автоматической блокировки Cookiebot. Получится так:

Добавление кода напрямую на сайте

Теперь необходимо настроить условия активации в зависимости от выбора пользователя. Для этого в Google Tag Manager перейдите в раздел Шаблоны - Шаблоны переменных - Поиск в галерее и найдите Cookiebot Consent State:

Шаблоны - Шаблоны переменных - Cookiebot Consent State

Добавьте переменную в свою рабочую область. Перейдите в раздел Переменные и создайте пользовательскую переменную на основе шаблона. Выберите из списка Cookiebot Consent State, задайте ей имя (можно такое же) и сохраните новую переменную. Дополнительных настроек для нее не требуется.

Переменная на основе шаблона Cookiebot Consent State

Чтобы управлять файлами cookie на основе выбора пользователей, мы должны связать несколько триггеров в этой переменной. Для этого создайте триггер типа Специальное событие. Причем он будет не один, а целых три:

Триггер №1 - Маркетинговые куки (Marketing)

  • Название события - cookie_consent_marketing
  • Условие активации - Наша переменная (создана на шаге выше) содержит marketing

Триггер для маркетинговых кук

Таким образом, если пользователь разрешает использование маркетинговых кук (ставит галочку на баннере в разделе Маркетинговые), то тег с этим триггером будет активирован:

Использование маркетинговых кук на баннере

Аналогичные триггеры с типом Специальное событие необходимо создать для настроечных (Preferences) и статистических (Statistics).

Триггер №2 - Настроечные куки (Preferences)

  • Название события - cookie_consent_preferences
  • Условие активации - Наша переменная (создана на шаге выше) содержит preferences

Если пользователь разрешает использование настроечных кук (ставит галочку на баннере в разделе Настроечные), то тег с этим триггером будет активирован.

Триггер №3 - статистические куки (Statistics)

  • Название события - cookie_consent_statistics
  • Условие активации - Наша переменная (создана на шаге выше) содержит statistics

Если пользователь разрешает использование статистических кук (ставит галочку на баннере в разделе Статистические), то тег с этим триггером будет активирован.

В результате получим:

Триггеры для настроечных и статистических кук

Сохраните все три триггера.

Примечание: вы можете не использовать переменную из шаблона Cookiebot Consent State, а сразу создать 3 триггера custom event, каждый со своим названием события.

В своей учетной записи Cookiebot вы можете просмотреть список всех файлов cookie, найденных на вашем сайте. Каждый файл cookie является частью одной категории: Necessary, Preferences, Statistics, Marketing. Вы можете самостоятельно изменить категорию, к которой относится файл cookie. Для этого перейдите на вкладку Cookies и выберите необходимую куку. Напротив нее в выпадающем списке будет возможность изменить категорию:

Пример изменения категории куки

После созданных триггеров и условий активации вы можете к каждому тегу добавить свое собственное условие. Например, для Facebook Pixel и триггер с маркетинговыми куками:

Facebook Pixel с триггером маркетинговых кук

Если тег требует согласия для нескольких категорий файлов cookie, вы можете создать триггер Группа триггеров и добавить в него соответствующие триггеры. Например, для всех трех категорий кук:

Группа триггеров

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

Пример: разрешаем использование статистических и настроечных кук

После нажатия ОК на шкале событий GTM появятся два события: cookie_consent_preferences и cookie_consent_statistics. В пользовательской переменной Cookiebot Consent State также отобразится значение выбранных кук:

Срабатывание специальных триггеров после согласия пользователя

Эти триггеры можно использовать в любых тегах для их активации или блокировки.

С помощью Cookiebot вы можете использовать данное решение для включения функции для рекламодателей и персонализации рекламы Google, как мы это делали в предыдущем материале. А в следующем материале выполним реализацию режима согласия Google с помощью Cookiebot.

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике