提示：基于运营活动的需求 
  
  
  
  
  
  
 ，需要对用户行为进行埋点监控 
  
  
  
  
  
  
 ，因此以下文章是代码埋点的实现 
  
  
  
  
  
  
 。

前言

前端埋点有两种：全局埋点 
  
  
  
  
  
  
 、代码埋点 
  
  
  
  
  
  
 。

全局埋点

：收集的用户所有行为

 


 


 


 


 


 


 
，但是收集的数据驳杂 
 
 
 
 
 
 
，要进行处理

 


 


 


 


 


 


 
。

代码埋点：收集的用户所有行为更加精准 
   
   
   
   
   
   
  ，能够进行更细节的处理 
 
 
 
 
 
 
。

基于上述优缺点以及团队现状
 

 

 

 

 

 

 
，因此采用代码埋点的方式来实现 
   
   
   
   
   
   
  。

以下仅介绍关于前端的部分
 

 

 

 

 

 

 
，至于登录次数 
  
  
  
  
  
  
 、登录人数等均可完全靠后端进行实现

一

 


 


 


 


 


 


 
、埋点思考

运营需求：用户浏览各页面情况（时长等）              ，用户对各个规定元素的点击操作
 

 

 

 

 

 

 
。

根据运营的需求我们需要做如下事：

1.对页面的访问 

 
 

 
 

 
 

 
 

 
 

 
 

 
，离开进行监控(包括关闭浏览器等操作)
 

 

 

 

 

 

 
。

 document.addEventListener(‘visibilitychange’）

2.对点击事件进行监控

 采用vue自定义命令：v-log

3.避免耗费请求资源













，需要批量的给后端发送前端操作日志

 在离开页面的时候或每隔三分钟发送一次日志

4.避免日志内容丢失和错误

 存储在本地localStorage中                     ，一定要通过navigator.sendBeacon发送请求 
 
 
 
 
 
 
 
 
 
 
 
 
 
，若是不支持




















，则采用同步请求              ，避免发送不成功 
  
 
  
 
  
 
  
 
  
 
  
 
  
，成功后定时清除

二 
 
 
 
 
 
 
、埋点实现

以下代码是埋点封装类的实现













，具体详解看注释

1.埋点工具类实现(operationLog.js)

/* 用户操作相关的所有方法 */ import store from @/store/store import router from @/router/router import { VueLocalStorage } from @/utils/storage class OperationLog { // 操作类型 operationType = { visit: PAGE_ACCESS,//访问行为 click: BUTTON_CLICK//点击行为 } // 页面路由与标识符对应关系 visitPage = new Map([ [[/dashboard], INSTRUMENT_PANEL_PAGE], [[/incidents/list], EVENT_ANALYZE_PAGE], [[/incidentsVul/detail], EVENT_ANALYZE_DETAIL_PAGE], [[/application/main/monitor], APPLICATION_MANAGE_MONITOR_PAGE], [[/application/main/nomonitor], APPLICATION_MANAGE_NOT_MONITOR_PAGE], [[/application/detail/risk], APPLICATION_DETAIL_RISK_LIST_PAGE], [[/applicationVul/history], APPLICATION_DETAIL_RISK_DETAIL_ATTACK_HISTORY_PAGE], [[/applicationVul/info], APPLICATION_DETAIL_RISK_DETAIL_VUL_INFO_PAGE], [[/baseline/list], BASELINE_INSPECT_PAGE], [[/instance/list], NODE_MANAGE_PAGE], [[/instance/details/cpufusing, /instance/details/baseline], NODE_MANAGE_DETAIL_PAGE], [[/blackWhite/main/black], BLACK_LIST_MANAGE_PAGE], [[/blackWhite/main/white], WHITE_LIST_MANAGE_PAGE], [[/strategy], DEFEND_POLICY_MANAGE_PAGE], [[/patch/main/list], VIRTUAL_PATCH_PAGE], [[/user/account, /user/security, /user/message], PERSONAL_CENTER_PAGE], [[/message/list], MESSAGE_NOTIFICATION_PAGE] ]) constructor () { this.timeOut = null// 记录定时器id this.timeNum = 60000 // 定时毫秒数 this.localKeyName = raspLog// 存储本地数据key } start () { this.visibilitywindow() this.timer() } // 发送操作日志信息给后端 async reportData () { const data = VueLocalStorage.getJSON(this.localKeyName) || [] // 没有操作日志的时候不进行日志发送 if (!data.length) { return } const url = `/rasp/api-v1/data/event/track/push?Authorization=Bearer ${store.state.login.accessToken}` if (navigator.sendBeacon) { const blob = new Blob([JSON.stringify(data)], { type: application/json; charset=UTF-8 }) navigator.sendBeacon(url, blob) this.clearLog() } else { // 同步请求 const xhr = new XMLHttpRequest() xhr.open(POST, url, false) xhr.setRequestHeader(Content-Type, application/json; charset=UTF-8) xhr.send(JSON.stringify(data)) this.clearLog() } } // 监控窗口变化(锁屏 
  
  
  
  
  
  
 ，关闭等) visibilitywindow () { document.addEventListener(visibilitychange, () => { if (document.visibilityState !== visible) { // 离开页面 this.reportData() } else { // 进入页面 this.writeLog(visit, router.currentRoute.path) } }) } // 定时器 timer () { if (this.timeOut) { clearTimeout(this.timeOut) this.timeOut = null } this.timeOut = setTimeout(() => { this.reportData() this.timer() }, this.timeNum) } /* 记录操作信息 type(操作类型):visit/click operation:type为visit的时候是path路径 
  
  
  
  
  
  
 ，为click的时候是直接传给后端的字符 */ writeLog (type, operation) { const params = { // 要记录的单挑数据 eventType: this.operationType[type], functionType: , createDate: Number.parseInt((new Date().getTime()) / 1000) } // 获取本地存储的数据 const localData = (VueLocalStorage.getJSON(this.localKeyName) || []) if (type === visit) { // 访问页面 // 根据路由找到对应页面的标识符 const functionType = Array.from(this.visitPage.entries()).find(item => { return item[0].some(path => path === operation) })?.[1] // 若是未找到对应的标识符则代表此页面路由不进行记录 if (functionType) { params.functionType = functionType } else { return } } else if (type === click) { // 点击元素 params.functionType = operation } // 记录前检查是否为重复数据 const repeat = (VueLocalStorage.getJSON(this.localKeyName) || []).some(item => { return item.eventType === params.eventType && item.functionType === params.functionType && item.createDate === params.createDate }) if (!repeat) { // 没有重复则进行记录 localData.push(params) VueLocalStorage.setJSON(this.localKeyName, localData) } } // 清空操作信息 clearLog () { localStorage.removeItem(this.localKeyName) } } const operation = new OperationLog() export function start () { operation.start() } export function writeLog (type, content) { operation.writeLog(type, content) }

2.埋点监控的开启

在App.vue中

import { start } from @/utils/operationLog.js mounted () { start()// 开启日志监控 },

3.页面访问日志的写入

路由拦截中进行写入日志

import { writeLog } from @/utils/operationLog.js router.beforeEach((to, from, next) => { writeLog(visit, to.path) })

4.点击事件的日志写入

通过定义全局的vue命令进行写入

定义命令,在mai.js对指令进行全局引入

import { writeLog } from @/utils/operationLog.js // 记录点击日志 Vue.directive(log, { bind: (el, binding, vnode) => { el.addEventListener(click, () => { writeLog(click, binding.value) }, false) } })

使用命令

<el-button v-log="EVENT_ANALYZE_ADVANCED_SEARCH_BUTTON">确认</el-button>

总结

以上方法经过测试

 


 


 


 


 


 


 
，可以对用户操作行为做到精准检测 
 
 
 
 
 
 
，除ie浏览器外 
   
   
   
   
   
   
  ，针对用户关闭 
   
   
   
   
   
   
  、最小化
 

 

 

 

 

 

 
、切出浏览器等操作行为进行监听且有效的上报              。用户只需要在针对特殊操作如点击等使用v-log就能做到全面的监控 

 
 

 
 

 
 

 
 

 
 

 
 

 
。