Как отправлять события и метки utm, yclid, gclid в аналитику nana800

Из чего состоит событие

Вызов analytics.track('signup_completed', { plan: 'pro' }) отправляет событие с названием signup_completed и одним свойством. Время, id пользователя и event_id против дублей библиотека добавит сама. Свойства пользователя, например тариф или город, передаются через identify или setUserProperties и хранятся в карточке пользователя: новое значение ключа заменяет старое, остальные ключи остаются.

Все значения свойств передаются строками. Число тоже пишите строкой, например '1990': условия графиков «больше» и «меньше» сравнивают такие значения как числа.

Как назвать события

Названия лучше давать по схеме «объект_действие» латиницей в нижнем регистре: page_view, signup_completed, project_created, payment_succeeded. Одно действие должно всегда называться одинаково на сайте, в приложении и на сервере, иначе в графике оно разойдётся на две линии.

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

Ограничения на размер

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

• Одно событие до 32 КБ: если больше, свойства отбрасываются с конца, пока событие не влезет.
• До 100 свойств в событии, значение свойства, название события и id пользователя до 1 024 символов.
• В проекте до 10 000 разных ключей свойств событий и пользователей вместе. Новые ключи сверх лимита не сохраняются, само событие сохраняется.
• В одном запросе до 1 000 событий с ключом проекта и не больше 1 МБ. Библиотека сама режет пакеты так, чтобы в это уложиться.

Метки utm, yclid и gclid: код для сайта

Метки нужно прочитать из адреса при входе на сайт и сохранить в браузере, иначе на следующей странице их уже не будет. Код ниже кладёт метки в свойства просмотра страницы, запоминает последние метки для важных событий и один раз записывает первое касание в свойства пользователя с приставкой initial_. Переменная visitorId из инструкции по подключению.

const TAGS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'yclid', 'gclid'];
const params = new URLSearchParams(window.location.search);
const campaign = {};
TAGS.forEach((tag) => {
  const value = params.get(tag);
  if (value) campaign[tag] = value;
});

if (Object.keys(campaign).length > 0) {
  localStorage.setItem('last_campaign', JSON.stringify(campaign));
  if (!localStorage.getItem('first_campaign_saved')) {
    const initial = {};
    Object.entries(campaign).forEach(([tag, value]) => (initial['initial_' + tag] = value));
    analytics.setUserProperties(visitorId, initial);
    localStorage.setItem('first_campaign_saved', '1');
  }
}

analytics.track('page_view', { page: location.pathname, referrer: document.referrer, ...campaign });

// важные события несут последние метки, график можно разбить по источнику
const lastCampaign = JSON.parse(localStorage.getItem('last_campaign') || '{}');
analytics.track('signup_completed', { ...lastCampaign });

yclid и gclid в nana800 хранятся как обычные свойства. В Яндекс Метрику и Google Ads аналитика их не отправляет: для загрузки офлайн-конверсий их нужно передать туда отдельно.

Метки в приложении и на сервере

В мобильном приложении меток в адресе нет. Если приложение открывается по ссылке с метками, прочитайте их из ссылки так же и передайте свойствами. На сервере на Node.js метки приходят в запросе от сайта: передайте их третьим аргументом track вместе с id пользователя.

Графики по источникам

Когда метки лежат в свойствах, их можно использовать в любом графике.

• Разбивка: в серии с событием signup_completed нажмите «Разбить по:» и выберите utm_source. Каждый источник станет своей линией или столбцом.
• Условие серии: оставьте только события, где utm_campaign равно названию кампании, и сравните её с остальными.
• Фильтр людей: в графике или в разделе пользователей выберите людей, у которых свойство пользователя initial_utm_source равно, например, yandex.
• Клик по столбцу источника открывает людей, которые пришли из этой рекламы. Подробнее в инструкции про клик по графику.