【W(wǎng)eb技術(shù)】677- 如何精確統(tǒng)計(jì)頁(yè)面停留時(shí)長(zhǎng)

頁(yè)面停留時(shí)間（Time on Page）簡(jiǎn)稱 Tp，是網(wǎng)站分析中很常見的一個(gè)指標(biāo)，用于反映用戶在某些頁(yè)面上停留時(shí)間的長(zhǎng)短，傳統(tǒng)的Tp統(tǒng)計(jì)方法會(huì)存在一定的統(tǒng)計(jì)盲區(qū)，比如無法監(jiān)控單頁(yè)應(yīng)用，沒有考慮用戶切換Tab、最小化窗口等操作場(chǎng)景?；谏鲜霰尘埃匦抡{(diào)研和實(shí)現(xiàn)了精確統(tǒng)計(jì)頁(yè)面停留時(shí)長(zhǎng)的方案，需要 兼容單頁(yè)應(yīng)用和多頁(yè)應(yīng)用，并且不耦合或入侵業(yè)務(wù)代碼。

我們可以把一個(gè)頁(yè)面生命周期抽象為三個(gè)動(dòng)作：「進(jìn)入」、「活躍狀態(tài)切換」、「離開」

如下圖，計(jì)算頁(yè)面停留時(shí)長(zhǎng)既如何監(jiān)控這三個(gè)動(dòng)作，然后在對(duì)應(yīng)觸發(fā)的事件中記錄時(shí)間戳，比如要統(tǒng)計(jì)活躍停留時(shí)長(zhǎng)就把 active 區(qū)間相加即可，要統(tǒng)計(jì)總時(shí)長(zhǎng)既 tn -t0 。

對(duì)于常規(guī)頁(yè)面的?首次加載、頁(yè)面關(guān)閉、刷新?等操作都可以通過?window.onload?和?window.onbeforeunload?事件來監(jiān)聽頁(yè)面進(jìn)入和離開，瀏覽器前進(jìn)后退可以通過?pageshow?和?pagehide?處理。

• load / beforeunload

• pageshow / pagehide

  
  

對(duì)于單頁(yè)應(yīng)用內(nèi)部的跳轉(zhuǎn)可以轉(zhuǎn)化為兩個(gè)問題：? ?

? 1.監(jiān)聽路由變化

? 2.判斷變化的URL是否為不同頁(yè)面 。

2.1.1 監(jiān)聽路由變化

目前主流的單頁(yè)應(yīng)用大部分都是基于 browserHistory (history api) 或者 hashHistory 來做路由處理，我們可以通過監(jiān)聽路由變化來判斷頁(yè)面是否有可能切換。注意是有可能切換，因?yàn)閁RL發(fā)生變化不代表頁(yè)面一定切換，具體的路由配置是由業(yè)務(wù)決定的（既URL和頁(yè)面的匹配規(guī)則）。

browserHistory

路由的變化本質(zhì)都會(huì)調(diào)用 History.pushState() 或 History.replaceState() ，能監(jiān)聽到這兩個(gè)事件就能知道。通過 popstate 事件能解決一半問題，因?yàn)?popstate 只會(huì)在瀏覽器前進(jìn)后退的時(shí)候觸發(fā)，當(dāng)調(diào)用 history.pushState() or history.replaceState() 的時(shí)候并不會(huì)觸發(fā)。

The popstate event is fired when the active history entry changes. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState(), the popstate event's state property contains a copy of the history entry's state object.

Note that just calling history.pushState() or history.replaceState() won't trigger apopstateevent. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling。history.back() or history.forward() in JavaScript).

這里需要通過猴子補(bǔ)丁(Monkeypatch)解決，運(yùn)行時(shí)重寫 history.pushState 和 history.replaceState 方法：

hashHistory

hashHistory的實(shí)現(xiàn)是基于 hash 的變化，hash 的變化可以通過 hashchange 來監(jiān)聽

2.1.2?如何定義頁(yè)面（判斷URL是否為不同頁(yè)面）

2.1.3 對(duì)于頁(yè)面進(jìn)入和離開相關(guān)事件整理

可以通過 Page Visibility API 以及在 window 上聲明 onblur/onfocus 事件來處理。

2.2.1 Page Visibility API

一個(gè)網(wǎng)頁(yè)的可見狀態(tài)可以通過 Page Visibility API 獲取，比如當(dāng)用戶 切換瀏覽器Tab、最小化窗口、電腦睡眠 的時(shí)候，系統(tǒng)API會(huì)派發(fā)一個(gè)當(dāng)前頁(yè)面可見狀態(tài)變化的 visibilitychange 事件，然后在事件綁定函數(shù)中通過 document.hidden 或者 document.visibilityState 讀取當(dāng)前狀態(tài)。

2.2.2?onblur/onfocus

可以通過?Page Visibility API?以及在 window 上聲明 onblur/onfocus 事件來處理。?對(duì)于PC端來說，除了監(jiān)聽上述相關(guān)事件外，還可以考慮監(jiān)聽鼠標(biāo)行為，比如當(dāng)一定時(shí)間內(nèi)鼠標(biāo)沒有操作則認(rèn)為用戶處于非活躍狀態(tài)。

2.3.1 頁(yè)面離開時(shí)上報(bào)

對(duì)于頁(yè)面刷新或者關(guān)閉窗口觸發(fā)的操作可能會(huì)造成數(shù)據(jù)丟失

2.3.2 下次打開頁(yè)面時(shí)上報(bào)

會(huì)丟失歷史訪問記錄中的最后一個(gè)頁(yè)面數(shù)據(jù)

目前采用的方案2，對(duì)于單頁(yè)內(nèi)部跳轉(zhuǎn)是即時(shí)上報(bào)，對(duì)于單頁(yè)/多頁(yè)應(yīng)用觸發(fā) window.onbeforeunload 事件的時(shí)候會(huì)把當(dāng)前頁(yè)面數(shù)據(jù)暫存在 localStorage 中，當(dāng)用戶下次進(jìn)入頁(yè)面的時(shí)候會(huì)把暫存數(shù)據(jù)上報(bào)。有個(gè)細(xì)節(jié)問題，如果用戶下次打開頁(yè)面是在第二天，對(duì)于統(tǒng)計(jì)當(dāng)天的活躍時(shí)長(zhǎng)會(huì)有一定的誤差，所以在數(shù)據(jù)上報(bào)的同時(shí)會(huì)把該條數(shù)據(jù)的頁(yè)面進(jìn)入時(shí)間/離開時(shí)間帶上。

Tracer
核心類，用來實(shí)例化一個(gè)監(jiān)控，對(duì)原生事件和自定義事件的封裝，監(jiān)聽 enter activechange exit 事件來操作當(dāng)前 Page 實(shí)例。

P.S. 取名來自暴雪旗下游戲守望先鋒英雄獵空(Tracer)，直譯為：追蹤者。

Page
頁(yè)面的抽象類，用來實(shí)例化一個(gè)頁(yè)面，封裝了 enter exit active inactive 等操作，內(nèi)部通過 state 屬性來維護(hù)當(dāng)前頁(yè)面狀態(tài)。

Desktop

Mobile

對(duì)于頁(yè)面停留時(shí)長(zhǎng)的定義可能在不同場(chǎng)景會(huì)有差異，比如內(nèi)部業(yè)務(wù)系統(tǒng)或者OA系統(tǒng)，產(chǎn)品可能更關(guān)心用戶在頁(yè)面的活躍時(shí)長(zhǎng)；而對(duì)于資訊類型的產(chǎn)品，頁(yè)面可見時(shí)長(zhǎng)會(huì)更有價(jià)值。單一的數(shù)據(jù)對(duì)業(yè)務(wù)分析是有限的，所以在具體的代碼實(shí)過程中我們會(huì)把停留時(shí)長(zhǎng)分三個(gè)指標(biāo)，這樣能更好的幫助產(chǎn)品/運(yùn)營(yíng)分析。

? 1. active 頁(yè)面活躍時(shí)長(zhǎng)

? 2. visible 頁(yè)面可見時(shí)長(zhǎng) //僅支持Desktop
? 3. duration 頁(yè)面總停留時(shí)長(zhǎng)

1. https://developer.mozilla.org/en-US/docs/Web/API

   /WindowEventHandlers/onhashchange

2. https://developer.mozilla.org/en-US/docs/Web/Events/popstate

3. https://developer.mozilla.org/en-US/docs/Web/API/PageVisibilityAPI

4. https://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate