Gửi dữ liệu đến Google Analytics

Dòng cuối cùng của đoạn mã đo lường JavaScript sẽ thêm lệnh send vào hàng đợi lệnh ga() để gửi lượt xem trang đến Google Analytics:

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

Đối tượng đang gửi là trình theo dõi đã được lên lịch để tạo trong dòng mã trước đó, và dữ liệu được gửi là dữ liệu được lưu trữ trên trình theo dõi đó.

Hướng dẫn này mô tả các cách gửi dữ liệu đến Google Analytics và giải thích cách kiểm soát dữ liệu được gửi.

Lượt truy cập, loại lượt truy cập và Measurement Protocol

Trình theo dõi gửi dữ liệu đến Google Analytics được gọi là gửi lượt truy cập và mỗi lượt truy cập phải có một loại lượt truy cập. Thẻ Google Analytics gửi lượt truy cập thuộc loại pageview; các loại lượt truy cập khác bao gồm screenview, event, transaction, item, social, exceptiontiming. Hướng dẫn này nêu ra các khái niệm và phương pháp phổ biến cho tất cả các loại lượt truy cập. Bạn có thể tìm thấy các hướng dẫn riêng cho mỗi loại lượt truy cập trong phần Đo lường các lượt tương tác phổ biến của người dùng trong bảng điều hướng bên trái.

Lượt truy cập là yêu cầu HTTP, bao gồm các cặp trường và giá trị được mã hóa dưới dạng chuỗi truy vấn và được gửi đến Measurement Protocol.

Nếu bạn mở công cụ cho nhà phát triển trên trình duyệt khi tải một trang sử dụng analytics.js, thì bạn có thể thấy các lượt truy cập đang được gửi trong thẻ mạng. Tìm các yêu cầu được gửi tới google-analytics.com/collect.

Dữ liệu được gửi

Khi gửi một lượt truy cập đến Measurement Protocol, trình theo dõi sẽ gửi tất cả các trường hiện đang được lưu trữ và là thông số Measurement Protocol hợp lệ. Ví dụ: các trường như titlelocation sẽ được gửi nhưng cookieDomainhitCallback thì không.

Trong một số trường hợp, bạn muốn gửi các trường đến Google Analytics cho lượt truy cập hiện tại chứ không phải cho bất kỳ lượt truy cập tiếp theo nào. Ví dụ: lượt truy cập sự kiện mà các trường eventActioneventLabel chỉ liên quan đến lượt truy cập hiện tại.

Để chỉ gửi các trường có lượt truy cập hiện tại, bạn có thể truyền chúng dưới dạng đối số cho phương thức send. Để gửi dữ liệu trường cùng với tất cả các lượt truy cập tiếp theo, bạn nên cập nhật trình theo dõi bằng cách sử dụng phương thức set.

Phương thức gửi

Phương thức send của một trình theo dõi có thể được gọi trực tiếp trên chính đối tượng trình theo dõi đó hoặc bằng cách thêm lệnh send vào hàng đợi lệnh ga(). Vì hầu hết thời gian bạn không tham chiếu đến đối tượng trình theo dõi, nên bạn nên sử dụng hàng đợi lệnh ga() để gửi dữ liệu của trình theo dõi đến Google Analytics.

Sử dụng hàng đợi lệnh ga()

Chữ ký để thêm lệnh send vào hàng đợi lệnh ga() như sau:

ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);

Như đã đề cập ở trên, giá trị được chỉ định qua các thông số hitType, ...fieldsfieldsObject chỉ được gửi cho lượt truy cập hiện tại. Những thông tin này không được lưu trữ trên đối tượng trình theo dõi và cũng không được gửi cùng với các lượt truy cập tiếp theo.

Nếu bất kỳ trường nào được truyền bằng lệnh send đã được thiết lập trên đối tượng trình theo dõi, thì các giá trị đã truyền vào lệnh này sẽ được sử dụng thay vì các giá trị được lưu trữ trên công cụ theo dõi.

Các lệnh gọi đến lệnh send phải chỉ định hitType và tuỳ thuộc vào loại được chỉ định, các tham số khác cũng có thể được yêu cầu. Hãy xem hướng dẫn riêng về cách đo lường các hoạt động tương tác phổ biến của người dùng trong bảng điều hướng bên trái để biết thêm thông tin chi tiết.

Cách đơn giản nhất để sử dụng lệnh send hoạt động với tất cả các loại lượt truy cập là chuyển tất cả các trường bằng cách sử dụng tham số fieldsObject. Ví dụ:

ga('send', {
  hitType: 'event',
  eventCategory: 'Video',
  eventAction: 'play',
  eventLabel: 'cats.mp4'
});

Để thuận tiện, một số loại lượt truy cập nhất định cho phép chuyển trực tiếp các trường thường dùng dưới dạng đối số cho lệnh send. Ví dụ: lệnh send ở trên cho loại lượt truy cập "sự kiện" có thể được viết lại như sau:

ga('send', 'event', 'Video', 'play', 'cats.mp4');

Để biết danh sách đầy đủ những trường có thể được chuyển dưới dạng đối số cho các loại lượt truy cập khác nhau, hãy xem phần "thông số" trong tài liệu tham khảo về phương thức gửi.

Sử dụng trình theo dõi được đặt tên

Nếu đang sử dụng một công cụ theo dõi được đặt tên thay cho công cụ theo dõi mặc định, bạn có thể chuyển tên của công cụ theo dõi đó vào chuỗi lệnh.

Lệnh send sau đây sẽ được gọi trên thiết bị theo dõi có tên là "myTracker":

ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');

Trên chính đối tượng của công cụ theo dõi

Nếu tham chiếu đến đối tượng của trình theo dõi, bạn có thể gọi trực tiếp phương thức send của trình theo dõi đó:

ga(function(tracker) {
  tracker.send('event', 'Video', 'play', 'cats.mp4');
});

Biết thời điểm lượt truy cập được gửi

Trong một số trường hợp, bạn cần biết khi nào một lượt truy cập được gửi đến Google Analytics xong, để bạn có thể thực hiện 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 bắt đầu gỡ tải, điều này có nghĩa là các lệnh analytics.js để gửi lượt truy cập có thể không bao giờ chạy được.

Ví dụ: khi bạn 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 trường hợp, khi nhấp vào nút gửi, trang tiếp theo sẽ bắt đầu tải ngay lập tức và mọi lệnh ga('send', ...) sẽ không chạy.

Giải pháp cho vấn đề này là chặn sự kiện để ngăn trang huỷ tải. Sau đó, bạn có thể gửi lượt truy cập của mình đến Google Analytics như bình thường và sau khi lượt truy cập được gửi xong, bạn có thể gửi lại biểu mẫu theo phương thức lập trình.

hitCallback

Để nhận thông báo khi lượt truy cập được gửi xong, bạn đặt trường hitCallback. hitCallback là một hàm được gọi ngay khi lượt truy cập được gửi thành công.

Ví dụ sau đây cho thấy cách hủy hành động gửi mặc định của biểu mẫu, gửi lượt truy cập đến Google Analytics rồi gửi lại biểu mẫu bằng hàm hitCallback:

// 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: function() {
      form.submit();
    }
  });
});

Xử lý thời gian chờ

Ví dụ trên hoạt động tốt, nhưng có một vấn đề nghiêm trọng. Nếu (vì bất kỳ lý do gì) thư viện analytics.js không tải được, hàm hitCallback sẽ không bao giờ chạy. Và nếu hàm hitCallback không bao giờ chạy, người dùng sẽ không bao giờ có thể gửi biểu mẫu.

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

Ví dụ tiếp theo cập nhật 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à hitCallback 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);

  // Keeps track of whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where `hitCallback` 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: submitForm
  });
});

Nếu đang sử dụng các mẫu trên ở nhiều nơi trong trang web, việc tạo một hàm hiệu dụng để xử lý thời gian chờ sẽ dễ dàng hơn.

Hàm hiệu dụng sau 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 sẽ xoá thời gian chờ và gọi hàm nhập. 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ể dễ dàng gói tất cả hàm hitCallback với thời gian chờ để đảm bảo trang web của bạn hoạt động như dự kiến ngay cả trong trường hợp không gửi được lượt truy cập hoặc thư viện analytics.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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: createFunctionWithTimeout(function() {
      form.submit();
    })
  });
});

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

Theo mặc định, analytics.js chọn phương thức HTTP và cơ chế truyền tải để gửi lượt truy cập một cách tối ưu. Có 3 tuỳ chọn là 'image' (sử dụng đối tượng Image), 'xhr' (sử dụng đối tượng XMLHttpRequest) hoặc 'beacon' sử dụng phương thức navigator.sendBeacon mới.

Hai phương pháp trước có chung vấn đề được mô tả trong phần trước (nơi lượt truy cập thường không được gửi nếu trang đang được huỷ tải). Ngược lại, phương thức navigator.sendBeacon là một tính năng HTML mới được tạo để giải quyết vấn đề này.

Nếu trình duyệt của người dùng hỗ trợ navigator.sendBeacon, bạn có thể chỉ định 'beacon' làm cơ chế transport và không phải lo lắng về việc đặt lệnh gọi lại lượt truy cập.

Mã sau đây đặt cơ chế truyền tải thành 'beacon' trong các trình duyệt hỗ trợ cơ chế này.

ga('create', 'UA-XXXXX-Y', 'auto');

// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');

Các bước tiếp theo

Việc đo lường một số loại tương tác nhất định của người dùng đôi khi có thể yêu cầu các phương pháp triển khai phức tạp. Tuy nhiên, trong nhiều trường hợp, các phương pháp triển khai này đã được phát triển và cung cấp dưới dạng trình bổ trợ analytics.js. Hướng dẫn tiếp theo giải thích cách sử dụng trình bổ trợ analytics.js với hàng đợi lệnh ga().