Workbox, Google Analytics

Nếu bạn đang xây dựng một ứng dụng có thể hoạt động ngoại tuyến, thì việc tìm hiểu cách người dùng tương tác với ứng dụng của bạn khi họ không có kết nối là rất quan trọng để tối ưu hoá trải nghiệm đó.

Các nhà cung cấp Analytics như Google Analytics yêu cầu một mạng để gửi dữ liệu đến máy chủ của họ, tức là nếu kết nối thì các yêu cầu đó sẽ không thực hiện được và các tương tác đó sẽ thiếu trong báo cáo phân tích của bạn. Những việc này sẽ cứ như thể chúng chưa từng xảy ra.

Workbox Google Analytics giải quyết vấn đề này cho người dùng Google Analytics bằng cách tận dụng khả năng phát hiện yêu cầu không thành công của Worker.

Google Analytics nhận tất cả dữ liệu thông qua các yêu cầu HTTP đến Measurement Protocol, nghĩa là tập lệnh của Worker dịch vụ có thể thêm trình xử lý tìm nạp để phát hiện các yêu cầu không thành công được gửi đến Measurement Protocol. Trình quản lý thẻ của Google có thể lưu trữ những thông tin này các yêu cầu trong IndexedDB rồi thử lại sau khi đã kết nối xong đã khôi phục.

Google Analytics của Workbox thực hiện chính xác việc này. Thao tác này cũng thêm hoạt động tìm nạp để lưu vào bộ nhớ đệm analytics.js và gtag.js để các tập lệnh này cũng có thể chạy ngoại tuyến. Cuối cùng, khi yêu cầu không thành công đã thử lại, Workbox Google Analytics cũng tự động đặt (hoặc cập nhật) qt trong tải trọng yêu cầu để đảm bảo dấu thời gian trong Google Analytics phản ánh thời gian tương tác ban đầu của người dùng.

Bật Google Analytics cho Workbox

Để bật Google Analytics cho Workbox, hãy gọi phương thức initialize():

import * as googleAnalytics from 'workbox-google-analytics';

googleAnalytics.initialize();

Đây là mã duy nhất cần có để xếp hàng và thử lại các yêu cầu không thành công để Google Analytics và đó là cách đơn giản nhất để Google Analytics hoạt động ngoại tuyến.

Tuy nhiên, nếu chỉ sử dụng mã ở trên, thì các yêu cầu thử lại sẽ không thể phân biệt với các yêu cầu thành công ở lần thử đầu tiên. Điều này có nghĩa là bạn sẽ nhận được tất cả dữ liệu tương tác từ người dùng ngoại tuyến, nhưng bạn sẽ không có thể biết tương tác nào đã xảy ra khi người dùng không có kết nối mạng.

Để giải quyết vấn đề này, bạn có thể sử dụng một trong các tuỳ chọn cấu hình được mô tả bên dưới để sửa đổi hoặc chú thích dữ liệu được gửi trong yêu cầu thử lại.

Sửa đổi dữ liệu được gửi

Nếu bạn muốn có thể phân biệt các yêu cầu đã thử lại với các yêu cầu chưa thử lại yêu cầu, bạn có thể chỉ định parameterOverrides hoặc hitFilter tuỳ chọn cấu hình.

Các tuỳ chọn này cho phép bạn sửa đổi Tham số Measurement Protocol được gửi trong yêu cầu được thử lại. Bạn nên sử dụng tuỳ chọn parameterOverrides khi muốn đặt cùng một giá trị cho một tham số cụ thể cho mọi yêu cầu thử lại. Bạn nên sử dụng tuỳ chọn hitFilter trong trường hợp cần tính toán giá trị của một tham số cụ thể tại thời gian chạy hoặc lấy từ giá trị của một tham số khác.

Các ví dụ dưới đây cho thấy cách bạn sử dụng cả hai tuỳ chọn.

Ví dụ

Sử dụng phương diện tuỳ chỉnh để theo dõi lượt tương tác trực tuyến so với lượt tương tác ngoại tuyến

Google Analytics không có phương diện tích hợp sẵn cho các lượt tương tác trực tuyến so với ngoại tuyến. Tuy nhiên, bạn có thể tạo phương diện của riêng mình cho mục đích này bằng cách sử dụng tính năng phương diện tuỳ chỉnh.

Để theo dõi các yêu cầu mà worker dịch vụ đã phát lại bằng cách sử dụng một phương diện tuỳ chỉnh với Google Analytics Workbox, hãy làm theo các bước sau:

1. Tạo phương diện tuỳ chỉnh mới trong Google Analytics. Đặt tên cho trạng thái mạng là "Trạng thái mạng" và thiết lập phạm vi "lượt truy cập" (vì mọi tương tác đều có thể ngoại tuyến).

2. Ghi lại chỉ mục được chỉ định cho phương diện mới tạo và bỏ qua đó là tên tham số cho tuỳ chọn cấu hình parameterOverrides trong mã Google Analytics của Workbox.

   Ví dụ: nếu đây là phương diện tuỳ chỉnh đầu tiên của bạn, thì chỉ mục của phương diện đó sẽ là 1 và tên tham số sẽ là cd1 (nếu chỉ mục là 8 thì tên tham số sẽ là cd8):

   import * as googleAnalytics from 'workbox-google-analytics';
   
   googleAnalytics.initialize({
     parameterOverrides: {
       cd1: 'offline',
     },
   });
   

3. (Không bắt buộc) Vì các giá trị trong parameterOverrides chỉ được áp dụng cho các yêu cầu ("ngoại tuyến") được thử lại, bạn cũng có thể muốn đặt giá trị mặc định trong số "trực tuyến" cho tất cả các yêu cầu khác. Mặc dù không bắt buộc, nhưng việc này sẽ giúp báo cáo của bạn dễ đọc hơn.
   
   Ví dụ: nếu bạn đã sử dụng đoạn mã theo dõi analytics.js mặc định để cài đặt Google Analytics, bạn có thể thêm dòng ga('set', 'dimension1', 'online') để sử dụng giá trị mặc định là 'online' cho "Trạng thái mạng" của bạn phương diện tuỳ chỉnh cho mọi yêu cầu không được trình chạy dịch vụ phát lại.

   <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');
   
     // Set default value of custom dimension 1 to 'online'
     ga('set', 'dimension1', 'online');
   
     ga('send', 'pageview');
   </script>
   

Sử dụng chỉ số tuỳ chỉnh để theo dõi thời gian yêu cầu trong hàng đợi

Nếu muốn biết khoảng thời gian đã trôi qua giữa thời điểm diễn ra một lượt tương tác ngoại tuyến và thời điểm kết nối được khôi phục cũng như yêu cầu được thử lại thành công, bạn có thể theo dõi thông tin này bằng cách sử dụng chỉ số tuỳ chỉnh và tuỳ chọn cấu hình hitFilter:

1. Tạo chỉ số tuỳ chỉnh mới trong Google Analytics. Đặt tên cho chỉ số này như "Thời gian xếp hàng ngoại tuyến", đặt phạm vi thành "lượt truy cập" và đặt loại định dạng thành "Thời gian" (tính bằng giây).

2. Sử dụng tuỳ chọn hitFilter để lấy giá trị của tham số qt và chia cho 1000 (để chuyển đổi thành giây). Sau đó, đặt giá trị đó dưới dạng tham số cùng với chỉ mục của chỉ số mới được tạo. Nếu đây là chỉ số tùy chỉnh đầu tiên, tên thông số sẽ là 'cm1':

   import * as googleAnalytics from 'workbox-google-analytics';
   
   googleAnalytics.initialize({
     hitFilter: (params) => {
       const queueTimeInSeconds = Math.round(params.get('qt') / 1000);
       params.set('cm1', queueTimeInSeconds);
     },
   });
   

Kiểm thử Workbox với Google Analytics

Vì Google Analytics Workbox sử dụng tính năng Đồng bộ hoá trong nền để phát lại các sự kiện, nên bạn có thể không dễ dàng kiểm thử. Đọc thêm tại Kiểm thử tính năng đồng bộ hoá dưới nền hộp làm việc.

workbox-google-analytics.initialize(
  options?: GoogleAnalyticsInitializeOptions,
)