什麼是埋點？

通俗點講，我理解的埋點就是在系統中植入的一些程式碼（當然不是惡意程式碼哈），這些程式碼可以檢測到使用者某個行為，可以拿到一些想要的資料，這就是所謂的埋點。

在如今的資訊時代，資料是一切業務以及企業的核心，對資料的採集、管理、分析是必不可少的一環，而埋點主要是對資料的採集，這決定了後期管理，以及資料分析的準確性，因此，埋點對於任何一個系統都是比較重要的。

埋點方案

從大方向上來說，埋點主要分為前端埋點和後端埋點，本次我只研究了前端埋點的一些方案。
前端埋點主要分為： 程式碼埋點，視覺化埋點和無埋點。

程式碼埋點

業界比較有名的是：友盟和百度統計，程式碼埋點的方式可分為以下兩種

命令式埋點

在頁面ready之後或者點選某個BUTTON之後，進行一些資料收集和上報；通常寫在ready回撥和button點選事件回撥函式裡面。
但這種埋點方式的不足是將業務邏輯和埋點程式碼混雜在了一起，使得業務程式碼邏輯比較繁瑣，也不利於維護；所以要將埋點程式碼和業務邏輯相解耦。

宣告式埋點

通過宣告式埋點來解耦業務程式碼

在VUE的專案中，可以考慮基於指令的埋點解決方案。VUE 自定義指令提供了一種機制，將資料變化對映為DMO操作。VUE提供了自定義指令的幾個鉤子：

bind：只調用一次，在指令第一次繫結到元素上時呼叫。
update： 在 bind 之後立即以初始值為引數第一次呼叫，之後每當繫結值變化時呼叫，引數為新值與舊值 unbind：只調用一次，在指令從元素上解綁時呼叫。

可以通過這種方式在指令第一次繫結到元素上的時候，新增一些事件處理函式，可以是點選事件，或者是搜尋框的輸入操作，在使用指令的時候傳一些需要收集的業務資料，或瀏覽器內部的資料、登入使用者的資料，或行為資料，當前路由資訊等等；
比如：

Vue.directive('clickUser', {
    // 指令的定義
    bind: function (el, binding) {
        el.onclick = () => {
	        console.log(binding)
	        console.log(binding.arg)
	        const data = binding.value
	        console.log('點選資料')
	        console.log(data)
        }
    },
    inserted: function (el, binding) {
	// 插入到父元素時觸發
    	console.log('插入父元素')
    },
   update: function (el, binding, vnode) {
	   console.log('update')
	   console.log(el)
	   console.log(binding)
   },
   componentUpdated: function () {
    	  // 元件更新和下面的子元件都更新完畢
    	  console.log('元件更新')
   },
   unbind: function () {
       // 元素從頁面中解綁時
       console.log('元素解綁')
   }
})
 

程式碼埋點工作量會比較大，容易出現漏埋或錯埋的情況，而且如果有埋點更新的話，需要重新部署上線，這點上來說是代價比較大的。但是，程式碼埋點可以獲取到很多定製化的埋點需求，可以獲取到業務內部的深層資料。

視覺化埋點（框架式埋點,也叫無痕埋點）

像Mixpanel和Kissmetrics等的資料服務商，實現了視覺化埋點，可以通過配置要對哪些地方進行埋點。
這方面的工具還沒有看，只知道大概的理念，後期看完再更新上來哈。

無埋點

對所有的動作行為進行埋點，包括檢測BUTTON、FORM、連結等等元素的行為，然後進行資料收集。但這種資料量會比較大，流量大，傳輸起來會比較慢。

總結

總的來說，前端埋點和前端監控存在著很多的聯絡，前端效能監控包括：資料監控、效能監控和異常監控，這些都可以通過前端埋點的方式來獲得；而前端埋點不論是程式碼埋點、視覺化埋點還是無埋點，都有各自的優勢，因此，一套完備的前端埋點方案實際上可將三種方案相結合。