2025年前端埋点（前端埋点方案）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <h4>埋点方案主要流程</h4>

讯享网

1、在 main.js 文件中生成 capol-log-uuid 埋点会话唯一id，并存入sessionStorage中

讯享网

2、在 utils 文件夹下添加 commonLog.js 公共埋点方法类，提供3个方法：

添加埋点函数：CapolLog.pointAdd(dynamicInfo, el)
更新埋点函数：CapolLog.pointUpdate(id, type,updateData)
更新埋点辅助函数：CapolLog.pointUpdateHelper(event,operateResultBool)

3、封装v-capol-log指令，监听元素点击事件，触发埋点

4、将埋点公共方法添加到Vue.prototype原型对象中，手动调用，触发埋点

讯享网

埋点接口传参说明

添加埋点参数

字段是否必填备注说明 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（记录此次埋点类型）

讯享网

2、在点击事件相关业务执行完毕后，通过点击事件的event对象拿到元素上记录的埋点id、埋点类型type，将操作结果（‘“操作成功” || “操作失败”）作为更新参数作为updateData参数，调用CapolLog.pointUpdate(id, type,updateData)更新埋点方法实现埋点更新。后台将根据初次埋点时间、更新埋点时间，计算出此次点击事件的响应时间responseTime。

使用方案

1、绑定指令

讯享网

指令传参说明：

字段是否必填备注说明 idFlag 否指令修饰符，后续需要更新埋点必传 functionType 是功能类型，根据枚举说明表传对应下标即可（eg：按钮点击传0） logType 是日志类型，根据枚举说明表传对应下标即可（eg：工具埋点点击传0） buttonName 是按钮名称，需要带上下文（eg：发起审批任务-成功审查） privateData 是私有参数对象， functionName（按钮名称）、 menuName（菜单名称）这两个字段必传，其他字段按需传递即可 menuCode 否菜单编码，不传优先取左侧导航栏高亮菜单code,取不到取当前路由code

2、点击事件业务执行完毕后，调用this.$CapolLog.pointUpdateHelper（event,operateResultBool）更新埋点（如果需要）

页面初始埋点详细说明

待后续更新…

主要实现代码

commonLog.js（通用埋点方法）

讯享网