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à 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.
Hướng dẫn nhanh về 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. Công 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ã bên dưới, 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 sử dụng thêm tính năng theo dõi trang cơ bản, hãy xem tài liệu tham khảo về tính năng theo dõi để biết danh sách các phương thức có trong API và xem Hướng dẫn sử dụng để biết thông tin chi tiết về cách 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 về việc thiết lập tính năng theo dõi trong Trung tâm trợ giúp.
<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 đại diện cho cấu hình tối thiểu cần thiết để theo dõi một trang không đồng bộ. Phương thức này sử dụng _setAccount để đặt mã thuộc tính web của trang rồi gọi _trackPageview để gửi dữ liệu theo dõi lại cho máy chủ của Google Analytics.
Lưu ý quan trọng: Nếu bạn đang cập nhật các trang 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 dùng cả hai đoạn trích cho cùng một trang. Để xem hướng dẫn di chuyển, hãy xem phần Di chuyển sang Async.
Cách cú pháp không đồng bộ hoạt động
Đối tượng _gaq là nguyên nhân tạo ra cú pháp không đồng bộ.
Hàm này hoạt động như một hàng đợi, là cấu trúc dữ liệu nhập trước,xuất 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 một lệnh gọi API vào hàng đợi, bạn phải chuyển đổi lệnh gọi đó từ cú pháp JavaScript truyền thống thành mảng lệnh. Mảng lệnh chỉ đơn giản là các mảng JavaScript phù hợp với một định dạng nhất định. Phần tử đầu tiên trong một mảng lệnh là tên của phương thức đối tượng của trình theo dõi mà bạn muốn gọi. Đó phải là một chuỗi. Phần tử còn lại là các đối số mà bạn muốn chuyển đến phương thức theo đối tượng trình theo dõi. Đây 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 hai 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 ngụ ý, nhưng chúng ta vẫn cần
cách đặt mã thuộc tính web cho trình theo dõi. Chúng tôi đã thêm phương thức _setAccount
để cung cấp tính năng này. Tất cả các phương thức theo dõi đối tượng khác đề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 khác nhau.
Để biết thêm thông tin về cú pháp không đồng bộ, hãy xem
Tài liệu tham khảo về việc 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ừ bên trong trình xử lý sự kiện DOM. Ví dụ: nút sau đây sẽ tạo ra một sự kiện khi người dùng nhấp vào sự kiện đó.
<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"></button>
Ngay cả khi người dùng nhấp vào nút này trước khi trình duyệt tải xong ga.js, sự kiện
sẽ được ghi lại và cuối cùng được thực thi. Bằng cách 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 các hàm vào danh sách chờ
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 này có thể chứa bất kỳ JavaScript tùy ý nào và giống như các mảng lệnh, đồng thời được thực thi theo thứ tự đẩy vào _gaq. Kỹ thuật này rất hữu ích khi gọi API theo dõi trả về các giá trị. Ví dụ: mã sau đây tạo URL của 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 vì đối tượng này đượ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ể dùng phương thức _gat._createTracker để tạo một đối tượng vĩnh viễn và có thể truy cập trên toàn cầu.
Mã sau đây minh hoạ cách hoạt động của mã.
_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 trình theo dõi đó theo tên trong mảng lệnh.
Trường hợp sử dụng cũng có thể xảy ra. Ví dụ: nếu bạn cần sử dụng đố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 sử dụng phương thức _gat._getTrackerByName. Mã sau đây minh hoạ cách hoạt động của mã.
_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ệnh đẩy, nhiều lệnh
Thay vì nhập _gaq.push(...) cho mỗi 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 hoạt động vì phương thức _gaq.push mô phỏng phương thức Array.push.
Phương thức này cho phép đẩy nhiều mục bằng một lệnh gọi.
Chia đoạn mã
Nếu muốn đặt đoạn mã Analytics ở cuối trang, bạn nên biết rằng bạn không cần phải đặt toàn bộ đoạn mã ở cuối trang.
Bạn vẫn có thể hưởng hầu hết lợi ích của việc tải không đồng bộ bằng cách chia đoạn mã thành một nửa. 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 vào dưới cùng.
Một trang có một nửa đoạn mã không đồng bộ sẽ bị phân tách 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 phải được đặt trong các thẻ tập lệnh riêng, nhưng chỉ cần 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 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 có cách viết hoa đúng cách, thì các lệnh gọi phương thức 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 của bạn hoạt động không chính xác, hãy kiểm tra để đảm bảo rằng bạn đang dùng đúng tên cho phương thức này. Ví dụ:_gaq.push(['_setDomain', 'example.com']); // bad _gaq.push(['_setDomainName', 'example.com']); // good
- Chỉ nên chuyển các chuỗi bằng dấu ngoặc kép. Không nên trích dẫn tất cả các loại khác.
Bất kỳ giá trị nào không phải là một chuỗi, chẳng hạn như boolean, giá trị cố định của đối tượng, hàm hoặc mảng đều phải được chuyể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 nội dung nào đó để được diễn giải là một chuỗi. Nếu bạn di chuyển từ cú pháp truyền thống, mọi tham số hàm được truyền vào mà không có dấu ngoặc kép sẽ vẫn không được trích dẫn trong cú pháp không đồng bộ. Ví dụ:_gaq.push(['_setAllowLinker', 'false']); // bad _gaq.push(['_setAllowLinker', false]); // good
- Đảm bảo rằng 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 tắt 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ể thực hiện việc này nếu chính sách quyền riêng tư của trang web có khả năng cho phép khách truy cập 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 có một thuộc tính cửa sổ. Khi được đặt thành true, thuộc tính cửa sổ sẽ vô hiệu hoá việc gửi đoạn mã theo dõi đến Google Analytics.
Khi cố gắng đặt cookie hoặc gửi lại dữ liệu
về 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 không, nó sẽ có tác dụng tương tự như khi khách truy cập đã cài đặt Trình bổ trợ trình duyệt chọn không tham gia Google Analytics.
Để tắt tính năng theo dõi, hãy đặt thuộc tính cửa sổ sau thành true:
window['ga-disable-UA-XXXXXX-Y'] = true;
Trong đó giá trị UA-XXXXXX-Y tương ứng với mã tài sản 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 tài sản này trên mỗi 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 hoặc đặt thuộc tính thành sai, thì tính năng theo dõi sẽ hoạt động như bình thường.
Ví dụ: nếu mã theo dõi của Google Analytics trên một trang bao gồm:
_gaq.push['_setAccount', 'UA-123456-1']
Và bạn muốn vô hiệu mã theo dõi đó khỏi việc đặt cookie hoặc gửi dữ liệu trở lại Google Analytics, sau đó bạn sử dụng mã sau 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ụ:
Sau đâ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 sử dụng cho người dùng.
Trước tiên, hãy thêm một 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 tài sản dùng trên trang web của bạn.
Đây cũng là giá trị mà bạn chuyển đến 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 không sử dụng HTML, hàm gaOptout tùy chỉnh sẽ thực thi. Việc này sẽ đặt cookie trong một thời gian dài trong tương lai và vô hiệu hoá 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 có được chọn không tham gia hay không. Nếu có, hệ thống cũng sẽ tắt tính năng thu thập dữ liệu analytics.js.
Bắt buộc SSL (HTTPS)
Để buộc Google Analytics luôn gửi dữ liệu bằng SSL, ngay cả từ những 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']);