r-track
r-track是一个基于装饰器的埋点业务插件,可实现埋点代码与业务代码完全解耦,适用于react项目~
安装
YARN
$ yarn add r-track
NPM
$ npm install r-track --save
用法
r-track 包含track、inject两个方法,基本用法如下:
inject
注入当前模块(页面)相关的埋点声明~
-
参数
{Object} trackEvents
埋点事件声明的对象 events
-
用法
// react class component;;@ // mobx class;;@ // react class component + mobx-react;;@
track
埋点装饰器,对应 v-track 中的指令~
-
参数
{String} modifier
对应的埋点类型{Number | String} eventId
埋点事件id{Object} params
自定义参数,目前支持delay、ref
-
用法
; @@@@@@@@@
示例
假如我们有一个 Home 的组件,需要在点击button
时上报 id 为22121的埋点,示例如下:
;; @ state = date: Date ; @ { this; } { return <button onClick=thishandleClick>Click Me</button> ; }
如果需要在button
点击事件发生后上报埋点,可增加after
修饰符,示例如下:
@ ... @ { this; } ...
如果button
点击事件包含异步请求,可使用async
修饰符,示例如下:
@ ... @ handleClick = async { const response = await { ; }; this } ...
UVPV、TONP(页面停留时长)埋点,示例如下:
@ ... @ @ { ... } ...
页面初始化异步埋点延迟上报,示例如下:
@ ... @ initContent = async { const response = await { ; }; this; }; ...
async.delay
类型的埋点应该装饰在react component中,因为我们需要在页面卸载的时候及时清除定时器
区域或者元素曝光埋点,需通过 data-track-attributes 传递参数,示例如下:
@ { superprops; thiscardTrackRef = null; } @ { return <Card data-track-event="22123" data-track-params=Date ref= thiscardTrackRef = ref className="block_show__card" > <p>我想被曝光</p> </Card> ; }
区域曝光类型的埋点需要元素绑定
ref
属性,属性必须以TrackRef
结尾,即ref={ref => (this.buttonTrackRef = ref)}
LICENSE
MIT © 2019-present, LHammer