# tracker-sdk
采用图片上报的方式

## 引入方式
```javascript
main.js 

import trackerSdk from 'tracker-sdk'

Vue.use(trackerSdk, {
  serverUrl: '', // 上报图片url 非必填，默认值：https://api-dev.kp-para.cn/event-gateway/events/site.png
  log: false, // 上报日志log, 控制台输出。非必填，默认值：false
  mock: false, // mock为true时，自动打开log, 不上报！ 非必填，默认值：false
  immediateReportPage: true, // 初始化时，自动上报路由埋点。默认值：true
  data: {}, // 通用上报数据，每次上报时会携带。非必填，默认值：{}
})
```
注：trackerSdk已挂载在window、Vue原型上，兼容Vue2、Vue3

### 点击事件埋点
#### 根据自定义属性，点击即可上报
```html
<!-- key为产品定义 -->
<div data-tracker="aaa.bbb.ccc">111</div>

<!-- 对应循环的列表可以这样处理 -->
<div
  v-for="item in list"
  :key="item.id"
  :data-tracker="item.trackerKey"
>...</div>
```

```javascript
// js上报
this.$trackerSDK.reportClickAction('client.home_right');
// or
window.$trackerSDK.reportClickAction('client.home_right');
```

### 页面埋点
在路由守卫中处理

注：首次进入页面，会自动上报一次

```javascript

 router.beforeEach((to, from, next) => {
    // 在每次路由导航开始时记录进入页面的时间戳
    to.meta._startTime = Date.now() + '';
    next();
  });

  router.afterEach((to, from) => {
    const endTime = Date.now();
    const startTime = from.meta?._startTime || 0;
    const timeSpent = endTime - Number(startTime);
    if (startTime && from.name) {
      window.$trackerSDK?.reportPageView(location.origin + to.fullPath, {
        domin: location.host,
        duration: timeSpent / 1000, // "访问时长，单位秒"
        referrer: location.origin + from.fullPath, // 访问来源
        referrerDomin: location.host, // 来源域名
        beginAt: new Date(Number(startTime)).toISOString(),
        endAt: new Date().toISOString(),
      })
    }
  });
```