无痕埋点（声明式）（原创）

适用于 H5，Hybird，PC端

埋点主要分前端（用户行为分析）、后端（业务数据统计）

前端埋点方式有几种，最准确，使用最高的是代码埋点，即在需要埋点的节点调用接口直接上传埋点数据，友盟、百度统计等第三方数据统计服务商大都采用这种方案；

其他可视化等方式需要开发系统去配合，上报数据不太准确，目前在摸索阶段。

最后在代码埋点的基础上，采用轻耦合的声明式埋点最适合目前项目。

总结了一下：

代码埋点：

优点：最常用，最准确，最广泛

缺点：侵入代码，业务逻辑，耦合太重

声明式埋点：

优点：不侵入代码，业务逻辑，自动获取页面路由变化，效率高

缺点：不能覆盖所有埋点需求

适用于：页面pv统计、事件统计（按钮点击、滑动等）不需要动态传值的地方

基于VueJS（H5、混合开发、M端、公众号）

技术方案：vue自定义事件及全局监听点击事件

// 在入口js中引入ubcMobile.js
import ubcMobile from './ubcMobile'

// 根组件注入
new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App },
    directive: { ubcMobile }
})

// 使用方法：在根DOM节点上填加属性，自定义事件v-ubc，
<template> 
    <div id="app" v-ubc> 
        <router-view ></router-view> 
    </div> 
</template>


// DOM节点上填加点击事件属性ubc_event（声明式），例如以下： 
<button v-on:click="inc" ubc_event='{"eventName":"图形验证码","eventId":"gd.zcy.txyzm"}'>按钮</button> 
<button v-on:click="dec" ubc_event='{"eventName":"立即登录","eventId":"gd.zcy.ljdl"}'>按钮</button>
复制代码

基于AvalonJS（PC、Web端）

技术方案：avalon自定义事件及全局监听点击事件，大同小异