utopa-tracking
Version:
A description for the module
126 lines (106 loc) • 4.71 kB
Markdown
# utopa-tracking
[](https://www.npmjs.com/package/utopa-tracking)
[](https://www.npmjs.com/package/utopa-tracking)
> `pkg.module supported`, which means that you can apply tree-shaking in you project
[中文文档](./README-CN.md)
A description for the module
## repository
## Demo
## Run Example
you can see the usage by run the example of the module, here is the step:
1. Clone the library `git clone `
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser
## Installation
```bash
npm i -S utopa-tracking
```
## Global name - The variable the module exported in `umd` bundle
`UtopaTracking`
## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)
## Usage
```js
import * as UtopaTracking from 'utopa-tracking'
```
## CDN
Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/utopa-tracking/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/utopa-tracking/lib/umd/<--module-->.js"></script>
```
Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/utopa-tracking/lib/umd/)
```html
<script src="https://cdn.jsdelivr.net/npm/utopa-tracking/lib/umd/<--module-->.js"></script>
```
## 使用示例
```javascript
var utopaTrack = new UtopaTracking()
utopaTrack.init({
isPrint:true,
// inApp: 0, // 是否在app内
recordNum: 1, // 累计多少条数据就上报
// auto_send_data: false, // 是否自动上报
// interval_second: 3000, // 自动上报时间间隔
baseUrl: 'https://kaf01.gtland.cn/topics/track-test', // 上报地址
// trackProperties: { properties: { $model: 'H5 浏览器调试' } }, // 自定义属性
// onInit: function (res) {// 初始化钩子
// console.log(res, '初始化----init')
// },
// onBeforePushTrack: (res) => { // 上报前钩子
// console.log(res, '发送前拦截')
// res.forEach((item) => {
// item.distinct_id = item.distinct_id + '--lihaohua'
// })
// return res
// },
// onSendDataToApp: (array) => { // 发送数据给app,由app上报
// console.log(JSON.stringify(array[0]), '发送数据给app')
// },
// onError (err) { // 错误监听钩子
// console.log(err, 'error')
// }
})
let testTrackData={
time: 1586152800000, // 时间
type: '点击事件', // 类型
event: 'tracking', // 事件类型
project: 'h5项目', // 项目名称
properties:{
$lib: 'h5', // 事件来源 h5 || app || 小程序
$lib_version: '001', // 版本
$screen_height: '375', // 浏览器高度
$screen_width: '667', // 浏览器高度
$manufacturer: '中国制造', // 设备制造商
$model: '浏览器', // 设备类型
$os: '安卓', // 系统类型
$os_version: '5.3.2', // 系统版本
$browser: '谷歌', // 浏览器
$browser_version: '25.12', // 浏览器版本
crm_channel_id: '9999999', // 渠道id
$element_id: 'box', // 目标元素id
$element_content: '按钮', // 目标元素说明
$element_name: '无name值', // 目标元素name值
$element_class_name: 'h3', // 目标元素类名
$element_type: '标题标签', // 目标元素类型
$element_selector: '#dfdf', // 目标元素选择器
$element_target_url: 'localhost:9999', // 目标元素url
$url: 'file:///F:/working/tracking/utopa-tracking/examples/test.html', // 页面链接
$title: '埋点测试', // 页面title
$url_path: 'file:///F:/working/tracking/utopa-tracking/examples/test.html', // 页面path
product_id: '112', // 商品id
product_name: '贵重物品', // 商品名称
product_price: 9.9, // 商品原价
product_price_now: 100, // 商品价格
store_id: '3333233', // 店铺id
store_name: 'lihaohua 店铺', // 店铺名称
$app_version: '终极版本' // app版本
}
}
utopaTrack.collectingData(testTrackData)
```