本文共 8942 字,大约阅读时间需要 29 分钟。
react 交互
by Faouzi Oudouh
通过Faouzi Oudouh
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。
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:
突然,困难开始出现:
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 came in.
这就是的想法出现的地方。
Why ?
为什么选择 ?
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)。
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
事件〜 动作
React-tracker will 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.
在实例化任何内容之前,让我们仔细阅读上面列表中的每个术语并进行解释。
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()
返回一个数组,其中包含所有已保存的跟踪事件
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' }}
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
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:
这里有四件事要注意:
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
First things first:
第一件事:
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
:
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);
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);
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)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 = ();
const domElement = document.getElementById('root');
ReactDOM.render(, domElement);
By providing our tracker
to the root component, it will be 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
安装。
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 (My App is awesome
) }};
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 ;)
就是这样-您完成了;)
Please refer to this and to for in-depth documentation and a better way to organize your tracking files.
请参阅此和 ,以获取深入的文档以及更好的组织跟踪文件的方法。
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.
构建是通过证明最少的API并轻松与您的react应用程序集成来尽可能地促进Analytics工具的集成。
Thank you , and for your helpful feedback.
感谢 , 和的有用反馈。
翻译自:
react 交互
转载地址:http://mdgwd.baihongyu.com/