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