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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Красные стрелки показывают, где были внесены соответствующие изменения. Этот провайдер контекста экспортирует функцию под названием 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 при создании виджета для вашего dashboard. Так что, чтобы продолжить с примером EE, если бы вы хотели создать dashboard только для клиентов Enterprise, вы могли бы фильтровать каждый пользовательский виджет с помощью атрибута «Plan».

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

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

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

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

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

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

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