文章目錄

• • • 思路
    • 單頁應用VS多頁應用
    • 前端框架的組件生命周期
    • 解決方案
    • • package.json
      • main.js
    • 展示

對于各大APM廠商來說，通過用戶軌跡監控（User Journey Monitoring）來獲取用戶訪問網站或者APP時的軌跡已經成為了標配，通過該功能，我們可以了解用戶的軌跡信息，比如：哪個頁面最吸引用戶訪問，用戶在哪個頁面上停留的時間最長，哪個頁面客戶點擊最少，停留的時間最少，一般是從哪個頁面到哪個頁面等等。

elastic APM 目前只提供了一個RUM功能（Real User Monitoring）,并沒有完整的推出User Journey Monitoring，那基于目前的工具，我們該如何實現User Journey Monitoring呢？

這篇文章，我們以Vue為例子，講解一下該如何做到UJM功能。

思路

要實現用戶的軌跡追蹤，必須實現幾個基本的要素：

• 知曉用戶發生軌跡切換的事件 - 登錄，跳轉，離開等
• 當事件發生后，需要記錄相關的指標 - 用戶名，停留時間，跳轉前的頁面地址等
• 頁面需能與后端服務器通信，以記錄各種用戶行為軌跡相關的數據

當然，還有其他要求，比如能夠遠程打開關閉監控，監控接口防火墻，不能影響用戶真實體驗等，我們在這里不做討論。

因為我們討論的是elastic APM，自然，它就承擔了記錄用戶行為軌跡相關的數據的責任，通過javascript agent，我們可以將用戶的軌跡映射為APM中的transaction，然后發送到APM server。

在實現剩余的兩個要素之前，我們通常要先解決以下問題：

• 你的應用是一個單頁應用還是一個多頁應用？
• 你是否使用了web應用框架？是否了解web對應應用框架的組件生命周期？

單頁應用VS多頁應用

為什么我們要討論單頁應用和多頁應用的問題，最主要的區別在于：

• 當你的應用是一個多頁應用的時候，每個頁面的跳轉需要訪問后端的瀏覽器獲取html相關資源，即你的軌跡記錄是可以從類似apache,nginx等日志中提取的，但日志數據是否能夠完整包含軌跡數據，存疑；而且，對應的，因為頁面之間缺乏直接的聯系，頁面跳轉后，記錄需要在頁面間傳遞的軌跡相關數據會比較麻煩。
• 當你的應用是一個單頁應用時，頁面的“跳轉”實際上是瀏覽器重新渲染頁面的一個過程，即用戶的訪問軌跡并不會出現在日志當中，也不會記錄在瀏覽器的訪問歷史當中，但相對的，因為是一個整體內部的切換，通過頁面上的數據治理，很容易在頁面的“跳轉”之間的數據傳遞。
  
  結論，無論是多頁應用還是單頁應用，通過技術都是能夠做到用戶軌跡數據的提起的，只是在不同的場景下可能會有數據準確性的問題。在這里，我們以單頁應用為例子，因為手機web大多是采用單頁應用的方式提高用戶體驗，而用戶體驗和用戶行為軌跡監控是更為相關的行為。

前端框架的組件生命周期

對于一個web應用，如果我們需要做用戶行為軌跡監控，那么基本也意味著，我們會要求該web應用有一個好的設計。如果一個web應用連基本的前端web框架都沒有使用，那么就不在我們的討論范圍之內。。。現在流行的web框架，比如，vue, angularJS, react等，都提供了組件生命周期管理的勾子函數，以Vue這個在中國最流行的框架來舉例，每個頁面都是一個vue的組件（當然，組件里面還有很多子組件），組件包含以下生命周期：

類似的，AngularJs和React里面也生命周期勾子函數。

解決方案

從上圖可以看到，created，activated，deactivated，destroyed等函數所代表的事件，是和我們需要記錄的用戶軌跡的事件，如：進入，離開等事件是吻合的。并且，作為一個勾子函數，我們可以在函數中訪問框架提供的組件間通信數據以及公共數據，如此，我們可以在函數中得到如下信息：

登錄的用戶名，以及其他用戶信息

進入組件的時間，離開組件的時間，組件停留時間

發生組件切換的前后關系

下面，是關鍵的代碼實現。

package.json

在dependencies中增加：

"elastic-apm-js-base": "^3.0.0"

main.js

在VUE的初始化文件中，增加以下功能：

• 啟動APM
• 新增transaction函數，打開和關閉APM的transaction，并在transaction中記錄：用戶名，組件名，進入時間，離開時間，停留時間
• 使用mixin，將transaction函數掛載到勾子上

大家需要注意的是，這是一個POC的試驗方案，真正的生產實現，需要大家繼續優化

import {init as initApm} from 'elastic-apm-js-base'const apm = initApm({// Set required service name (allowed characters: a-z, A-Z, 0-9, -, _, and space)serviceName: 'qsa_smart_advisor',// Set custom APM Server URL (default: http://localhost:8200)serverUrl: 'http://localhost:8200',// Set service version (required for sourcemap feature)serviceVersion: '',pageLoadTransactionName: 'home' })// User Journey Monitoringfunction startUJMTransaction(theVue) {var enableAPM = theVue.$options.enableAPM;if (enableAPM) {store.dispatch('getUserInfo').then(user => {apm.setUserContext({id: user.id,username: user.name})});if (theVue.$options.transaction) {endUJMTransaction(theVue);}theVue.$options.transaction = apm.startTransaction(theVue.$options.name, 'custom');let startTime = new Date().getTime();theVue.$options.transaction_start = startTime;apm.addTags({int_start: new Date().getTime()});console.log("create " + theVue.$options.transaction.name + " with tag: " + {start: startTime})} }function endUJMTransaction(theVue) {var enableAPM = theVue.$options.enableAPM;if (enableAPM && theVue.$options.transaction) {let endTime = new Date().getTime();apm.addTags({int_end: endTime});apm.addTags({int_duration: endTime - theVue.$options.transaction_start});theVue.$options.transaction.end();theVue.$options.transaction = null;theVue.$options.transaction_start = null;} }Vue.mixin({created: function () {startUJMTransaction(this)},activated: function () {let currentTrans = apm.getCurrentTransaction();if (currentTrans) {endUJMTransaction(this)}startUJMTransaction(this)},deactivated: function () {endUJMTransaction(this)},destroyed: function () {endUJMTransaction(this)} });

展示

因為通過elastic我們可以做到地圖熱點，加載性能監控（RUM），最終是能夠實現如下效果的dashboard的：

總結

以上是生活随笔為你收集整理的如何用elastic APM实现用户行为轨迹监控（User Journey Monitoring）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。