關(guān)于可視化埋點(diǎn)的介紹，從其技術(shù)原理燎悍，優(yōu)點(diǎn)缺點(diǎn)，實(shí)際案例盼理，結(jié)合易觀的應(yīng)用場景等方面給大家做一下介紹谈山。
▌什么是可視化埋點(diǎn)
可視化埋點(diǎn)，通常是指用戶通過設(shè)備連接用戶行為分析工具的數(shù)據(jù)接入管理界面宏怔，對可交互且交互后有效果的頁面元素（如：圖片奏路、按鈕、鏈接等）臊诊，直接在界面上進(jìn)行操作實(shí)現(xiàn)數(shù)據(jù)埋點(diǎn)鸽粉，下發(fā)采集代碼生效回?cái)?shù)的埋點(diǎn)方式。這種方式所見即所得抓艳，跳過代碼部署触机、測試驗(yàn)證和發(fā)版過程重虑，極大提升生產(chǎn)力瞻惋。
▌優(yōu)點(diǎn)1：可視化埋點(diǎn)的出現(xiàn)，是為更好的解決代碼埋點(diǎn)流程復(fù)雜器贩、成本高等問題
以精細(xì)化運(yùn)營分析工具——易觀方舟為例偏友，使用者只需在其可視化埋點(diǎn)頁面上椒舵，點(diǎn)擊想要監(jiān)測的元素，然后起個(gè)名字约谈、給個(gè)編號，埋點(diǎn)就完成了犁钟。同時(shí)棱诱，還可以根據(jù)時(shí)間、地理位置涝动、操作系統(tǒng)迈勋、useragent、渠道等幾十個(gè)維度醋粟，細(xì)分查看該埋點(diǎn)的數(shù)據(jù)靡菇，而不僅僅是這個(gè)元素的點(diǎn)擊重归。
可視化埋點(diǎn)的技術(shù)原理是什么呢？其實(shí)厦凤，可視化埋點(diǎn)與好多年前比較流行的面向業(yè)務(wù)人員的網(wǎng)頁制作工具Dreamweaver 類似鼻吮，即所見即所得，通過點(diǎn)擊交互替代手寫代碼较鼓∽的荆可視化埋點(diǎn)參考Visual Studio 等一系列IDE做法，用可視化的頁面交互手段來代替代碼編寫博烂，從而大幅縮減工作量和溝通成本香椎，同時(shí)降低出錯(cuò)幾率。
另外禽篱，從流程上講畜伐，每次埋點(diǎn)后，業(yè)務(wù)人員都還要等待APP/網(wǎng)頁/小程序的更新發(fā)版or上線躺率，才能看到數(shù)據(jù)玛界，這種時(shí)間滯后性，大大傷害了業(yè)務(wù)人員的數(shù)據(jù)使用需求肥照。所以脚仔，參考很多手游的做法，把核心代碼舆绎、配置鲤脏、資源分開，通過網(wǎng)絡(luò)更新配置和資源從而實(shí)現(xiàn)采集代碼下發(fā)吕朵。達(dá)到所見即所得的效果猎醇。
▌代碼埋點(diǎn)VS可視化埋點(diǎn)
通過對比兩者所需步驟和人力配比，不難發(fā)現(xiàn)努溃，可視化埋點(diǎn)的流程硫嘶，從5步減少至3步，時(shí)間也相對縮短梧税，降低了人力成本沦疾，提高了生產(chǎn)效率。
▌可視化埋點(diǎn)的局限性
業(yè)務(wù)屬性數(shù)據(jù)第队，例如哮塞，訂單號、金額凳谦、商品數(shù)據(jù)量等忆畅，通常要調(diào)用后臺的接口，可視化埋點(diǎn)在這方面的支持有限尸执；尤其國內(nèi)的安卓基本上不是“原裝”的家凯，開發(fā)沒有統(tǒng)一的規(guī)范缓醋，除非每個(gè)廠商一套策略，否則靠可視化埋點(diǎn)很難獲取這部分?jǐn)?shù)據(jù)绊诲；并且每個(gè)廠商一套策略送粱，搞不好監(jiān)測的SDK比應(yīng)用都大，就太不友好了驯镊；
國內(nèi)山寨機(jī)的數(shù)量很大葫督，個(gè)別山寨機(jī)甚至一批機(jī)器一個(gè)IMEI，這種灰色地帶的數(shù)據(jù)監(jiān)測板惑，目前并沒有具備可行性的可視化埋點(diǎn)方案橄镜；
網(wǎng)頁、app和小程序的開發(fā)“流派”很多冯乘，各有特色洽胶；但對于可視化埋點(diǎn)而言，就是開發(fā)沒有統(tǒng)一規(guī)范裆馒，導(dǎo)致某些場景下監(jiān)測不到或監(jiān)測準(zhǔn)確性不足姊氓；例如，一些前端架構(gòu)不完善的公司的新手前端程序員喷好，經(jīng)常忘記給元素加id或class等起標(biāo)識作用的屬性翔横，導(dǎo)致自己維護(hù)麻煩，監(jiān)測也麻煩梗搅。
總之禾唁，這些不如人意的地方，最終會導(dǎo)致可視化埋點(diǎn)獲取不到一些數(shù)據(jù)无切，或監(jiān)測數(shù)據(jù)的準(zhǔn)確性降低荡短。
就目前技術(shù)來講，可視化埋點(diǎn)并不能使數(shù)據(jù)采集達(dá)到最完美的狀態(tài)哆键；雖然它可以提升效率掘托，但滿足不了所有場景的數(shù)據(jù)采集。從使用角度來說籍嘹，如果是急于需要使用數(shù)據(jù)闪盔，人力資源又緊張的情況下，可視化埋點(diǎn)就是最后的選擇辱士。如果緊急度不高锭沟，且人手充足的情況下，則可考慮代碼埋點(diǎn)识补。
▌可視化埋點(diǎn)的具體流程
首先手機(jī)APP嵌入開啟可視化功能的SDK，通過WebSocket的方式和服務(wù)器辫红、前端進(jìn)行相互通信凭涂，SDK會定時(shí)收到服務(wù)器下發(fā)的頁面請求祝辣；然后會上報(bào)頁面快照和界面因子信息到服務(wù)器，服務(wù)器收到信息后會根據(jù)界面因子信息對頁面的每個(gè)元素進(jìn)行分析切油，根據(jù)控件的類型來標(biāo)記哪些頁面元素是可以被埋點(diǎn)的蝙斜；最后將可埋點(diǎn)信息交給前端渲染，此時(shí)澎胡，前端Web頁面上展示就的就是可以埋點(diǎn)的頁面孕荠。
埋點(diǎn)人員在渲染出來的前端Web頁面上進(jìn)行框選，標(biāo)記事件屬性等進(jìn)行埋點(diǎn)攻谁。前端Web頁面會將對應(yīng)的埋點(diǎn)信息傳遞給服務(wù)器保存稚伍，SDK則會通過策略定時(shí)從服務(wù)器獲取埋點(diǎn)信息。
以上就是整個(gè)埋點(diǎn)的大體工作流程戚宦，具體包含WebSocket通信過程以及具體的埋點(diǎn)過程个曙。下面就針對這兩個(gè)過程分別進(jìn)行細(xì)致的介紹。
▌WebSocket通信
由于埋點(diǎn)過程中需要設(shè)備APP與前端埋點(diǎn)Web頁面進(jìn)行長時(shí)間的連接受楼，并且連接期間雙方需要進(jìn)行互相通信垦搬，所以就需要一種高效的支持雙向通信的協(xié)議來支持這種場景。
WebSocket是用于在Web瀏覽器和服務(wù)器之間進(jìn)行任意的雙向數(shù)據(jù)傳輸?shù)囊环N技術(shù)艳汽，它基于TCP協(xié)議實(shí)現(xiàn)猴贰，包含初始的握手過程，以及后續(xù)的多次數(shù)據(jù)幀雙向傳輸過程河狐。其目的是在應(yīng)用和服務(wù)器進(jìn)行頻繁雙向通信時(shí)米绕，可以避免Server端被打開多個(gè)HTTP連接進(jìn)行工作，節(jié)約資源甚牲、提高了工作效率和資源利用率义郑。WebSocket被廣泛用于Web的實(shí)時(shí)消息通信系統(tǒng)中。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信丈钙，將會替代基于HTTP的Ajax長輪詢的拉取消息模式非驮。建立了WebSocket連接后，只要客戶端和服務(wù)器端任意一端不主動斷開連接前雏赦，通信行為都是在一個(gè)持久連接上發(fā)起劫笙，后續(xù)數(shù)據(jù)與請求都通過幀序列的形式進(jìn)行傳輸。
在具體的連接過程中星岗，其實(shí)前端Web頁面和SDK與服務(wù)器的連接都是基于WebSocket的填大，并且這兩個(gè)連接最終會建立一個(gè)一對一的對應(yīng)關(guān)系。易觀在埋點(diǎn)的過程中規(guī)定俏橘，同一個(gè)版本的APP只允許一臺設(shè)備進(jìn)行連接埋點(diǎn)允华。流程如下圖：
該圖描述的是SDK如何與服務(wù)器建立WebSocket連接以及如何與前端Web頁面進(jìn)行關(guān)聯(lián)，具體有以下幾個(gè)步驟：
1.埋點(diǎn)人員打開埋點(diǎn)Web頁面，頁面與服務(wù)器建立連接靴寂。
2.打開手機(jī)APP(已經(jīng)提前集成了易觀可視化埋點(diǎn)功能的SDK)磷蜀，手機(jī)搖一搖建立WebSocket連接。
3.服務(wù)端通過WebSocket連接請求該手機(jī)的設(shè)備信息百炬。
4.手機(jī)收到服務(wù)器的請求后獲取對應(yīng)的設(shè)備信息褐隆，然后通過WebSocket上報(bào)設(shè)備信息到服務(wù)器。
5.服務(wù)器收到設(shè)備的信息后發(fā)送到步驟一的Web頁面進(jìn)行顯示剖踊。
6.埋點(diǎn)人員在Web頁面選擇手機(jī)進(jìn)行關(guān)聯(lián)庶弃，同時(shí)服務(wù)器通過WebSocket發(fā)送快照請求到手機(jī)。
以上就是具體的設(shè)備的連接過程德澈，到此為止歇攻，服務(wù)器與手機(jī)就已經(jīng)建立了一個(gè)可以相互通信的長連接，并且與Web頁面進(jìn)行了關(guān)聯(lián)圃验，如果此時(shí)再有同一版本的APP進(jìn)行連接掉伏，頁面會提示用戶該版本的APP已經(jīng)進(jìn)行連接了。
接下來就是埋點(diǎn)過程中澳窑，服務(wù)器會定時(shí)向手機(jī)下發(fā)請求信息來獲取最新的頁面信息：
1.服務(wù)器定時(shí)請求手機(jī)的快照信息斧散，手機(jī)在收到快照請求后發(fā)送快照信息到服務(wù)器。
2.WebSocket服務(wù)器收到手機(jī)的快照信息后摊聋，首先把標(biāo)志置為false鸡捐，待解析完快照信息后發(fā)送至Web界面進(jìn)行展示。
3.發(fā)送成功后把標(biāo)志置為true,定時(shí)服務(wù)根據(jù)標(biāo)志來決定是否繼續(xù)請求快照麻裁。
4.心跳包為APP以及WEB端定時(shí)發(fā)送箍镜，來保證WebSocket的長連接暢通。
以上就是埋點(diǎn)過程中煎源，整個(gè)WebSocket的工作流程色迂。這里面有幾個(gè)需要注意的地方：
1.SDK通過WebSocket上報(bào)的頁面快照信息大小是根據(jù)當(dāng)前頁面的復(fù)雜度來決定的。如果當(dāng)前頁面包含的元素比較多手销，那么上傳的快照信息就會比較大歇僧，這樣上傳至服務(wù)器就會比較慢。在網(wǎng)絡(luò)不好的情況下出錯(cuò)的概率就比較大锋拖。易觀在這方面做了一些優(yōu)化诈悍，會對上傳的信息進(jìn)行一些優(yōu)化和壓縮處理，從而盡可能兼顧效率的同時(shí)保證上報(bào)數(shù)據(jù)的連續(xù)性和完整性兽埃。
2.SDK上報(bào)快照信息是被動的侥钳，是通過服務(wù)器來控制的。服務(wù)器會定時(shí)（比如每隔幾秒）請求SDK上報(bào)信息柄错。這樣就會有一個(gè)問題舷夺，就是SDK在此期間沒有發(fā)生頁面的切換苦酱，頁面信息沒有變化，這時(shí)候收到服務(wù)器請求就無需上報(bào)快照信息冕房，否則既浪費(fèi)帶寬躏啰，體驗(yàn)上也不好。所以易觀在這方面也做了優(yōu)化耙册，服務(wù)端和SDK通過某些機(jī)制來盡量減少比較大的交互過程，盡量減少不必要的請求毫捣。
▌埋點(diǎn)過程
下面介紹一下具體的埋點(diǎn)過程详拙，先看下圖：
埋點(diǎn)過程是通過Http協(xié)議來實(shí)現(xiàn)的。服務(wù)器提供相關(guān)的埋點(diǎn)查詢/新增/修改/刪除的接口蔓同。埋點(diǎn)人員通過瀏覽器在具體的埋點(diǎn)Web頁面對埋點(diǎn)元素進(jìn)行框選饶辙，繼而填寫對應(yīng)的事件名稱，然后點(diǎn)擊相應(yīng)的新增/修改/刪除按鈕即可斑粱。
用戶編輯的所有的埋點(diǎn)信息最終都會保存到MySQL數(shù)據(jù)庫中弃揽。用戶最新的快照信息會保存在Redis中一段時(shí)間，供用戶修改埋點(diǎn)的時(shí)候調(diào)用则北。用戶編輯完所有的埋點(diǎn)后點(diǎn)擊部署按鈕矿微，所有的埋點(diǎn)就會實(shí)時(shí)生效，其他設(shè)備上的APP就會獲取到部署后的埋點(diǎn)信息尚揣。
至此涌矢，可視化埋點(diǎn)的流程和技術(shù)細(xì)節(jié)就介紹完了。
