本頁說明如何使用 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'});