Google Analytics en Progresive Web Apps (PWA)

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.

Oscar G. Peinado

Oscar G. Peinado

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.

Dejar un comentario

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

Entradas relacionadas

Detección de errores en herramientas de medición

En programación existen multitud de errores que nos hacen la vida imposible, por eso, un programador (siempre que pueda) debe optimizar y dejar el código lo más legible posible.

4 minutos

Dificultad

Visualizaciones personalizadas de datos en google data studio

Google Data Studio se está posicionando como una de las herramienta más utilizada en el mundo de la visualización de datos y reporting. Como todas las herramienta de esta naturaleza, el tipo de visualización de datos que nos permite crear es limitada. Por ahora podemos mostrar nuestros datos a través de diferentes widgets: Scorecard Tablas

3 minutos

Dificultad

AudienceStream de Tealium

AudienceStream es un Customer Data Platform (CDP) de Tealium. Se trata de una herramienta para segmentar y crear audiencias en tiempo real.

2 minutos

Dificultad