介绍

用于用户行为统计的 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