Баннер с запросом согласия на cookie есть почти на каждом сайте. Но часто он существует «для галочки» — данные в аналитику улетают сразу при загрузке страницы, независимо от того, что выбрал пользователь. И если раньше это была просто недоработка, то с 1 сентября прошлого года в 152-ФЗ (Федеральный закон «О персональных данных») был внесен ряд изменений, в том числе, появились новые требования к оформлению согласия на обработку персональных данных. Во-первых, оно должно быть получено в явном виде, а во-вторых, существенно вырос штраф за несоблюдение этого пункта. Компаниям было дано время на устранение несоответствий закону, а со второй половины этого года должны начаться массовые проверки того, как компании собирают и хранят персональные данные. Так что если вы до сих пор не привели эту часть вашего сайта в порядок — сейчас самое время этим заняться.

Разберемся с этими настройками на примере нашего сайта cleverdata.ru: если ничего не делать/использовать дефолтные настройки/использовать стандартный набор Tilda с Яндекс.Метрикой, то ... баннер отображается, но Яндекс.Метрика загружается и собирает данные ещё до того, как пользователь успевал нажать хоть какую-то кнопку. Конечно, такие настройки использовать нельзя — это нарушает требования 152-ФЗ и GDPR, которые обязывают получить явное согласие пользователя до начала сбора данных. И мы так, естественно, не делаем. А можно ли как-то исправить эту ситуацию? – Можно!

Привет, я Анна Таюрская, инженер технической поддержки (L1) компании CleverData. Я знаю, как решить эту проблему.

В этой статье я расскажу, как мы:

• Настроили сбор согласий на cookie в CDP CleverData Join, чтобы хранить историю согласий с IP-адресами и иметь возможность предоставить её по запросу.

• Настроили логику загрузки Яндекс.Метрики, чтобы данные передавались только после явного согласия пользователя.

  Сайт собран на Tilda, аналитика настроена через CleverData Tag Manager.

Часть 1. Сбор согласий на cookie в CDP

Архитектура решения

При нажатии любой кнопки баннера (Принять все / Отклонить все / Подтвердить) CleverData Tag Manager читает cookie Tilda и отправляет событие cookie_consent_given в CDP CleverData Join. Событие содержит:

• статус согласия: all / partial / rejected

• флаг аналитических cookie: 1 / 0

• флаг рекламных cookie: 1 / 0

• IP-адрес посетителя

  Вся история попадает в ClickHouse, где хранится 3 года и доступна для выгрузки по запросу.

  Шаг 1. Создать атрибуты в таксономии CDJ

В интерфейсе CDP создать группу Cookie Consent с атрибутами типа string:

Шаг 2. Настроить триггеры в Tag Manager

Создать 4 триггера:

Три триггера типа «Клик» на кнопки баннера T972:

Один специальный триггер для прослушивания события из Data Layer:

Шаг 3. Создать переменные в Tag Manager

Создать 3 переменные типа JavaScript Function, которые читают cookie Tilda в момент срабатывания триггера.

Переменная var_cc_status: 
function() {
  var dl = window.dmpkitdl || [];
  for (var i = dl.length - 1; i >= 0; i--) {
    if (dl[i].event === 'cookie_consent_ready') return dl[i].cc_status;
  }
  return '';
}
Переменная var_cc_analytics:
function() {
  var dl = window.dmpkitdl || [];
  for (var i = dl.length - 1; i >= 0; i--) {
    if (dl[i].event === 'cookie_consent_ready') return dl[i].cc_analytics;
  }
  return '';
}
Переменная var_cc_advertising:
function() {
  var dl = window.dmpkitdl || [];
  for (var i = dl.length - 1; i >= 0; i--) {
    if (dl[i].event === 'cookie_consent_ready') return dl[i].cc_advertising;
  }
  return '';
}

Шаг 4. Создать теги в Tag Manager

Нужно создать два тега.

Тег 1 — «Отправка согласия на cookie», тип «Произвольный JavaScript-код», триггеры: Принять все, Отклонить все, Подтвердить.

Этот тег ждёт появления cookie t_cookiesConsentGiven, читает выбор пользователя, вычисляет значения cc_status, cc_analytics, cc_advertising и пушит событие cookie_consent_ready в Data Layer:

Код тега на JavaScript 

(function() {
  var start = Date.now();
  var interval = setInterval(function() {
    if (Date.now() - start > 5000) {
      clearInterval(interval);
      return;
    }
    var consentGiven = document.cookie.match(/t_cookiesConsentGiven=([^;]+)/);
    if (!consentGiven) return;
    clearInterval(interval);
    var rejectAll = document.cookie.indexOf('t_cookiesRejectAll=true') !== -1;
    var match = document.cookie.match(/t_cookiesCategories=([^;]+)/);
    var cats = match ? JSON.parse(decodeURIComponent(match[1])) : [];
    var status, action;
    if (rejectAll || cats.length === 0) {
      status = 'rejected';
      action = 'reject_all';
    } else if (cats.indexOf('analytics') !== -1 && cats.indexOf('advertising') !== -1) {
      status = 'all';
      action = 'accept_all';
    } else {
      status = 'partial';
      action = 'custom_confirm';
    }
    var analytics = cats.indexOf('analytics') !== -1 ? '1' : '0';
    var advertising = cats.indexOf('advertising') !== -1 ? '1' : '0';
    window.dmpkitdl = window.dmpkitdl || [];
    window.dmpkitdl.push({
      event: 'cookie_consent_ready',
      cc_status: status,
      cc_analytics: analytics,
      cc_advertising: advertising,
      cc_action: action
    });
  }, 50);
})();

Тег 2 — «Согласие на cookie», тип «Событие, поставляемое в CDP», триггер: cookie_consent_ready.

Этот тег слушает событие из Data Layer и отправляет данные в CDP с атрибутами:

Шаг 5. Добавить колонки в ClickHouse

ALTER TABLE cleverdata.t_customer_journey_local
    ADD COLUMN IF NOT EXISTS `cc_status` Nullable(String),
    ADD COLUMN IF NOT EXISTS `cc_analytics` Nullable(String),
    ADD COLUMN IF NOT EXISTS `cc_advertising` Nullable(String),
    ADD COLUMN IF NOT EXISTS `ip_address` Nullable(String);

Шаг 6. Изменить TTL таблицы

По умолчанию TTL таблицы — 1 месяц. Для хранения истории согласий меняем на 3 года:

ALTER TABLE cleverdata.t_customer_journey_local
    MODIFY TTL created_date + toIntervalYear(3);

Шаг 7. Обновить Groovy-маппинг

Добавить в Groovy-файл маппинг новых атрибутов (ID атрибутов подставить после создания на шаге 1):

// Cookie Consent Attributes
attr(500002).lastValue().asString() into 'cc_status'
attr(500003).lastValue().asString() into 'cc_analytics'
attr(500004).lastValue().asString() into 'cc_advertising'
attr(10066).lastValue().asString() into 'ip_address'

Шаг 8. Проверить данные в ClickHouse

После тестового нажатия кнопок баннера убедиться что события попадают в таблицу:

SELECT created_date, ip_address, cc_status, cc_analytics, cc_advertising
FROM cleverdata.t_customer_journey_local
WHERE event_name = 'cookie_consent_given'
ORDER BY created_date DESC
LIMIT 10

Часть 2. Корректная загрузка Яндекс.Метрики

В чём была проблема

Открываем DevTools → Network, фильтруем по watch и заходим на сайт — ещё до любого взаимодействия с баннером видим запросы к mc.yandex.ru. В параметре t запроса: gdpr(14)clc(0-0-0) — Яндекс.Метрика сама фиксирует что согласия нет, но данные всё равно отправляет.

Диагностика

Смотрим исходный код страницы (Ctrl+U) и находим три разных загрузки tag.js:

• <script async src="https://mc.yandex.ru/metrika/tag.js"> — загружается сразу

• <script type="text/plain" data-tilda-cookie-type="analytics" data-src="..."> — правильный, ждёт согласия

• Инлайн-скрипт с ym(85465294, "init", ...) — тоже загружает tag.js сразу

Первый и третий вариант оказались в блоке T123 в шапке сайта — он дублировал счётчик без каких-либо ограничений.

Решение

Шаг 1. Удалить блок T123 с кодом ЯМ из шапки сайта.

Шаг 2. В настройках сайта Tilda → Вставка кода → HTML-код для вставки внутрь HEAD заменить код ЯМ на следующий:

<!-- Yandex.Metrika counter -->
<script type="text/plain" data-tilda-cookie-type="analytics">
   (function(m,e,t,r,i){
     m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
     m[i].l=1*new Date();
   })(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
   ym(85465294, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script>
<script type="text/plain" data-tilda-cookie-type="analytics" data-src="https://mc.yandex.ru/metrika/tag.js"></script>
<!-- /Yandex.Metrika counter -->

Почему именно такой порядок: init-скрипт создаёт очередь window.ym сразу при принятии cookie, а tag.js загружается следом и обрабатывает её. Если поменять порядок — tag.js загрузится раньше чем появится очередь, и инициализация не произойдёт.

Важно: убрать тег <noscript> с пикселем mc.yandex.ru/watch/ — он отправляет данные независимо от согласия.

Шаг 3. Переопубликовать сайт.

Проверка

Открываем сайт в режиме инкогнито с включённым Disable cache в DevTools.

До принятия cookie — в Network при фильтре tag список пустой:

// В консоли:
typeof ym          // "undefined"
document.querySelector('script[src*="metrika"]')  // null

После нажатия «Принять все» — tag.js появляется в Network, инициатор t972_acceptCookies:

typeof ym          // "function"

При запрете аналитических cookie:

typeof ym                                                    // "undefined"
!!document.querySelector('script[src*="metrika"]')          // false

Итоговая таблица сценариев

Важно: разделить отправку данных в Метрику и Директ технически невозможно — данные с сайта идут в Метрику, и уже внутри Яндекса становятся доступны для Директа. Поэтому управление осуществляется только через аналитические cookie.

Результат

После настройки:

• История согласий каждого посетителя хранится в ClickHouse 3 года и доступна для выгрузки по запросу

• Яндекс.Метрика загружается строго после явного согласия пользователя

• Сайт соответствует требованиям 152-ФЗ

Оба сценария — сбор согласий и управление аналитикой — реализованы через CleverData Tag Manager без привлечения разработчиков и без изменения основного кода сайта.