無痕埋點（聲明式）（原創）

適用於 H5，Hybird，PC端

埋點主要分前端（用戶行爲分析）、後端（業務數據統計）

前端埋點方式有幾種，最準確，使用最高的是代碼埋點，即在須要埋點的節點調用接口直接上傳埋點數據，友盟、百度統計等第三方數據統計服務商大都採用這種方案；

其餘可視化等方式須要開發系統去配合，上報數據不太準確，目前在摸索階段。

最後在代碼埋點的基礎上，採用輕耦合的聲明式埋點最適合目前項目。

總結了一下：

代碼埋點：

優勢：最經常使用，最準確，最普遍

缺點：侵入代碼，業務邏輯，耦合過重

聲明式埋點：

優勢：不侵入代碼，業務邏輯，自動獲取頁面路由變化，效率高

缺點：不能覆蓋全部埋點需求

適用於：頁面pv統計、事件統計（按鈕點擊、滑動等）不須要動態傳值的地方

基於VueJS（H五、混合開發、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自定義事件及全局監聽點擊事件，大同小異