
Содержание статьи
от Faouzi Oudouh

Не беспокойтесь о том, какой поставщик Analytics нужен для сбора данных о взаимодействии пользователя в вашем приложении.
Больше всего заботьтесь о том, как собрать эти взаимодействия.
Несколько месяцев назад я участвовал в проекте Analytics в большой организации электронной коммерции. Эта организация управляет данными, где аналитика важнее всего остального.
Мы создавали решение Datalayer, чтобы сохранять все взаимодействия и действия пользователя перед тем, как передать их поставщику Analytics (например, Google Tag Manager). Мы создали наше решение DataLayer, не имея в виду React, поскольку миграция на React началась позже.
Время реакции!
Мы постепенно начали переход на React, что означает, что React отвечал только за рендеринг некоторых частей платформы. И я отвечал за интеграцию решения DataLayer, которое мы уже создали из React Land.
Вдруг начали возникать трудности:
- Решение базировалось на jQuery
- Это было непредсказуемо
- Это было тяжело тестировать и поддерживать
- Делиться знаниями с другими разработчиками, не имевшими опыта аналитики, было страшно!
Я начал искать в сообществе готовые к использованию решения, отвечающие нашим потребностям. Просто не было шансов.
И здесь возникла идея React-Tracker.
Почему React-tracker?
- Он прост в использовании, тестировании и обслуживании (похож на Redux)
- Его можно использовать с любым поставщиком Analytics
- Он масштабирован и предсказуем
- Он имеет минимальный API
С помощью React-tracker, мы легко смогли интегрировать двух поставщиков Analytics (Google Tag Manager и Adobe Analytics).
как?
Чтобы было просто, представьте это как Redux.
- Создайте свой трекер ~ Магазин ваших событий
- Создайте свой слушатель событий ~ Редуктор
- Событие ~ Действие
- Предоставьте свой экземпляр трекера корневому компоненту.
- React-tracker волшебным образом позаботится о предоставлении вашего экземпляра трекера всем вашим компонентам.
Прежде чем создавать экземпляры, давайте рассмотрим каждый термин в списке выше и объясним его.
Что такое трекер?
Трекер – это сумка, в которой хранится история отслеживания вместе с некоторыми функциями для прослушивания/отправки событий.
tracker.on(eventType, callback)
заданный обратный вызов будет вызван каждый раз, когда событие сevent.type
равно заданномуeventType
отправляется.tracker.trackEvent(event)
это функция, принимающая anevent
и вызывает всех слушателей событий, слушающих этоevent
.tracker.getHistory()
возвращает массив и содержит все отслеживаемые события, сохраненные
Что такое событие?
Событие – это обычный объект, который представляет взаимодействие пользователя, например клик пользователя, просмотр страницы и покупка.
Это должен быть объект с type
и связаны data
если какой-то. Вот пример a PageView
событие:
const PageViewEvent = { type: 'PAGE_VIEW', // Required data: { // Optional pageId: '123', userId: 'UID-123' }}
Что такое слушатель событий?
Слушатель событий – это функция, которая будет вызвана, если ее eventType
соответствует типу присланного события.
eventListener.eventType === event.type
Пример слушателя событий:
const pageViewListener = (event, ) => { // For example let's push the received event to our DataLayer. window.dataLayer.push(event);
return event;};
Разрешим наши pageViewListener
слушать только на PAGE_VIEW
событие:
pageViewListener.eventType="PAGE_VIEW";
Здесь следует обратить внимание на четыре вещи:
- Возвращение события сохранит его в истории отслеживания. Иначе он будет проигнорирован 🙂
- Если нет
eventType
было указано для прослушивателя событий, он будет вызван во время каждой отправки события. eventHistory
было предоставлено как второй параметр, чтобы помочь вам легко применить ограничения к вашим событиям, например отслеживание одноразового нажатия продукта. Чтобы этого добиться, вам нужно иметь в руках историю событий.- Подталкивание нашего события к
window.dataLayer
был только примером. В этой функции вы можете делать что угодно, например звонитьGTM
непосредственно илиFacebook Pixel
Пора все соединить
Прежде всего:
1. Создание экземпляра нашего героя Tracker:
import { Tracker } from 'react-tracker';
const tracker = new Tracker();
Это!
Теперь у нас есть свое Tracker
но без слушателя событий 🙁
Есть два способа добавить слушателей событий к вашему Tracker
:
const anOtherTracker = new Tracker([ pageViewListener, productClickListener, ...]);
- Или вы можете добавить прослушивающий события после создания своего экземпляра
Tracker
используяon
:
const anOtherTracker = new Tracker();
tracker.on('PAGE_VIEW', pageViewListener);
2. Создайте обработчик событий просмотра страницы:
Я хочу, чтобы мой слушатель событий направил полученное PAGE_VIEW
событие непосредственно к моему dataLayer.
const pageViewListener = (event, trackingHistory) {
window.dataLayer.push(event);
};
Пусть наши tracker
знать о pageViewListener
:
tracker.on('PAGE_VIEW', pageViewListener);
3. Создайте Event-creator:
Event-creator — это только функция, возвращающая объект события:
const pageViewEvent = (pageId, userId) => ({ type: 'PAGE_VIEW', data: { pageId, userId }});
Сейчас наш трекер хорошо сконфигурирован.
Представляем наш tracker
реагировать

4. Предоставьте наши tracker
к корневому компоненту:
import React from 'react;import ReactDOM from 'react-dom';import { TrackerProvider } from 'react-tracker'
import RootComponent from '../RootComponent';
const RootComponentWithTracking = ( <TrackerProvider tracker={tracker}> <RootComponent /> </TrackerProvider>);
const domElement = document.getElementById('root');
ReactDOM.render(<RootComponentWithTracking />, domElement);
Предоставляя наши tracker
к корневому компоненту, он будет волшебным образом доступен для всех подкомпонентов.
Итак, поскольку мы имеем свой tracker
доступный, давайте используем его для отслеживания PAGE_VIEW
событие на RootComponent
монтировать.
4. Трек Page View Event.
import React from 'react';import { withTracking } from 'react-tracker';// We created this function earlier at (3.)import { pageViewEvent} from '../tracking/events';
class RootComponent extends React.Component { componentDidMount() { this.props.trackPageView(this.props.pageId, this.props.userId) }
render() { return (<h1> My App is awesome </h1>) }};
const mapTrackingToProps = trackEvent => ({ trackPageView: (pageId, userId) => trackEvent(pageViewEvent(pageId, userId))});
export default withTracking(mapTrackingToProps)(RootComponent);
withTracking
HOC позаботится о предоставлении нам trackEvent
из нашего tracker
поэтому мы можем использовать его для отслеживания pageView
событие.
mapTrackingToProps
объединит возвращенный объект с RootComponent
‘s props, что означает trackPageView
будет доступен как опорный элемент RootComponent.
Вот и все готово 😉
5. Демо
Просмотрите эту демонстрацию и GitHub, чтобы получить подробную документацию и лучший способ упорядочения отслеживающих файлов.
Попробуй!
React-tracker был создан, чтобы максимально облегчить интеграцию инструментов Analytics, доказав минимальный API и простую интеграцию с приложением React.
Спасибо
Спасибо Доха Фариди, АбдельАли Эрамли и Халиду Бенрафику за ваш полезный отзыв.