use-monitor

轻量级前端埋点监控上报 sdk

Features

• 自动手动监听页面访问量(PV)
• 自动手动记录独立访客(UV)
• 自动手动 DOM 事件监听获取用户操作(UV)
• 自定义埋点信息
• 自动监听页面 js 报错
• 性能指标统计

使用

浏览器引入

<script src="use-monitor/dist/index.js"></script>

npm

npm install use-monitor

import Monitor, { DefaultConfigOptions } from 'use-monitor'

const options: DefaultConfigOptions = {
  requestUrl: '//127.0.0.1:8080/report',
  app_id: 1121212,
  app_name: 'app_name',
  module_name: 'module_name1',
  historyTracker: true,
  hashTracker: true,
  beaconTracker: false,
  pushPerformance: true,
  jsErrorTracker: true,
  debug: true,
  config: {
    uuid: 'wsw'
  }
}

const monitor = new Monitor(options)

monitor.push({
  type: 'click',
  path: ['广告列表'] || ''
})

设置第二级模块，按模块统计 PV、UV

// 例如页面组件创建前后的生命周期如vue的created 配置module_name
// 或者在vue路由的afterEach配置每个路由
monitor.setConfig({
  module: 'home',
  module_name: '首页'
})
monitor.push({
  type: 'page'
})

// 脚本配置
monitor.setConfig({
  module: 'script',
  module_name: '脚本配置'
})
monitor.push({
  type: 'page'
})

设置第三级路径，按路径统计 PV、UV (当第二级不变的时候)

var monitor = new Monitor({
  url: '', // 请求地址
  app_id: 'xxx', //唯一的项目Id
  app_name: '巨量引擎', //唯一的项目名称
  module: 'createCampaign',
  module_name: '新建计划'
  token: 'xxx'
})

monitor.setDefaults({
  startPath: ['应用推广'],
})
monitor.push({
  type: 'page'
})

自动统计点击

1、标签属性

• m_p 代表路径(path_name)
• m_btn 代表点击事件(event_name)
• m_val 代表事件的值(event_value)

2、基础按钮

<button m_p="新建广告表单" m_btn="提交">submit</button>

3、select 点击

<select m_p="广告列表">
  <option m_btn="点击状态筛选" m_val="开启">开启</option>
  <option m_btn="点击状态筛选" m_val="暂停">暂停</option>
</select>

手动触发点击上报

monitor.push({
  type: 'click',
  path: ['广告列表'] || '',
  actions: JSON.stringify([
    {
      name: '点击状态筛选',
      value: '开启'
    }
  ])
})

统计 input

monitor.push({
  type: 'input',
  path: ['视频校色'] || '',
  actions: JSON.stringify([
    {
      name: '亮度',
      value: 2
    }
  ])
})

options

/**
 * @format
 * @url 请求的地址
 * @app_id 应用id
 * @app_name 应用名称
 * @token 请求的token
 * @historyTracker history上报   默认false
 * @hashTracker hash上报    默认false
 * @domTracker dom事件上报  默认true
 * @beaconTracker 是否使用navigator.sendBeacon(post)上报 默认使用img get请求
 * @pushPerformance 页面性能上报  默认false
 * @jsErrorTracker js 和 promise 报错异常上报  默认true
 * @sdkVersionsdk 版本
 * @domEventList  Array<keyof WindowEventMap> ['click', 'dblclick','mousedown'] 默认['click']
 * @config 自定义配置
 */
export interface DefaultConfigOptions {
  requestUrl: string
  url?: string
  app_id?: string | undefined
  app_name?: string | undefined
  module?: string | undefined
  module_name?: string | undefined
  token?: string
  historyTracker?: boolean
  hashTracker?: boolean
  domTracker?: boolean
  beaconTracker?: boolean
  debug?: boolean
  pushPerformance?: boolean
  jsErrorTracker?: boolean
  sdkVersion?: string | number
  domEventList?: Array<keyof WindowEventMap>
  config?: Record<string, any> | undefined
}

请求参数实例

/**
 * @module
 * @module_name 模块名称
 * @ua user-agent
 * @url href 当前 URL 地址
 * @domain 域名
 * @title 网页标题
 * @referrer 上一个访问页面 URL 地址
 * @actions 事件
 * @type 类型  例如 page (pv、uv) ，click（点击事件），input (输入框)，statistics (自定义统计)
 * @path_name 页面name
 * @event_name  '点击名称'
 * @event_value '点击按钮的值｜input的值'
 * @error_message 报错的message
 * @config 自定义配置
 */
export interface RequestOptions
  extends Pick<DefaultConfigOptions, 'app_id' | 'app_name' | 'token' | 'module' | 'module_name'> {
  ua?: string
  url?: string
  domain?: string
  title?: string
  referrer?: string
  actions?: string
  type?: string
  path_name?: string
  path?: string
  event_name?: string
  name?: string
  event_value?: string
  value?: string
  error_message?: string
  config?: Record<string, any> | undefined
}

方法

实例方法	说明
push(op:object)	推送数据
push(op:object)	推送数据
setConfig()	修改配置

说明

• 这个埋点 sdk 参考我公司的埋点业务，简单用 typescript 跟 rollup 实现了 mini 版本
• 添加了自动 history 跟 hash 上报，不过一般在页面组件添加 module_name 即可
• 可以自定义扩展参数