# simple-js-tracker

> 简单易用前端埋点SDK

Latest version **0.1.5** (published 2022-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-js-tracker
pnpm add simple-js-tracker
yarn add simple-js-tracker
bun add simple-js-tracker
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2022-12-29 |
| First published | 2022-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 56.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | liuqi |
| Maintainers | dianliangbuzu |

## Links

- npm: https://www.npmjs.com/package/simple-js-tracker
- Issues: https://github.com/l1uqi/simple-js-tracker/issues
- npm.io page: https://npm.io/package/simple-js-tracker

## Recent versions

- 0.1.5 (latest) — 2022-12-29
- 0.1.4 — 2022-11-15
- 0.1.3 — 2022-11-10
- 0.1.2 — 2022-11-10
- 0.1.1 — 2022-11-09
- 0.1.0 — 2022-11-04
- 0.0.9 — 2022-11-03
- 0.0.7 — 2022-11-02
- 0.0.6 — 2022-11-02
- 0.0.5 — 2022-11-01
- 0.0.3 — 2022-11-01
- 0.0.2 — 2022-10-31
- 0.0.1 — 2022-10-31

## README

## 数据埋点 SDK

简单易用前端埋点、用户行为数据采集 SDK

## 特性

- 🚀 支持上报参数支持自定义， 上传方式多样
- 🚀 支持 Vue2/Vue3
- 💪 提供 Vue 指令方式调用
- 💪 支持 TypeScript
- 💪 全局异常捕获

## 安装

```
npm install simple-js-tracker

yarn add simple-js-tracker

// cdn 引用
<script src="https://cdn.jsdelivr.net/npm/simple-js-tracker@0.0.7/lib/index.min.js"></script>
```

## 初始化

```js
import SimpleJsTracker from "simple-js-tracker";

const simpleJsTracker = new SimpleJsTracker({
  debug: true,
  url: "", // 服务地址
  enableHeatMap: true, // 开启热力图
  enableHashTracker: true,
  config: {
    ...
  }
});
```

## 参数

| 参数                   | 必填 | 默认值 | 类型   |                                                                       |
| ---------------------- | ---- | ------ | ------ | --------------------------------------------------------------------- |
| debug                  | 否   | false  | bool   | 开启调试模式                                                          |
| config                 | 否   | object | {}     | 你的配置文件, 会在上报时传给后端                                      |
| url                    | 是   | ''     | string | 请求地址                                                              |
| timeout                 | 否   | 1000 | {}     | 请求超时时间                                |
| method                 | 否   | img    | string | 请求方式 GET、POST、SEND_BEACON                                       |
| enableHeatMap          | 否   | false  | bool   | 开启坐标上传 position                                                 |
| enableVisibilitychange | 否   | false  | bool   | 开启页面可见监听, 如开启此功能 registerVueRouterEvent 传参可能为 null |

## 方法

| 方法名                 | 说明                  | 参数                                                             |
| ---------------------- | --------------------- | ---------------------------------------------------------------- |
| setConfig              | 设置全局参数          | Options                                                          |
| sendTracker            | 手动上报              | {自定义}                                                         |
| initDirectives         | 初始化 vue2 指令      | Vue                                                              |
| interceptors           | 上传拦截器            | interceptors.use(fun, fun)                                       |
| registerVueRouterEvent | 初始化 VueRouter 监听 | VueRouter, callback({to, from , secound,...}, callback)          |
| registerErrorEvent     | 全局异常报错          | vm: Vue 对象, errorCallback((errorMsg, pageInfo) => {}) 异常回调 |

## 指令

指令需要初始化, 且指令会自动上报

### Vue2.0

| 方法名        | 说明     | 参数 |
| ------------- | -------- | ---- |
| v-track:click | 点击事件 | {}   |
| v-track:keyup | 键盘事件 | {}   |

```html
// 点击
<div v-track:click="{'event_type': 12, ...}">加入购物车</div>

// 键盘
<div v-track:keyup="{'event_type': 10, ...}">搜索</div>
```

## 打包

```
npm build

npm publish
```

## 异常

```js
const simpleJsTracker = new SimpleJsTracker({
  debug: true,
  url: "", // 服务地址
  enableHeatMap: true, // 开启热力图
  enableHashTracker: true,
  config: {
    ...
  }
});

simpleJsTracker.registerErrorEvent({
  vm: Vue,// vue实例 vue环境下可传
  errorCallback: (error) => {
    // error : {
    //   errorMsg, 异常信息
    //   pageInfo 当前页面信息
    // }
    console.log(error)
  }
})
```

## 例子

```js
import SimpleJsTracker from "simple-js-tracker";

const simpleJsTracker = new SimpleJsTracker({
  debug: true,
  url: "", // 服务地址
  enableHeatMap: true, // 开启热力图
  enableHashTracker: true,
  config: {
    ...
  }
});

// 更新传参
simpleJsTracker.setConfig(options);

// 自定义上传
simpleJsTracker.sendTracker(params);

// 初始化自定义vue2/3指令
simpleJsTracker.initDirectives(Vue);

// 手动上报前拦截器
simpleJsTracker.interceptors.sendTracker.use(
    (config) => {
      // ... 上报传参
      return config;
    },
    (error) => {}
  );

// 初始化 VueRouter 监听
// 页面跳转监听， 上报的参数让用户自行提供 report
simpleJsTracker.registerVueRouterEvent(router, (res, report) => {
   const { to, from, secound } = res;
   // 页面进入
  if(to.meta.tracking) {
    const fromParams = {
      'event_type': 5,
      ...to.meta.tracking,
    }

    report(fromParams);
  }
  // 页面离开
  if(from.meta.tracking) {
    const fromParams = {
      'event_type': 6,
      ...from.meta.tracking,
    }
    report(fromParams);
  }
});

```

## 待办

- [x] 多种上报方式
- [x] Vue3
- [ ] 装饰器
- [ ] hash 页面监听实现
- [ ] 全局上报
- [ ] 异常捕获

## 开源协议

[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)

---
_Source: https://npm.io/package/simple-js-tracker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._