本页介绍了如何使用 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'});