imeik-report（通用埋点上报前端项目）

主要功能：实现登录埋点上报和页面访问埋点上报

打包方式：

npm run build

版本更新

0.0.3 实现登录埋点上报和页面访问埋点上报
0.0.4 上报参数：pageUrl、pageName、uuid
0.0.5 README.md
0.0.6 运行环境：isTest
0.0.7 baseUrl
0.0.8 修改platSource
0.0.9 pc/h5上报去掉router引入
0.0.10 platSource增加14
0.0.11 小程序上报参数：pageContent
0.0.12 重复上报多次bug
0.0.13 修复mixin重复上报
0.0.14 回退到0.0.12版本
0.0.15 小程序上报参数：openId、unionId
0.0.16 上报参数改为驼峰命名
0.0.17 openId
0.0.18 增加渠道code统计
0.0.19 增加按钮点击通用上报

install

npm install imeik-report

pc/h5项目接入方法

main.js

// 上报
import ImeikReport from 'imeik-report/dist/ImeikReport/ImeikReport.umd'
Vue.use(ImeikReport.ReportParams, {
  isTest: '1', //  运行环境 1: test, 0: 生产
  token: sessionStorage.getItem(store.state.cookieKey) // 业务中获取token方法
})
Vue.mixin(ImeikReport.reportMixin)
// 定义全局对象
Vue.prototype.$ImeikReport = ImeikReport

获取用户信息页面

// 初始化上报需要的参数
this.initReportParams(res.data)
initReportParams(info) {
  const visitId = Math.random().toString(16).substring(2) + new Date().getTime()
  const uuid = this.createUUID()
  localStorage.setItem('plat_source', '') // (前端自己定义，同步后端)
  localStorage.setItem('visitId', visitId)
  localStorage.setItem('uuid', uuid)
  localStorage.setItem('userId', info.accountId || '')
  localStorage.setItem('phone', info.telephone || '')
},
createUUID () {
  let result = []
  let hexDigits = '0123456789abcdef'
  for (let i = 0; i < 36; i++) {
    result[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
  }
  // bits 12-15 of the time_hi_and_version field to 0010
  result[14] = '4'
  // bits 6-7 of the clock_seq_hi_and_reserved to 01
  result[19] = hexDigits.substr((result[19] & 0x3) | 0x8, 1)
  result[8] = result[13] = result[18] = result[23] = '-'
  return result.join('')
}

登录页面-登录成功方法后

// 本地存储account(登录账号)和 platSource(产品线)用于登录上报
localStorage.setItem('account', this.loginForm.username)
localStorage.setItem('platSource', '') // (前端自己定义，同步后端)
// 登录上报
this.$ImeikReport.reportLogin()

小程序项目接入方法

main.js

// 上报
import ImeikReport from 'imeik-report/dist/ImeikWechatReport/ImeikWechatReport.umd'
Vue.use(ImeikReport.ReportParams, {
  isTest: '1', //  运行环境 1: test, 0: 生产
  token: uni.getStorageSync('userToken')
})
Vue.mixin(ImeikReport.reportWechatMixin)
// 定义全局对象
Vue.prototype.$ImeikReport = ImeikReport

App.vue

全局变量
globalData: {
  visitId: '',
  phone: '',
  platSource: '' // 产品线/产品端(前端自己定义，同步后端)
}
// 初始化上报需要的参数
initReportParams() {
  this.globalData.visitId = Math.random().toString(16).substring(2) + new Date().getTime()
  this.globalData.uuid = this.createUUID()
  this.globalData.phone = this.globalData.userInfo.account
}
createUUID () {
  let result = []
  let hexDigits = '0123456789abcdef'
  for (let i = 0; i < 36; i++) {
    result[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
  }
  // bits 12-15 of the time_hi_and_version field to 0010
  result[14] = '4'
  // bits 6-7 of the clock_seq_hi_and_reserved to 01
  result[19] = hexDigits.substr((result[19] & 0x3) | 0x8, 1)
  result[8] = result[13] = result[18] = result[23] = '-'
  return result.join('')
}

登录成功获取用户信息后

// 登录上报
this.$ImeikReport.reportWechatLogin()

platSource

1-全轩运营平台/全轩管理后台 2-官网H5 3-官网PC 4-爱美客服务小程序 5-商学院PC 7-电子签系统PC 8-BI经营驾驶舱小程序 9-iclub小程序 10-iclub PC 11-C创 12-BI大屏PC 13-BI数据驾驶舱小程序 14-BI管理后台 15-物资管理系统PC端 16-物资管理系统H5端 17-科研平台管理系统PC端 18-科研项目pc端 19-科研项目小程序 20-社区小程序 21-爱美客资源管理系统PC端 22-爱美客伙伴小程序 23-会议管理系统