Workbox, Google Analytics

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

Nhà cung cấp dịch vụ phân tích như Google Analytics cần có kết nối mạng để gửi dữ liệu đến máy chủ của họ, nghĩa là nếu không có kết nối, thì các yêu cầu đó sẽ không thành công và những lượt tương tác đó sẽ bị thiếu trong báo cáo phân tích của bạn. 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 các yêu cầu không thành công của Service Worker.

Google Analytics nhận tất cả dữ liệu đến Measurement Protocol qua các yêu cầu HTTP, tức là tập lệnh Service Worker 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. Ứng dụng có thể lưu trữ các yêu cầu này trong IndexedDB và sau đó thử lại sau khi khả năng kết nối được 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 trình xử lý tìm nạp vào bộ nhớ đệm các tập lệnh analytics.js và gtag.js, để các trình xử lý này cũng có thể chạy ngoại tuyến. Cuối cùng, khi các yêu cầu không thành công được thử lại, Google Analytics của Hộp công việc cũng sẽ 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 của người dùng ban đầu.

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 thiết để xếp hàng và thử lại các yêu cầu không thành công tới Google Analytics và là cách đơn giản nhất để khiến Google Analytics hoạt động khi không có mạng.

Tuy nhiên, nếu chỉ sử dụng mã ở trên, thì bạn sẽ không thể phân biệt các yêu cầu đã thử lại với các yêu cầu thành công trong 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 thể biết lượ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 mối lo ngại 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 muốn phân biệt các yêu cầu đã thử lại với các yêu cầu không được thử lại, bạn có thể chỉ định các tuỳ chọn cấu hình parameterOverrides hoặc hitFilter.

Các tuỳ chọn này cho phép bạn sửa đổi các thông số của 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ể đối với mọi yêu cầu được thử lại. Bạn nên sử dụng tuỳ chọn hitFilter trong các trường hợp cần tính giá trị của một tham số cụ thể trong thời gian chạy hoặc bắt nguồn từ giá trị của một tham số khác.

Các ví dụ bên dưới cho thấy cách bạn sử dụng cả hai lựa chọn.

Ví dụ

Sử dụng một 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 được tích hợp sẵn cho 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 riêng cho mục đích này bằng cách sử dụng tính năng có tên là phương diện tuỳ chỉnh.

Để theo dõi các yêu cầu do trình chạy 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 của Workbox, hãy làm theo các bước sau:

  1. Tạo thứ nguyên tùy chỉnh mới trong Google Analytics. Đặt tên cho mạng, chẳng hạn như "Trạng thái mạng" và đặt phạm vi thành "lượt truy cập" (vì bất kỳ lượt tương tác nào cũng có thể ở chế độ ngoại tuyến).

  2. Ghi lại chỉ mục được chỉ định cho phương diện mới tạo và chuyển chỉ mục đó dưới dạng tên thông số vào lựa 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 này sẽ là 1 và tên thông số sẽ là cd1 (nếu chỉ mục là 8 thì chỉ mục 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 đã thử lại ("ngoại tuyến"), nên bạn cũng có thể đặt giá trị mặc định là "trực tuyến" cho tất cả các yêu cầu khác. Mặc dù không thực sự cần thiết, nhưng việc này sẽ giúp các báo cáo của bạn dễ đọc hơn.

    Ví dụ: nếu sử dụng đoạn mã theo dõi analytics.js mặc định để cài đặt Google Analytics, thì bạn có thể thêm dòng ga('set', 'dimension1', 'online') để sử dụng giá trị mặc định là 'online' cho phương diện tuỳ chỉnh "Trạng thái mạng" cho tất cả các 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ố tùy chỉnh để theo dõi các yêu cầu về thời gian dành cho hàng đợi

Nếu muốn biết khoảng thời gian đã trôi qua từ khi một lượt tương tác ngoại tuyến diễn ra cho đến khi khả năng kết nối được khôi phục và yêu cầu được thử lại thành công, bạn có thể theo dõi khoảng thời gian 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ố tùy chỉnh mới trong Google Analytics. Đặt tên cho nút này như "Thời gian chờ ngoại tuyến", đặt phạm vi thành "lần 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 rồi chia giá trị đó cho 1000 (để chuyển đổi thành giây). Sau đó, hãy đặt giá trị đó dưới dạng tham số với chỉ mục của chỉ số mới tạo. Nếu đây là chỉ số tuỳ chỉnh đầu tiên của bạ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 Google Analytics

Vì Google Analytics của 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 việc kiểm thử có thể là không trực quan. Vui lòng đọc thêm tại bài viết Kiểm thử tính năng đồng bộ hoá nền Workbox.

Loại

GoogleAnalyticsInitializeOptions

Thuộc tính

  • cacheName

    chuỗi không bắt buộc

  • parameterOverrides

    đối tượng không bắt buộc

  • hitFilter

    khoảng trống không bắt buộc

    Hàm hitFilter sẽ có dạng như sau: 

    (params: URLSearchParams)=> {...}

    • params

      URLSearchParams

Phương thức

initialize()

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

Tham số