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 thẻ CSS hoặc tập lệnh 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 thực hiện 4 nội dung chính:

  1. Tạo 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 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 thông 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.

Nếu 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 thập đượ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ẻ async (không đồng bộ) thay thế dưới đây hỗ trợ thêm tính năng tải trước, giúp tăng hiệu suất nhỏ trên các trình duyệt hiện đại, nhưng có thể làm giảm khả năng tải và thực thi đồng bộ trên IE 9 và các trình duyệt dành cho thiết bị di động cũ hơn không nhận ra 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 nhiều thông tin, bao gồm:

  • Tổng thời gian người dùng sử dụng trên trang web của bạn.
  • Thời gian người dùng bỏ ra 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à hoạt động kiểm tra trang ban đầu mà analytics.js thực hiện khi tạo một đố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 đang được sử dụng.
  • Kích thước màn hình và liệu bạn đã cài đặt Flash hay Java 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, bạn chỉ cần thu thập dữ liệu thông qua thẻ Google Analytics là đủ, nhưng trong nhiều trường hợp, bạn vẫn muốn được giải đáp những câu hỏi khác về người dùng.

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 hướng dẫn được liệt kê trong mục Nguyên tắc cơ bản ở 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ề các ví dụ về mã được sử dụng trên toàn bộ trang web.

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