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-файлами и отображает баннер для получения согласия на обработку персональных данных от пользователей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вкладка Settings

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Template (Шаблон)

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

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

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

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

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

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

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

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

Method (Метод)

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

Метод

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

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

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

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

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

Type (Тип)

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

Тип

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

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

Decline only

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

Accept only

  • Accept/Decline – показывать кнопки отказа и согласия;
CMP-платформа Cookiebot и Google Tag Manager

Accept/Decline

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

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

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

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

Inline multilevel

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

Do Not Sell (Opt-in)

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

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

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

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

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

Вкладка "Content"

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

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

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

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

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

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

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

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

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

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

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

Cookiebot ID

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

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

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

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

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

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

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

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

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

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

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

Cookie Declaration

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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