Hướng dẫn này minh hoạ cách sử dụng Google Analytics để theo dõi việc sử dụng tiện ích của bạn. Nếu bạn đang phát triển ứng dụng nền tảng, hãy xem phần Analytics cho ứng dụng vì ứng dụng có các hạn chế khác với tiện ích.
Yêu cầu
Hướng dẫn này hy vọng rằng bạn đã biết một số kiến thức về cách viết tiện ích cho Google Chrome. Nếu bạn cần thông tin về cách viết một tiện ích, vui lòng đọc Hướng dẫn bắt đầu sử dụng.
Bạn cũng sẽ cần thiết lập tài khoản Google Analytics để theo dõi phần mở rộng của mình. Xin lưu ý rằng khi thiết lập tài khoản, bạn có thể sử dụng bất kỳ giá trị nào trong trường URL của trang web, vì tiện ích của bạn sẽ không có URL riêng.
Cài đặt mã theo dõi
Đoạn mã theo dõi Google Analytics chuẩn sẽ tìm nạp tệp có tên ga.js từ một URL
được bảo vệ bằng SSL nếu trang hiện tại được tải bằng giao thức https://. Các ứng dụng và tiện ích của Chrome chỉ có thể sử dụng phiên bản được bảo vệ bằng giao thức SSL của ga.js. Việc tải ga.js qua HTTP không an toàn không được phép theo Chính sách bảo mật nội dung mặc định của Chrome. Điều này, cùng với việc các tiện ích của Chrome được lưu trữ trong giản đồ chrome-extension://, đòi hỏi phải điều chỉnh một chút so với đoạn mã theo dõi thông thường để lấy ga.js trực tiếp từ https://ssl.google-analytics.com/ga.js thay vì vị trí mặc định.
Dưới đây là đoạn mã đã sửa đổi cho API theo dõi không đồng bộ (dòng đã sửa đổi được in đậm):
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
Bạn cũng cần đảm bảo rằng tiện ích có quyền truy cập để tải tài nguyên bằng cách nới lỏng chính sách bảo mật nội dung mặc định. Định nghĩa về chính sách trong manifest.json của bạn có thể có dạng như sau:
{
...,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
...
}
Dưới đây là trang bật lên (popup.html) tải mã theo dõi không đồng bộ thông qua tệp JavaScript bên ngoài (popup.js) và theo dõi một lượt xem trang:
<!DOCTYPE html>
<html>
<head>
...
<script src="popup.js"></script>
</head>
<body>
...
</body>
</html>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
Xin lưu ý rằng chuỗi UA-XXXXXXXX-X phải được thay thế bằng số tài khoản Google Analytics
của riêng bạn.
Theo dõi số lượt xem trang
Mã _gaq.push(['_trackPageview']); sẽ theo dõi một lượt xem trang. Bạn có thể dùng mã này trên bất kỳ trang nào trong tiện ích của mình. Khi được đặt trên trang nền, trang này sẽ đăng ký một khung hiển thị một lần cho mỗi phiên trình duyệt. Khi được đặt trong cửa sổ bật lên, cửa sổ này sẽ đăng ký một khung hiển thị một lần mỗi khi cửa sổ bật lên được mở.
Bằng cách xem dữ liệu lượt xem trang cho mỗi trang trong tiện ích, bạn có thể biết số lần người dùng tương tác với tiện ích trong mỗi phiên trình duyệt:
Theo dõi yêu cầu phân tích
Để đảm bảo dữ liệu theo dõi từ tiện ích của bạn đang được gửi đến Google Analytics, bạn có thể kiểm tra các trang của tiện ích trong cửa sổ Công cụ cho nhà phát triển (xem hướng dẫn gỡ lỗi để biết thêm thông tin). Như hình minh hoạ sau đây, bạn sẽ thấy các yêu cầu cho tệp có tên __utm.gif nếu mọi thứ được thiết lập chính xác.
Theo dõi sự kiện
Bằng cách định cấu hình tính năng theo dõi sự kiện, bạn có thể xác định phần nào trong tiện ích mà người dùng tương tác nhiều nhất. Ví dụ: nếu bạn có ba nút mà người dùng có thể nhấp vào:
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
Viết hàm sẽ gửi sự kiện nhấp chuột đến Google Analytics:
function trackButton(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
};
Và sử dụng thẻ này làm trình xử lý sự kiện cho mỗi lượt nhấp vào nút:
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
Trang tổng quan về tính năng theo dõi sự kiện của Google Analytics sẽ cung cấp cho bạn chỉ số về số lần từng nút riêng lẻ được nhấp:
Bằng cách sử dụng phương pháp này, bạn có thể biết phần nào của tiện ích đang được sử dụng dưới mức hoặc quá mức. Thông tin này có thể giúp đưa ra quyết định về việc thiết kế lại giao diện người dùng hoặc chức năng bổ sung để triển khai.
Để biết thêm thông tin về cách sử dụng tính năng theo dõi sự kiện, hãy xem tài liệu dành cho nhà phát triển Google Analytics.
Mã mẫu
Bạn có thể xem một tiện ích mẫu sử dụng những kỹ thuật này trong kho lưu trữ mẫu.