Gửi dữ liệu đến Google Analytics bằng gtag.js

Trang này mô tả cách sử dụng lệnh gtag.js để gửi dữ liệu từ trang web của bạn đến Google Analytics.

Gửi dữ liệu bằng lệnh event

Sau khi bạn thêm đoạn mã chung vào một trang web, hãy sử dụng lệnh event để gửi dữ liệu đến Google Analytics. Ví dụ: sử dụng lệnh event sau đây để cho biết rằng một người dùng đã đăng nhập bằng Tài khoản Google của họ:

gtag('event', 'login', {'method': 'Google'});

Tìm hiểu thêm về lệnh event trong tài liệu tham khảo API.

Định tuyến dữ liệu đến các nhóm và tài sản

Bạn có thể gửi một nhóm thông tin đo lường đến một hoặc nhiều mã tài sản Google Analytics và một tập hợp thông tin khác đến các mã tài sản khác. Bạn có thể sắp xếp các cơ sở lưu trú thành nhóm và định tuyến dữ liệu đến các cơ sở lưu trú đó.

Ví dụ: ví dụ về mã sau đây minh hoạ cách định tuyến một sự kiện sign_in đến một "đại lý" nhóm bao gồm hai tài sản 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' });

Tìm hiểu thêm về cách nhóm và định tuyến dữ liệu.

Biết thời điểm một sự kiện được gửi

Trong một số trường hợp, bạn cần biết thời điểm một sự kiện đã được gửi thành công đến Google Analytics để có thể hành động ngay sau đó. Điều này thường xảy ra khi bạn cần ghi lại một tương tác cụ thể sẽ đưa người dùng rời khỏi trang hiện tại. Nhiều trình duyệt ngừng thực thi JavaScript ngay khi trang tiếp theo bắt đầu tải. Điều này có nghĩa là các lệnh event gtag.js có thể không bao giờ chạy.

Ví dụ: bạn có thể muốn gửi một sự kiện đến Google Analytics để ghi lại rằng người dùng đã nhấp vào nút gửi của biểu mẫu. Trong hầu hết các trường hợp, thao tác nhấp vào nút gửi sẽ bắt đầu tải trang tiếp theo ngay lập tức trước khi bất kỳ lệnh event nào có cơ hội thực thi.

Giải pháp là chặn sự kiện nhằm ngừng tải trang tiếp theo để bạn có thể gửi sự kiện đó đến Google Analytics. Sau khi sự kiện được gửi, hãy gửi biểu mẫu theo phương thức lập trình.

Triển khai hàm callback sự kiện

Bạn có thể triển khai hàm callback sự kiện để được gọi ngay sau khi gửi thành công sự kiện.

Ví dụ sau cho thấy cách huỷ hành động gửi mặc định của biểu mẫu, gửi một sự kiện đến Google Analytics rồi gửi lại biểu mẫu bằng hàm gọi lại sự kiện:

// 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();
    }
  });
});

Thời gian chờ xử lý

Có một hạn chế đối với ví dụ trên: Nếu thư viện gtag.js không tải, thì hàm callback sự kiện sẽ không bao giờ chạy và người dùng sẽ không bao giờ có thể gửi biểu mẫu.

Bất cứ khi nào đưa chức năng quan trọng của trang web vào hàm callback sự kiện, bạn phải luôn sử dụng hàm thời gian chờ để xử lý các trường hợp mà thư viện gtag.js không tải được.

Ví dụ sau đây cải thiện mã trên để sử dụng thời gian chờ. Nếu một giây trôi qua sau khi người dùng nhấp vào nút gửi và chức năng gọi lại sự kiện chưa chạy, thì biểu mẫu vẫn sẽ được gửi lại.

// 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
  });
});

Nếu bạn sử dụng mẫu trên trong toàn bộ trang web của mình, hãy tạo một hàm hiệu dụng để xử lý hết thời gian chờ.

Hàm hiệu dụng sau đây chấp nhận một hàm làm dữ liệu đầu vào và trả về một hàm mới. Nếu hàm trả về được gọi trước khoảng thời gian chờ (thời gian chờ mặc định là một giây), thì hàm này sẽ xoá thời gian chờ và gọi hàm đầu vào. Nếu hàm được trả về không được gọi trước khoảng thời gian chờ, thì hàm đầu vào sẽ được gọi bất kể.

function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

Giờ đây, bạn có thể đặt thời gian chờ cho tất cả hàm callback sự kiện để đảm bảo trang web của bạn hoạt động như dự kiến, ngay cả trong trường hợp sự kiện không gửi được hoặc thư viện gtag.js không bao giờ tải.

// 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();
    })
  }});
});

Chỉ định các cơ chế truyền tải khác nhau

Theo mặc định, gtag.js chọn phương thức HTTPS và cơ chế truyền tải để gửi lượt truy cập một cách tối ưu. Ba lựa chọn bao gồm:

  • "image" (sử dụng đối tượng Image)
  • "xhr" (sử dụng đối tượng XMLHttpRequest)
  • "beacon" (sử dụng phương thức navigator.sendBeacon)

Hai phương pháp đầu tiên có chung vấn đề được mô tả trong phần trước, trong đó lượt truy cập không được gửi nếu trang đang được huỷ tải. Phương thức navigator.sendBeacon giải quyết vấn đề này bằng cách truyền không đồng bộ số lượt truy cập đến máy chủ web mà không cần phải đặt lệnh gọi lại lượt truy cập.

Đoạn mã sau đây đặt cơ chế truyền tải thành 'beacon' cho các trình duyệt hỗ trợ cơ chế này:

gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});