通过 gtag.js 向 Google Analytics(分析)发送数据

本页介绍如何使用 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-TRACKING_ID-1');
gtag('config', 'GA-TRACKING_ID-2', { 'groups': 'agency' });
gtag('config', 'GA-TRACKING_ID-3', { 'groups': 'agency' });

// Route this sign_in event to tracking 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);

  // Keeps track of 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_TRACKING_ID', { 'transport_type': 'beacon'});