Nuxt.js vue 实现简单的埋点功能

需求

        项目新版本新功能，需要再新页面添加埋点功能，记录用户的使用情况和使用习惯。因为前端项目使用的是Vue，所以选择使用Vue的自定义指令来实现埋点功能

以下三步骤

1.在plugins文件下创建自定义指令   buriedPoint.js 如下：

import Vue from 'vue'
// 自定义埋点指令
Vue.directive('track', {
  //钩子函数，只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  /*
   * el:指令所绑定的元素，可以用来直接操作 DOM
   * binding：一个对象，包含以下 property:
   *   name：指令名，不包括 v- 前缀。
   *   value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
   *   expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
   *   arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
   *   modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
   * vnode：Vue 编译生成的虚拟节点
   */
  bind: (el, binding, vnode) => {
    if (binding.value) {
      //这里参数是根据自己业务可以自己定义
      let params = {
        currentUrl:binding.value.currentUrl,
        actionType:binding.value.actionType,
        frontTriggerType:binding.value.triggerType,
        businessCode:binding.value.businessCode,
        behavior:binding.value.behavior,
        service:'xxx',
      }
      //如果是浏览类型，直接保存
      if (binding.value.triggerType == 'browse'){
        //调用后台接口保存数据
         api.eventTrack.saveEventTrack(params);
      } else if (binding.value.triggerType == 'click'){
        //如果是click类型，监听click事件
        el.addEventListener('click', (event) => {
          //打印上面定义的参数属性
          console.log(params)
          console.log(params.behavior)
          //调用后台接口保存数据
          api.eventTrack.saveEventTrack(params);
        }, false)
      }
 
    }
  }
})

2.在nuxt.config.js 配置文件 引入对应的文件 

 

3.在需要添加埋点的标签上添加自定义指令就可以

 （1）如果记录点击事件，triggerType写为click

<div class="btn">
          <el-button :disabled="isReadAll" type="primary" class="btn1" @click="readAllHandle" 
          v-track="{triggerType:'click',currentUrl: $route.path,behavior:'点击了同意按钮',businessCode: 19,actionType:'abcclick'}">{{this.readStr}}</el-button>
          <el-button class="btn2" @click="toubaodialogVisible = false">取消</el-button>
  </div>

（2）如果是浏览类型记录，triggerType写为browse

<div class="app-online-list" 
v-track="{triggerType:'browse',
currentUrl: $route.path,behavior:'浏览xxx功能',businessCode: 19,actionType:'xxx-view'}">
</div>

大功告成！！！