workbox-google-analytics

Jika Anda membangun aplikasi yang berfungsi secara offline, memahami cara pengguna berinteraksi dengan aplikasi Anda saat mereka tidak memiliki konektivitas sangat penting untuk mengoptimalkan pengalaman tersebut.

Penyedia analisis seperti Google Analytics memerlukan koneksi jaringan untuk mengirim data ke server mereka, yang berarti jika konektivitas tidak tersedia, permintaan tersebut akan gagal dan interaksi tersebut akan hilang dari laporan analisis Anda. Ini akan seperti tidak pernah terjadi.

Workbox Google Analytics mengatasi masalah ini untuk pengguna Google Analytics dengan memanfaatkan kemampuan Pekerja Layanan untuk mendeteksi permintaan yang gagal.

Google Analytics menerima semua data melalui permintaan HTTP ke Measurement Protocol, yang berarti skrip Pekerja Layanan dapat menambahkan pengendali pengambilan untuk mendeteksi permintaan yang gagal yang dikirim ke Measurement Protocol. Kode ini dapat menyimpan permintaan ini di IndexedDB, lalu mencobanya lagi nanti setelah konektivitas dipulihkan.

Google Analytics Workbox melakukan hal ini. API ini juga menambahkan pengendali pengambilan untuk menyimpan skrip analytics.js dan gtag.js ke cache, sehingga keduanya juga dapat dijalankan secara offline. Terakhir, saat permintaan yang gagal dicoba ulang, Workbox Google Analytics juga akan otomatis menetapkan (atau memperbarui) qt dalam payload permintaan untuk memastikan stempel waktu di Google Analytics mencerminkan waktu interaksi pengguna asli.

Mengaktifkan Google Analytics untuk Workbox

Untuk mengaktifkan Google Analytics Workbox, panggil metode initialize():

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

googleAnalytics.initialize();

Kode ini adalah satu-satunya kode yang diperlukan untuk mengantrekan dan mencoba lagi permintaan yang gagal ke Google Analytics, dan merupakan cara termudah untuk membuat Google Analytics berfungsi secara offline.

Namun, jika hanya menggunakan kode di atas, permintaan yang dicoba lagi tidak akan dapat dibedakan dengan permintaan yang berhasil pada percobaan pertama. Ini berarti Anda akan menerima semua data interaksi dari pengguna offline, namun Anda tidak akan dapat membedakan interaksi mana yang terjadi saat pengguna sedang offline.

Untuk mengatasi masalah ini, Anda dapat menggunakan salah satu opsi konfigurasi yang dijelaskan di bawah untuk mengubah atau menganotasi data yang dikirim dalam permintaan yang dicoba ulang.

Mengubah data yang dikirim

Jika ingin dapat membedakan permintaan yang dicoba lagi dengan permintaan yang tidak dicoba, Anda dapat menentukan opsi konfigurasi parameterOverrides atau hitFilter.

Opsi ini memungkinkan Anda mengubah parameter Measurement Protocol yang dikirim dalam permintaan yang dicoba ulang. Opsi parameterOverrides harus digunakan jika Anda ingin menetapkan nilai yang sama untuk parameter tertentu untuk setiap permintaan yang dicoba lagi. Opsi hitFilter harus digunakan jika nilai parameter tertentu perlu dihitung saat runtime atau berasal dari nilai parameter lain.

Contoh di bawah menunjukkan cara menggunakan kedua opsi tersebut.

Contoh

Menggunakan dimensi kustom untuk melacak interaksi online vs. offline

Google Analytics tidak memiliki dimensi bawaan untuk interaksi online vs. offline. Namun, Anda dapat membuat dimensi sendiri untuk tujuan ini menggunakan fitur yang disebut dimensi kustom.

Untuk melacak permintaan yang di-replay oleh pekerja layanan menggunakan dimensi kustom dengan Workbox Google Analytics, ikuti langkah-langkah berikut:

1. Buat dimensi kustom baru di Google Analytics. Beri nama seperti "Status Jaringan" dan tetapkan cakupan ke "hit" (karena interaksi apa pun dapat offline).

2. Catat indeks yang ditetapkan untuk dimensi yang baru dibuat dan teruskan sebagai nama parameter ke opsi konfigurasi parameterOverrides dalam kode Google Analytics Workbox Anda.

   Misalnya, jika ini adalah dimensi kustom pertama Anda, indeksnya adalah 1, dan nama parameternya adalah cd1 (jika indeksnya 8, indeksnya adalah cd8):

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

3. (Opsional) Karena nilai dalam parameterOverrides hanya diterapkan ke permintaan yang dicoba ulang ("offline"), Anda juga dapat menetapkan nilai default "online" untuk semua permintaan lainnya. Meskipun tidak sepenuhnya diperlukan, hal ini akan membuat laporan Anda lebih mudah dibaca.
   
   Misalnya, jika menggunakan cuplikan pelacakan analytics.js default untuk menginstal Google Analytics, Anda dapat menambahkan baris ga('set', 'dimension1', 'online') untuk menggunakan nilai default 'online' untuk dimensi kustom "Status Jaringan" untuk semua permintaan yang tidak di-replay oleh pekerja layanan.

   <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>
   

Menggunakan metrik kustom untuk melacak permintaan waktu yang dihabiskan dalam antrean

Jika Anda ingin tahu berapa lama waktu yang berlalu antara saat interaksi offline terjadi hingga saat konektivitas dipulihkan dan permintaan berhasil dicoba lagi, Anda dapat melacaknya menggunakan metrik kustom dan opsi konfigurasi hitFilter:

1. Buat metrik kustom baru di Google Analytics. Beri nama seperti "Offline Queue Time", tetapkan cakupan ke "hit", dan tetapkan jenis pemformatannya ke "Time" (dalam detik).

2. Gunakan opsi hitFilter untuk mendapatkan nilai parameter qt dan bagi dengan 1.000 (untuk mengonversinya menjadi detik). Kemudian, tetapkan nilai tersebut sebagai parameter dengan indeks metrik yang baru dibuat. Jika ini adalah metrik kustom pertama Anda, nama parameternya adalah 'cm1':

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

Menguji Workbox Google Analytics

Karena Workbox Google Analytics menggunakan Sinkronisasi Latar Belakang untuk memutar ulang peristiwa, pengujiannya mungkin tidaklah intuitif. Baca selengkapnya di Menguji Sinkronisasi Latar Belakang Workbox.

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