基于vue项目的埋点小插件

4,462 阅读2分钟

前言:日常开发中可能会经常要用到埋点采集数据的功能,由此基于vue自定义指令和路由守卫开发了一个埋点小工具,目前功能主要有三个,后面会增加。

闲话不多说,上车吧。

github地址 github.com/wxw007/kk-v…

kk-vue-log

用于vue项目中的埋点小工具,主要功能有

  • 点击事件埋点,可自定义埋点参数和埋点要执行的方法。
  • 记录页面停留时间。
  • 记录页面跳转来源。

开始

安装

npm install kk-vue-log -S

使用

// 在main.js中

// 引入
import kkVueLog from "kk-vue-log"

// 配置
// options 除了以下几个配置,支持所有的axios配置项

const options = {

    // 埋点数据上传的接口,必填
    url: "//127.0.0.1:3000/login", 

    //埋点数据上传的方法, 可选,不填写默认 'get'
    method: 'post', 

    //请求的 headers,(可选) 建议只放常量  (提示, 若需要加token这一类通过接口或者计算出来的参数, 需要放在请求拦截器里, 否则可能取不到值)
    headers:{ 
        'NAME': 'name'
    },
    // 请求拦截执行函数 config为请求的配置 同axios请求拦截器的配置
    interceptorsRequest:function(config){
      config.headers={
        token: '123456'
      }
    },

    // 路由实例 (可选) 如果需要记录页面停留时间和页面跳转来源则必填
    router, 

    //一个数组,(可选) 需要记录停留时间的页面vue路由path, 若写['*']则为所有页面
    durationRoute:['*'], 

    // 是否需要记录跳转来源 (可选)
    needReferrer: false,

    //跳转来源的页面标记字段 (可选) 例如 http://www.baidu.com?from=baidu
    sign: 'from' 
}

// 使用 
Vue.use(kkVueLog, options)

点击埋点

在需要埋点的元素或组件中。

<div v-log="{params:{a:1,b:2}}">click</div>

注意 一定要将自定义参数放在 params 对象里。

记录页面停留时间

参照开头,将所需字段配置好即可。

页面跳转的时候会自动向配置好的接口地址发送请求,自动携带两个参数:

duration: 页面停留时间,单位毫秒;

url: 页面url。

记录页面跳转来源

同样参照开头,将所需参数配置好即可。

页面跳转的时候会自动向配置好的接口地址发送请求,自动携带一个参数: 字段名为 options配置中sign字段的值,例如开头的例子中,请求参数为 {from: 'baidu'}