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 nên thêm thẻ Google Analytics vào 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 sử dụng.

<!-- 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ó bốn chức năng chính:

  1. Tạo phần tử <script> bắt đầu tải 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 toàn cục (được gọi là hàng đợi lệnh ga()) cho phép bạn lập lịch để chạy các lệnh 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 một đố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.

Triển khai tùy chỉnh có thể yêu cầu sửa đổi hai dòng cuối cùng 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 tạo 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ả trình duyệt, nhưng nó có một nhược điểm là không cho phép trình duyệt hiện đại tải trước tập lệnh.

Thẻ không đồng bộ thay thế dưới đây hỗ trợ việc tải trước, giúp tăng hiệu suất một chút trên các trình duyệt hiện đại. Tuy nhiên, thẻ này có thể làm giảm tải và thực thi đồng bộ trên IE 9 và các trình duyệt cũ hơn dành cho thiết bị di động không nhận ra thuộc tính của 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 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 nào?

Khi thêm một trong các thẻ này vào trang web, bạn sẽ gửi 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ể dự đoán rất nhiều thông tin, bao gồm:

  • Tổng thời gian người dùng dành cho trang web của bạn.
  • Thời gian người dùng dành cho mỗi trang và thứ tự truy cập vào các trang đó.
  • Những đường liên kết nội bộ nào được 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 sẽ được dùng để xác định những mục như:

  • Vị trí địa lý của người dùng.
  • Trình duyệt và hệ điều hành nào đang được sử dụng.
  • Kích thước màn hình và cài đặt Flash hay Java.
  • 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ó thể thu thập đủ dữ liệu thông qua thẻ Google Analytics. Tuy nhiên, trong nhiều trường hợp, bạn có thể trả lời các câu hỏi khác về người dùng của mình.

Hướng dẫn trên trang web này giải thích cách đo lường các lượt tương tác mà bạn quan tâm bằng 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 Thông tin cơ bản trong phần điều hướng bên trái. Các 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 hoạt động của analytics.js.