utopa-tracking

A description for the module

Usage no npm install needed!

<script type="module">
  import utopaTracking from 'https://cdn.skypack.dev/utopa-tracking';
</script>

README

utopa-tracking

NPM Version Download Month gzip with dependencies: kb typescript pkg.module

pkg.module supported, which means that you can apply tree-shaking in you project

中文文档

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

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

Usage

import * as UtopaTracking from 'utopa-tracking'

CDN

Use in html, see what you can use in CDN: unpkg

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

<script src="https://cdn.jsdelivr.net/npm/utopa-tracking/lib/umd/<--module-->.js"></script>

使用示例

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)