Экспериментальная библиотека для измерения амплитуды в веб-приложениях React

TL; DR response -ampitude может помочь командам, использующим React, получить больше пользы от Amplitude быстрее и с меньшими усилиями. Ознакомьтесь с реакцией-амплитудой на GitHub.

Хороший инструментарий продуктовой аналитики требует планирования и времени. Вот почему Amplitude разрабатывает решения, которые помогают командам планировать, внедрять, обеспечивать контроль качества и отслеживать изменения в инструментах. В прошлом году мы выпустили Таксономию; в этом году мы выпустили расширение Chrome Instrumentation Explorer и новый портал документации для разработчиков. Мы понимаем, что еще предстоит решить много проблем, и продолжаем искать новые способы сделать инструментарий более простым и полезным.

Мы в Amplitude большие поклонники React; React поддерживает основное веб-приложение Amplitude. Основным способом регистрации событий аналитики в нашем приложении является использование специального промежуточного программного обеспечения Redux, которое просто преобразует события Redux в вызовы Amplitude logEvent. Это решение предлагает нам несколько преимуществ, в том числе возможность запрашивать у нашего глобального приложения любую релевантную информацию, которую мы можем легко прикрепить к некоторым событиям в качестве свойств. Однако у него есть некоторые недостатки, главным из которых является многословие и необходимость в большом количестве «пропеллеров» (т. Е. Пропуска реквизита через множество слоев компонентов).

На одном из наших недавних хакатонов я хотел изучить, как будет выглядеть декларативный React компонентный API Amplitude. Я также хотел изучить, как контекстный API React может помочь решить некоторые проблемы, связанные с подключением свойств событий. Я был очень доволен результатом и взволнован тем, как этот новый API может позволить новые варианты использования, которые я изначально не собирался решать.

API

  1. Избегайте связывания свойств события через несколько уровней компонентов, используя компонент <Amplitude> и свойство eventProperties. На основе React Context API любой <Amplitude> компонент в дереве React может предоставлять своим потомкам дополнительные свойства событий. Это упрощает предоставление подробных метаданных для всех событий, которые происходят в определенной части пользовательского интерфейса. Это также позволяет вам продолжать разделять проблемы ваших компонентов, по сравнению с тем, когда обычно вам приходилось предоставлять определенные реквизиты только для инструментовки.
  2. Отслеживайте вызовы функций внутри render с помощью компонента <Amplitude>, который предлагает API рендеринга свойств.
  3. Запускать события, когда компоненты монтируются и обновляются с помощью компонентов <LogOnMount /> и <LogOnChange value={...} />.

Пример: инструменты AmpliTunes

Вот «скриншот» придуманного музыкального веб-плеера AmpliTunes, написанного на React. Фиолетовые и оранжевые аннотации обозначают компоненты приложения.

Допустим, мы хотим инструментировать эти события:

  • просмотреть экран воспроизведения
  • Играть песню
  • перемотка
  • стремиться
  • перемотка вперед
  • Поделиться

И для каждого события мы хотим включить следующие свойства:

  • идентификатор песни
  • идентификатор жанра
  • идентификатор плейлиста
  • песня добавлена ​​в избранное
  • время истекло; истекшее время

При использовании традиционных инструментов реализация только событий без свойств должна быть тривиальной. Нам просто нужно несколько logEvent вызовов в компонентах Seeker, RewindButton, PlayButton, FastForwardButton и ShareMenu.

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

  1. Это требует много времени и шаблонов.
  2. Это может нарушить инкапсуляцию API или для этих компонентов более низкого уровня.

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

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

Полноценный рабочий пример реализации амплитуды реакции можно найти в этой инструментальной игре« Крестики-нолики на CodeSandbox».

Быстрое начало работы с инструментарием многоразовых компонентов

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

Это похоже на то, что обещают решения «autotrack» / «autocapture» - решение без строк кода для отслеживания многих взаимодействий пользовательского интерфейса в вашем приложении. С приложениями React, использующими амплитуду реакции, вам все равно нужно будет написать код. Однако всего за несколько часов инженерной работы вы можете получить полезные поведенческие данные для больших областей вашего приложения.

Одна из конкретных стратегий, которые вы могли бы использовать, - это оснастить критически важные и повторно используемые компоненты нижнего уровня (например, «Кнопка», «TextInput», «Поиск», «Выпадающий список» и т. Д.) Такими событиями, как «кнопка щелчка», «изменение ввода текста. »,« Раскрывающийся список ». Затем в нескольких ключевых местах некоторых компонентов более высокого уровня предоставьте некоторые полезные свойства событий для отслеживания метаданных и местоположения того, где произошло событие.

Эта стратегия дает тот же результат, что и решения «autotrack» / «autocapture», но она не полагается на селекторы CSS или конкретные события DOM и управляется прямо в исходном коде приложения. По мере того, как вы вкладываете больше средств в инструменты аналитики, каждое дополнительное свойство события, добавляемое к компоненту на более высоком уровне в дереве компонентов, будет распространяться на все существующие события, зарегистрированные в этом поддереве.

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

Что дальше

Мы уже несколько месяцев используем метод амплитуды реакции и получили многие из этих преимуществ. Самое главное, мы находим инструментарий более интересным, чем когда-либо прежде, благодаря декларативному API, который помогает нам избегать шаблонов и размещать события / свойства в наиболее естественном месте в иерархии приложения.

response -ampitude все еще экспериментальный, поэтому мы не предлагаем официальную техническую поддержку для этого SDK. Тем не менее, у нас есть много идей о том, как расширить амплитуду реакции и улучшить ее (например, совместимость с React Native).

Мы были бы рады услышать от вас - что бы вы хотели увидеть по амплитуде реакции? Дайте нам знать или сообщите о проблеме на GitHub.