埋点方案主要流程
1、 在 main.js 文件中生成 capol-log-uuid 埋点会话唯一id，并存入sessionStorage中
router.afterEach((to, from, next) => {//优先取url上面携带的埋点idconst uuid = to.query.logId ? to.query.logId : Utils.uuid()console.log('进入页面，生成回话id')sessionStorage.setItem('capol-log-uuid',uuid)
})
2、在 utils 文件夹下添加 commonLog.js 公共埋点方法类，提供3个方法：
- 添加埋点函数：CapolLog.pointAdd(dynamicInfo, el)
- 更新埋点函数：CapolLog.pointUpdate(id, type,updateData)
- 更新埋点辅助函数：CapolLog.pointUpdateHelper(event,operateResultBool)
3、封装v-capol-log指令，监听元素点击事件，触发埋点
//通用按钮埋点指令
Vue.directive('capol-log', {inserted(el, binding) {//按钮点击执行事件const handleClick = (el, binding) => {//修饰符const idFlag = binding.modifiers.idFlag ? 1 : 0;//绑定值const data = binding.value//埋点外部传参对象const dynamicInfo = { idFlag, ...data }CapolLog.pointAdd(dynamicInfo,el)}const wrappedClickEvent = function (event) {handleClick(el, binding, event)}el.addEventListener('click', Utils.debounce(wrappedClickEvent, 300))el.handleClick = handleClick},unbind(el, binding) {const handleClick = el.handleClickel.removeEventListener('click', handleClick)delete el.handleClick},
})
4、将埋点公共方法添加到Vue.prototype原型对象中，手动调用，触发埋点
startTask(event) {//模拟接口响应时间2ssetTimeout(() => {this.$CapolLog.pointUpdateHelper(event, true).then((res) => {console.log(res)}).catch((error) => {console.error(error)})}, 2000)this.getMajorData()this.showStartTaskDialog = true},
埋点接口传参说明
添加埋点参数
字段
是否必填
备注说明
source
是
来源端
functionType
是
功能类型
logType
是
日志类型
info
是
埋点基本信息
uuid
是
回话唯一值
menuCode
否
菜单编码
buttonName
否（点击按钮为必填）
按钮名称（应该带上下文）
privateData
是
私有参数json字符串
idFlag
是
id值是否需要返回，后续用于更新
更新埋点参数
字段
是否必填
备注说明
functionType
是
功能类型（和添加埋点时传参保持一致）
updateData
是
更新埋点参数json字符串（必须包含id字段，其他为更新参数）
部分参数枚举说明
functionType（功能类型）
功能类型key
功能类型val
0
按钮点击
1
页面初始
2
文件下载
3
文件浏览
4
文件分享
5
文件上传
6
选择模板
7
进度浏览
8
管控事件
9
图模关联
10
问题导出
logType（日志类型）
功能类型key
功能类型val
0
工具埋点点击
1
框架埋点初始
2
文件项目文件下载
3
文件分享文件下载
4
管控文件下载
5
项目文件浏览
6
分享文件浏览
7
管控文件浏览
8
图纸文件浏览
9
项目文件分享
10
项目文件上传
11
管控文件上传
12
选择模板埋点
13
进度浏览埋点
14
进度管控埋点
15
图模关联埋点
16
问题导出埋点
source（来源端）
来源key
来源Val
0
pc
1
android
2
ios
3
wx
4
Capol3D
5
Capol2D
指令埋点详细说明
实现方案
1、在需要埋点的元素上绑定 v-capol-log 指令，监听元素点击事件，当元素点击时，自动触发添加埋点方法，如果 v-capol-log 修饰符idFlag为true，在添加埋点成功后，在该点击元素上添加capol-log-element 类名、data-id（记录此次埋点id）、data-type（记录此次埋点类型）
<button type="button" class="el-button el-button--default el-button--small is-plain capol-log-element" data-id="1929582931271722" data-type="按钮点击">发起审批任务</span></button>
2、在点击事件相关业务执行完毕后，通过点击事件的event对象拿到元素上记录的埋点id、埋点类型type，将操作结果（‘“操作成功” || “操作失败”）作为更新参数作为updateData参数，调用CapolLog.pointUpdate(id, type,updateData)更新埋点方法实现埋点更新。后台将根据初次埋点时间、更新埋点时间，计算出****此次点击事件的响应时间responseTime。
使用方案
1、绑定指令
<el-buttonv-capol-log.idFlag="{functionType: 0,logType: 0,buttonName: '发起审批任务-成功审查',privateData: { functionName: '发起审批任务', menuName: '成果审查',projectId:123,enterpriseId:456 },}"plain@click="startTask">发起审批任务</el-button>
指令传参说明：
字段
是否必填
备注说明
idFlag
否
指令修饰符，后续需要更新埋点必传
functionType
是
功能类型，根据枚举说明表传对应下标即可（eg：按钮点击传0）
logType
是
日志类型，根据枚举说明表传对应下标即可（eg：工具埋点点击传0）
buttonName
是
按钮名称，需要带上下文（eg：发起审批任务-成功审查）
privateData
是
私有参数对象，functionName（按钮名称）、menuName（菜单名称）这两个字段必传，其他字段按需传递即可
menuCode
否
菜单编码，不传优先取左侧导航栏高亮菜单code,取不到取当前路由code
2、点击事件业务执行完毕后，调用**this.$CapolLog.pointUpdateHelper（event,operateResultBool）**更新埋点（如果需要）
startTask(event) {//模拟接口响应时间2ssetTimeout(() => {this.$CapolLog.pointUpdateHelper(event, true).then((res) => {console.log(res)}).catch((error) => {console.error(error)})}, 2000)this.getMajorData()this.showStartTaskDialog = true},
页面初始埋点详细说明
待后续更新…
主要实现代码
commonLog.js（通用埋点方法）
import API from '../api'
import router from '../router'
import Utils from './utils'
import store from '../store'
import { getDeviceInfo } from './getDeviceInfo'// 获取功能类型
function getFunctionType(val) {const List = {0: '按钮点击',1: '页面初始',2: '文件下载',3: '文件浏览',4: '文件分享',5: '文件上传',6: '选择模板',7: '进度浏览',8: '管控事件',9: '图模关联',10: '问题导出',}return List[val] || ''
}// 获取日志类型
function getLogType(val) {const List = {0: '工具埋点点击',1: '框架埋点初始',2: '项目文件下载',3: '分享文件下载',4: '管控文件下载',5: '项目文件浏览',6: '分享文件浏览',7: '管控文件浏览',8: '图纸文件浏览',9: '项目文件分享',10: '项目文件上传',11: '管控文件上传',12: '选择模板埋点',13: '进度浏览埋点',14: '进度管控埋点',15: '图模关联埋点',16: '问题导出埋点',}return List[val] || ''
}// 获取来源端
// function getScource(val) {
// const List = {
// 0: 'pc', //WEB端
// 1: 'android', //安卓端
// 2: 'ios', //苹果端
// 3: 'wx', //小程序端
// 4: 'Capol3D', //速建端
// 5: 'Capol2D', //速绘端
// }
// return List[val] || ''
// }// 获取基本埋点信息
function getBasicInfo() {const basicInfo = getDeviceInfo(null, router.history.current)console.log(basicInfo, 'basicInfo')return basicInfo
}//获取回话唯一id
function getUUID() {let uuid = sessionStorage.getItem('capol-log-uuid')if (!uuid) {uuid = Utils.uuid()sessionStorage.setItem('capol-log-uuid', uuid)}return uuid
}//按照后台要求 将对象转成json字符串
function getJSONObj(obj) {if (typeof obj === 'object' && obj !== null) {return JSON.stringify(obj).replace(/"/g, "'")} else {return ''}
}// 扁平化系统菜单数组
function flatterArray(arr, finalArr = []) {if (arr.length === 0) return finalArrfor (let i = 0; i < arr.length; i++) {const item = arr[i]if (item.children && item.children.length) {flatterArray(item.children, finalArr)} else {finalArr.push(item)}}return finalArr
}//获取菜单code
function getMenuCode() {//默认取路由名称let code = router.currentRoute.name || ''let menuList = store.getters.menuList || []if (menuList.length === 0) {const queryObj = Utils.getURLParameters(decodeURIComponent(window.location.href))const { proId, enterpriseId } = queryObjmenuList = JSON.parse(localStorage.getItem('pro_menu_list_' + proId + '_' + enterpriseId))}//从系统菜单列表中取codeif (menuList.length) {const flatterMenuList = flatterArray(menuList)const activeMenuText = document.querySelector('.sidebar-el-menu .el-menu-item.is-active .item span')?.innerHTMLconst activeMenu = flatterMenuList.find((el) => el.title === activeMenuText)if (activeMenu) {code = activeMenu.code}}return code
}//埋点方法类
export default class CapolLog {/*** 通用添加埋点函数* @param dynamicInfo 添加埋点的参数 （必填）* @param dynamicInfo 必填项说明：functionType（功能类型）；logType（日志类型）；privateData（埋点私有参数）；idFlag（是否需要后台返回此次埋点id，用于后续更新）* @param el dom元素，如果有传，将往dom元素上添加埋点信息 （非必填）* @returns {Promise} 添加埋点的状态*/static pointAdd = (dynamicInfo, el) => {let { functionType, source, logType, menuCode, buttonName, privateData, idFlag } =dynamicInfoconst params = {source: source || 'pc', //来源端functionType: getFunctionType(functionType), //功能类型logType: getLogType(logType), //日志类型info: getJSONObj(getBasicInfo()), //埋点基本信息uuid: getUUID(), //回话唯一值menuCode: menuCode || getMenuCode(), //菜单编码 (非必填)buttonName, //按钮名称//私有参数json字符串privateData: getJSONObj(privateData),idFlag: idFlag || 0, //id值是否需要返回}return new Promise((resolve, reject) => {API.log.capolAddLog(params).then((res) => {if (res.status === 200) {if (res.data && el) {el.classList.add('capol-log-element')el.setAttribute('data-id', res.data)el.setAttribute('data-type', getFunctionType(functionType))}resolve(res)} else {reject(res)}}).catch((error) => {reject(error)})})}/*** 更新埋点通用函数* @param id 此次需要更新的埋点id (必填)* @param type 功能类型 eg('按钮点击') (必填)* @param updateData 更新的私有参数 (必填)* @returns {Promise} 返回更新埋点的状态*/static pointUpdate = (id, type, updateData) => {const params = {functionType: type,updateData: getJSONObj({id,...updateData,}),}return new Promise((resolve, reject) => {API.log.capolUpdateLog(params).then((res) => {if (res.status === 200) {resolve(res)} else {reject(res)}}).catch((error) => {reject(error)})})}/*** 按钮点击更新埋点辅助函数* @param event 点击事件的 event 对象 （必填）* @param operateResultBool 点击事件的操作结果 true || false （必填）* @returns {updatePromise} 返回更新埋点的状态*/static pointUpdateHelper = async (event, operateResultBool) => {if (!event || operateResultBool === undefined) {return Promise.reject(new Error('更新埋点参数缺失'))}const updateData = {operateResult: operateResultBool ? '操作成功' : '操作失败',}console.log(event?.target.closest('.capol-log-element'))const targetBtn = event?.target.closest('.capol-log-element')//返回更新埋点的状态let updatePromiseif (targetBtn) {const id = targetBtn.dataset.idconst type = targetBtn.dataset.typeupdatePromise = await this.pointUpdate(id, type, updateData)} else {updatePromise = Promise.reject(new Error('获取不到更新埋点id'))}return updatePromise}
}
