Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-plugin-stat with all npm packages installed. Try it out:

var vuePluginStat = require("vue-plugin-stat")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-plugin-stat v0.0.16

A Vue plugin for stat

介绍

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free