本页介绍了如何使用 gtag.js 命令将数据从您的网站发送到 Google Analytics（分析）。
使用 event 命令发送数据
将全局代码段添加到网页后，使用 event 命令将数据发送到 Google Analytics（分析）。例如，使用以下 event 命令来表示用户已使用其 Google 账号登录：
gtag('event', 'login', {'method': 'Google'});
详细了解 API 参考中的 event 命令。
将数据以路由方式发送到组和媒体资源
您可以将一组衡量信息发送给一个或多个 Google Analytics（分析）媒体资源 ID，将另一组信息发送给其他媒体资源 ID。您可以将媒体资源分组并以路由方式将数据发送给这些组。
例如，以下代码示例说明了如何将 sign_in 事件以路由方式发送到包含两个 Google Analytics（分析）媒体资源的组“agency”。
// 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对象） - 'beacon'（使用
navigator.sendBeacon方法）
前两种方法都具有上一部分所描述的问题（在网页未加载的情况下无法发送命中）。navigator.sendBeacon 方法通过将命中异步传输到网络服务器来解决此问题，而无需设置命中回调。
对于支持此机制的浏览器，以下代码可将传输机制设置为 'beacon'：
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});