使用 gtag.js 評估使用者時間

縮短網頁載入時間有助於改善網站的整體使用者體驗。本頁面說明如何將使用者時間資訊傳送至 Google Analytics (分析)。

導入作業

使用 event 指令傳送 timing_complete 事件：

gtag('event', 'timing_complete', {<timing_parameters>});

其中 <timing_parameters> 是一或多個參數/值組合。請以半形逗號分隔每個組合。舉例來說，這個指令會將使用者時間事件傳送至 Google Analytics (分析)，指出目前網頁在載入所有外部 JavaScript 依附元件時花了 3549 毫秒。

gtag('event', 'timing_complete', {
  'name' : 'load',
  'value' : 3549,
  'event_category' : 'JS Dependencies'
});

使用者載入時間參數

下表摘要說明使用者操作時間參數：

參數名稱	資料類型	必要	說明
name	string	是	用於識別所記錄變數的字串 (例如 'load')。
value	integer	是	回報給 Google Analytics (分析) 所需的毫秒數 (例如 20)。
event_category	string	否	用來將所有使用者時間變數分類為邏輯群組的字串，例如 'JS Dependencies'。
event_label	string	否	用於在報表中視覺化呈現使用者時間的彈性字串，例如 'Google CDN'。

測量時間

timing_complete 事件需要 value 參數來指定經過的時間 (以毫秒為單位)。您必須編寫擷取這個值的程式碼。

如要這麼做，最簡單的方法就是在一段時期的開始時建立時間戳記，然後在該時間範圍的結尾另外建立時間戳記。接著，計算時間戳記之間的經過時間。

大部分的新式瀏覽器都支援 Navigation Timing API，其中包含 window.performance 物件中的方法，可透過高解析度時間資料評估網頁效能。

以下範例使用 performance.now() 方法，會傳回從網頁初次開始載入以來經過的時間。

// Feature detects Navigation Timing API support.
if (window.performance) {
  // Gets the number of milliseconds since page load
  // (and rounds the result since the value must be an integer).
  var timeSincePageLoad = Math.round(performance.now());

  // Sends the timing event to Google Analytics.
  gtag('event', 'timing_complete', {
    'name': 'load',
    'value': timeSincePageLoad,
    'event_category': 'JS Dependencies'
  });
}

取樣注意事項

Google Analytics (分析) 會對時間事件進行取樣，以確保這項功能的系統資源平均分配。

時間事件的取樣率取決於資源前一天獲得的網頁瀏覽總數。下表概述如何判定取樣率：

總網頁瀏覽量 (前一天)	可處理的時間事件數量上限
0 - 1,000	100
1,000 至 100,000 位	總網頁瀏覽量的 10%
100,000 - 1,000,000	10,000
超過 1,000,000 人	總網頁瀏覽量的 1%