Google Analytics offline jadi mudah

Jadi, Anda memiliki progressive web app, lengkap dengan service worker yang memungkinkannya bekerja secara offline. Bagus. Anda juga sudah menyiapkan Google Analytics untuk aplikasi web dan tidak ingin melewatkan wawasan analitis yang berasal dari penggunaan yang terjadi saat offline. Namun, jika Anda mencoba mengirim data ke Google Analytics saat offline, permintaan tersebut akan gagal dan data tersebut akan hilang.

Solusinya, seharusnya tidak mengejutkan Anda untuk belajar, adalah service worker! Secara khusus, langkah ini adalah menambahkan kode ke pekerja layanan untuk menyimpan permintaan Google Analytics (menggunakan IndexedDB) dan mencobanya lagi nanti saat ada jaringan yang tersedia. Kami membagikan kode untuk menangani logika ini sebagai bagian dari open source aplikasi web Google I/O, tetapi menyadari bahwa ini adalah pola yang berguna, serta proses menyalin dan menempelkan kode yang mudah.

Hari ini, dengan senang hati kami umumkan bahwa semua yang Anda butuhkan untuk menangani permintaan Google Analytics offline dalam pekerja layanan Anda telah digabungkan menjadi paket npm: npm install --save-dev sw-offline-google-analytics

Menggunakan sw-offline-google-analytics

Dari dalam kode pekerja layanan yang ada, tambahkan hal berikut:

// This code should live inside your service worker JavaScript, ideally
// before any other 'fetch' event handlers are defined:

// First, import the library into the service worker global scope:
importScripts('path/to/offline-google-analytics-import.js');

// Then, call goog.offlineGoogleAnalytics.initialize():
// See https://github.com/GoogleChrome/workbox/tree/main/packages/workbox-google-analytics
goog.offlineGoogleAnalytics.initialize();

// At this point, implement any other service worker caching strategies
// appropriate for your web app.

Itu saja!

Apa yang terjadi di balik layar?

sw-offline-google-analytics menyiapkan pengendali peristiwa fetch baru di pekerja layanan Anda, yang merespons permintaan yang dibuat ke domain Google Analytics. (Library mengabaikan permintaan non-Google Analytics, sehingga memberikan pengendali peristiwa fetch lain dari pekerja layanan Anda kesempatan untuk menerapkan strategi yang sesuai bagi resource tersebut.) Pertama-tama, ini akan mencoba memenuhi permintaan terhadap jaringan. Jika pengguna online, proses akan berjalan seperti biasa.

Jika permintaan jaringan gagal, library akan otomatis menyimpan informasi tentang permintaan ke IndexedDB, beserta stempel waktu yang menunjukkan kapan permintaan tersebut pertama kali dibuat. Setiap kali pekerja layanan Anda dimulai, library akan memeriksa permintaan dalam antrean dan mencoba mengirim ulang permintaan tersebut, bersama dengan beberapa parameter Google Analytics tambahan:

  • Parameter qt, disetel ke jumlah waktu yang telah berlalu sejak permintaan pertama kali dicoba, untuk memastikan bahwa waktu asli diatribusikan dengan benar.
  • Semua parameter dan nilai tambahan yang diberikan di properti parameterOverrides objek konfigurasi akan diteruskan ke goog.offlineGoogleAnalytics.initialize(). Misalnya, Anda dapat menyertakan dimensi kustom untuk membedakan permintaan yang dikirim ulang dari pekerja layanan dengan permintaan yang langsung dikirim.

Jika pengiriman ulang permintaan berhasil, bagus. Permintaan akan dihapus dari IndexedDB. Jika percobaan ulang gagal, dan permintaan awal dibuat kurang dari 24 jam yang lalu, permintaan akan disimpan di IndexedDB untuk dicoba lagi saat pekerja layanan dimulai lagi. Perhatikan bahwa hit Google Analytics yang lebih lama dari empat jam tidak dijamin akan diproses, tetapi mengirim ulang hit yang sedikit lebih lama "untuk berjaga-jaga" tidak akan merugikan.

sw-offline-google-analytics juga implements strategi"jaringan terlebih dahulu, kembali ke cache" untuk kode JavaScript analytics.js sebenarnya yang diperlukan untuk mem-bootstrap Google Analytics.

Masih ada lagi yang akan datang!

sw-offline-google-analytics adalah bagian dari project sw-helpers yang lebih besar, yang merupakan koleksi library yang dimaksudkan untuk memberikan peningkatan langsung pada implementasi pekerja layanan yang ada.

Bagian dari project tersebut juga adalah sw-appcache-behavior, library yang menerapkan strategi caching yang ditentukan dalam manifes AppCache yang ada di dalam pekerja layanan. Ini dimaksudkan untuk membantu Anda bermigrasi dari AppCache ke pekerja layanan sambil mempertahankan strategi caching yang konsisten, setidaknya pada awalnya.

Jika Anda memiliki ide perpustakaan lain, silakan hubungi kami. Jadi, ajukan permintaan di issue tracker!