Google Analytics en Progresive Web Apps (PWA)

Índice de contenidos

Las Progresive Web Apps (PWA, o aplicaciones web progresivas) representan una solución intermedia entre la web y las apps, propuesta por Google, que pretende reunir lo mejor de ambos entornos y que tiene muchas papeletas para crecer con fuerza en el futuro.

En esencia se trata de páginas web hechas con frameworks javascript (Angular, React, Vue…), y por lo tanto visitables con un navegador e indexables por los buscadores, pero también tienen una parte de comportamiento de app, lo que permite que se indexen en las app stores, que se puedan usar sin conexión, o que dispongan de notificaciones push nativas. Y, aunque realmente no están instaladas en el móvil, si podemos tener su icono para que la experiencia de uso sea lo más parecido a una app nativa.

Técnicamente una PWA es una aplicación javascript a la que se le añaden un archivo Manifest que se encarga de que se pueda añadir el icono al escritorio y un service worker con la función de cachear el contenido y permitir el uso offline o las notificaciones push. Puedes conocer más ellas en «How to turn your website into a PWA».

Pero desde el punto de vista de la analítica web, las PWA ofrecen nuevos retos para medir una mezcla de interacciones que a veces se producen en la parte de la aplicación javascript, otras en el service worker y otras «en el manifest», lo que nos obliga a usar una mezcla de soluciones de implementación que van desde los push al dataLayer de GTM, hasta el uso del protocolo de medición, dependiendo de la acción que necesitemos medir.

En principio, la implementación de Google Analytics (con GTM) en PWA se basa en las implementaciones web estándar en javascript, teniendo en cuenta que el comportamiento puede ser el de una SPA, lo que nos obligará a usar el trigger de cambio de historial de GTM o a lanzar eventos en el push. Pero además podemos querer medir ciertos elementos distintivos de las PWA.

Aplicación instalada

Sin duda será interesante analizar los usuarios que instalan la aplicación en lugar de usarla desde el navegador. Para ello usaremos el siguiente código:

window.addEventListener('appinstalled', function(event) {
  window.dataLayer.push({
    'event':'eventoGA',
    'eventCat':'pwa',
    'eventAct':'instalada',
  });
};

Pero podemos ir más allá. Algunos navegadores pueden mostrar una invitación a instalar la app si se cumplen determinadas condiciones, de modo que también podemos medir cuando aparece y si se acepta o rechaza.

window.addEventListener('beforeinstallprompt', function(e) {
  window.dataLayer.push({
    'event':'virtualPage',
    'pageURL':'/vp/addToHome/',
  });
  e.userChoice.then(function(choiceResult) {
    window.dataLayer.push({
      'event':'eventoGA',
      'eventCat':'pwa',
      'eventAct':'add_to_home',
      'eventLbl': choiceResult.outcome      //outcome toma el valor dimissed o acepted
    });
  });
});

En la web de desarrolladores de Google puede encontrarse más información sobre los banners de instalación de pwa.

Aperturas de la app

Una vez que la PWA está instalada como app en el dispositivo, puede ser interesante saber cuando un usuario accede desde su icono. Para ello podemos usar el archivo Manifest.xml añadiendo parámetros de campaña a la URL de inicio con «start_url».

{
  "name": "PWA App",
  "short_name": "PWA App",
  "description": "descripción de la app",
  "start_url":  "/?utm_source=homescreen&utm_medium=homescreen",
  "display": "standalone",
  "..."
}

Otra forma de medir si se está usando la app instalada o accediendo a la web desde un navegador puede ser creando una variable de control a partir del modo de visualización definido en el manifest, que luego usaremos para mandar el evento que queramos, o bien mandar su valor como una dimensión personalizada.

var isPWAinBrowser = true;
// reemplazar 'standalone' por 'fullscreen' o 'minimal-ui' según el manifest de la app
if (matchMedia('(display-mode: standalone)').matches) {
  // iOS 11.3+ y Android
  isPWAinBrowser = false;
} else if ('standalone' in navigator) {
  // para iOS < 11.3
  isPWAinBrowser = !navigator.standalone;
}

Notificaciones

Una PWA puede ofrecer al usuario la posibilidad de recibir notificaciones push nativas, debiendo este aceptarlas o rechazarlas.

Para hacer el seguimiento de cuando el usuario acepta recibir notificaciones nativas se utilizará el método registration.pushManager.subscribe(), actualizando el dataLayer cuando acepte o rechace. Puede encontrarse más información en la web de desarrolladores de Google.

registration.pushManager.suscribe({userVisibleOnly: true})
.then(
  function(subscription) {
    //Evento si el usuario acepta las notificaciones
  })
.catch(function(err){
    //Evento si el usuario rechaza las notificaciones
});

Además, para hacer el seguimiento de la interacción con las notificaciones emplearemos el evento notificationclick, y enviando el hit directamente a Google Analytics mediante el protocolo de medición, puesto que en los service workers no podemos acceder al objeto window. Puede encontrarse más información en la web de desarrolladores de Google, incluyendo la forma de medir acciones sobre botones concretos de las notificaciones.

self.addEventListener('notificationclick', function(event) {
  const clickedNotification = event.notification;
  clickedNotification.close();
  event.waitUntil(
    fetch('https://www.google-analytics.com/collect', {
      method: 'post',
      body: 'v=1&t=event&tid=UA-111111111-1&uid=user-id'+
            '&ds=web&dh=host.com&dp=%2Fvp%2Falert-pwa'+
            '&ec=pwa&ea=notification&el=clic'
    });
  );
});

En el parámetro tid se especificará el ID de la vista correspondiente a la PWA.

En el parámetro uid se especificará el valor del ID de usuario, o bien se puede sustituir el uid por el cid y especificar el clientID de Google Analitycs.

En el parámetro dh se especificará el nombre completo del host.

Hits offline

Una PWA cachea el contenido para permitir su uso si no hay conectividad. Cuando la app funciona offline los hits de Google Analytics no se pueden enviar normalmente, puesto que el servidor de Google no está accesible. Para poder seguir registrándolos hay que utilizar el módulo Offline Analytics que se encarga de almacenar los hits mientras la app está offline para enviarlos cuando se restaura la conexión.

Además, usaremos una custom dimension para informar de que hits se han producido offline. Puede encontrarse más información en la web de desarrolladores de Google,  incluyendo como medir el tiempo que tardan en enviarse los hits offline.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js');
  workbox.googleAnalytics.initialize({
    parameterOverrides: {
      cd1: 'offline',
    },
  });

Oficialmente Google Analytics soporta el envío de hits con un retraso de hasta 4h, por lo que, si se tarda más tiempo en restaurar la conectividad, los hits pueden perderse.

Share on facebook
Share on twitter
Share on linkedin
Share on email
4 min
Suscríbete a nuestra newsletter

Los mejores artículos de analítica digital para potenciar tu negocio.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Entradas relacionadas

¿Qué es Gtag y cómo implementarlo para App + Web?

Gtag es una etiqueta de seguimiento que nos permite unificar los productos de Google y que está basada en eventos predefinidos. Es ahora con el lanzamiento de las propiedades de App + Web cuando realmente resulta útil para poder estandarizar y aunar la medición de nuestras apps y webs.

5 minutos

Dificultad

Cómo configurar una propiedad App+Web en Google Analytics

Las nuevas propiedades de App+Web de Google analytics nos permiten añadir hasta 50 flujos de datos de uno u otro tipo. En este artículo te explicamos cómo crear este tipo de propiedades y cómo configurarlas para web.

5 minutos

Dificultad

Técnicas avanzadas de personalización [Dynamic Yield]

Un test de optimización es una estupenda herramienta a la hora de incrementar nuestra tasa de conversión. Pero un resultado aparentemente inconcluyente puede ocultar oportunidades de mejora que una herramienta de personalización no dejaría escapar.

3 minutos

Dificultad

Ir arriba

Esta web utiliza ‘cookies’ de terceros. Al clicar aceptar está aceptando el uso que realizamos de las cookies. Para más información puede consultar nuestra Política de cookies