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 增加按钮点击通用上报
0.0.20 小程序上报userId兼容
0.1.0 页面上报路由pageUrl增加query参数
0.1.1
0.1.2 解决进入页面上报多次问题
0.1.3 onLaunch执行完毕后再执行onShow上报

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

本地调试方法

在通用埋点项目运行npm link 在业务项目中运行npm link npm包名(imeik-report) 在业务项目中修改引入方式 import ImeikReport from '../node_modules/imeik-report/dist/ImeikReport/ImeikReport.umd.js' 此时，通用埋点的改动可同步在业务系统中显示

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-会议管理系统 24-会议管理系统移动端 25-内容中心 27-标签中心 28-规则中心 29-申请中心PC端 30-申请中心H5端 31-内容广场