Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

vue-plugin-stat

0.0.16 • Public • Published

介绍

用于用户行为统计的 Vue 插件,支持:

  • 页面浏览上报
  • 节点浏览上报
  • 节点点击上报
  • 手动页面浏览上报
  • 手动节点点击上报
  • 手动自定义事件上报

安装依赖

npm install vue-plugin-stat

快速开始

// main.js
 
import Vue from "vue";
import Router from "vue-router";
import stat from "vue-plugin-stat";
 
const report = function() {
  fetch("http://example.com").then(function(res) {
    // do something
  });
};
 
const router = new Router({
  routes: [
    // ...
  ]
});
 
Vue.use(Router);
Vue.use(stat, {
  report,
  router
});
  • 页面浏览上报

    如果您传入了router,会自动为您在页面跳转时上报页面浏览事件。

    ⚠ 注:如需阻止页面浏览自动上报,在该页面路由的 meta 对象上添加autoReport: false属性即可。

  • 节点浏览上报

    <div
      v-stat="{
        viewId: '10001',
        args: {}
      }"
    >
        这是一个页面节点
    </div>

    如果设置了viewId,当该节点滚动到浏览器窗口内时,会上报该节点浏览事件。

  • 节点点击上报

    <button
      v-stat="{
        clickId: '10002',
        target: '登录按钮',
        args: {}
      }"
    >
        登录
    </button>

    如果设置了clickId,当该节点被点击时,会上报该节点点击事件。

  • 手动页面浏览上报

    this.$viewReport({
      id: "10002",
      uuid: "abcdefghijklmn",
      args: { screen: "page_mine", visible: 1 }
    });
  • 手动节点点击上报

    this.$clickReport({
      target: "登录按钮",
      args: {}
    });
  • 手动自定义事件上报

    this.$report({
        type: '登录结果'
        target: '登录按钮',
        id: '10007',
        args: { succeed:1 }
    })

使用

# 安装插件Vue.use(stat, options)

  • 参数{Object} options

    • {Function} report required 上报函数
    • {VueRouter} router required VueRouter 对象
    • {Boolean} onceNodeView optional 一个页面内的节点浏览事件是否只上报一次,默认为true
    • {Boolean} showConsole optional 是否打印上报数据,默认为false
  • 示例

    const report = function() {
      fetch("http://example.com").then(function(res) {
        // do something
      });
    };
     
    Vue.use(stat, {
      report,
      router: VueRouter,
      onceNodeView: false
    });

# 指令v-stat

  • 预期Object
    • {String} clickId optional 需要上报节点点击事件时必须
    • {String} viewId optional 需要上报节点浏览事件时必须
    • {String} type optional 事件类型
    • {String} target optional 事件目标
    • {Object} pageParams optional 页面参数
    • {Object} args optional 事件参数
    • {Boolean} immediately optional 是否即时上报,默认为 true

# 方法

  • vm.$nodeReport()

  • vm.$clickReport(options)

  • vm.$viewReport(options)

  • vm.$report(options)

    以上的参数options均为需要上报的日志对象:

    • {String} id required 事件id
    • {String} type optional 事件类型
    • {String} target optional 事件目标
    • {Object} pageParams optional 页面参数
    • {Object} args optional 事件参数
    • {Boolean} immediately optional 是否即时上报,默认为 true

Install

npm i vue-plugin-stat

DownloadsWeekly Downloads

1

Version

0.0.16

License

ISC

Unpacked Size

54.4 kB

Total Files

8

Last publish

Collaborators

  • avatar