# utopa-tracking
[![NPM Version](http://img.shields.io/npm/v/utopa-tracking.svg?style=flat-square)](https://www.npmjs.com/package/utopa-tracking)
[![Download Month](http://img.shields.io/npm/dm/utopa-tracking.svg?style=flat-square)](https://www.npmjs.com/package/utopa-tracking)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `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)
```