Hướng dẫn: Google Analytics

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 khi phát triển một ứng dụng nền tảng, hãy xem 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 bạn đã quen viết tiện ích viết cho Google Chrome. Nếu bạn cần thông tin về cách viết tiện ích, vui lòng đọc Hướng dẫn bắt đầu sử dụng.

Bạn cũng cần thiết lập tài khoản Google Analytics để theo dõi tiện ích của mình. 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 đều có URL riêng.

Đã điền thông tin thiết lập số liệu phân tích cho một tiện ích của Chrome

Cài đặt mã theo dõi

Đoạn mã theo dõi Google Analytics chuẩn tìm nạp tệp có tên ga.js từ một SSL được bảo vệ nếu trang hiện tại được tải bằng giao thức https://. Tiện ích của Chrome và các ứng dụng chỉ có thể sử dụng phiên bản được bảo vệ bằng SSL của ga.js. Đang tải ga.js qua phương thức không an toàn Chính sách bảo mật nội dung mặc định của Chrome không cho phép sử dụng HTTP. Điều này cùng với một thực tế là Chrome các tiện ích được lưu trữ theo giản đồ chrome-extension://, nên bạn cần sửa đổi một chút về thuộc tính đ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 cho vị trí mặc định.

Dưới đây là đoạn mã được sửa đổi cho API theo dõi không đồng bộ (dòng được 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ủa mình 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ể trông giố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 (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);
})();

Lưu ý rằng chuỗi UA-XXXXXXXX-X sẽ được thay thế bằng Google Analytics của riêng bạn số tài khoản của mình.

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 bạn. Khi được đặt trên trang nền, trang này sẽ ghi lại một lượt xem một lần mỗi phiên duyệt web. Khi được đặt trong một cửa sổ bật lên, cửa sổ này sẽ đăng ký chế độ xem một lần mỗi khi cửa sổ bật lên đã mở.

Bằng cách xem dữ liệu lượt xem trang cho mỗi trang trong tiện ích của mình, bạn có thể biết số lượt xem trang số lần người dùng tương tác với tiện ích của bạn trong mỗi phiên trình duyệt:

Chế độ xem số liệu phân tích về nội dung hàng đầu của một trang web

Theo dõi yêu cầu phân tích

Để đảm bảo rằng 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 ). Như hình sau đây cho thấy, bạn sẽ thấy các yêu cầu cho một tệp có tên __utm.gif nếu mọi thứ được thiết lập đúng cách.

Cửa sổ Công cụ dành cho nhà phát triển hiển thị yêu cầu __utm.gif

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, 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 một hàm gửi sự kiện nhấp chuột đến Google Analytics:

function trackButton(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
};

Đồng thời, hãy 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 các chỉ số về số lần mỗi nút riêng lẻ sẽ được nhấp vào:

Chế độ xem Analytics của dữ liệu theo dõi sự kiện cho trang web

Bằng cách sử dụng phương pháp này, bạn có thể biết phần nào trong phần mở rộng chưa được sử dụng đúng mức hoặc bị sử dụng quá mức. Chiến dịch này có thể giúp bạn đưa ra quyết định về việc thiết kế lại giao diện người dùng hoặc triển khai thêm chức năng.

Để 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 bài viết Nhà phát triển .

Mã mẫu

Bạn có thể tìm thấy một tiện ích mẫu sử dụng các kỹ thuật này trong kho lưu trữ mẫu.