Vue项目埋点方案

前言：
埋点顾名思义就是监控，对用户行为、页面的性能、页面的异常进行监控。

前端埋点主要分为以下三类：
代码埋点：
在需要埋点的地方添加埋点逻辑代码或自定义属性实现。
可视化埋点：
使用可视化的工具进行埋点，即无痕埋点。前端页面加载时根据埋点配置，自动调用接口上传埋点数据。
无埋点(无痕埋点)：
前端自动采集全部事件并上报埋点数据。

可视化埋点和无埋点方案前期投入较大，故在此考虑使用代码埋点的方案。

代码埋点又分为两类：
命令式埋点：
在需要埋点的地方添加埋点逻辑代码。缺点：工作量大，且会侵入业务逻辑代码。
声明式埋点：
在需要埋点的地方新增自定义属性，通过识别自定义属性绑定事件，采集并上传埋点数据；

故最终埋点方案使用：声明式代码埋点

以下为Vue项目具体埋点步骤：
第一步：新增track.js，通过自定义属性track绑定点击事件

import Vue from 'vue'
import {
    
     eventLog } from '@/api/bpl/event'

// 埋点指令
let track = Vue.directive('track', {
    
    
    bind: (el, binding, vnode) => {
    
    
        el.addEventListener('click', () => {
    
    
            const data = binding.value;

            // request API
            console.log(data);
            eventLog(data).then(response => {
    
    
                console.debug(response.data);
            });

        }, false);
    }
})

export default track

第二步：main.js文件中新增绑定track自定义指令

import track from './components/track.js'
Vue.prototype.$track = track;

第三步：在需要埋点的标签上，新增v-track自定义指令

<uni-grid :column="4">
        <uni-grid-item v-track="{eventId:'1101',location:'home'}">
          <view class="grid-item-box">
            <uni-icons type="person-filled" size="30"></uni-icons>
            <text class="text">用户管理</text>
          </view>
        </uni-grid-item>
</uni-grid>

以上三步即可完成页面元素的点击事件埋点。

猜你喜欢