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

Но что делать, если вы также хотите дополнить свои записи сессий данными, специфичными для вашего приложения?

Например, понять, на каком платном тарифе находится ваш пользователь, когда вы просматриваете его воспроизведение? Эта информация может предоставить вашим разработчикам дополнительный контекст, так что то, что она не стандартна, ещё не значит, что мы должны её игнорировать, не так ли?

Вот тут-то и вступают в игру метаданные.

Обратите внимание, что на нашем канале YouTube есть видеоверсия этого руководства. Так что не стесняйтесь ознакомиться с ней, если вам ближе визуальное обучение.

В контексте воспроизведения сессии метаданные — это вся информация, которую ваш пользователь не генерирует, но которая так или иначе относится к этому пользователю.

Иными словами, если пользователь нажимает на определённую ссылку или выполняет конкретное действие — это не метаданные, это пользовательское событие (ознакомьтесь с документацией о Пользовательских событиях, если хотите узнать о них больше).

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

Первое, что нужно сделать, — настроить поля метаданных непосредственно в платформе.

Если вы пропустите этот шаг, вы не сможете записать никакую информацию, так что не пропускайте его!

Для этого вы перейдёте на страницу конфигурации вашего проекта, нажав на шестерёнку в правом верхнем углу верхнего меню:

Оказавшись там, нажмите на пункт меню Metadata в крайней левой части экрана:

Это перенесёт вас на экран конфигурации метаданных. Убедитесь, что вы выбрали правильный проект из выпадающего списка, и создайте столько полей, сколько вам нужно.

Для этого примера мы создали 3 поля для проекта «e-commerce test»:

• «plan», которое будет содержать текущий тариф пользователя.
• «utm_source», содержащее код, определяющий, откуда пришёл пользователь.
• И, наконец, «items_in_cart», которое содержит общее количество товаров в корзине пользователя.

Последнее — это фрагмент данных, зависящий от действия пользователя, что отличается от того, что мы рекомендуем. Однако в этом примере вы увидите ограничения полей метаданных и поймёте, почему именно эта информация должна была быть пользовательским событием.

Когда эта настройка готова, следующий шаг — добавить необходимый код, чтобы фактически отправлять данные как часть вашей сессии.

Чтобы добавить метаданные к сессии, мы используем метод setMetadata из трекера. Вы можете использовать этот метод в любой момент на протяжении сессии пользователя, только имейте в виду следующие два соображения:

1. Если вы применяете несколько значений к одному и тому же полю метаданных, в составе сессии сохранится только последнее.
2. Все значения должны быть строками. В противном случае они не сохранятся. Трекер не приводит значения к строкам, так что будьте с этим осторожны.

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

Красные стрелки показывают, где были внесены соответствующие изменения. Этот провайдер контекста экспортирует функцию под названием setMetadata, которая, в свою очередь, вызывает метод setMetadata из трекера.

Если вам нужен рабочий пример, вы можете ознакомиться с этим репозиторием.

Теперь всё, что нам нужно сделать, — это использовать экспортированную функцию каждый раз, когда мы хотим настроить поля метаданных.

Для целей этого примера мы решим установить поля utm_source и plan непосредственно с главной страницы, а затем, каждый раз, когда пользователь добавляет товар в корзину, мы будем обновлять последнее оставшееся поле.

В файл pages/index.tsx мы добавим следующий код:

// inside the main component
const { startTracking, setMetadata } = useContext(TrackerContext)
//...
useEffect(() => {
    async function getProds() {
      await startTracking()
      setMetadata('plan', getPlan()) //addition
      setMetadata('utm_source', getUTMSource()) //addition
      dispatch(getMakeUpProducts() as any)
    }

    getProds()
  }, [dispatch])

Большая часть этого хука уже была на месте, но мы добавили ссылку на функцию setMetadata, а затем два её вызова. Обе функции, getPlan и getUTMSource, возвращают случайные данные для этого примера. Для вашего конкретного сценария использования вам придётся реализовать их соответствующим образом.

Этот код установит эти значения метаданных при загрузке главной страницы.

Теперь нам нужно добавить последнее значение — количество товаров в корзине. Для этого мы перейдём к компоненту ProductSidebar, который отвечает за управление тем, что происходит, когда мы нажимаем «Add to cart», и добавим ещё один хук, чтобы реагировать на изменение количества товаров в корзине.

useEffect(() => {
    setMetadata('items_in_cart', productsInCart)
  }, [productsInCart])

Конечно, вам также нужно получить функцию setMetadata от провайдера контекста, как и раньше, но как только вы это сделаете, всё готово.

Теперь данные сохраняются. Мы также можем увидеть это на платформе через список сессий.

Теперь, когда метаданные сохраняются внутри всех воспроизведений сессий, что вы можете с ними делать?

Что ж, для начала вы можете визуализировать их прямо из воспроизведения:

Вы должны начать видеть поля метаданных в правом верхнем углу экрана вашего плеера. В этом примере мы видим, что у пользователя тариф Enterprise Edition, он пришёл из Reddit и добавил в корзину только один товар.

Другая мощная вещь, которую вы можете делать с метаданными, — использовать их в качестве параметра поиска. С помощью панели omnisearch вы можете выбрать созданные вами пользовательские поля метаданных в качестве параметров поиска:

Так что если вы хотите просмотреть только воспроизведения Enterprise Edition, вы можете просто выбрать поле Plan и отфильтровать его по «ee», вот так:

Вы также можете использовать ту же панель omnisearch при создании виджета для вашего дашборда. Так что, чтобы продолжить пример с EE, если бы вы захотели создать дашборд только для клиентов Enterprise, вы могли бы фильтровать каждый пользовательский виджет с помощью атрибута «Plan».

Например, следующий виджет показывает, сколько клиентов Enterprise нажимают на кнопку «Add to cart»:

В результате получается виджет, который выглядит так:

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

Метаданные могут значительно расширить инсайты, которые вы можете получить из воспроизведений сессий, а их настройка относительно проста.

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

Полный исходный код примера проекта, использующего метаданные, можно посмотреть здесь.

Если у вас возникнут какие-либо проблемы с любым из шагов этого процесса, свяжитесь с нами в нашем сообществе Slack и задайте вопрос нашим разработчикам напрямую!