Nupital Pomp Mesmerises

    vue-monitor

    1.0.5 • Public • Published

    基于事件冒泡机制的VUE低侵入自动埋点方案

    安装

      npm i monitor --save

    使用

    初始化

    在vue项目入口文件中初始化, 基于vue-cli创建的项目一般为src/main.js

    import Vue from 'vue'
    import router from './router'
    import App from './App'
    // 引入买点SDK
    import Monitor from 'vue-monitor'
     
    // 初始化埋点 需在vue实例创建前初始化 
    // **第一个参数为VueRouter实例(用来监听页面切换上报页面PV) 
    // **第二个参数为埋点上报地址
    Monitor.getInstance().init(router, 'https://xxxx')
     
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })
     

    埋点

    只需在需埋点组件上添加monitor属性即可 支持QueryString传参数 可携带业务参数

    <template>
      <button :monitor="`enent_key=btn_search&event_id=1111&pageId=${pageId}&desc=${desc}`">测试</button>
    </template>
     
    <script>
    export default {
      name: 'Test',
      data() {
        return {
          pageId: 1,
          desc: '备注'
        }
      }
    }
    </script> 

    Keywords

    Install

    npm i vue-monitor

    DownloadsWeekly Downloads

    6

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    85.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • discoverforever