workbox-google-analytics

Si estás compilando una aplicación que funciona sin conexión, entender la forma en que los usuarios interactúan con tu app cuando no tienen conectividad es crucial para optimizar esa experiencia.

Los proveedores de estadísticas, como Google Analytics, requieren una conexión de red para enviar datos a sus servidores, lo que significa que, si la conectividad no está disponible, esas solicitudes fallarán y esas interacciones no aparecerán en tus informes de estadísticas. Será como si nunca hubieran existido.

Workbox Google Analytics resuelve este problema para los usuarios de Google Analytics aprovechando la capacidad del trabajador de servicio para detectar solicitudes fallidas.

Google Analytics recibe todos los datos a través de solicitudes HTTP al Protocolo de medición, lo que significa que una secuencia de comandos de Service Worker puede agregar un controlador de recuperación para detectar solicitudes fallidas que se envían al Protocolo de medición. Puede almacenar estas en IndexedDB y volver a intentarlo más tarde cuando la conectividad restaurado.

Google Analytics de Workbox hace exactamente esto. También agrega controladores de recuperación para almacenar en caché las secuencias de comandos analytics.js y gtag.js, de modo que también se puedan ejecutar sin conexión. Por último, cuando se vuelven a intentar las solicitudes que fallaron, Workbox Google Analytics también establece (o actualiza) automáticamente el qt en la carga útil de la solicitud para garantizar que las marcas de tiempo de Google Analytics reflejen la hora de la interacción original del usuario.

Habilita Workbox de Google Analytics

Para habilitar Google Analytics de Workbox, llama al método initialize():

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

googleAnalytics.initialize();

Este es el único código que se requiere para poner en cola y volver a intentar las solicitudes fallidas a Google Analytics, y es la forma más sencilla de hacer que Google Analytics funcione sin conexión.

Sin embargo, si usas solo el código anterior, las solicitudes que se reintentaron son indistinguibles de las solicitudes que tienen éxito en el primer intento. Esto significa recibirás todos los datos de interacción de los usuarios sin conexión, pero no ser capaz de detectar las interacciones que ocurrieron mientras el usuario estaba sin conexión.

Para abordar esta inquietud, puedes usar una de las opciones de configuración que se describen a continuación para modificar o anotar los datos que se envían en la solicitud que se vuelve a intentar.

Modificar qué datos se envían

Si deseas poder diferenciar las solicitudes que se reintentaron de las que no se reintentaron, puedes especificar las opciones de configuración parameterOverrides o hitFilter.

Estas opciones te permiten modificar los parámetros del Protocolo de medición que se envían en la solicitud reintentada. La opción parameterOverrides se debe usar cuando quieres establecer el mismo valor para un para cada solicitud que se vuelve a intentar. Se debe usar la opción hitFilter en casos en los que el valor de un parámetro en particular deba calcularse de tiempo de ejecución o que se derivan del valor de otro parámetro.

En los siguientes ejemplos, se muestra cómo usar ambas opciones.

Ejemplos

Cómo usar una dimensión personalizada para hacer un seguimiento de las interacciones en línea y sin conexión

Google Analytics no tiene una dimensión integrada para las interacciones en línea y sin conexión. Sin embargo, puedes crear tu propia dimensión con este fin con una función llamada dimensiones personalizadas.

Para hacer un seguimiento de las solicitudes que volvió a reproducir el trabajador del servicio con una dimensión personalizada con Google Analytics de Workbox, sigue estos pasos:

  1. Crea una nueva dimensión personalizada en Google Analytics. Asóciale un nombre, como "Estado de la red", y establece su alcance en "hit" (ya que cualquier interacción puede ser sin conexión).

  2. Anota el índice asignado para la dimensión recién creada y pásalo como el nombre del parámetro a la opción de configuración parameterOverrides en tu código de Google Analytics de Workbox.

    Por ejemplo, si esta es tu primera dimensión personalizada, su índice sería 1, y el nombre del parámetro sería cd1 (si el índice fuera 8, sería cd8):

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

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

  3. (Opcional) Dado que solo se aplican los valores de parameterOverrides para reintentar las solicitudes ("sin conexión"), también puedes establecer un valor predeterminado de "en línea" para todas las demás solicitudes. Aunque esto no es estrictamente necesario, facilitará la lectura de los informes.

    Por ejemplo, si usaste el fragmento de seguimiento analytics.js predeterminado para instalar Google Analytics, puedes agregar la línea ga('set', 'dimension1', 'online') para usar un valor predeterminado de 'online' para tu dimensión personalizada "Estado de la red" para todas las solicitudes que el trabajador del servicio no vuelva a reproducir.

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

Usar una métrica personalizada para hacer un seguimiento del tiempo de las solicitudes empleadas en la cola

Si quisieras saber cuánto tiempo transcurrió entre el momento en que se generó interacción y cuando se restableció la conectividad y la solicitud se intentado realizar con éxito, puedes realizar el seguimiento mediante un métrica personalizada y La opción de configuración hitFilter:

  1. Cómo crear una métrica personalizada nueva en Google Analytics. Asóciale un nombre, como "Tiempo de cola sin conexión", configura su alcance como "hit" y establece su tipo de formato como "Tiempo" (en segundos).

  2. Usa la opción hitFilter para obtener el valor del parámetro qt y dividirlo por 1000 (para convertirlo en segundos). Luego, establece ese valor como un parámetro con el índice de la métrica recién creada. Si esta es tu primera métrica personalizada, el nombre del parámetro sería 'cm1': 

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

googleAnalytics.initialize({
  hitFilter: (params) => {
    const queueTimeInSeconds = Math.round(params.get('qt') / 1000);
    params.set('cm1', queueTimeInSeconds);
  },
});

Cómo probar Google Analytics de Workbox

Como Workbox Google Analytics usa la sincronización en segundo plano para volver a reproducir eventos, puede no ser intuitivo para probarlo. Obtén más información en Cómo probar la sincronización en segundo plano de Workbox.

Tipos

GoogleAnalyticsInitializeOptions

Propiedades

  • cacheName

    string opcional

  • parameterOverrides

    objeto opcional

  • hitFilter

    void opcional

    La función hitFilter se ve de la siguiente manera: 

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

    • params

      URLSearchParams

Métodos

initialize()

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

Parámetros