【工程化】如何實(shí)現(xiàn)用戶行為的動(dòng)態(tài)采集與分析

開場介紹

哈嘍，大家好，我是清音，來自政采云前端團(tuán)隊(duì)。從去年開始負(fù)責(zé)用戶行為采集與分析體系的建設(shè)。很高興有機(jī)會(huì)能在這里給大家分享我們從 0-1 建設(shè)用戶采集與分析系統(tǒng)的經(jīng)驗(yàn)。

建設(shè)價(jià)值

數(shù)據(jù)埋點(diǎn)的業(yè)務(wù)價(jià)值

我們將這個(gè)用戶行為采集與分析的系統(tǒng)取名為為渾儀，數(shù)據(jù)采集服務(wù)上線一年半，目前渾儀平臺(tái)的日志數(shù)量已經(jīng)達(dá)到了 16 億，每個(gè)工作日收集的數(shù)量大約在 1000 萬左右，前端內(nèi)部建立了虛線的興趣小組，從采集需求，設(shè)計(jì)方案到落地，總的人力成本是在 90 人天左右。后面我會(huì)分四個(gè)部分去介紹渾儀系統(tǒng)，首先是關(guān)鍵架構(gòu)的總體介紹，然后分成數(shù)據(jù)采集、分析和應(yīng)用三個(gè)模塊詳細(xì)介紹。

關(guān)鍵結(jié)構(gòu)

渾儀系統(tǒng)總體流程可以歸納為三大步。首先，收集數(shù)據(jù)，然后進(jìn)行數(shù)據(jù)處理，最后，數(shù)據(jù)透出展示。

而支撐這三大部門，實(shí)現(xiàn)了 4 個(gè)功能模塊：

• 數(shù)據(jù)采集的 SDK
• 數(shù)據(jù)處理和數(shù)據(jù)存儲(chǔ)的服務(wù)
• 進(jìn)行坑位級(jí)數(shù)據(jù)展示的 Chrome 插件

• 系統(tǒng)級(jí)數(shù)據(jù)展示的站點(diǎn)

渾儀的總體架構(gòu)圖

總體架構(gòu)預(yù)覽

首先來看下渾儀的總體架構(gòu)圖，我們收集了三端的數(shù)據(jù)，PC、H5 和 APP。

在 PC 端和 H5 使用了兩套 sdk 去監(jiān)聽不同的事件。然后將監(jiān)聽到的事件通過 rest 接口上報(bào)給數(shù)據(jù)處理的服務(wù)，存儲(chǔ)至阿里云日志服務(wù)中。我們進(jìn)行了測試環(huán)境和真線環(huán)境，兩個(gè)環(huán)境的數(shù)據(jù)隔離。測試環(huán)境的 sdk 會(huì)走協(xié)商緩存的形式去刷新，真線會(huì)使用強(qiáng)緩存，并且進(jìn)行版本控制；由于真線數(shù)據(jù)量龐大，我們會(huì)定期將日志庫一年半以上的歷史數(shù)據(jù)數(shù)據(jù)存儲(chǔ)至 OSS。每天會(huì)有定時(shí)任務(wù)，篩選一部分?jǐn)?shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫中。另外還會(huì)和外部的很多系統(tǒng)進(jìn)行交互。

• 權(quán)限系統(tǒng)：主要控制渾儀站點(diǎn)的訪問權(quán)限；
• 性能系統(tǒng)：輸出一些高頻訪問頁面，進(jìn)行性能檢測；
• 運(yùn)維平臺(tái)，用來部署系統(tǒng)；和大數(shù)據(jù)平臺(tái)會(huì)做一些數(shù)據(jù)的交互，我們會(huì)將行為數(shù)據(jù)推給大數(shù)據(jù)平臺(tái)，也會(huì)從平臺(tái)上撈取一些業(yè)務(wù)相關(guān)的數(shù)據(jù)。

系統(tǒng)關(guān)鍵架構(gòu)

從上圖重點(diǎn)模塊的詳細(xì)架構(gòu)圖可以看到。左邊這一個(gè)模塊，是面向用戶進(jìn)行行為采集的，右邊模塊是面向內(nèi)部用戶；提供給用戶非常豐富的數(shù)據(jù)可視化展示。除了有可視化的站點(diǎn)，還提供了 Chrome 的插件，進(jìn)行數(shù)據(jù)的展示，還作為一個(gè) pass 平臺(tái)，對外提供一些 SQL 查詢，報(bào)表 Excel 導(dǎo)出，和提供 API 拉取報(bào)表的數(shù)據(jù)，也可以基于現(xiàn)有的數(shù)據(jù)進(jìn)行二次開發(fā)。

數(shù)據(jù)采集

首先講一下數(shù)據(jù)采集模塊的實(shí)現(xiàn)。我們采集了頁面進(jìn)入和離開，用戶點(diǎn)擊和滾屏事件，還有一些標(biāo)準(zhǔn)的自定義事件。頁面進(jìn)入、離開和滾屏的事件我們能進(jìn)行自動(dòng)化的采集，點(diǎn)擊以及自定義事件需要，前端同學(xué)配合，進(jìn)行代碼植入。

• 首先我們在頁面當(dāng)中通過項(xiàng)目編譯過程當(dāng)中，為項(xiàng)目植入了項(xiàng)目 ID，掛載頁面的 head 部分

• 然后在進(jìn)入頁面的時(shí)候，根據(jù)頁面的路徑，去自動(dòng)生成頁面 ID，掛載在 body 節(jié)點(diǎn)上
• 最后在用戶進(jìn)入頁面和離開頁面的時(shí)候，數(shù)據(jù)采集的 SDK 能自動(dòng)拿到項(xiàng)目 ID，頁面 ID，去定位一個(gè)唯一的頁面，做到自動(dòng)化的上報(bào)進(jìn)入和離開的事件

以點(diǎn)擊事件為例，當(dāng)前觸發(fā)點(diǎn)擊事件的 DOM 點(diǎn)，我們稱之為坑位。坑位的外層包裹的 DOM 節(jié)點(diǎn)我們稱之為區(qū)塊。這兩者需要以代碼侵入的方式，進(jìn)行掛載，為了降低掛載的成本，我們也提供了一些工具去幫助他們進(jìn)行操作。

統(tǒng)一的站點(diǎn)中我們提供了埋點(diǎn)申請的功能，在申請完成之后點(diǎn)擊生成代碼，但馬上會(huì)詳細(xì)列出需要掛載的位置以及 ID，開發(fā)人員只需要將生成的代碼粘貼到需要埋點(diǎn)的位置即可。

另外上一場我們講到了搭建，通過搭建系統(tǒng)生成的頁面也會(huì)自動(dòng)植入這些位置 ID，有了這些數(shù)據(jù)之后，我們就可以開始進(jìn)行一次完整的上報(bào)。

• 操作系統(tǒng)、分辨率、瀏覽器這些信息可以讓我們分析當(dāng)前平臺(tái)主流用戶的一些主流瀏覽器，用來確定平臺(tái)的兼容情況

• 如果是 APP 端還會(huì)有例如是客戶端版本，手機(jī)型號(hào)，當(dāng)前網(wǎng)絡(luò)情況的一些其他的數(shù)據(jù)
• logType 對事件進(jìn)行分類
• evt 去具體的指定事件類型
• createTime 是事件發(fā)生時(shí)間，可以用來串聯(lián)事件發(fā)生的前后順序記錄了
• utmCnt 是觸發(fā)位置用來把當(dāng)前的事件定位到具體的 dom 節(jié)點(diǎn)
• uuid 是訪客的唯一標(biāo)識(shí)，每次用戶進(jìn)入頁面之后，SDK 會(huì)去 cookie 中查找它，如果沒有的話，我們就會(huì)生成，并且將過期時(shí)間設(shè)為永久。記錄用戶的 IP 地址可以追溯到用戶的省市區(qū)
• userId 可以和 uuid 關(guān)聯(lián)起來，將無意義的訪客，關(guān)聯(lián)到平臺(tái)的用戶，形成詳細(xì)的用戶畫像
• utmfrom 標(biāo)記了來源的位置，后面會(huì)詳細(xì)講 a 鏈接的跳轉(zhuǎn)，這個(gè)字段是用來串聯(lián)前后的鏈路
• 綠色框內(nèi)的上報(bào)信息，我們可以歸結(jié)為瀏覽器頁面相關(guān)的一些信息，紅色框內(nèi)的是事件相關(guān)的一些信息，藍(lán)色框內(nèi)的信息，我們可以歸結(jié)為用戶相關(guān)的信息

具體事件攔截

我們將四個(gè)目標(biāo)事件都委托在了 document 上，所有這些事件只要觸發(fā)都會(huì)被攔截，但是經(jīng)過特定的篩選，只有能獲取到坑位 ID 和區(qū)塊 ID 的 target 上觸發(fā)的事件才會(huì)被上報(bào)。這讓我們收集的數(shù)據(jù)更加精準(zhǔn)，如果在這里不做篩選的話，上報(bào)的數(shù)據(jù)變得大而全，數(shù)據(jù)量就會(huì)特別龐大，就把目前的代碼侵入式埋點(diǎn)切換為了全埋點(diǎn)，這也會(huì)讓數(shù)據(jù)的分析變得比較困難。

從上圖可以看見，剛進(jìn)入頁面的時(shí)候，默認(rèn)會(huì)有一個(gè) push 請求發(fā)送。每次點(diǎn)擊的時(shí)候也會(huì)有一個(gè) push 請求發(fā)出去，但是它的歸類都是是在 other 里面。

這是因?yàn)殡x開的過程當(dāng)中，發(fā)送 HTTP 請求通常都會(huì)被 cancel，而我們使用 sendBeacon 就是一種用來保證數(shù)據(jù)被發(fā)送的方法，他能在 unload 的或者 beforeunload 的事件處理器中發(fā)起一個(gè) HTTP request 來發(fā)送數(shù)據(jù)，這樣就能確保我們離開頁面的請求會(huì)被記錄下來。

在數(shù)據(jù)上報(bào)這里我們還使用 ** 標(biāo)簽主要是為了保證瀏覽器的兼容性。因?yàn)槟壳埃琁E 是不支持 sendBeacon 方法的，而我們平臺(tái)還有一部分用戶還在使用 IE，我們也在持續(xù)的關(guān)注 IE 的使用比例，所以這部分的數(shù)據(jù)也會(huì)很重要。為了能收集到更多 IE 的使用數(shù)據(jù)，我們會(huì)先判斷 sendBeacon 方法是否可用，不可使用的時(shí)候，會(huì)使用 ** 進(jìn)行，請求的發(fā)送。而 cors 是我們最常見的一種跨域請求發(fā)送的方式，它能夠使用 post 的請求，讓我們批量上報(bào)的一些數(shù)據(jù)能夠不超出長度的限制，能夠成功發(fā)送。

同樣能夠發(fā)送單一維度的一些上報(bào)數(shù)據(jù)之外，我們還需要，上報(bào)的數(shù)據(jù)能夠串聯(lián)起整個(gè)用戶瀏覽的流程。當(dāng)中最常見的一種方式就是鏈接的跳轉(zhuǎn)。

可能就有人會(huì)問為什么不用 refer 去串聯(lián)整個(gè)流程呢？主要還是因?yàn)樗木S度太粗了。他只能進(jìn)入來源頁面而不能記錄，來源于頁面上哪個(gè)位置。

• 當(dāng)我們進(jìn)入頁面的時(shí)候，我們會(huì)生成當(dāng)次進(jìn)入頁面的唯一標(biāo)識(shí) ID
• 到用戶點(diǎn)擊一個(gè)鏈接的時(shí)候，我們會(huì)將當(dāng)前的項(xiàng)目 LED 頁面 ID 區(qū)塊 ID 和當(dāng)前 a 鏈接的坑位下標(biāo)
• 最后是，生成頁面時(shí)生成的 ID 5 個(gè)標(biāo)記 id 拼成一個(gè) uTM 值，在頁面跳轉(zhuǎn)之后，SDK 會(huì)從頁面的 URL 上面獲取，uTM 值進(jìn)行上報(bào)

這樣我們就能確認(rèn)，當(dāng)前頁面的來源是來源于上一個(gè)頁面的哪一個(gè)位置的鏈接點(diǎn)擊，也讓鏈接的點(diǎn)擊行為變成一個(gè)自動(dòng)化采集的事件，只要當(dāng)前區(qū)塊被植入了區(qū)塊 ID，它下面的所有 a 鏈接點(diǎn)擊都會(huì)被記錄下來，用于串聯(lián)整個(gè)流程。

數(shù)據(jù)分析

在數(shù)據(jù)處理部分我們使用了阿里云的 LOG Service，他的一個(gè)非常大的好處就是能提供日志的實(shí)時(shí)消費(fèi)接口，查詢手段也非常豐富；能夠添加實(shí)時(shí)索引；目前可以滿足我們大部分的查詢需求。

在數(shù)據(jù)分析的過程當(dāng)中，非常重要的一個(gè)點(diǎn)怎么樣讓我們采集到的數(shù)據(jù)轉(zhuǎn)化為可理解的指標(biāo)。

上圖我們的一個(gè)主要流程，要進(jìn)行數(shù)據(jù)的分析，首先要先搭建指標(biāo)，然后能獲取到需要分析的點(diǎn)的數(shù)據(jù)之后，再進(jìn)行數(shù)據(jù)分析，最后將數(shù)據(jù)應(yīng)用到實(shí)際的場景中。

根據(jù)之前采集到的數(shù)據(jù)，我們很容易就能計(jì)算出頁面的 PV、UV、點(diǎn)擊數(shù)、曝光數(shù)一些基礎(chǔ)的指標(biāo)，但是我們要怎么把它轉(zhuǎn)換成一個(gè)漏斗模型？

那就是去拼接這些基礎(chǔ)數(shù)據(jù)。以我們平臺(tái)的流水貸流程舉例：

• 進(jìn)入申請?jiān)斍轫撝螅覀兛梢詫⑦M(jìn)入頁面的 UV 作為第 1 個(gè)數(shù)據(jù)
• 將點(diǎn)擊立即申請打開協(xié)議彈窗，點(diǎn)擊人數(shù)作為第二個(gè)數(shù)據(jù)，以此類推，就成組裝成一個(gè)漏斗模型
• 我們可以計(jì)算出每個(gè)步驟相對于前一步的數(shù)量百分比，這就是一個(gè)無序的漏斗
• 假設(shè)部分用戶可能從第三步直接進(jìn)入，這時(shí)候就可能存在百分比超過 100% 的情況
• 如果是有序漏斗，會(huì)以用戶為維度進(jìn)行篩選，我們會(huì)從前到后過濾每一步的用戶就表示，我們只會(huì)保留從第 1 部，按照順序進(jìn)入到最后一步的那些用戶，并不把從中間進(jìn)入的一些用戶計(jì)算在內(nèi)。這樣就使得轉(zhuǎn)化百分比必定小于等于 100%，也讓數(shù)據(jù)更具有參考價(jià)值

下面是一個(gè)設(shè)置置信區(qū)間的場景：

• 頁面停留時(shí)長其實(shí)就是頁面進(jìn)入和頁面離開的時(shí)間差，最快的情況下用戶 1s 就離開了頁面

• 但是也有可能用戶在中間中斷了操作但一直沒有關(guān)閉窗口，導(dǎo)致停留時(shí)間非常的長
• 在樣本比較少的情況下這樣特殊的數(shù)據(jù)可能會(huì)拉升了頁面的平均訪問時(shí)長，使得平均時(shí)長超過了 4 個(gè)小時(shí)，這時(shí)候平均訪問時(shí)長可能失去了參考價(jià)值
• 這里的中位數(shù)指的是將用戶訪問時(shí)長從小到大排序之后，取中間的數(shù)值，得到了 22 分 8 秒，這時(shí)候，中位數(shù)更能反映頁面實(shí)際的使用情況

那么怎么才能讓平均時(shí)長，具有價(jià)值呢？

我們可以設(shè)置置信區(qū)間，根據(jù)頁面具體情況排除頁面使用時(shí)長大于 5 小時(shí)或 8 小時(shí)的用戶，然后再來看整個(gè)頁面的平均訪問時(shí)長，或者是借助柱狀圖，查看時(shí)長的總體分布和趨勢。

數(shù)據(jù)應(yīng)用

當(dāng)前分析模型主要分為事件分析，頁面分析，轉(zhuǎn)化分析和用戶分析四大塊，內(nèi)部還分成了 10 幾種小的指標(biāo)；還在自定義設(shè)置中提供了幫助指標(biāo)建立的工具；

• 事件分析是用戶行為分析的基礎(chǔ)也是最常用的功能，次數(shù)、分布、間隔，通過事件分析可以創(chuàng)建各種分析報(bào)表。頁面基于各個(gè)頁面的行為數(shù)據(jù)，針對性的優(yōu)化著陸頁的頁面布局，增加著陸頁的訪問吸引力。熱力圖分析，通過將用戶行為進(jìn)行可視化展示，幫助我們深入分析用戶對內(nèi)容及功能的注意力

• 轉(zhuǎn)化分析是用戶行為分析中最重要的分析模型，通過轉(zhuǎn)化分析可以找出用戶行為的轉(zhuǎn)化路徑和漏斗，提升平臺(tái)的整體轉(zhuǎn)化率。從觸達(dá)用戶到用戶完成轉(zhuǎn)化的整個(gè)過程中都存在轉(zhuǎn)化率

• 用戶分析能夠很好的幫助我們確定產(chǎn)品的目標(biāo)用戶群，用戶的行為習(xí)慣，掌握用戶的活躍和留存特征，通過用戶分群可以實(shí)現(xiàn)精細(xì)化的用戶運(yùn)營

這是一個(gè)數(shù)據(jù)看板，實(shí)時(shí)查看自定義的核心指標(biāo)和報(bào)表，對關(guān)鍵指標(biāo)做實(shí)時(shí)掌握，幫助用戶實(shí)時(shí)發(fā)現(xiàn)問題。

操作系統(tǒng)，瀏覽器占比，可以點(diǎn)擊細(xì)查：

• 訪問次數(shù)、訪問人數(shù)
• 熱力圖：通過坐標(biāo)，分辨率換算，得到熱圖
• 路徑分析：可以看到來源和去向
• 這里是自定義設(shè)置的功能：用于創(chuàng)建事件和漏斗

其他

渾儀算是一個(gè)比較基礎(chǔ)的數(shù)據(jù)采集分析的產(chǎn)品，后面還有很多可擴(kuò)展的點(diǎn)。