用 JavaScript 監聽頁面 / 頁籤被關閉的事件

/

本篇要解決的問題

最近遇到一個需求,就是要能夠知道使用者在頁面上停留了多少時間?這必須要能夠知道使用者「進到」頁面的時間,跟使用者「離開」頁面的時間。

抓使用者進來的時間容易,在 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

這個方法是當頁面有變動時,查它的能見度是 visiblehidden,如果是 hidden 就代表使用者離開了頁面。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

Document.onvisibilitychange

頁面可見性API(Page Visibility API)

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 大神的說明:

理解 Google Analytics的停留時間計算

簡單來說,GA 的計算方式是:

我們在 00:00 進到 A 頁面,

然後在 00:03 從 A 頁面點進了 B 頁面,

00:03 減去 00:00,GA 就計算出 A 頁面停留了 3 分鐘。

但如果我們接著就在 B 頁面直接關閉頁面了呢?Sorry 呀~ B 頁面就不會有停留時間的數據,因為 GA 不會去監聽使用者的關閉頁面事件,因此 B 頁面的停留時間會是 00:00。

看到這點,身為工程師的你是不是也鬆了一口氣呢?如果連 GA 也都只能這樣算,代表一定是有什麼技術困難是 Google 也無法解決的,我們就放手讓它飛吧~(奔向自由啦~~~~~)

Summary
用 JavaScript 監聽頁面 / 頁籤被關閉的事件
Article Name
用 JavaScript 監聽頁面 / 頁籤被關閉的事件
Description
本篇大綱:本篇要解決的問題。關閉視窗 / 頁籤 onbeforeunload。視窗 / 頁籤的變動 onvisibilitychange、Page Visibility API。關於無法計算的部份,就放手讓它飛。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

用 Day.js 把秒數轉換為時間

Vue

拿 Trello 當資料庫 建一個店家清單 – 下篇:建立清單頁面

Google Others

Google Top Heavy 演算法

Bot LINE

用 LINE Bot API 建立 LINE@ 圖文選單

WordPress

WordPress SEO 有幫助的 3 + 4 個外掛

Front-End

IntersectionObserver:上篇 – 基本介紹及使用

WordPress

WordPress 基本介紹

Analytics Google

GA:User-ID 功能 設定及報表檢視

Bot Slack

Slack 通知功能 純靜態

Forms Google

Google 表單,提交後系統自動寄送回覆通知 email

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。