Google Analytics sin conexión ahora es más fácil

Entonces, tienes una app web progresiva con un service worker que le permite funcionar sin conexión. Perfecto. Además, ya configuraste Google Analytics para tu aplicación web y no quieres perderte ninguna estadística de análisis de uso que se produce sin conexión. Sin embargo, si intentas enviar datos a Google Analytics sin conexión, esas solicitudes fallarán y los datos se perderán.

La solución, no debería sorprenderte, son los service worker. Específicamente, agrega código a tu service worker para almacenar las solicitudes de Google Analytics (con IndexedDB) y volver a intentarlo más tarde cuando haya una red disponible. Compartimos el código para manejar esta lógica como parte de la app web de Google I/O de código abierto, pero nos dimos cuenta de que era un patrón útil, y copiar y pegar código puede ser frágil.

Hoy nos complace anunciar que todo lo que necesitas para administrar las solicitudes sin conexión de Google Analytics en tu service worker se agrupó en un paquete npm: npm install --save-dev sw-offline-google-analytics

Usa sw-offline-google-analytics

Desde tu código de service worker existente, agrega lo siguiente:

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

¡Esto es todo lo que hay sobre este tema!

¿Qué está pasando en segundo plano?

sw-offline-google-analytics configura un nuevo controlador de eventos fetch en tu service worker, que responde a las solicitudes realizadas al dominio de Google Analytics. (La biblioteca ignora las solicitudes que no son de Google Analytics, lo que le brinda a los otros controladores del evento fetch de tu service worker una oportunidad de implementar estrategias adecuadas para esos recursos). Primero, intentará completar la solicitud en la red. Si el usuario está en línea, todo sucederá como de costumbre.

Si la solicitud de red falla, la biblioteca almacenará automáticamente información sobre la solicitud a IndexedDB, junto con una marca de tiempo que indica cuándo se realizó la solicitud inicialmente. Cada vez que el service worker se inicie, la biblioteca verificará si hay solicitudes en cola y, luego, intentará reenviarlas, junto con algunos parámetros adicionales de Google Analytics:

  • Un parámetro qt, que se establece en la cantidad de tiempo que transcurrió desde que se intentó realizar la solicitud por primera vez para garantizar que la hora original se atribuya correctamente.
  • Todos los parámetros y valores adicionales proporcionados en la propiedad parameterOverrides del objeto de configuración que se pasa a goog.offlineGoogleAnalytics.initialize() Por ejemplo, podrías incluir una dimensión personalizada para distinguir las solicitudes que se volvieron a enviar del service worker de aquellas que se enviaron inmediatamente.

Si se vuelve a enviar la solicitud correctamente, excelente. Se quita la solicitud de IndexedDB. Si el reintento falla y la solicitud inicial se realizó hace menos de 24 horas, se conservará en IndexedDB para volver a intentarlo la próxima vez que se inicie el service worker. Ten en cuenta que no se garantiza el procesamiento de los hits de Google Analytics que tengan más de cuatro horas. Sin embargo, volver a enviar hits un poco más antiguos "por si acaso" no debería perjudicar.

sw-offline-google-analytics también implements una estrategia de"primero la red y recurrir a la caché" para obtener el código JavaScript analytics.js real que se necesita para iniciar Google Analytics.

¡Hay más por delante!

sw-offline-google-analytics es parte del proyecto sw-helpers más grande, que es una colección de bibliotecas destinada a proporcionar mejoras directas a las implementaciones de service worker existentes.

También es parte de ese proyecto sw-appcache-behavior, una biblioteca que implementa estrategias de almacenamiento en caché definidas en un manifiesto de AppCache existente dentro de un service worker. Su objetivo es ayudarte a migrar de AppCache a service workers mientras mantienes una estrategia coherente de almacenamiento en caché, al menos al principio.

Si tienes otras ideas sobre la biblioteca, nos encantaría conocer tu opinión. Por lo tanto, envía una solicitud a través de la Herramienta de seguimiento de errores.