Thêm analytics.js vào trang web của bạn

Thư viện analytics.js (còn gọi là "thẻ Google Analytics") 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. Tài liệu này giải thích cách thêm thẻ Google Analytics vào trang web của bạn.

Thẻ Google Analytics

Bạn phải thêm thẻ Google Analytics ở gần đầu thẻ <head> và trước mọi tập lệnh hoặc thẻ CSS khác, đồng thời thêm mã tài sản của tài sản Google Analytics mà bạn muốn xử lý.

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Mã trên có 4 chức năng chính:

  1. Tạo một phần tử <script> bắt đầu tải xuống không đồng bộ thư viện JavaScript analytics.js từ https://www.google-analytics.com/analytics.js
  2. Khởi chạy một hàm ga chung (được gọi là hàng đợi lệnh ga()), cho phép bạn lên lịch chạy các lệnh sau khi thư viện analytics.js được tải và sẵn sàng hoạt động.
  3. Thêm một lệnh vào hàng đợi lệnh ga() để tạo đối tượng trình theo dõi mới cho thuộc tính được chỉ định qua tham số 'GA_MEASUREMENT_ID'.
  4. Thêm một lệnh khác vào hàng đợi lệnh ga() để gửi lượt xem trang đến Google Analytics cho trang hiện tại.

Để triển khai tuỳ chỉnh, bạn có thể phải sửa đổi 2 dòng cuối của thẻ Google Analytics (lệnh create và send) hoặc thêm mã bổ sung để thu được nhiều lượt tương tác hơn. Tuy nhiên, bạn không nên thay đổi mã tải thư viện analytics.js hoặc khởi chạy hàm hàng đợi lệnh ga().

Thẻ không đồng bộ thay thế

Mặc dù thẻ Google Analytics được mô tả ở trên đảm bảo tập lệnh sẽ được tải và thực thi không đồng bộ trên tất cả các trình duyệt, nhưng thẻ này có nhược điểm là không cho phép các trình duyệt hiện đại tải trước tập lệnh.

Thẻ không đồng bộ thay thế bên dưới hỗ trợ thêm tính năng tải trước, giúp tăng nhẹ hiệu suất trên các trình duyệt hiện đại, nhưng có thể làm giảm mức tải và thực thi đồng bộ trên trình duyệt IE 9 và các trình duyệt dành cho thiết bị di động cũ hơn không nhận dạng được thuộc tính tập lệnh async. Chỉ sử dụng cấu hình thẻ này nếu khách truy cập của bạn chủ yếu sử dụng trình duyệt hiện đại để truy cập vào trang web của bạn.

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

Thẻ Google Analytics thu thập dữ liệu gì?

Khi thêm một trong hai thẻ này vào trang web, bạn sẽ gửi một lượt xem trang cho mỗi trang mà người dùng truy cập. Google Analytics xử lý dữ liệu này và có thể suy ra rất nhiều thông tin bao gồm:

  • Tổng thời gian mà người dùng sử dụng trên trang web của bạn.
  • Thời gian mà người dùng sử dụng trên mỗi trang và thứ tự truy cập các trang đó.
  • Những đường liên kết nội bộ mà người dùng đã nhấp vào (dựa trên URL của lượt xem trang tiếp theo).

Ngoài ra: Địa chỉ IP, chuỗi tác nhân người dùng và yêu cầu kiểm tra trang ban đầu mà analytics.js thực hiện khi tạo đối tượng trình theo dõi mới được dùng để xác định những nội dung như:

  • Vị trí địa lý của người dùng.
  • Trình duyệt và hệ điều hành bạn đang sử dụng.
  • Kích thước màn hình và liệu bạn đã cài đặt Flash hoặc Java hay chưa.
  • Trang web giới thiệu.

Các bước tiếp theo

Đối với các nhu cầu báo cáo cơ bản, dữ liệu được thu thập thông qua thẻ Google Analytics là đủ, nhưng trong nhiều trường hợp, bạn cần trả lời thêm những câu hỏi về người dùng của mình.

Các hướng dẫn trên trang web này giải thích cách đo lường những lượt tương tác mà bạn quan tâm với analytics.js, nhưng trước khi triển khai một tính năng cụ thể, bạn nên đọc các hướng dẫn được liệt kê trong phần Nguyên tắc cơ bản trong bảng điều hướng bên trái. Những hướng dẫn này sẽ cung cấp cho bạn thông tin tổng quan cấp cao về thư viện analytics.js và giúp bạn hiểu rõ hơn về những mã ví dụ được dùng trên toàn bộ trang web.

Hướng dẫn tiếp theo trong loạt hướng dẫn này giải thích về cách hoạt động của analytics.js.