workbox-google-analytics

Jika Anda membuat 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. Artinya, jika konektivitas tidak tersedia, permintaan tersebut akan gagal dan interaksi tersebut akan hilang dari laporan analisis Anda. Seolah-olah hal itu tidak pernah terjadi.

Google Analytics Workbox mengatasi masalah ini bagi pengguna Google Analytics dengan memanfaatkan kemampuan Service Worker untuk mendeteksi permintaan yang gagal.

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

Google Analytics Workbox melakukan hal ini. Library ini juga menambahkan pengendali pengambilan untuk meng-cache skrip analytics.js dan gtag.js, sehingga skrip tersebut juga dapat dijalankan secara offline. Terakhir, saat permintaan yang gagal dicoba lagi, Google Analytics Workbox 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 Workbox

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

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

googleAnalytics.initialize();

Ini adalah satu-satunya kode yang diperlukan untuk mengantre dan mencoba ulang permintaan yang gagal ke Google Analytics, dan ini adalah cara paling sederhana untuk membuat Google Analytics berfungsi secara offline.

Namun, jika hanya menggunakan kode di atas, permintaan yang dicoba ulang tidak dapat dibedakan dari permintaan yang berhasil pada percobaan pertama. Artinya, Anda akan menerima semua data interaksi dari pengguna offline, tetapi Anda tidak akan dapat mengetahui 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 ulang dari permintaan yang tidak dicoba ulang, 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 ulang. 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 diputar ulang oleh pekerja layanan menggunakan dimensi kustom dengan Google Analytics Workbox, ikuti langkah-langkah berikut:

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

  2. Perhatikan 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 adalah 8, nilainya adalah cd8):

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

googleAnalytics.initialize({
  parameterOverrides: {
    cd1: 'offline',
  },
});

  3. (Opsional) Karena nilai di parameterOverrides hanya diterapkan untuk permintaan yang dicoba ulang ("offline"), Anda juga dapat menetapkan nilai default "online" untuk semua permintaan lainnya. Meskipun tidak mutlak diperlukan, hal ini akan membuat laporan Anda lebih mudah dibaca.

    Misalnya, jika Anda 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 diputar ulang 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 waktu yang dihabiskan permintaan dalam antrean

Jika ingin mengetahui berapa banyak waktu yang telah berlalu antara saat interaksi offline terjadi dan 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 "Waktu Antrean Offline", tetapkan cakupannya ke "hit", dan tetapkan jenis pemformatannya ke "Waktu" (dalam detik).

  2. Gunakan opsi hitFilter untuk mendapatkan nilai param qt dan bagi dengan 1000 (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 Google Analytics Workbox

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

Jenis

GoogleAnalyticsInitializeOptions

Properti

  • cacheName

    string opsional

  • parameterOverrides

    objek opsional

  • hitFilter

    void opsional

    Fungsi hitFilter terlihat seperti: 

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

    • params

      URLSearchParams

Metode

initialize()

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

Parameter