使用者載入時間 - 網頁追蹤 (ga.js)

本文件提供完整的指南，說明如何使用 _trackTiming 方法。

簡介

研究顯示，縮短網頁載入時間，可以改善網站的整體使用者體驗。Google Analytics (分析) 提供許多功能強大的報表，可自動追蹤網頁載入時間。但如果想追蹤載入特定資源所需的時間，該怎麼辦？

例如，載入熱門 JavaScript 程式庫是否耗時太久，導致部分使用者的網站體驗不佳？

回答這個問題時，「使用者時間」可讓您在 Google Analytics (分析) 中以原生方式追蹤一段時間。

如要查看工作範例，請參閱「使用者載入時間」程式碼範例。

設定使用者操作時間

如要收集使用者時間資料，您必須使用 _trackTiming 方法，將時間資料傳送至 Google Analytics (分析)。

_gaq.push([‘_trackTiming’, category, variable, time, opt_label, opt_sample]);

參數代表的位置：

參數 值 必要 摘要
category string 是 這個字串可將所有使用者計時變數歸類為邏輯群組，以便製作報表。舉例來說，如果想追蹤載入特定 JavaScript 程式庫所需的時間，便可使用 jQuery 值。
variable string 是 字串，用於指出所追蹤資源的動作名稱。舉例來說，如果想追蹤載入 jQuery JavaScript 程式庫所需的時間，可以使用 JavaScript Load 的值。請注意，您可以將相同的變數用於多個類別，以追蹤這些類別常見事件 (例如 Javascript Load 和 Page Ready Time 等) 的時間。
time number 是 向 Google Analytics (分析) 回報的經過時間 (毫秒)。如果 jQuery 程式庫的載入時間為 20 毫秒，則您可以傳送 20 的值。
opt_label string 否 字串，以便在報表中以視覺化方式呈現使用者時間。標籤也能用於著重於相同類別和變數組合的不同子實驗。舉例來說，如果我們從 Google 內容傳遞聯播網載入 jQuery，系統會使用 Google CDN 的值。
opt_sampleRate number 否 用來手動覆寫時間命中傳送到 Google Analytics (分析) 的訪客百分比。預設設定的數值與一般網站速度資料收集次數相同，是以訪客百分比來計算。因此，如果您想追蹤 100% 訪客的 _trackTiming 命中，就應該使用 100 值。請注意，每次命中都會計入單次工作階段的一般命中 (500 次命中) 中。

返回頁首

追蹤花費的時間

使用 _trackTiming 方法時，您要指定在 time 參數中花費的毫秒量。因此，開發人員可自行決定撰寫程式碼來擷取這段時間。最簡單的做法是在一段時間的開頭建立時間戳記，並在那段結束時建立另一個時間戳記。接著，您可以兩種時間戳記的差異，藉此取得時間。

以下提供一個簡單的範例：

var startTime = new Date().getTime();

setTimeout(myCallback, 200);

function myCallback(event) {

  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;

  _gaq.push(['_trackTiming', 'Test', 'callback_timeout', timeSpent, 'animation']);
}

系統會建立新的 Date 物件並取得時間 (以毫秒為單位)，藉此擷取起始時間戳記。接著，系統會使用 setTimeout 函式，以 200 毫秒為單位呼叫 myCallback 函式。執行回呼函式後，系統會建立新的 Date 物件來擷取 endTime 時間戳記。接著系統會計算結束時間和開始時間的差額，藉此計算時間。最後花費時間會傳送至 Google Analytics (分析)。

本範例雖然簡單，但會說明追蹤時間的概念。以下是更實際的範例。

返回頁首

追蹤載入 JavaScript 資源所花費的時間

目前，許多網站都會包含第三方 JavaScript 程式庫，或是透過 JSON 物件要求資料。雖然您的網站可能會在家中快速載入這些資源，但對其他國家/地區的使用者來說，載入相同資源的速度可能非常緩慢。這些速度緩慢的資源可能會降低全球使用者在瀏覽網站時的使用體驗。

網站速度使用者載入時間功能可協助您收集及回報這些資源的載入時間。

以下提供簡單的範例，說明如何追蹤以非同步方式載入 JavaScript 資源的函式時間：

var startTime;

function loadJs(url, callback) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  var s = document.getElementsByTagName('script')[0];

  js.onload = callback;
  startTime = new Date().getTime();

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;
  _gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN']);

  // Library has loaded. Now you can use it.
};

請注意，這個範例與先前的範例非常類似。

在這個範例中，loadJs 屬於公用程式函式，可以動態建立指令碼元素，並附加至瀏覽器的 DOM，藉此載入 JavaScript 資源。此函式接受兩個參數：網址做為字串，以及載入指令碼後執行的回呼函式。

在 loadJs 中，開始的時間戳記會儲存在 startTime 中。資源載入後，系統會執行回呼函式。在回呼函式中，系統會擷取結束時間戳記，並用來計算載入 JavaScript 資源所需的時間。這個時間長度會透過 _trackTiming 方法傳送至 Google Analytics (分析)。

呼叫：

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, callback);

系統會以非同步方式從 Google 內容傳遞網路載入 jQuery 程式庫，然後執行回呼函式，再將資源的載入時間傳送至 Google Analytics (分析)。

返回頁首

處理多個使用者操作時間

假設您想使用上述程式碼載入多個 JavaScript 資源。由於 startTime 變數為全域變數，因此每當您追蹤一段時間的開始時間，系統就會覆寫 startTime 變數，產生不正確的時間。

因此最佳做法是針對要追蹤的每項資源，保留一組不重複的開始和結束時間例項。

另請注意，_trackTiming 的類別和變數參數是硬式編碼。因此，如果您使用 loadJs 載入多個資源，就無法在 Google Analytics (分析) 報表中區分每項資源。

將時間和 _trackTiming 參數儲存在 JavaScript 物件中，即可解決這兩個問題。

建立 JavaScript 物件以儲存使用者時間。

以下提供一個簡單的 JavaScript 物件，可用來儲存每個追蹤資源的使用者時間資料：

function TrackTiming(category, variable, opt_label) {
  this.category = category;
  this.variable = variable;
  this.label = opt_label ? opt_label : undefined;
  this.startTime;
  this.endTime;
  return this;
}

TrackTiming.prototype.startTime = function() {
  this.startTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.endTime = function() {
  this.endTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;
  window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  return this;
}

我們現在可以使用這個物件，讓 loadJs 處理多個要求。

傳送儲存的使用者時間

現在，我們能夠針對想要追蹤的每項資源儲存時間資料，請按照下列步驟更新 loadJs 來使用這些資料：

var tt = new TrackTiming('jQuery', 'Load Library', 'Google CDN');

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, myCallback, tt);

function loadJs(url, callback, tt) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  js.onload = callback;
  var s = document.getElementsByTagName('script')[0];

  tt.startTime();
  js.tt = tt;

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  target.tt.endTime().send();

  // Library has loaded. Now you can use it.
}

上述程式碼應先建立新的 TrackTiming 物件，並將類別、變數和選用標籤傳遞至建構函式。接著，TrackTiming 物件會以參數的形式傳遞至 loadJs 函式。

在 loadJs 中，系統會呼叫 startTime 方法，以取得並儲存起始時間戳記。

在上一個範例中，回呼函式可輕鬆存取 startTime 變數，因為該變數為全域變數。現在 startTime 已屬於 TrackTiming 物件，我們需要一種方式，將此物件從 loadJs 函式傳遞至回呼函式。

如要解決這個問題，其中一種策略是在指令碼元素中加入 TrackTiming 物件屬性。由於回呼函式是從 onload 指令碼執行，因此回呼會以參數的形式傳遞事件物件。這個事件物件隨後可用來擷取觸發事件的原始指令碼物件，該指令碼物件也可以用來存取 TrackTiming 物件。

一旦我們存取原始的 TrackTiming 物件，指令碼就能結束時間並傳送資料。

請參閱範例網站的 本範例即時示範。

透過這種模式，將 TrackTiming 物件新增為追蹤物件的屬性，通常就能順利追蹤其他非同步載入機制，例如使用 XMLHttpRequest 物件。

返回頁首

追蹤 XMLHttpRequests

另一個以非同步方式載入網頁資源的方法是使用 XMLHttpRequest 物件。您也可以使用 _trackTiming 方法和 TimeTracker 物件，追蹤載入這些資源所需的時間。

以下範例會從伺服器載入引號檔案。

var url = ‘//myhost.com/quotes.txt’;
var tt = new TrackTime('xhr demo', 'load quotes');

makeXhrRequest(url, myCallback, tt);

function makeXhrRequest(url, callback, tt) {
  if (window.XMLHttpRequest) {
    var xhr = new window.XMLHttpRequest;
    xhr.open('GET', url, true);
    xhr.onreadystatechange = callback;

    tt.startTime();
    xhr.tt = tt;

    xhr.send();
  }
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  if (target.readyState == 4) {
    if (target.status == 200) {

      target.tt.endTime().send();

      // Do something with the resource.
    }
  }
}

這個範例看起來與 loadJs 範例非常類似。請參閱這裡的現場示範。

返回頁首

避免傳送無效資料

在上述範例中，如要取得耗費時間，程式碼會從開始時間減去結束時間。只要開始時間早於結束時間，這種做法通常都能正常運作。但如果瀏覽器的時間變更，就可能成為問題。如果使用者在開始時間設定完畢後變更了機器，系統就會將錯誤資料傳送至 Google Analytics (分析)。傳送一個較大的錯誤值時，有個嚴重的問題，就是這會使您的平均值和總指標出現偏差。

因此，一般來說，最佳做法是先確認所花費的時間超過 0 到一段時間，再將資料傳送至 Google Analytics (分析)。我們可以修改上方的 TimeTracker 傳送方法，執行這項檢查：

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;

  var hourInMillis = 1000 * 60 * 60;

  if (0 < timeSpent && timeSpent < hourInMillis) {
    window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  }

   return this;
}

覆寫取樣率和偵錯

_trackTiming 方法只會針對 Google Analytics (分析) 收集的所有網站速度指標，以相同的速率將資料傳送至 Google Analytics (分析)。預設為所有訪客的 1%。

如果是有大量流量的網站，預設應該沒有問題。 不過，對於流量較少的網站，您也可以設定選用的取樣率參數來提高取樣率。例如： 

_gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN', 50]);

將收集 50% 訪客的 _trackTiming 資料。

或者，您也可以設定 _setSiteSpeedSampleRate 方法，設定所有網站速度時間的取樣率，包括 _trackTiming 方法。舉例來說：

_gaq.push([‘_setSiteSpeedSampleRate’, 50]);

也會向 50% 的訪客收集「_trackTiming」資料。

一般而言，在測試和驗證 Google Analytics (分析) 的導入作業時，所測試網站的流量通常很少。因此在測試期間，將取樣率提高到 100% 通常很有用。

返回頁首

追蹤其他時間事件

上述所有範例都著重於使用 _trackTiming 方法追蹤載入資源所需的時間，但這個方法也可以用來追蹤一般持續時間。例如，您可以追蹤：

  • 訪客觀看影片的時間。
  • 完成遊戲關卡所需的時間。
  • 訪客閱讀網站某部分的時間。

在這些情況下，您可以重複使用上述的 TimeTracker JavaScript 物件，簡化收集作業的時間資料，並將時間資料傳送至 Google Analytics (分析)。