react 交互

by Faouzi Oudouh

通過Faouzi Oudouh

如何在React應用程序中跟蹤用戶交互 (How to track user interactions in your React app)

Worry not about which Analytics provider you need to gather user interaction within your app.

不必擔心需要哪個Analytics(分析)提供程序來收集應用程序內的用戶交互。

Instead, worry more about how to gather these interactions.

相反，請更多地擔心如何收集這些交互。

A few months ago, I was involved in an Analytics project within a large E-commerce organization. This organization has a data-driven business where the analytics are more important than anything else.

幾個月前，我參與了一個大型電子商務組織中的Analytics項目。該組織擁有數據驅動的業務，其中分析比其他任何事情都重要。

We were building a Datalayer solution to hold all the user interactions and actions before pushing them to the Analytics provider (for example, Google Tag Manager). We built our DataLayer solution without having React in mind, as the migration to React started later.

我們正在構建一個數據層解決方案，以保留所有用戶交互和操作，然后再將其推送給Google Analytics(分析)提供商(例如Google跟蹤代碼管理器)。我們在構建DataLayer解決方案時沒有考慮到React，因為后來開始遷移到React。

React時間！ (React Time!)

We started the migration to React progressively, which means React was responsible only for rendering some parts of the platform. And I was responsible for integrating the DataLayer solution we had already built with React Land.

我們開始逐步遷移到React，這意味著React僅負責渲染平臺的某些部分。我負責整合我們已經使用React Land構建的DataLayer解決方案。

Suddenly, the difficulties started coming up:

突然，困難開始出現：

The solution was jQuery based
該解決方案基于jQuery
It was unpredictable
這是不可預測的
It was hard to test and maintain
很難測試和維護
Sharing knowledge with other developers who didn’t have analytics experience was scary!
與沒有分析經驗的其他開發人員共享知識非常可怕！

I started looking in the community for ready-to-use solutions that fit our needs. There was just no chance.

我開始在社區中尋找適合我們需求的即用型解決方案。只是沒有機會。

And here’s where the idea of React-Tracker came in.

這就是React-Tracker的想法出現的地方。

Why React-tracker?

為什么選擇React-tracker ？

It’s easy to use, test, and maintain (Redux-like)
易于使用，測試和維護(類似于Redux)
It can be used with any Analytics provider
可以與任何Google Analytics(分析)提供商一起使用
It’s scalable and predictible
可擴展且可預測
It has a minimal API
它有一個最小的API

With React-tracker, we were easily able to integrate two Analytics providers (Google Tag manager and Adobe Analytics).

借助React-tracker，我們可以輕松集成兩個Google Analytics(分析)提供程序(Google跟蹤代碼管理器和Adobe Analytics)。

怎么樣？ (How?)

To keep it simple, think of it as Redux.

為簡單起見， 將其視為Redux 。

Instantiate your Tracker ~ Store of your events
實例化Tracker? 事件存儲
Create your event-listener(s) ~ Reducer
創建您的事件監聽器? 減速器
Event ~ Action
事件? 動作
Provide your tracker instance to your Root Component.
將跟蹤器實例提供給根組件。
React-tracker will magically take care of providing your tracker instance to all your Components.
React-tracker將神奇地為您的所有組件提供跟蹤器實例。

Before instantiating anything, let’s go through each term on the list above and explain it.

在實例化任何內容之前，讓我們仔細閱讀上面列表中的每個術語并進行解釋。

什么是追蹤器？ (What is Tracker?)

A Tracker is a bag that holds the tracking-history along with some functions to listen to/dispatch events.

跟蹤器是一個裝有跟蹤歷史記錄以及一些偵聽/調度事件的功能的包。

tracker.on(eventType, callback) the given callback will be called whenever an event with event.type equal to the given eventType is dispatched.
每當調度event.type等于給定eventType的事件時，都會調用tracker.on(eventType, callback)給定的回調。
tracker.trackEvent(event) is a function that accepts an event and calls all the event-listeners that listen on this event.
tracker.trackEvent(event)是一個接受event并調用偵聽此event所有事件偵聽器的函數。
tracker.getHistory() returns an Array and contains all the tracked events that were saved
tracker.getHistory()返回一個數組，其中包含所有已保存的跟蹤事件

什么是活動？ (What is an Event?)

An event is a plain object that represents the user interaction, like user click, page view, and purchase.

事件是代表用戶互動(例如用戶點擊，頁面瀏覽和購買)的普通對象。

It should be an object with type and associated data if any. Here’s an example of a PageView event:

它應該是具有type和相關data如果有)的對象。這是PageView事件的示例：

const PageViewEvent = {  type: 'PAGE_VIEW', // Required  data: { // Optional    pageId: '123',    userId: 'UID-123'  }}

什么是事件監聽器？ (What is the Event-listener?)

The event-listener is a function that will be called if its eventType matched the type of the dispatched event.

event-listener是一個函數，如果其eventType與調度的事件的類型匹配，則將調用該函數。

eventListener.eventType === event.type

Example of an Event-listener:

事件偵聽器的示例：

const pageViewListener = (event, ) => {  // For example let's push the received event to our DataLayer.  window.dataLayer.push(event);

return event;};

Let’s allow our pageViewListener to listen only on PAGE_VIEW event:

讓我們讓pageViewListener僅監聽PAGE_VIEW事件：

pageViewListener.eventType = 'PAGE_VIEW';

There are four things to notice here:

這里有四件事要注意：

Returning the event will save it in the trackingHistory. Otherwise it will be ignored :)
返回事件將其保存在trackingHistory中。否則它將被忽略:)
If no eventType was specified to the event-listener, it will be called on every event dispatch.
如果未為事件偵聽器指定eventType ，則將在每次事件分派時調用它。
eventHistory was provided as a second parameter to help you apply restrictions on your events easily, like tracking a Product-click once. In order to achieve this, you need to have the history of events in your hands.
提供了eventHistory作為第二個參數，以幫助您輕松地對事件應用限制，例如跟蹤一次產品點擊。為了實現這一點，您需要掌握事件的歷史記錄。
Pushing our event to window.dataLayer was just an example. You can mainly do anything in this function like calling GTM directly or Facebook Pixel
將我們的事件推送到window.dataLayer只是一個示例。您主要可以使用此功能執行任何操作，例如直接調用GTM或Facebook Pixel

是時候結合一切了 (Time to combine everything)

First things first:

第一件事：

1.實例化我們的英雄`Tracker:` (1. Instantiate our hero `Tracker:`)

import { Tracker } from 'react-tracker';

const tracker = new Tracker();

That’s it!

而已！

Now we have our Tracker but with no event-listener :-(

現在我們有了Tracker但是沒有事件監聽器：-(

There are two ways to add event-listeners to your Tracker :

有兩種方法可以將事件監聽Tracker添加到Tracker ：

On instantiating:
實例化時：

const anOtherTracker = new Tracker([  pageViewListener,  productClickListener,  ...]);

Or you can add the event-listener after instantiating your Tracker using on:
或者，您可以使用on實例化Tracker后添加事件監聽Tracker ：

const anOtherTracker = new Tracker();

tracker.on('PAGE_VIEW', pageViewListener);

2.創建一個頁面視圖事件偵聽器： (2. Create a page view event-listener :)

I want my event-listener to push the received PAGE_VIEW event directly to my dataLayer.

我希望事件監聽器將接收到的PAGE_VIEW事件直接推送到我的dataLayer.

const pageViewListener = (event, trackingHistory) {

window.dataLayer.push(event);

};

Let our tracker know about the pageViewListener :

讓我們的tracker了解pageViewListener ：

tracker.on('PAGE_VIEW', pageViewListener);

3.創建事件創建者： (3. Create Event-creator :)

Event-creator is just a function that returns an event object:

事件創建者只是一個返回事件對象的函數：

const pageViewEvent = (pageId, userId) => ({  type: 'PAGE_VIEW',  data: {    pageId,    userId  }});

Our Tracker is well configured now.

我們的Tracker現在配置正確。

向我們的`tracker`介紹React (Introducing our `tracker` to React)

4.向根組件提供我們的`tracker` ： (4. Provide our `tracker` to the Root Component:)

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);

By providing our tracker to the root component, it will be magically available for all the sub-components.

通過為根組件提供tracker ，它可以神奇地用于所有子組件。

So now, since we have our tracker available, let’s use it to track the PAGE_VIEW event on the RootComponent mount.

所以，現在，因為我們有我們的tracker可用，讓我們用它來跟蹤PAGE_VIEW上的事件RootComponent安裝。

4.跟蹤`Page View Event.` (4. Track `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 will take care of providing us trackEvent from our tracker so we can use it to track the pageView event.

withTracking HOC將trackEvent從tracker向我們提供trackEvent ，以便我們可以使用它來跟蹤pageView事件。

mapTrackingToProps will merge the returned object with the RootComponent ’s props, which means the trackPageView will be available as a prop within RootComponent.

mapTrackingToProps將合并返回的對象與RootComponent的道具，這意味著trackPageView將在RootComponent.作為道具RootComponent.

That’s it — you’re done ;)

就是這樣-您完成了；)

5.演示 (5. Demo)

Please refer to this demo and to GitHub for in-depth documentation and a better way to organize your tracking files.

請參閱此演示和GitHub ，以獲取深入的文檔以及更好的組織跟蹤文件的方法。

試試看！ (Give it a try!)

React-tracker was built to facilitate the integration of Analytics tools as much as possible, by proving a minimal API and easy integration with your react app.

React-tracker的構建是通過證明最少的API并輕松與您的react應用程序集成來盡可能地促進Analytics工具的集成。