react-tracer-component

react-tracer-component

Support the React component for exposing buried points and clicking buried points, without affecting the dom structure and without the need to package an additional layer of div

支持曝光埋点、点击埋点的 react 组件, 不会影响 dom 结构, 不需要多包一层 div

install

npm i react-tracer-component -S or yarn add react-tracer-component -S

use

import { getTracerComponent, SendData } from "react-tracer-component";
import track from "you-track";

// customize your tracer events
// 自定义你的埋点事件
const sendData: SendData = (type, trackerParams) => {
  console.info("tracer type:", type); // 'click' | 'exposure';
  console.info("tracer params:", trackerParams); // { a: 'a', b: 'b', ... }
  track(type, trackerParams);
};

const Tracer = getTracerComponent({
  sendData,
  onError: (err) => console.info("tracer err: ", err),
});

// const App = () => <div>this is app</div>;
// replace with
// 替换成
const App = () => (
  <Tracer.div clickTrackParam={{ a: 'a', b: 'b', ... }} exposureTrackParam={{ a: 'a', b: 'b', ... }}>
    this is app
  </Tracer.div>
);

more tag

Tracer.div Tracer.li Tracer.ul Tracer.span ...

All soundtrack dom tags support

所有原声 dom 标签都支持

more

Supports Typescript paradigm constraints

支持 Typescript 范型约束

type TracerClickParams = {
  act: "click";
  clickKey1: any;
} & {
  [K in string]?: any;
};
type TracerExposureParams = {
  act: "exposure";
  exposureKey1: any;
} & {
  [K in string]?: any;
};
const Tracer = getTracerComponent<TracerClickParams, TracerExposureParams>({
  sendData: () => {},
  onError: (err) => console.info("tracer err: ", err),
});
// error
const node1 = (
  <>
    <Tracer.div clickTrackParam={{ a: "a" }} />
    <Tracer.div exposureTrackParam={{ a: "a" }} />
  </>
);
// ok
const node2 = (
  <>
    <Tracer.div clickTrackParam={{ act: "click", clickKey1: "", a: "a" }} />
    <Tracer.div
      exposureTrackParam={{ act: "exposure", exposureKey1: "", a: "a" }}
    />
  </>
);