Как настроить сбор согласий на cookie и корректную отправку данных в Яндекс.Метрику на сайте Tilda / Хабр

Баннер с запросом согласия на 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:

Атрибут	Значения
`cc_status`	`all` / `partial` / `rejected`
`cc_analytics`	`1` / `0`
`cc_advertising`	`1` / `0`

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

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

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

Триггер	Тип
Принять все	Клик
Отклонить все	Клик
Подтвердить	Клик

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

Триггер	Тип
cookie_consent_ready	Специальное событие

Шаг 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 с атрибутами:

Переменная	Атрибут CDJ
var_cc_status	cc_status
var_cc_analytics	cc_analytics
var_cc_advertising	cc_advertising

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

Как настроить сбор согласий на cookie и корректную отправку данных в Яндекс.Метрику на сайте Tilda