Dòng cuối cùng của đoạn mã đo lường JavaScript thêm lệnh send vào hàng đợi lệnh ga() để gửi một 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 loại dữ liệu được gửi.
Lượt truy cập, loại lượt truy cập và Measurement Protocol
Khi một trình theo dõi gửi dữ liệu đến Google Analytics, trình theo dõi đó được gọi là gửi một 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, exception và timing. Hướng dẫn này trình bày 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 hướng dẫn riêng cho từng loại lượt truy cập trong mục Đo lường các lượt tương tác phổ biến của người dùng trên thanh điều hướng bên trái.
Lượt truy cập là một yêu cầu HTTP, bao gồm các cặp giá trị và trường được mã hoá dưới dạng chuỗi truy vấn và được gửi đến Measurement Protocol.
Nếu công cụ dành cho nhà phát triển của trình duyệt đang mở khi bạn 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 đến google-analytics.com/collect.
Loại 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ư title và location được gửi nhưng cookieDomain và hitCallback thì không.
Trong một số trường hợp, bạn muốn gửi 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 nào tiếp theo. Ví dụ: lượt truy cập sự kiện mà các trường eventAction và eventLabel 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ể chuyển các trườ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 phương thức set.
Phương thức gửi
Phương thức send của trình theo dõi có thể được gọi trực tiếp trên đố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 trường hợp bạn không tham chiếu đến đối tượng công cụ theo dõi, bạn nên sử dụng hàng đợi lệnh ga() để gửi dữ liệu của công cụ theo dõi đến Google Analytics.
Sử dụng hàng đợi lệnh ga()
Chữ ký để thêm một 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, ...fields và fieldsObject chỉ được gửi cho lượt truy cập hiện tại. Những mã này không được lưu trữ trên đối tượng công cụ 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 đặt trên đối tượng công cụ theo dõi, thì các giá trị được chuyển vào lệnh đó 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, bạn cũng có thể cần đến các tham số khác. Hãy xem hướng dẫn riêng về cách đ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 để 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 thông 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ụ: bạn có thể viết lại lệnh send ở trên cho loại lượt truy cập "event" như sau:
ga('send', 'event', 'Video', 'play', 'cats.mp4');
Để biết danh sách đầy đủ các trường có thể được chuyển làm đố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 thiết bị theo dõi được đặt tên
Nếu đang sử dụng một trình theo dõi được đặt tên thay vì trình theo dõi mặc định, bạn có thể chuyển tên của trình 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ông cụ theo dõi
Nếu tham chiếu đến đối tượng 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 gửi lượt truy cập
Trong một số trường hợp, bạn cần biết thời điểm một lượt truy cập được gửi đến Google Analytics để có thể xử lý 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, 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.
Ví dụ: khi bạn muốn gửi một sự kiện đến Google Analytics để ghi lại việc 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, 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 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 một 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 cho thấy cách hủy hành động gửi mặc định của biểu mẫu, gửi một lượt truy cập đến Google Analytics rồi gửi lại biểu mẫu bằng cách sử dụ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ý hết 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, thì hàm hitCallback sẽ không bao giờ chạy. Và nếu hàm hitCallback không bao giờ chạy, thì 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 hitCallback, bạn phải luôn sử dụng hàm thời gian chờ để xử lý các trường hợp thư viện analytics.js không tải được.
Ví dụ tiếp theo sẽ 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 bạn đang sử dụng mẫu trên ở nhiều vị trí trong toàn bộ trang web của mình, việc tạo một hàm tiện ích để xử lý hết thời gian chờ có thể dễ dàng hơn.
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ể dễ dàng bao bọc 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 lượt truy cập của bạn không gửi được 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. Ba lựa chọn này 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 ra để giải quyết vấn đề này.
Nếu trình duyệt của người dùng hỗ trợ navigator.sendBeacon thì 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.
Đoạn 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
Đôi khi, việc đo lường một số loại tương tác của người dùng có thể yêu cầu nhiều phương pháp triển khai phức tạp. Tuy nhiên, trong nhiều trường hợp, những triển khai này đã được phát triển và được 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 plugin analytics.js với hàng đợi lệnh ga().