使用 gtag.js 將資料傳送至 Google Analytics (分析)

本頁說明如何使用 gtag.js 指令將網站資料傳送至 Google Analytics (分析)。

使用 event 指令傳送資料

在網頁上加入全域程式碼片段後,請使用 event 指令將資料傳送至 Google Analytics (分析)。舉例來說,使用以下 event 指令表示使用者已使用 Google 帳戶登入:

gtag('event', 'login', {'method': 'Google'});

如要進一步瞭解 event 指令,請參閱 API 參考資料

將資料轉送至群組和資源

您可以將一組評估資訊傳送至一或多個 Google Analytics (分析) 資源 ID,並將另一組資訊傳送至其他資源 ID。您可以將房源分門別類,並將資料轉送到群組。

以下程式碼範例說明如何將 sign_in 事件轉送至包含兩個 Google Analytics (分析) 資源的「代理商」。

// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });

// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });

進一步瞭解如何將資料分組及轉送資料

掌握事件傳送時間

在某些情況下,您需要知道事件已成功傳送至 Google Analytics (分析),才能在結束後立即採取行動。在需要記錄會讓使用者離開目前頁面的特定互動時,這種狀況就很常見。許多瀏覽器會在下一頁開始載入後停止執行 JavaScript,這表示您的 gtag.js event 指令可能永遠無法執行。

舉例來說,您可以將事件傳送至 Google Analytics (分析),記錄使用者點擊了表單提交按鈕。在大多數情況下,點選「提交」按鈕會立即開始載入下一頁,直到有機會執行任何 event 指令。

解決方法是攔截事件並停止載入下一頁,以便將事件傳送至 Google Analytics (分析)。活動傳送後,請透過程式輔助方式提交表單。

實作事件回呼函式

您可以導入事件回呼函式,在成功傳送事件時立即呼叫。

下例說明如何取消表單的預設提交動作,將事件傳送至 Google Analytics (分析),然後使用事件回呼函式重新提交表單:

// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevent the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Send the event to Google Analytics and
  // resubmit the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': function() {
      form.submit();
    }
  });
});

處理逾時

上述範例只有一個缺點:如果 gtag.js 程式庫無法載入,事件回呼函式將一律無法執行,使用者也永遠無法提交表單。

如果您將重要的網站功能放入事件回呼函式中,請一律使用逾時函式來處理 gtag.js 程式庫無法載入的情況。

以下範例會強化上述程式碼以使用逾時功能。如果使用者在點選「提交」按鈕後經過一秒,但事件回呼函式尚未執行,系統仍會重新提交表單。

// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Creates a timeout to call submitForm after one second.
  setTimeout(submitForm, 1000);

  // Monitors whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where the event callback function fires normally.
  var formSubmitted = false;

  function submitForm() {
    if (!formSubmitted) {
      formSubmitted = true;
      form.submit();
    }
  }

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': submitForm
  });
});

如果整個網站都採用上述模式,請建立公用程式函式來處理逾時。

以下公用程式函式會接受函式做為輸入內容,並傳回新的函式。如果在逾時時間之前呼叫傳回的函式 (預設逾時為一秒),系統會清除逾時,並呼叫輸入函式。如未在逾時期限前呼叫傳回的函式,系統一律會呼叫輸入函式。

function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

現在,您可以將所有事件回呼函式包裝成逾時,確保網站能正常運作,即使事件無法傳送或系統一直無法載入 gtag.js 程式庫也一樣。

// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  gtag('event', 'signup_form', { 'event_callback': {
    createFunctionWithTimeout(function() {
      form.submit();
    })
  }});
});

指定不同的傳輸機制

根據預設,gtag.js 會挑選 HTTPS 方法和傳輸機制,以便以最佳方式傳送命中資料。三種選項包括:

  • 「image」 (使用 Image 物件)
  • 「xhr」(使用 XMLHttpRequest 物件)
  • 「con」 (使用 navigator.sendBeacon 方法)

前兩種方法會共用上一節所述的問題,如果在網頁卸載時,系統就不會傳送命中。如要解決這個問題,navigator.sendBeacon 方法會將命中資料以非同步的方式傳送至網路伺服器,而無須設定命中回呼。

下列程式碼會針對支援該程式碼的瀏覽器,設定傳送至 'beacon' 的傳輸機制:

gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});