UEM「探針」技術及用戶體驗管理

隨着互聯網產品愈來愈多，用戶羣體愈來愈龐大以及用戶品位的多樣性增長，咱們會發現這樣的一個規律，就是相同類型的產品，好比播放器中的QQ影音和暴風影音，再好比小遊戲平臺中的騰訊遊戲和聯衆等等，他們的功能是相同的或者是類似的，可是對於用戶來講，每一個人都有着不一樣的使用喜愛。

其實不管用什麼平臺，都能完成一樣的任務，那麼對於用戶來講，在同等產品當中他們是如何選擇的呢？除了一些好比大品牌效應等等日常的因素，用戶體驗的好壞會成爲用戶在選擇產品中的一個重要因素。假如咱們在使用一個播放器放電影，發現常常出現卡頓和聲音走音的現象，那麼我相信這個用戶極可能就會選擇其餘的產品。在互聯網時代，用戶體驗愈來愈成爲企業所重視的內容，從中也衍生出來了用戶體驗管理這麼一個新生的事物。我今天就來給你們普及一下用戶體驗管理-UEM的相關知識。

1、什麼是UEM以及UEM使用場景

UEM這個詞你們可能比較陌生，UEM是USER EXPERIENCE MANAGEMENT的縮寫，中文翻譯爲用戶體驗管理，它所要達成的目標是可以實時瞭解互聯網產品或應用的真實用戶體驗。

這麼說可能仍是有一些抽象，簡單來講UEM就是一種工具，這種工具能夠實時收集不少數據，好比說用戶所訪問頁面加載時間的長短、在訪問頁面是否出現了好比圖片沒法加載的問題、用戶是經過何種設備好比是用手機仍是電腦訪問的應用，它走的是中國移動仍是中國聯通的流量等等。在收集完不少類型的數據以後，UEM會對數據進行概括和處理以供分析人員使用，這樣開發的公司或者運營商就知道了用戶在應用當中的體驗狀況了，好比用戶在訪問哪些頁面的時候比較卡，大部分用戶是經過手機訪問仍是電腦訪問等等。有了這樣的數據，廠商就能夠持續不斷改進用戶體驗，讓產品作得愈來愈受用戶喜歡並且好用。這就是UEM所作的工做。

UEM的使用場景很是普遍，能夠說只要是須要瞭解用戶在應用上體驗好壞的地方，都須要UEM。目前比較常見的場景是PC網站和手機端網站的用戶體驗，不少廠商也在作手機APP端體驗管理的內容。相信在不久的未來，用戶體驗管理的應用場景會愈來愈多，內容也會愈來愈豐富。

2、UEM核心功能

用戶體驗通常分爲移動應用體驗（UEM App）和瀏覽器應用體驗（UEM Web）兩部分。對移動應用的用戶體驗支持，國內外不少廠商的產品都較爲成熟和完善，你們在網上可以找到不少能夠參考的項目，UAVStack開源項目目前主要關注於面向瀏覽器應用的用戶體驗。

通常來講，UEM的核心功能包括如下內容:

3、UEM經常使用實現技術

如今在UEM領域，經常使用的實現技術仍是"探針"技術。也就是經過在頁面HTML當中插入一段JAVASCRIPT代碼（這裏稱爲"探針"），這段代碼能夠實時獲取和發送頁面訪問的一些數據，後臺再對這些數據進行清理和收集，最後對數據進行統計畫圖或者以表格形式進行展現。其餘的技術還有經過獲取瀏覽器或者服務器上收集的數據來收集用戶訪問相關內容，可是目前用的比較少。

4、"探針"技術捕獲數據解密

UEM的核心在於瀏覽器探針，經過自動注入到監測網頁的JS代碼，對實際用戶訪問的網頁性能數據進行全樣本採集和分析，找到影響用戶體驗問題本源，幫助用戶持續優化Web應用性能。

瀏覽器探針的做用在於如下幾點：

• 採集瀏覽器基本信息
• 採集頁面性能數據（Navigation Timing API）
• 採集AJAX性能數據+請求/響應數據
• 採集JS錯誤數據（包括：出錯頁面或腳本URL，引用頁面URL，Error Message，錯誤位置：行號，列號，等等）
• 採集頁面追蹤數據（Resource Timing API）
• 將捕獲的數據上傳到UEM Server，便於進行後續的存儲、多維度分析、預警和優化等。

瀏覽器探針是根據瀏覽器狀態來採集頁面性能數據的。每次頁面請求，當獲取到onload事件結束，則以事件結束時間定義爲頁面完成時間。當有異步請求再次加載內容，那麼這些異步請求記錄在AJAX數據當中。基於採集到的數據，能夠獲得如下頁面性能指標：

基於這些指標，頁面加載流程的分解和可視化將會變得十分簡單。

5、頁面加載流程可視化

頁面加載流程可視化是UEM數據統計的一個重要手段，是UEM成果的通俗展現方式。上圖是頁面加載流程可視化的一個示意圖。上述頁面性能數據是實時上傳的，但數據上傳分四個時機：整個頁面加載完成後上傳、離開頁面時上傳、發生JS錯誤時上傳和有AJAX請求時上傳。此外，瀏覽器探針是自動注入到監測網頁的，UEM Server會監聽應用服務器的輸出，當用戶開啓自動注入功能，UEM Server會在應用服務器的輸出函數內自動注入UEM的瀏覽器探針，經過大量的實驗室數據對比，自動注入UEM瀏覽器探針對服務器性能幾乎無影響。

UAV官網地址:HTTPS://UAVORG.GITHUB.IO/MAIN

GITHUB地址：HTTPS://GITHUB.COM/UAVORG/UAVSTAC

做者：何建欣、謝知求

來源：宜信技術學院