本頁說明如何使用 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
});
});
如果整個網站都使用上述模式，請建立公用程式函式來處理逾時。
下列公用程式函式接受函式做為輸入，並傳回新的函式。如果在逾時期限前呼叫傳回的函式 (預設逾時時間為 1 秒)，就會清除逾時並呼叫輸入函式。如果在逾時期限前沒有呼叫傳回的函式，則無論呼叫哪個函式，都會呼叫輸入函式。
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物件) - 「信標」(使用
navigator.sendBeacon方法)
前兩個方法會帶來上一節所述的問題，但當網頁卸載時，系統不會傳送命中。navigator.sendBeacon 方法不必設定命中回呼，並以非同步方式將命中資料傳送至網路伺服器，藉此解決這個問題。
針對支援這項功能的瀏覽器，下列程式碼會將傳輸機制設為 'beacon'：
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});