前端埋点监听按钮点击事件（方案）

1. 监听所有按钮（方案1）

在app.vue中监听所有点击事件，在对应的按钮上面添加每个按钮对应的code和编码，如果是符合要求的点击就触发日志接口传递code和编码过去。

app.vue

  mounted() {
    window.addEventListener("mousedown", (res) => {
      console.log(
        "当前点击的按钮，类型为：",
        res.target.getAttribute("actionType")
      );
     console.log(
        "当前点击的按钮，编码为：",
        res.target.getAttribute("actionCode")
      );
      //下面开始执行请求，传递参数给后端
    });
 }

组件中，xx.vue

<span class="bd-title color-title" actionType="add" actionCode="1">新增</span>

2.自定义指令

给不同的按钮添加不同的标识，在触发自定义指令的时候，挂载监听事件

xxx.vue

<span 
        actionType="add"
        actionCode="1"
        v-track="{
          triggerType: 'click',
          currentUrl: $route.path,
          businessCode: 19,
          actionType: '点击新增按钮',
        }">新增
</span>

gloabelDirective.js

export default {
    install(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,
	                //触发埋点时间
	                time: binding.value.time,
	 
	            }
	            //如果是浏览类型，直接保存
	            if (binding.value.triggerType == 'browse') {
	                console.log(params, "浏览了");
	                //调用后台接口保存数据params为入参
	            } else if (binding.value.triggerType == 'click') {
	                //如果是click类型，监听click事件
	                el.addEventListener('click', (event) => {
	                    //调用后台接口保存数据params为入参
	                    console.log(event, params, "点击了");
	                }, false)
	            }
	 
	        }
	    }
	})
}
}