UEM“探針”技術及使用者體驗管理

宜信技術學院發表於2019-08-08


隨著網際網路產品越來越多,使用者群體越來越龐大以及使用者品位的多樣性增加,我們會發現這樣的一個規律,就是相同型別的產品,比如播放器中的QQ影音和暴風影音,再比如小遊戲平臺中的騰訊遊戲和聯眾等等,他們的功能是相同的或者是相似的,但是對於使用者來說,每個人都有著不同的使用喜好。

其實無論用什麼平臺,都能完成同樣的任務,那麼對於使用者來說,在同等產品當中他們是如何選擇的呢?除了一些比如大品牌效應等等平常的因素,使用者體驗的好壞會成為使用者在選擇產品中的一個重要因素。假如我們在使用一個播放器放電影,發現經常出現卡頓和聲音走音的現象,那麼我相信這個使用者很可能就會選擇其他的產品。在網際網路時代,使用者體驗越來越成為企業所重視的內容,從中也衍生出來了使用者體驗管理這麼一個新生的事物。我今天就來給大家普及一下使用者體驗管理-UEM的相關知識。

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

UEM這個詞大家可能比較陌生,UEM是USER EXPERIENCE MANAGEMENT的縮寫,中文翻譯為使用者體驗管理,它所要達成的目標是能夠實時瞭解網際網路產品或應用的真實使用者體驗。

這麼說可能還是有一些抽象,簡單來說UEM就是一種工具,這種工具可以實時收集很多資料,比如說使用者所訪問頁面載入時間的長短、在訪問頁面是否出現了比如圖片無法載入的問題、使用者是通過何種裝置比如是用手機還是電腦訪問的應用,它走的是中國移動還是中國聯通的流量等等。在收集完很多型別的資料之後,UEM會對資料進行歸納和處理以供分析人員使用,這樣開發的公司或者運營商就知道了使用者在應用當中的體驗情況了,比如使用者在訪問哪些頁面的時候比較卡,大部分使用者是通過手機訪問還是電腦訪問等等。有了這樣的資料,廠商就可以持續不斷改進使用者體驗,讓產品做得越來越受使用者喜歡而且好用。這就是UEM所做的工作。

UEM的使用場景非常廣泛,可以說只要是需要了解使用者在應用上體驗好壞的地方,都需要UEM。目前比較常見的場景是PC網站和手機端網站的使用者體驗,很多廠商也在做手機APP端體驗管理的內容。相信在不久的將來,使用者體驗管理的應用場景會越來越多,內容也會越來越豐富。

二、UEM核心功能

使用者體驗一般分為移動應用體驗(UEM App)和瀏覽器應用體驗(UEM Web)兩部分。對移動應用的使用者體驗支援,國內外很多廠商的產品都較為成熟和完善,大家在網上能夠找到很多可以參考的專案,UAVStack開源專案目前主要關注於面向瀏覽器應用的使用者體驗。

一般來說,UEM的核心功能包括以下內容:

三、UEM常用實現技術

現在在UEM領域,常用的實現技術還是"探針"技術。也就是通過在頁面HTML當中插入一段JAVASCRIPT程式碼(這裡稱為"探針"),這段程式碼可以實時獲取和傳送頁面訪問的一些資料,後臺再對這些資料進行清理和收集,最後對資料進行統計畫圖或者以表格形式進行展示。其他的技術還有通過獲取瀏覽器或者伺服器上收集的資料來收集使用者訪問相關內容,但是目前用的比較少。

四、"探針"技術捕獲資料解密

UEM的核心在於瀏覽器探針,通過自動注入到監測網頁的JS程式碼,對實際使用者訪問的網頁效能資料進行全樣本採集和分析,找到影響使用者體驗問題本源,幫助使用者持續優化Web應用效能。

瀏覽器探針的作用在於以下幾點:

  • 採集瀏覽器基本資訊
  • 採集頁面效能資料(Navigation Timing API)
  • 採集AJAX效能資料+請求/響應資料
  • 採集JS錯誤資料(包括:出錯頁面或指令碼URL,引用頁面URL,Error Message,錯誤位置:行號,列號,等等)
  • 採集頁面追蹤資料(Resource Timing API)
  • 將捕獲的資料上傳到UEM Server,便於進行後續的儲存、多維度分析、預警和優化等。

瀏覽器探針是根據瀏覽器狀態來採集頁面效能資料的。每次頁面請求,當獲取到onload事件結束,則以事件結束時間定義為頁面完成時間。當有非同步請求再次載入內容,那麼這些非同步請求記錄在AJAX資料當中。基於採集到的資料,可以得到以下頁面效能指標:

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

五、頁面載入流程視覺化

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

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

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

作者:何建欣、謝知求

來源:宜信技術學院


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69918724/viewspace-2653022/,如需轉載,請註明出處,否則將追究法律責任。

相關文章