от 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) это функция, принимающая an event и вызывает всех слушателей событий, слушающих это 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.

Спасибо

Спасибо Доха Фариди, АбдельАли Эрамли и Халиду Бенрафику за ваш полезный отзыв.