vue指令埋点

package.json

{
  "name": "xxx",
  "version": "0.3.4",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve --mode development",
    "test": "vue-cli-service serve --mode test",
    "pro": "vue-cli-service serve --mode production",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint",
    "build:test": "vue-cli-service build --mode test",
    "build:prod": "vue-cli-service build --mode production",
    "analyzer": "cross-env ANALYZER=true vue-cli-service build"
  },
  "dependencies": {
    "@vue/composition-api": "^1.7.1",
    "amfe-flexible": "^2.2.1",
    "animejs": "^2.2.0",
    "axios": "^0.19.0",
    "compression-webpack-plugin": "6.1.1",
    "core-js": "^3.6.5",
    "cube-ui": "~1.12.15",
    "echarts": "^5.4.2",
    "flv.js": "^1.6.2",
    "hls.js": "^1.3.4",
    "jsencrypt": "^3.0.1",
    "lodash": "^4.17.21",
    "pinia": "^2.0.33",
    "vant": "^2.12.6",
    "vue": "^2.6.11",
    "vue-drawer-layout": "^1.3.0",
    "vue-router": "^3.5.2",
    "vuex": "^3.6.2",
    "x2js": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "cross-env": "^7.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.1.3",
    "less-loader": "^5.0.0",
    "postcss-pxtorem": "5.1.1",
    "vue-template-compiler": "^2.6.11",
    "webpack-bundle-analyzer": "^4.9.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

src->directive

index.js

import track from './track';

export default {
  install(Vue) {
    Vue.directive('track', track);
  }
};

track.js

export default {
    bind(el, binding, vnode) {
        // 自定义埋点指令
        //获取埋点信息
        const bindData = binding.value;
        if(!bindData) return;
        //获取上报埋点参数
        let params = {
            curUrl:bindData?.curUrl,
            actionType:bindData?.actionType,
            frontTriggerType:bindData?.triggerType,
            id:bindData?.id,
            behavior:bindData?.behavior
        }
        //如果是浏览类型，直接保存
        if (bindData?.triggerType == 'view'){
            //调用埋点sdk接口保存数据
            window?.traceSdk?.traceEvent({
                eventType: 'PageView',
                page: params.curUrl,
            })
        } else if (bindData?.triggerType == 'click'){
                //如果是click类型，监听click事件，当组件销毁后，组件上的事件监听会自动销毁
                el.addEventListener('click', (event) => {
                //调用埋点sdk接口保存数据
                window?.traceSdk?.traceEvent({
                    eventType: 'Click',
                    page: params.curUrl,
                })
            }, false)
        }
    }
};

注册
main.js

import directive from '@/directive';
Vue.use(directive)

使用

1、
<div class="basicInfr"
       id="basicInfr"
       v-track="{'triggerType': 'view', 'currentUrl': 'xxx.index.index.BasicInfr', 'behavior': 'BasicInfr', 'id': '', 'actionType': `BasicInfr-view`}"
       >
</div>
2、
<div class="mainjobCell"
              v-track="{'triggerType': 'click', 'curUrl': `xxx.index.mainwork.${item?.name}`, 'behavior': item.name, 'id': '', 'actionType': `${item.name}-click`}"
               v-for="(item, index) in mainworkList?.slice(0,firstNum)"
               :key="'mainwork'+index"
               @click="goMainjobDetail(item)">
</div>