vue 前端埋点全流程

创建track.js文件

import Vue from 'vue'
import store from '@/store'
import router from '../router'

// 埋点指令
export const track = Vue.directive('track', {
  bind: (el, binding, vnode) => {
    el.addEventListener('click', () => {
      if (!binding.value) {
        return
      }
      const data = binding.value
      // 仅记录控制台运营相关的界面信息
      if (router.app._route.meta.biz_space === '10' || router.app._route.meta.parent_id === '10') {
        const form = {
          time: Math.floor(new Date().getTime() / 1000),
          username: store.getters.name,
          page_id: router.app._route.meta.menu_id,
          behavior_type: data.type,
          object: data.target + '',
          detail: JSON.stringify(data, undefined, 2)
        }
        store.dispatch('track/setEvent', {
          relate: data.relate,
          item: 'front',
          key: data.key,
          value: form
        })
      }
    }, false)
  }
})

全局注册main.js

import { track } from '@/directive/track'
Vue.prototype.$track = track

vuex中统一处理数据请求/状态

// 请求接口
import { submitUserEventLog } from '@/api/UserEventLog'

const state = {
  event_map: {}
}

const mutations = {
  SET_EVENT_MAP: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    state.event_map[key] = JSON.parse(JSON.stringify(value, undefined, 2))
  }
}

const actions = {
  setEvent({ commit, state }, data) {
    const { relate, item, key, value } = data || { relate: null, item: '', key: '', value: {}}
    if (relate) {
      switch (item) {
        case 'front':
          commit('SET_EVENT_MAP', data)
          break
        case 'end':
          if (state.event_map[key]) {
            const form = JSON.parse(JSON.stringify(state.event_map[key], undefined, 2))
            const temp = {
              page: JSON.parse(form.detail),
              api: JSON.parse(value.detail)
            }
            form.detail = JSON.stringify(temp, undefined, 2)
            submitUserEventLog(form)
            delete state.event_map[key]
          }
          break
        default:
          return
      }
    } else {
      submitUserEventLog(value)
    }
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

request中处理埋点请求

// 请求接口保存埋点数据
const handleTrackInfo = (track_key, name, data) => {
  const router = require('@/router')
  const form = {
    time: Math.floor(new Date().getTime() / 1000),
    username: store.getters.name,
    page_id: router.default.app._route.meta.menu_id,
    behavior_type: '发起请求',
    object: name,
    detail: JSON.stringify(data, undefined, 2)
  }
  store.dispatch('track/setEvent', {
    relate: !!track_key,
    item: 'end',
    key: track_key,
    value: form
  })
}

// 拦截器中的响应器
service.interceptors.response.use(
   (config) => {

    (response) => {
      const {
        data: { code, msg, message, metadata }
      } = response
      if (response?.config?.track) {
        handleTrackInfo(response.config.track_key, response.config.api_name, {
          request: {
            url: response.config.url,
            method: response.config.method,
            params: response.config.params,
            data: response.config.data ? JSON.parse(response.config.data) : '',
            headers: response.config.headers
          },
          response: { data: response.data, code }
        })
      }
      return handleErrCode({ data: response.data, code, status, msg, message, metadata })
    },
    (error) => {
      if (!error.response) {
        if (error?.config?.track) {
          handleTrackInfo(error.config.track_key, error.config.api_name, {
            request: {
              url: error.config.url,
              ...
            },
            response: { message: error.message }
          })
        }
        return handleErrCode({ message: error.message })
      }
      const {
        data: { code, msg, message },
        status
      } = error.response
      if (error.response.config.track) {
        handleTrackInfo(error.response.config.track_key, error.response.config.api_name, {
          request: {
            url: error.config.url,
            ...
          },
          response: {
            data: error.response.data,
            code,
            status,
            msg,
            message
          }
        })
      }
      return handleErrCode({
        data: error.response.data,
        code,
        status,
        msg,
        message
      })
    }
)

使用

1.例子
    
      查询
    
2.例子

      
              删除