前端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-app底部tabbar埋点,可通过onTabItemTap事件完成

export default {
    data() {
      return {
      }
    },
    // tab点击事件
    onTabItemTap(e) {
      console.log(e)
      let data = {
        eventId: '1002',
        location: 'work'
      };
      eventLog(data).then(response => {
        console.debug(response.data);
      });
    },
    methods: {
    }
}

你可能感兴趣的:(前端)