Get unlimited public & private packages + team-based management with npm Teams.Learn more »

r-track

0.3.1 • Public • Published

r-track

Travis (.org) branch Gzip Size

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
import { inject } from "r-track";
import tracks from "@/tracks";
@inject({ trackEvents: tracks.home })
 
// mobx class
import { inject } from "r-track";
import tracks from "@/tracks";
@inject({ trackEvents: tracks.home  })
 
// react class component + mobx-react
import { inject } from "mobx-react";
import tracks from "@/tracks";
@inject(store => ({ store, trackEvents: tracks.home  }))

track

埋点装饰器,对应 v-track 中的指令~

  • 参数

    • {String} modifier 对应的埋点类型
    • {Number | String} eventId 埋点事件id
    • {Object} params 自定义参数,目前支持delay、ref
  • 用法

import { track } from "r-track";
 
@track("UVPV")
@track("TONP")
@track("trigger", 22121)
@track("trigger.after", 22121)
@track("trigger.once", 22121)
@track("trigger.after.once", 22121)
@track("async", 22121)
@track("async.once", 22121)
@track("async.delay", 22121, { delay: 3000, ref: "elementRef")

示例

假如我们有一个 Home 的组件,需要在点击button时上报 id 为22121的埋点,示例如下:

import { home as trackEvents } from "@/tracks";
import { track, inject } from "r-track";
 
@inject({ trackEvents })
class Home extends Component {
  state = {
    date: Date.now(),
  };
 
  @track("trigger", 22121)
  handleClick(val, e) {
    this.setState({
      date: Date.now()
    });
  }
 
  render() {
    return (
      <button onClick={this.handleClick.bind(this, "click button")}>Click Me</button>
    );
  }
}

如果需要在button点击事件发生后上报埋点,可增加after修饰符,示例如下:

@inject({ trackEvents })
class Home extends Component {
  ...
  @track("trigger.after", 22121)
  handleClick(val, e) {
    this.setState({
      date: Date.now()
    });
  }
  ...
}

如果button点击事件包含异步请求,可使用async修饰符,示例如下:

@inject({ trackEvents })
class Home extends Component {
  ...
  @track("async", 22121)
  handleClick = async (val, e) => {
    const response = await new Promise(resolve => {
      setTimeout(() => {
        resolve({ date: Date.now() });
      }, 300);
    });
 
    this.setState({
      date: response.date
    })
  }
  ...
}

UVPV、TONP(页面停留时长)埋点,示例如下:

@inject({ trackEvents })
class Home extends Component {
  ...
  @track("UVPV")
  @track("TONP")
  componentDidMount() {
    ...
  }
  ...
}

页面初始化异步埋点延迟上报,示例如下:

@inject({ trackEvents })
class Home extends Component {
  ...
  @track("async.delay", 22122, { delay: 3000 })
  initContent = async val => {
    const response = await new Promise(resolve => {
      setTimeout(() => {
        resolve({ data: "success" });
      }, 300);
    });
 
    this.setState({
      content: response.data
    });
  };
  ...
}

async.delay类型的埋点应该装饰在react component中,因为我们需要在页面卸载的时候及时清除定时器

区域或者元素曝光埋点,需通过 data-track-attributes 传递参数,示例如下:

@inject({ trackEvents })
class Home extends Component {
  constructor(props) {
    super(props);
    this.cardTrackRef = null;
  }
 
  @track("show")
  render() {
    return (
      <Card
        data-track-event="22123"
        data-track-params={Date.now()}
        ref={ref => (this.cardTrackRef = ref)}
        className="block_show__card"
      >
        <p>我想被曝光</p>
      </Card>
    );
  }
}

区域曝光类型的埋点需要元素绑定ref属性,属性必须以TrackRef结尾,即ref={ref => (this.buttonTrackRef = ref)}

LICENSE

MIT © 2019-present, LHammer

Install

npm i r-track

DownloadsWeekly Downloads

5

Version

0.3.1

License

MIT

Unpacked Size

7.33 MB

Total Files

76

Last publish

Collaborators

  • avatar