Как установить фрагмент кода JavaScript сегмента в веб-приложение на React
Краткое описание того, как мы интегрировали клиентскую библиотеку Segment в наше приложение.
Примечание для читателя: это старый пост, и я собираюсь обновить его в ближайшее время. React и Segment прошли долгий путь с момента выхода первого издания этой статьи.
Если вы хотите, чтобы Segment профессионально был установлен в ваше приложение React, мы с моей командой готовы нанять его. Свяжитесь со мной по адресу [email protected]. У меня более пяти лет в качестве инженера и десять лет в качестве маркетолога (LinkedIn). С каждым клиентом мы помогаем:
- создание плана отслеживания событий
- установка сегмента в кодовую базу (включая тестирование и контроль качества)
- установка и настройка последующих маркетинговых инструментов в пользовательском интерфейсе сегмента
А пока прошу прощения за устаревание этого поста.
Вот tl; dr.
- Убедитесь, что фрагмент сегмента встроен на каждую страницу
- Для вызовов страниц удалите analytics.page () из фрагмента сегмента по умолчанию и каждый раз, когда происходит изменение маршрута (т. е. изменения URL), обязательно вызывайте analytics.page (). Вы можете сделать это с помощью методов экземпляра React (например, componentDidMount), компонента более высокого порядка (HOR) или с помощью React Router, если вы его используете).
- Для вызовов analytics.track () добавьте их в обработчики событий (например, onSubmit, onClick и т. д.).
- Рассмотрите возможность хранения всего кода аналитики (будь то сегментный или иной) в одном файле и экспорте функций-оберток. Почему? Поскольку изолировать сторонний JS проще управлять и обновлять, а также удалять или заменять. Например:
// analytics.js
import analytics from 'segment'
export const trackFormSubmit = () => {
analytics.track('Form Submitted', {...properties here...})
}
// signup.js
// import analytics track or page calls then invoke as you wish
import {trackFormSubmit} from './analytics.js'
Вот оригинальный пост, который я написал много лет назад:
Сегмент помогает отслеживать важные показатели роста и активность взаимодействия с вашим продуктом. Затем он передает данные в ваши любимые инструменты маркетинга и аналитики, такие как Google Analytics или Mixpanel. Это не только сделает ваш код намного чище, но и сделает вашу жизнь намного проще, когда ваша маркетинговая команда перестанет приставать к вам, чтобы добавить и удалить дополнительные фрагменты.
Для нашего приложения мы хотим отслеживать три типа показателей: просмотры страниц, идентификационные данные пользователей и отслеживание событий. К счастью, у Segment есть три метода в своей библиотеке JavaScript, которые помогут в этом:
Прежде чем углубиться в то, как мы решили эту проблему, я должен отметить, что в этой статье предполагается, что вы имеете базовое представление о том, что делает сегмент, как работает их фрагмент кода JavaScript и как работают одностраничные приложения (SPA). Кроме того, я обращаюсь только к отслеживанию на стороне клиента… следите за моей предстоящей публикацией об отслеживании на стороне сервера Segment / React.
Самое главное, я хотел бы отметить, что наше решение несовершенно. Мы оптимизированы для доставки функционального MVP в сжатые сроки. Если бы у меня было больше времени, я бы определенно оптимизировал для модульности и разделения задач.
При работе с SPA Segment напоминает нам, что нажатие на ссылку или новую вкладку не перезагрузит веб-страницу. Таким образом, нам нужно удалить analytics.page () из фрагмента и вызвать этот метод при имитации загрузки новой страницы.
Но если мы удалим вызов страницы из нашего фрагмента, как мы отправим эти ценные данные на серверы Segment? Для этого у нас есть несколько вариантов. В Angular его можно просто прикрепить к роутеру. Но мое решение с React было другим. Вот как я это решил.
Первое решение: установите модуль узла сегмента как зависимость
Примечание для читателей: НЕ используйте это решение.
̶A̶ ̶b̶r̶i̶e̶f̶ ̶G̶o̶o̶g̶l̶e̶ ̶s̶e̶a̶r̶c̶h̶ ̶l̶e̶d̶ ̶m̶e̶ ̶t̶o̶ ̶d̶i̶s̶c̶o̶v̶e̶r̶ ̶t̶h̶a̶t̶ ̶S̶e̶g̶m̶e̶n̶t̶ ̶h̶a̶s̶ ̶a̶ ̶n̶p̶m̶ ̶m̶o̶d̶u̶l̶e̶.̶ ̶I̶ ̶d̶e̶c̶i̶d̶e̶d̶ ̶t̶o̶ ̶s̶t̶a̶r̶t̶ ̶h̶e̶r̶e̶.̶
̶n̶p̶m̶ ̶i̶n̶s̶t̶a̶l̶l̶ ̶s̶e̶g̶m̶e̶n̶t̶i̶o̶-̶s̶n̶i̶p̶p̶e̶t̶ ̶-̶-̶s̶a̶v̶e̶
̶U̶n̶f̶o̶r̶t̶u̶n̶a̶t̶e̶l̶y̶,̶ ̶w̶e̶ ̶a̶r̶e̶ ̶u̶s̶i̶n̶g̶ ̶w̶e̶b̶p̶a̶c̶k̶ ̶t̶o̶ ̶b̶u̶i̶l̶d̶ ̶o̶u̶r̶ ̶a̶p̶p̶ ̶a̶n̶d̶ ̶a̶s̶ ̶t̶h̶e̶ ̶S̶e̶g̶m̶e̶n̶t̶ ̶S̶u̶c̶c̶e̶s̶s̶ ̶T̶e̶a̶m̶ ̶p̶o̶i̶n̶t̶e̶d̶ ̶o̶u̶t̶,̶ ̶w̶e̶b̶p̶a̶c̶k̶ ̶d̶o̶e̶s̶n̶’̶t̶ ̶h̶a̶v̶e̶ ̶a̶ ̶d̶e̶f̶a̶u̶l̶t̶ ̶s̶h̶i̶m̶ ̶f̶o̶r̶ ̶c̶e̶r̶t̶a̶i̶n̶ ̶n̶o̶d̶e̶ ̶m̶o̶d̶u̶l̶e̶s̶,̶ ̶w̶h̶i̶c̶h̶ ̶w̶a̶s̶ ̶c̶a̶u̶s̶i̶n̶g̶ ̶o̶u̶r̶ ̶b̶u̶i̶l̶d̶ ̶t̶o̶ ̶f̶a̶i̶l̶.̶
̶E̶x̶c̶e̶p̶t̶ ̶f̶o̶r̶ ̶t̶h̶i̶s̶ ̶w̶e̶b̶p̶a̶c̶k̶ ̶i̶s̶s̶u̶e̶,̶ ̶I̶ ̶w̶o̶u̶l̶d̶ ̶d̶e̶f̶i̶n̶i̶t̶e̶l̶y̶ ̶h̶a̶v̶e̶ ̶p̶r̶e̶f̶e̶r̶r̶e̶d̶ ̶t̶o̶ ̶g̶o̶ ̶t̶h̶i̶s̶ ̶r̶o̶u̶t̶e̶.̶ ̶I̶’̶l̶l̶ ̶p̶l̶a̶n̶ ̶t̶o̶ ̶l̶o̶o̶k̶ ̶i̶n̶t̶o̶ ̶t̶h̶i̶s̶ ̶s̶o̶l̶u̶t̶i̶o̶n̶ ̶a̶g̶a̶i̶n̶ ̶s̶o̶o̶n̶ ̶e̶n̶o̶u̶g̶h̶ ̶b̶u̶t̶ ̶f̶o̶r̶ ̶s̶a̶k̶e̶ ̶o̶f̶ ̶f̶a̶s̶t̶ ̶i̶t̶e̶r̶a̶t̶i̶o̶n̶ ̶o̶f̶ ̶o̶u̶r̶ ̶M̶V̶P̶,̶ ̶I̶ ̶w̶a̶n̶t̶e̶d̶ ̶t̶o̶ ̶r̶e̶s̶e̶a̶r̶c̶h̶ ̶a̶l̶t̶e̶r̶n̶a̶t̶i̶v̶e̶ ̶s̶o̶l̶u̶t̶i̶o̶n̶s̶.̶ ̶I̶f̶ ̶y̶o̶u̶ ̶a̶r̶e̶n̶’̶t̶ ̶u̶s̶i̶n̶g̶ ̶w̶e̶b̶p̶a̶c̶k̶ ̶o̶r̶ ̶p̶r̶e̶f̶e̶r̶ ̶t̶o̶ ̶h̶a̶c̶k̶ ̶a̶w̶a̶y̶ ̶a̶t̶ ̶t̶h̶i̶s̶ ̶s̶o̶l̶u̶t̶i̶o̶n̶,̶ ̶I̶ ̶r̶e̶c̶o̶m̶m̶e̶n̶d̶ ̶g̶i̶v̶i̶n̶g̶ ̶i̶t̶ ̶a̶ ̶s̶h̶o̶t̶ ̶(̶a̶n̶d̶ ̶s̶h̶a̶r̶e̶ ̶y̶o̶u̶r̶ ̶f̶e̶e̶d̶b̶a̶c̶k̶ ̶i̶n̶ ̶t̶h̶e̶ ̶c̶o̶m̶m̶e̶n̶t̶s̶!̶)̶.̶
̶W̶r̶i̶t̶e̶r̶’̶s̶ ̶n̶o̶t̶e̶,̶ ̶J̶a̶n̶ ̶2̶0̶1̶8̶:̶ ̶W̶h̶e̶n̶ ̶I̶ ̶o̶r̶i̶g̶i̶n̶a̶l̶l̶y̶ ̶w̶r̶o̶t̶e̶ ̶t̶h̶i̶s̶,̶ ̶I̶ ̶c̶o̶u̶l̶d̶ ̶n̶o̶t̶ ̶g̶e̶t̶ ̶t̶h̶i̶s̶ ̶t̶o̶ ̶w̶o̶r̶k̶.̶ ̶B̶u̶t̶ ̶n̶o̶w̶ ̶I̶ ̶c̶a̶n̶ ̶o̶f̶ ̶c̶o̶u̶r̶s̶e̶,̶ ̶a̶s̶ ̶i̶t̶’̶s̶ ̶b̶e̶e̶n̶ ̶a̶ ̶f̶e̶w̶ ̶y̶e̶a̶r̶s̶ ̶o̶f̶ ̶J̶S̶ ̶e̶n̶g̶i̶n̶e̶e̶r̶i̶n̶g̶ ̶u̶n̶d̶e̶r̶ ̶m̶y̶ ̶b̶e̶l̶t̶,̶ ̶a̶s̶ ̶c̶a̶n̶ ̶b̶e̶ ̶s̶e̶e̶n̶ ̶b̶y̶ ̶a̶ ̶f̶e̶w̶ ̶o̶f̶ ̶m̶y̶ ̶c̶o̶m̶m̶i̶t̶s̶ ̶t̶o̶ ̶t̶h̶i̶s̶ ̶r̶e̶p̶o̶.̶ ̶T̶w̶o̶ ̶i̶m̶p̶o̶r̶t̶a̶n̶t̶ ̶t̶h̶i̶n̶g̶s̶ ̶t̶o̶ ̶n̶o̶t̶e̶:̶ ̶f̶i̶r̶s̶t̶,̶ ̶d̶o̶n̶’̶t̶ ̶u̶s̶e̶ ̶t̶h̶i̶s̶ ̶p̶a̶c̶k̶a̶g̶e̶ ̶u̶n̶l̶e̶s̶s̶ ̶y̶o̶u̶ ̶a̶b̶s̶o̶l̶u̶t̶e̶l̶y̶ ̶m̶u̶s̶t̶ ̶h̶a̶v̶e̶ ̶t̶o̶.̶ ̶T̶h̶a̶t̶ ̶i̶s̶ ̶a̶ ̶r̶e̶c̶o̶m̶m̶e̶n̶d̶a̶t̶i̶o̶n̶ ̶f̶r̶o̶m̶ ̶S̶e̶g̶m̶e̶n̶t̶.̶ ̶S̶e̶c̶o̶n̶d̶l̶y̶,̶ ̶t̶h̶i̶s̶ ̶s̶o̶l̶u̶t̶i̶o̶n̶ ̶w̶i̶l̶l̶ ̶o̶n̶l̶y̶ ̶a̶d̶d̶ ̶t̶h̶e̶ ̶a̶n̶a̶l̶y̶t̶i̶c̶s̶.̶j̶s̶ ̶s̶n̶i̶p̶p̶e̶t̶ ̶t̶o̶ ̶y̶o̶u̶r̶ ̶a̶p̶p̶.̶ ̶I̶t̶ ̶w̶i̶l̶l̶ ̶n̶o̶t̶ ̶h̶a̶n̶d̶l̶e̶ ̶t̶r̶a̶c̶k̶ ̶c̶a̶l̶l̶s̶.̶ ̶I̶f̶ ̶y̶o̶u̶ ̶d̶o̶ ̶d̶e̶c̶i̶d̶e̶ ̶t̶o̶ ̶u̶s̶e̶ ̶t̶h̶i̶s̶ ̶n̶p̶m̶ ̶p̶a̶c̶k̶a̶g̶e̶,̶ ̶t̶h̶e̶r̶e̶ ̶i̶s̶ ̶a̶n̶ ̶o̶p̶t̶i̶o̶n̶ ̶t̶o̶ ̶p̶r̶e̶v̶e̶n̶t̶ ̶t̶h̶e̶ ̶a̶n̶a̶l̶y̶t̶i̶c̶s̶.̶p̶a̶g̶e̶(̶)̶ ̶m̶e̶t̶h̶o̶d̶ ̶f̶r̶o̶m̶ ̶f̶i̶r̶i̶n̶g̶,̶ ̶t̶h̶e̶r̶e̶b̶y̶ ̶a̶l̶l̶o̶w̶i̶n̶g̶ ̶y̶o̶u̶ ̶t̶o̶ ̶i̶n̶v̶o̶k̶e̶ ̶p̶a̶g̶e̶ ̶c̶a̶l̶l̶s̶ ̶m̶a̶n̶u̶a̶l̶l̶y̶.̶ ̶I̶ ̶h̶i̶g̶h̶l̶y̶ ̶s̶u̶g̶g̶e̶s̶t̶ ̶p̶u̶t̶t̶i̶n̶g̶ ̶f̶a̶l̶s̶e̶ ̶f̶o̶r̶ ̶t̶h̶i̶s̶ ̶o̶p̶t̶i̶o̶n̶ ̶s̶o̶ ̶y̶o̶u̶ ̶c̶a̶n̶ ̶h̶a̶v̶e̶ ̶b̶e̶t̶t̶e̶r̶ ̶c̶o̶n̶t̶r̶o̶l̶ ̶o̶f̶ ̶w̶h̶e̶n̶ ̶p̶a̶g̶e̶ ̶c̶a̶l̶l̶s̶ ̶g̶e̶t̶ ̶i̶n̶v̶o̶k̶e̶d̶.̶
Второе решение: прикрепите код к хуку onEnter в React.
Еще одно решение, которое я попробовал, заключалось в вызове метода analytics.page () в маршрутизаторе React. В React есть ловушка onEnter, которая позволяет нам вызывать методы внутри самой маршрутизации.
Это казалось многообещающей идеей. Мне он особенно нравится, потому что он лучше всего справляется с разделением проблем. Кроме того, оно СУХОЕ и более модульное, чем следующее решение.
Я собирался попробовать это и определенно рекомендую вам попробовать (и обновите меня через твиттер или в комментариях ниже), но, к счастью, получил ответ от команды успеха сегмента. Их замечательный член команды Уильям предложил мне следующее решение.
Третье и последнее решение: используйте поток жизненного цикла компонентов React.
"Бритва Оккама". Конечно! Самое простое решение проблемы - обычно лучшее. Зачем об этом думать?
Среди конкурирующих гипотез следует выбрать гипотезу с наименьшим количеством предположений.
Что я сделал, основываясь на отзывах Уильяма, так это поместил основной фрагмент в заголовок моего файла index.html, а затем поместил все важные методы - страницу, идентификацию, отслеживание - в различные компоненты жизненного цикла React, которые обычно были componentDidMount .
Тем, кто не знаком с жизненным циклом компонентов React, я настоятельно рекомендую прочитать эту статью или просто понять, что в React есть несколько методов, которые вызываются в определенное время.
Например, для наших данных о просмотрах страницы мы, скорее всего, захотим вызвать вызов analytics.page () сразу после отображения страницы. Лучшим методом жизненного цикла для вызова страницы будет componentDidMount. Как упоминалось в статье выше: «Доступ к DOM можно получить с помощью этого метода… Любые взаимодействия с DOM всегда должны происходить на этом этапе, а не внутри метода рендеринга.»
Для analytics.identify () лучше всего загружать его на странице входа или регистрации и в методе React componentDidUpdate. Этот метод используется для выполнения операций DOM после обновления данных, то есть когда пользователь успешно вошел в систему или зарегистрировался.
Для отслеживания событий щелчка лучше всего активировать метод analytics.track () в нашем методе handleSubmit, поскольку он запускается после отправки формы.
Все сделано.
Посмотрите, какие прекрасные данные отображаются в нашем отладчике сегментов!
Вот и все! Легко, правда? Эта статья была полезной? Если да, пожалуйста, лайкните статью ниже. Или оставьте комментарий, если у вас есть вопросы.
Дайте мне знать в Twitter - @benhoffman_
