kk-vue-log

KO | EN

gitlite — search

#python #hacktoberfest #react #typescript #golang #android #deep-learning #linux #docker #java #kubernetes #vue #pytorch #openai

(★ 21)

vue 埋点小插件

kk-vue-log 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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'}

kk-vue-log

kk-vue-log 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

kk-vue-log

kk-vue-log 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README