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工具的集成。