ga.js là một thư viện JavaScript để đo lường cách người dùng tương tác với trang web của bạn. Đây là một thư viện cũ. Nếu mới bắt đầu sử dụng Google Analytics, bạn nên sử dụng thư viện theo dõi mới nhất, analytics.js.
Bắt đầu nhanh mã theo dõi
Đoạn mã Analytics là một đoạn mã JavaScript nhỏ mà bạn dán vào các trang của mình. Việc này kích hoạt tính năng theo dõi của Google Analytics bằng cách
chèn ga.js vào trang. Để sử dụng mã này trên
các trang của bạn, hãy sao chép đoạn mã dưới đây,
thay thế UA-XXXXX-X bằng mã thuộc tính web.
Dán đoạn mã này vào trang mẫu của trang web để đoạn mã xuất hiện trước thẻ đóng </head>.
Nếu bạn cần thực hiện thêm các thao tác theo dõi trang cơ bản, hãy xem tài liệu tham khảo về cách theo dõi để biết danh sách các phương thức có sẵn trong API và xem Hướng dẫn sử dụng để biết thông tin chi tiết về việc sử dụng cú pháp không đồng bộ. Để biết hướng dẫn từng bước về cách thiết lập tính năng theo dõi, hãy xem bài viết trên Trung tâm trợ giúp về cách thiết lập tính năng theo dõi.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Đoạn mã trên cho thấy cấu hình tối thiểu cần thiết để theo dõi một trang theo cách không đồng bộ. Phương thức này sử dụng _setAccount để
đặt mã thuộc tính web của trang và sau đó
gọi _trackPageview để gửi lại dữ liệu theo dõi
về máy chủ của Google Analytics.
Lưu ý quan trọng: Nếu đang cập nhật các trang của mình từ đoạn mã truyền thống lên phiên bản không đồng bộ mới nhất, thì trước tiên, bạn nên xoá đoạn mã theo dõi hiện có. Bạn không nên sử dụng cả hai đoạn mã trên cùng một trang. Để xem hướng dẫn di chuyển, hãy xem phần Di chuyển sang không đồng bộ.
Cách cú pháp không đồng bộ hoạt động
Đối tượng _gaq là yếu tố có thể sử dụng cú pháp không đồng bộ.
Lớp này đóng vai trò như một hàng đợi – cấu trúc dữ liệu nhập trước thu thập các lệnh gọi API cho đến khi ga.js sẵn sàng thực thi các lệnh gọi đó. Để thêm nội dung vào hàng đợi, hãy sử dụng phương thức _gaq.push.
Để đẩy lệnh gọi API vào hàng đợi, bạn phải chuyển đổi lệnh gọi API đó từ cú pháp JavaScript truyền thống thành một mảng lệnh. Mảng lệnh chỉ đơn giản là các mảng JavaScript tuân theo một định dạng nhất định. Phần tử đầu tiên trong mảng lệnh là tên của phương thức đối tượng trình theo dõi mà bạn muốn gọi. Giá trị này phải là một chuỗi. Các phần tử còn lại là đối số mà bạn muốn truyền đến phương thức đối tượng của công cụ theo dõi. Chúng có thể là bất kỳ giá trị JavaScript nào.
Mã sau đây gọi _trackPageview() bằng cú pháp truyền thống:
var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();
Mã tương đương trong cú pháp không đồng bộ yêu cầu 2 lệnh gọi đến _gaq.push.
_gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']);
Trong cú pháp không đồng bộ, việc tạo đối tượng trình theo dõi được ngụ ý, nhưng chúng ta vẫn cần một cách để đặt mã thuộc tính web cho trình theo dõi. Phương thức _setAccount đã được
thêm vào để cung cấp khả năng này. Tất cả các phương thức khác của đối tượng trình theo dõi đều giống nhau trong cả tính năng theo dõi không đồng bộ và truyền thống. Chỉ có cú pháp là khác nhau.
Để biết thêm thông tin về cú pháp không đồng bộ, hãy xem phần Tham chiếu theo dõi cho phương thức _gaq.push.
Theo dõi bằng Trình xử lý sự kiện HTML
Bạn cũng nên sử dụng cú pháp theo dõi không đồng bộ từ trong trình xử lý sự kiện DOM. Ví dụ: nút sau đây sẽ tạo một sự kiện khi người dùng nhấp vào nút đó.
<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"></button>
Ngay cả khi bạn nhấp vào nút này trước khi trình duyệt tải xong ga.js, sự kiện này vẫn sẽ được ghi lại và cuối cùng được thực thi. Khi sử dụng tính năng theo dõi truyền thống, trình duyệt có thể gửi một ngoại lệ trong trường hợp này.
Đẩy hàm vào Hàng đợi
Ngoài các mảng lệnh, bạn cũng có thể đẩy các đối tượng hàm vào hàng đợi _gaq. Các hàm có thể chứa bất kỳ JavaScript tuỳ ý nào và tương tự như các mảng lệnh, các hàm này được thực thi theo thứ tự được đẩy lên _gaq. Kỹ thuật này rất hữu ích khi gọi các API theo dõi trả về giá trị. Ví dụ: Mã sau đây tạo một URL trình liên kết và đặt thuộc tính href cho một đường liên kết có kết quả.
_gaq.push(function() {
var pageTracker = _gat._getTracker('UA-XXXXX-X');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
Ví dụ trên sử dụng _gat để tạo đối tượng trình theo dõi, nhưng do được gán cho một biến cục bộ nên mã bên ngoài hàm không thể sử dụng đối tượng đó. Mặc dù điều này có thể chấp nhận được, nhưng bạn có thể sử dụng phương thức _gat._createTracker để tạo một đối tượng vĩnh viễn có thể truy cập trên toàn cầu.
Mã sau đây minh hoạ cách hoạt động của mã này.
_gaq.push(function() {
var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
_gaq.push(['myTracker._trackPageview']);
Ví dụ ở trên sẽ tạo một trình theo dõi không đồng bộ bên trong hàm, sau đó tham chiếu đến trình theo dõi đó sau theo tên trong mảng lệnh.
Bạn cũng có thể sử dụng trường hợp ngược lại. Ví dụ: nếu bạn cần sử dụng một đối tượng trình theo dõi không đồng bộ được tạo thông qua một mảng lệnh đã đẩy trước đó, hãy dùng phương thức _gat._getTrackerByName. Mã sau đây minh hoạ cách hoạt động.
_gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']);
_gaq.push(function() {
var pageTracker = _gat._getTrackerByName('myTracker');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
Một lần đẩy, nhiều lệnh
Thay vì nhập _gaq.push(...) cho từng lệnh gọi, bạn có thể đẩy tất cả các lệnh cùng một lúc. Mã sau đây minh hoạ kỹ thuật này.
_gaq.push( ['_setAccount', 'UA-XXXXX-X'], ['_setDomainName', 'example.com'], ['_setCustomVar', 1, 'Section', 'Life & Style', 3], ['_trackPageview'] );
Cách này hiệu quả vì phương thức _gaq.push bắt chước phương thức Array.push, cho phép đẩy nhiều mục chỉ bằng một lệnh gọi.
Tách đoạn mã
Nếu muốn đặt đoạn mã Analytics ở cuối trang, bạn không cần phải đặt toàn bộ đoạn mã ở dưới cùng.
Bạn vẫn có thể giữ lại hầu hết lợi ích của việc tải không đồng bộ bằng cách chia đôi đoạn mã. Hãy giữ nửa đầu ở đầu trang và di chuyển phần còn lại xuống dưới cùng. Vì phần đầu tiên của đoạn mã theo dõi có ít hoặc không ảnh hưởng đến việc hiển thị trang, nên bạn có thể để phần đó ở trên cùng và đặt phần của đoạn mã chèn ga.js ở dưới cùng.
Trang với đoạn mã không đồng bộ được chia đôi có thể có dạng như sau:
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
</script>
</head>
<body>
<p>Page Content</p>
<script src="some_random_script.js"></script>
<p>Page Content</p>
<script type="text/javascript"> (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Cả hai đoạn mã đều cần được gói trong thẻ tập lệnh riêng, nhưng chỉ cần di chuyển 6 dòng cuối của đoạn mã không đồng bộ ban đầu xuống dưới cùng. Tất cả các dòng đẩy phương thức lên _gaq đều có thể
nằm ở trên cùng.
Tránh các lỗi thường gặp
Khi sử dụng cú pháp không đồng bộ hoặc cú pháp truyền thống, hãy lưu ý những điều sau:
- Tên phương thức có phân biệt chữ hoa chữ thường.
Nếu bạn sử dụng tên phương thức không đúng cách viết hoa, thì các lệnh gọi phương thức của bạn sẽ không hoạt động. Ví dụ:_gaq.push(['_trackpageview']); // bad _gaq.push(['_trackPageview']); // good
- Sử dụng đúng tên phương thức.
Nếu tính năng theo dõi không hoạt động chính xác, hãy kiểm tra để đảm bảo bạn đang sử dụng đúng tên cho phương thức. Ví dụ:_gaq.push(['_setDomain', 'example.com']); // bad _gaq.push(['_setDomainName', 'example.com']); // good
- Chỉ nên truyền các chuỗi có dấu ngoặc kép. Bạn nên để trống tất cả các loại khác.
Mọi giá trị không phải là chuỗi (chẳng hạn như giá trị boolean, giá trị cố định đối tượng, hàm hoặc mảng) đều phải được truyền vào mà không có dấu ngoặc kép. Chỉ sử dụng dấu ngoặc kép khi bạn truyền giá trị vào nội dung được hiểu là một chuỗi. Nếu bạn đang di chuyển từ cú pháp truyền thống, thì mọi tham số hàm đã được chuyển vào mà không có dấu ngoặc kép vẫn phải được đặt trong dấu ngoặc kép trong cú pháp không đồng bộ. Ví dụ:_gaq.push(['_setAllowLinker', 'false']); // bad _gaq.push(['_setAllowLinker', false]); // good
- Đảm bảo chuỗi không chứa khoảng trắng ở đầu hoặc cuối.
Ví dụ:_gaq.push(['_setAccount', ' UA-65432-1']); // bad _gaq.push(['_setAccount', 'UA-65432-1']); // good
Tắt tính năng theo dõi
Trong một số trường hợp, bạn có thể cần phải vô hiệu hoá mã theo dõi Google Analytics trên một trang mà không phải xoá đoạn mã đó. Ví dụ: bạn có thể làm điều này nếu chính sách quyền riêng tư của trang web yêu cầu khách truy cập có thể chọn không sử dụng tính năng theo dõi của Google Analytics.
Đoạn mã theo dõi ga.js
hiện bao gồm một thuộc tính cửa sổ mà khi được đặt thành true
sẽ ngăn đoạn mã theo dõi gửi dữ liệu đến Google Analytics.
Khi cố gắng đặt cookie hoặc gửi dữ liệu về
các máy chủ của Google Analytics, Google Analytics sẽ kiểm tra xem tài sản
này có được đặt thành true hay không. Nếu có, thay đổi này sẽ có
tác động tương tự như thể khách truy cập đã
cài đặt Trình bổ trợ trình duyệt chọn không sử dụng Google Analytics.
Để tắt tính năng theo dõi, hãy đặt thuộc tính cửa sổ sau đây thành true:
window['ga-disable-UA-XXXXXX-Y'] = true;
Trong trường hợp giá trị UA-XXXXXX-Y tương ứng với mã thuộc tính web
mà bạn muốn tắt tính năng theo dõi.
Bạn phải đặt thuộc tính cửa sổ này trước khi gọi mã theo dõi. Bạn phải đặt thuộc tính này trên từng trang mà bạn muốn tắt tính năng theo dõi của Google Analytics. Nếu bạn không đặt thuộc tính này hoặc đặt thành false (sai), thì quá trình theo dõi sẽ hoạt động như bình thường.
Ví dụ: nếu mã theo dõi Google Analytics của bạn trên một trang bao gồm:
_gaq.push['_setAccount', 'UA-123456-1']
Và bạn muốn vô hiệu hóa mã theo dõi đó đặt cookie hoặc gửi dữ liệu trở lại Google Analytics, khi đó bạn sử dụng mã sau đây trước khi mã theo dõi được gọi:
window['ga-disable-UA-123456-1'] = true;
Nếu sử dụng nhiều trình theo dõi trên một trang có nhiều mã tài sản web, bạn
phải đặt biến window['ga-disable-UA-XXXXXX-Y']
tương đương thành true cho mỗi tài sản web để tắt hoàn toàn
tính năng theo dõi của Google Analytics trên trang đó.
Ví dụ:
Dưới đây là ví dụ đơn giản về một số mã mà bạn có thể sử dụng để cung cấp chức năng chọn không tham gia cho người dùng.
Trước tiên, hãy thêm một đường liên kết HTML mới vào trang web của bạn để thực thi logic chọn không tham gia:
<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>
Sau đó, hãy thêm đoạn mã sau trước đoạn mã ga.js. Hãy nhớ thay thế giá trị của gaProperty từ
UA-XXXX-Y thành thuộc tính sử dụng trên trang web của bạn.
Đây cũng chính là giá trị mà bạn chuyển vào lệnh _setAccount.
<script>
// Set to the same value as the web property used on the site
var gaProperty = 'UA-XXXX-Y';
// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
window[disableStr] = true;
}
// Opt-out function
function gaOptout() {
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
window[disableStr] = true;
}
</script>
Khi người dùng nhấp vào đường liên kết chọn không tham gia HTML, hàm gaOptout tuỳ chỉnh sẽ thực thi. Thao tác này sẽ đặt một cookie
trong tương lai và tắt tính năng thu thập dữ liệu analytics.js.
Khi người dùng quay lại trang web này, tập lệnh ở trên sẽ kiểm tra xem
cookie chọn không tham gia đã được đặt hay chưa. Nếu có, hoạt động thu thập dữ liệu
analytics.js cũng sẽ bị vô hiệu hoá.
Buộc SSL (HTTPS)
Để buộc Google Analytics luôn gửi dữ liệu bằng SSL, ngay cả từ các trang không an toàn (HTTP), hãy sử dụng phương thức
_gat._forceSSL, như trong ví dụ sau:
_gaq.push(['_setAccount', 'UA-12345-1']); _gaq.push(['_gat._forceSSL']); // Send all hits using SSL, even from insecure (HTTP) pages. _gaq.push(['_trackPageview']);