Offline-Google Analytics leicht gemacht

Sie haben also eine Progressive Web-App mit einem Service Worker, mit dem Sie auch offline arbeiten können. Sehr gut! Außerdem haben Sie Google Analytics für Ihre Webanwendung eingerichtet und möchten keine Analysedaten verpassen, die sich aus der Offlinenutzung ergeben. Wenn Sie jedoch versuchen, Daten an Google Analytics zu senden, während Sie offline sind, schlagen diese Anfragen fehl und die Daten gehen verloren.

Die Lösung – es sollte Sie nicht überraschen, sind Service Worker! Konkret wird Ihrem Service Worker Code hinzugefügt, um Google Analytics-Anfragen (mit IndexedDB) zu speichern und sie später noch einmal zu versuchen, wenn hoffentlich ein Netzwerk verfügbar ist. Wir haben Code freigegeben, um diese Logik im Rahmen der Open-Source-Google I/O-Webanwendung zu verarbeiten. Dabei haben wir jedoch erkannt, dass dies ein nützliches Muster ist und das Kopieren und Einfügen von Code fehleranfällig sein kann.

Wir freuen uns, Ihnen heute mitteilen zu können, dass alles, was Sie zur Verarbeitung von Google Analytics-Offlineanfragen innerhalb Ihres Service Worker benötigen, in einem npm-Paket enthalten ist: npm install --save-dev sw-offline-google-analytics

sw-offline-google-analytics verwenden

Fügen Sie in Ihrem vorhandenen Service Worker-Code Folgendes hinzu:

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

Das ist keine Kunst!

Was ist da los?

Mit sw-offline-google-analytics wird ein neuer fetch-Event-Handler in Ihrem Service Worker eingerichtet, der auf Anfragen an die Google Analytics-Domain antwortet. Die Bibliothek ignoriert Anfragen, die nicht von Google Analytics stammen, sodass die anderen fetch-Event-Handler Ihres Service Workers die Möglichkeit haben, geeignete Strategien für diese Ressourcen zu implementieren. Sie versucht zuerst, die Anfrage an das Netzwerk zu erfüllen. Wenn der Nutzer online ist, wird der Vorgang wie gewohnt durchgeführt.

Wenn die Netzwerkanfrage fehlschlägt, speichert die Bibliothek Informationen über die Anfrage an IndexedDB automatisch zusammen mit einem Zeitstempel, der angibt, wann die Anfrage ursprünglich gestellt wurde. Bei jedem Start des Service Workers sucht die Bibliothek nach Anfragen in der Warteschlange und versucht sie, diese Anfragen noch einmal zu senden. Außerdem werden einige zusätzliche Google Analytics-Parameter unterstützt:

  • Einen qt-Parameter, der auf die Zeitdauer festgelegt ist, die seit dem ersten Versuch der Anfrage vergangen ist, um sicherzustellen, dass die ursprüngliche Zeit korrekt zugeordnet wird.
  • Alle zusätzlichen Parameter und Werte, die in der Eigenschaft parameterOverrides des Konfigurationsobjekts angegeben werden und an goog.offlineGoogleAnalytics.initialize() übergeben werden. Beispielsweise können Sie eine benutzerdefinierte Dimension einbinden, um die Anfragen zu unterscheiden, die noch einmal vom Service Worker gesendet wurden, und solche, die sofort gesendet wurden.

Wenn die erneute Anfrage erfolgreich war, ist das großartig! Die Anfrage wird aus IndexedDB entfernt. Wenn der Wiederholungsversuch fehlschlägt und die erste Anfrage vor weniger als 24 Stunden gestellt wurde, wird sie unter IndexedDB gespeichert und beim nächsten Start des Service Workers wiederholt. Google Analytics-Treffer, die älter als vier Stunden sind, werden zwar nicht zwangsläufig verarbeitet. Das erneute Senden von älteren Treffern sollte jedoch nicht schaden.

sw-offline-google-analytics implements außerdem eine Strategie vom Typ „Netzwerk zuerst“, bei der auf den Cache zurückgegriffen wird, und zwar für den analytics.js-JavaScript-Code, der für das Bootstrapping von Google Analytics erforderlich ist.

Aber es gibt noch mehr zu entdecken!

sw-offline-google-analytics ist Teil des größeren sw-helpers-Projekts, das eine Sammlung von Bibliotheken umfasst, die Drop-in-Erweiterungen für bestehende Service Worker-Implementierungen bieten sollen.

Zu diesem Projekt gehört auch sw-appcache-behavior, eine Bibliothek, die Caching-Strategien implementiert, die in einem vorhandenen AppCache-Manifest innerhalb eines Service Workers definiert sind. Es soll Ihnen dabei helfen, von AppCache zu Service Workern zu migrieren und dabei zumindest am Anfang eine konsistente Caching-Strategie beizubehalten.

Wenn Sie weitere Ideen für die Bibliothek haben, freuen wir uns darauf, von Ihnen zu hören. Bitte stellen Sie daher im Issue Tracker einen Antrag.