@magnet-fe/magnet-data-tracker

### 已对接统计 - [x] 神策sensors - [x] 腾讯MTA

Usage no npm install needed!

<script type="module">
  import magnetFeMagnetDataTracker from 'https://cdn.skypack.dev/@magnet-fe/magnet-data-tracker';
</script>

README

磁场数据统计组件

已对接统计

  • 神策sensors
  • 腾讯MTA

使用方法

npm install @magnet-fe/magnet-data-tracker

// main.jsx or main.tsx
import MagnetDataTracker from '@magnet-fe/magnet-data-tracker'
import { MtaTracker, SensorsTracker } from '@magnet-fe/magnet-data-tracker'

MtaTracker.init({
  mtaConfig?: IMtaConfig; // mta配置项
  routerEvents?: Map<RegExp, string>;
  needAutoPageViewTrack?: boolean; // 开启自动统计页面浏览： 通过mockey patch history.pushstate 以及 history.replaceState事件，发送页面浏览事件
})

SensorsTracker.init({
  sensorsConfig?: ISensorsConfig; // 神策配置项
  routerEvents?: Map<RegExp, string>;
  needAutoPageViewTrack?: boolean;
})

暴露的公开方法

  • track
MtaTracker.track(eventName: string, options?: IKeyValue)
SensorsTracker.track(eventName: string, options?: IKeyValue)

关于自动埋点事件

  • 页面接受点击事件，在事件捕捉过程会检查点击元素的dataset，如果存在约定的名称将自动发送事件
    • element.dataset.tracker-event-name: 事件名称
    • element.dataset.tracker-event-options: 事件参数JSON string
  • 例子
    • <button data-tracker-event-name='submitForm' data-tracker-event-options='{"name":"Heylon","score":100}'>submit</button>

暴露出的第三方客户端

  • Mta: MtaTracker.originalTracker
  • 神策: SensorsTracker.originalTracker