本篇要解決的問題
最近遇到一個需求，就是要能夠知道使用者在頁面上停留了多少時間？這必須要能夠知道使用者「進到」頁面的時間，跟使用者「離開」頁面的時間。
抓使用者進來的時間容易，在 DOMContentLoaded 時把當下時間存在一個變數裡就行，但離開頁面的事件是什麼呢？
本篇就是研究了一個上午後找到的解法，可以監聽使用者在關閉視窗 / 頁籤、切換視窗 / 頁籤、手機時退回桌面時的事件。
但很可惜的是，WebView 下找到的事件都不會被觸發 = = ，如果有大大知道怎麼監聽 WebView 下頁面被關掉的事件還請留言提供。
關閉視窗 / 頁籤 onbeforeunload
關閉視窗 / 頁籤的事件：onbeforeunload。
August 實測結果如下：
V 可以監聽：
- 桌機的關閉頁籤
X 無法監聽：
- 桌機的切換頁籤
- 手機的關閉頁籤
- 手機的切換頁籤
- WebView 的關閉視窗或是退回桌面
// 寫法 1
window.onbeforeunload = function() {
// 使用者不在頁面上時要做的事……
};
// 寫法 2
function unloadHandler() {
// 使用者不在頁面上時要做的事……
}
window.addEventListener('beforeunload', unloadHandler, false);視窗 / 頁籤的變動 onvisibilitychange、Page Visibility API
這個方法是當頁面有變動時，查它的能見度是 visible 或 hidden，如果是 hidden 就代表使用者離開了頁面。
August 實測結果如下：
V 可以監聽：
- 桌機的切換頁籤
- 手機的切換頁籤
- 手機的退回桌面
X 無法監聽：
- 桌機的關閉頁籤
- 手機的關閉頁籤
- WebView 下的關閉視窗或是退回桌面
// 寫法 1
document.onvisibilitychange = function() {
switch(document.visibilityState) {
case 'hidden':
// 使用者不在頁面上時要做的事……
break;
case 'visible':
// 使用者在頁面上時要做的事……
break;
}
};
// 寫法 2
function visibilityListener() {
switch(document.visibilityState) {
case 'hidden':
// 使用者不在頁面上時要做的事……
break;
case 'visible':
// 使用者在頁面上時要做的事……
break;
}
}
document.addEventListener('visibilitychange', visibilityListener, false);文件上有特別註明，一定要用 document.addEventListener 而不能用 window.addEventListener。
關於無法計算的部份，就放手讓它飛
從上面二個事件可以知道，這二個事件還是有些事情是紀錄不到的，像是 WebView 下的操作、手機時的關閉頁籤。
可能有方式可以紀錄到，只是 August 在寫這篇時沒發現。
後來想了一下，想到「可是 Google Analytics」的報表上不是也都有「平均網頁停留時間」？那 GA 是怎麼算出來的？
查了一下後發現… GA 也沒有去監聽使用者離開或關閉頁面的事件，可看 Harris 大神的說明：
簡單來說，GA 的計算方式是：
我們在 00:00 進到 A 頁面，
然後在 00:03 從 A 頁面點進了 B 頁面，
00:03 減去 00:00，GA 就計算出 A 頁面停留了 3 分鐘。
但如果我們接著就在 B 頁面直接關閉頁面了呢？Sorry 呀~ B 頁面就不會有停留時間的數據，因為 GA 不會去監聽使用者的關閉頁面事件，因此 B 頁面的停留時間會是 00:00。
看到這點，身為工程師的你是不是也鬆了一口氣呢？如果連 GA 也都只能這樣算，代表一定是有什麼技術困難是 Google 也無法解決的，我們就放手讓它飛吧~（奔向自由啦~~~~~）
