位置: IT常识 - 正文

前端埋点需求(vue.js)(前端埋点sdk)

编辑:rootadmin
前端埋点需求(vue.js)

推荐整理分享前端埋点需求(vue.js)(前端埋点sdk),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端埋点插件,前端埋点和后端埋点的区别,前端埋点插件,前端埋点和后端埋点的区别,前端埋点方案,前端埋点技术是什么,前端埋点怎么写,前端埋点方案,内容如对您有帮助,希望把文章链接给更多的朋友!

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

文章目录前言一、埋点思考二、埋点实现1.埋点工具类实现(operationLog.js)2.埋点监控的开启3.页面访问日志的写入4.点击事件的日志写入总结前言

前端埋点有两种:全局埋点、代码埋点。 全局埋点:收集的用户所有行为,但是收集的数据驳杂,要进行处理。 代码埋点:收集的用户所有行为更加精准,能够进行更细节的处理。

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

以下仅介绍关于前端的部分,至于登录次数、登录人数等均可完全靠后端进行实现

一、埋点思考

运营需求:用户浏览各页面情况(时长等),用户对各个规定元素的点击操作。 根据运营的需求我们需要做如下事: 1.对页面的访问,离开进行监控(包括关闭浏览器等操作)。  document.addEventListener(‘visibilitychange’)

前端埋点需求(vue.js)(前端埋点sdk)

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就能做到全面的监控。

本文链接地址:https://www.jiuchutong.com/zhishi/293041.html 转载请保留说明!

上一篇:超详细的正则表达式的使用方法,学不会找我(正则表达式大全(整理版))

下一篇:vue项目引入svg图标(完整步骤)(vue引入svg图片)

  • 小米1s和小米1s青春版(小米1s和青春版的区别)(小米1s和小米pro哪个好)

    小米1s和小米1s青春版(小米1s和青春版的区别)(小米1s和小米pro哪个好)

  • 支付宝可以缴纳医保吗(支付宝可以缴纳燃气费吗)

    支付宝可以缴纳医保吗(支付宝可以缴纳燃气费吗)

  • 如何开启谷歌浏览器自带的翻译设置(如何开启谷歌浏览器的加速模式)

    如何开启谷歌浏览器自带的翻译设置(如何开启谷歌浏览器的加速模式)

  • win7结束支持时间(win7支持已结束怎么办)

    win7结束支持时间(win7支持已结束怎么办)

  • 红米note8指纹解锁的位置在哪里(红米note8指纹解锁怎么不见了)

    红米note8指纹解锁的位置在哪里(红米note8指纹解锁怎么不见了)

  • 手机屏幕上出现紫色斑点(手机屏幕上出现的小白圈如何去掉)

    手机屏幕上出现紫色斑点(手机屏幕上出现的小白圈如何去掉)

  • 毒签名认证失败什么意思(为什么毒里面的实名认证过不了)

    毒签名认证失败什么意思(为什么毒里面的实名认证过不了)

  • 虎牙ipad为什么看不了回放(ipad上虎牙是不是看不了回放)

    虎牙ipad为什么看不了回放(ipad上虎牙是不是看不了回放)

  • 1rx8和2rx8兼容吗(1rx8和2rx8的区别哪个好)

    1rx8和2rx8兼容吗(1rx8和2rx8的区别哪个好)

  • 抖音大号小号都能直播吗(抖音大号小号都播会不会没有流量)

    抖音大号小号都能直播吗(抖音大号小号都播会不会没有流量)

  • 华为相机延迟拍照怎么设置(华为相机延迟拍摄关闭)

    华为相机延迟拍照怎么设置(华为相机延迟拍摄关闭)

  • 华为畅联通话是用流量还是话费(华为畅联通讯)

    华为畅联通话是用流量还是话费(华为畅联通讯)

  • 钉钉退群别人会知道吗(钉钉群里退群会被看见吗)

    钉钉退群别人会知道吗(钉钉群里退群会被看见吗)

  • 安卓10更新了什么(安卓10.0更新)

    安卓10更新了什么(安卓10.0更新)

  • iphone11机身多少厘米(苹果11机身多重多少克)

    iphone11机身多少厘米(苹果11机身多重多少克)

  • 手机开流量了还是没有网怎么办(手机开流量了还是没有网怎么办?)

    手机开流量了还是没有网怎么办(手机开流量了还是没有网怎么办?)

  • 乐视手机充不进去电是什么原因(乐视手机充不进去电,一直显示红灯)

    乐视手机充不进去电是什么原因(乐视手机充不进去电,一直显示红灯)

  • 京东如何延长收货时间(京东怎样延长收货时间)

    京东如何延长收货时间(京东怎样延长收货时间)

  • nio bio aio的区别(简述 bio, nio, aio 的区别)

    nio bio aio的区别(简述 bio, nio, aio 的区别)

  • 一加手机7 Pro的电池容量是多大(一加7 prozol)

    一加手机7 Pro的电池容量是多大(一加7 prozol)

  • 红米手机补电代码(红米手机补电代码多少号码)

    红米手机补电代码(红米手机补电代码多少号码)

  • 如何在Windows 11中使用网络速度监视器?Win11中使用网络速度监视器教程(如何在Windows 11上卸载更新)

    如何在Windows 11中使用网络速度监视器?Win11中使用网络速度监视器教程(如何在Windows 11上卸载更新)

  • fsguiexe.exe进程是什么文件 fsguiexe进程查询(executor进程)

    fsguiexe.exe进程是什么文件 fsguiexe进程查询(executor进程)

  • Web大学生网页作业成品 bootstrap响应式网站开发 基于HTML+CSS+JS+Bootstrap制作火锅美食网站(4页)(大学生web网页实训心得体会)

    Web大学生网页作业成品 bootstrap响应式网站开发 基于HTML+CSS+JS+Bootstrap制作火锅美食网站(4页)(大学生web网页实训心得体会)

  • 民办非企业所得税优惠政策
  • 风险纳税人是指个人还是单位
  • 结构性减税政策的定义
  • 企业可以找审计人员吗
  • 大凭证小凭证
  • 金融债券的利息收入
  • 注销股本对所有股票影响
  • 发票密码区超出可以用吗
  • 固定资产原值包含进项税吗
  • 减免房产税土地使用税 账务处理
  • 红字发票信息表需要盖章吗
  • 个体户对公账户怎么办理
  • 非同一控制下的企业合并采用成本法
  • 发票中奖要交税吗
  • 会计凭证的保管期限为多少
  • 实际收到股票股利的分录
  • 材料亏损怎么做会计分录?
  • 营改增后转让土地使用权增值税
  • 银行手续费发票怎么开
  • 同一个客户有应收也有应付怎么办
  • 船舶吨税范围
  • 企业购买汽车时需要交哪些税?
  • 已经缴纳税款怎么作废申报
  • 企业所得税营业利润怎么算
  • 一般纳税人注销库存需要补交税吗
  • 新开办筹建费企业所得税申报填写
  • 申报是不是就是报税
  • 资产减值损失如何结转本年利润
  • 反映留存收益的账户
  • 企业捐赠如何入账
  • 公司购买的原材料,原价格销售合理吗
  • 资本公积有哪些科目
  • 接入设备检测
  • 私款转入公司账户怎么办
  • macbookpro安装dmg
  • PHP:pg_send_query_params()的用法_PostgreSQL函数
  • php对象缓存
  • 差旅费包干什么意思
  • uniapp引入全局scss
  • 暂估入库含税还是含税
  • js点击图片跳转页面
  • sql数据库语句基本语法
  • 中秋快乐的祝福语怎么说
  • php curlfile
  • 怎么实现宏的功能
  • 分期付款的消费税怎么计算
  • 工程开票金额大于结算金额怎么处理
  • 固定资产是怎么算出来的
  • 律师事务所收到专票能抵扣吗合法吗
  • 企业会计凭证怎么写
  • 事业单位收到退税账务处理
  • 关于职工薪酬的确认和计量下列说法中不正确的是
  • 更正会计差错的方法
  • 应付账款长时间收不回怎么处理呢
  • 小规模纳税人开专票税率是1%还是3%
  • 应付账款不用付了怎么做账
  • 残保金超比例奖励政策
  • 营业外支出如何做账
  • 科目余额表没有本年累计怎么办
  • mysql 5.6 5.7
  • sqlserver字符函数
  • awk结果输出到文件
  • win10 2020h1
  • win8 蓝牙
  • 微软windows1
  • win10一周年深色主题
  • dns轮询是什么意思
  • 批处理程序教程
  • 安卓icon图标
  • jquery 日期
  • 请问在javascript程序中
  • 用python写周字
  • Python字符串切片例子
  • python简要介绍
  • 河南居民医保网上缴费查询
  • 河南电子税务局开票流程
  • 个人怎么在网上交医保和养老保险
  • 武汉税务局官网查询系统
  • 特定公共服务是什么意思
  • 车船税单独交行吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设