前端埋點方案調研
什麼是埋點?
通俗點講,我理解的埋點就是在系統中植入的一些程式碼(當然不是惡意程式碼哈),這些程式碼可以檢測到使用者某個行為,可以拿到一些想要的資料,這就是所謂的埋點。
在如今的資訊時代,資料是一切業務以及企業的核心,對資料的採集、管理、分析是必不可少的一環,而埋點主要是對資料的採集,這決定了後期管理,以及資料分析的準確性,因此,埋點對於任何一個系統都是比較重要的。
埋點方案
從大方向上來說,埋點主要分為前端埋點和後端埋點,本次我只研究了前端埋點的一些方案。
前端埋點主要分為: 程式碼埋點,視覺化埋點和無埋點。
程式碼埋點
業界比較有名的是:友盟和百度統計,程式碼埋點的方式可分為以下兩種
命令式埋點
在頁面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、連結等等元素的行為,然後進行資料收集。但這種資料量會比較大,流量大,傳輸起來會比較慢。
總結
總的來說,前端埋點和前端監控存在著很多的聯絡,前端效能監控包括:資料監控、效能監控和異常監控,這些都可以通過前端埋點的方式來獲得;而前端埋點不論是程式碼埋點、視覺化埋點還是無埋點,都有各自的優勢,因此,一套完備的前端埋點方案實際上可將三種方案相結合。