Frontend-analys för PWA-installation: Förstå och spåra användares installationsbeteende

Progressiva webbappar (PWA) har vuxit fram som en kraftfull lösning för att leverera app-liknande upplevelser på webben. Men det räcker inte att bara bygga en PWA. Att förstå hur användare upptäcker, interagerar med och slutligen installerar din PWA är avgörande för att optimera dess prestanda och maximera dess inverkan. Den här guiden ger en omfattande översikt över tekniker för frontend-analys för att spåra PWA-installationsbeteende, vilket gör att du kan få värdefulla insikter och förbättra din PWA:s installationsfrekvens.

Varför spåra PWA-installationsbeteende?

Att förstå hur användare interagerar med din PWA:s installationsprocess är viktigt av flera anledningar:

• Identifiera friktionspunkter: Att hitta var användare hoppar av under installationsprocessen gör att du kan åtgärda användbarhetsproblem och effektivisera upplevelsen.
• Optimera installationsprompter: Att testa olika strategier för prompter (t.ex. timing, placering, budskap) hjälper dig att avgöra det mest effektiva sättet att uppmuntra till installation.
• Förbättra användarengagemang: Genom att förstå användarbeteende kan du skräddarsy din PWA för att bättre möta deras behov och förväntningar, vilket leder till ökat engagemang och bibehållande av användare.
• Mät effekten av ändringar: Att spåra installationsfrekvensen före och efter implementering av ändringar (t.ex. UI-uppdateringar, prestandaförbättringar) gör att du kan bedöma deras effektivitet.
• Datadrivet beslutsfattande: Att ha tillgång till tillförlitlig installationsdata ger dig möjlighet att fatta välgrundade beslut om din PWA:s utvecklings- och marknadsföringsstrategier.

Nyckeltal att spåra

Innan vi dyker in i implementeringen, låt oss identifiera de nyckeltal du bör spåra för att få en heltäckande förståelse för din PWA:s installationsbeteende:

• Visningar av installationsprompt: Antalet gånger installationsprompten visas för användare.
• Accepterade installationsprompter: Antalet gånger användare accepterar installationsprompten och påbörjar installationsprocessen.
• Avvisade installationsprompter: Antalet gånger användare avvisar installationsprompten.
• Ignorerade installationsprompter: Antalet gånger användare ignorerar installationsprompten (t.ex. genom att klicka bort den eller navigera till en annan sida).
• Lyckade installationer: Antalet lyckade PWA-installationer.
• Installationsfrekvens: Procentandelen användare som installerar PWA:n efter att ha fått installationsprompten (Accepterade installationsprompter / Visningar av installationsprompt).
• Installationstid: Tiden det tar för PWA:n att installeras efter att användaren har accepterat prompten. Detta kan identifiera nätverksproblem eller problem med din service worker.
• User Agent: Typen av webbläsare och operativsystem som användaren använder för att komma åt PWA:n. Detta hjälper till att identifiera plattformsspecifika problem.
• Hänvisningskälla: Var användaren kom ifrån (t.ex. sökmotor, sociala medier, direktlänk). Detta hjälper dig att förstå vilka marknadsföringskanaler som är mest effektiva för att driva PWA-installationer.
• Anpassade händelser: Spåra specifika användarinteraktioner relaterade till installationsprocessen, som att klicka på en "Installera PWA"-knapp eller se en specifik onboarding-skärm.

Implementera frontend-analys för spårning av PWA-installation

Här är en steg-för-steg-guide för att implementera frontend-analys för att spåra PWA-installationsbeteende:

1. Välj en analysplattform

Välj en analysplattform som erbjuder de funktioner och den flexibilitet du behöver för att spåra PWA-installationer effektivt. Populära alternativ inkluderar:

• Google Analytics: En mycket använd och gratis plattform som erbjuder omfattande analysfunktioner. Kräver implementering av händelsespårning.
• Firebase Analytics: Googles mobilanalysplattform som är väl lämpad för att spåra PWA-installationer och användarbeteende.
• Mixpanel: En kraftfull produktanalysplattform som låter dig spåra användarhändelser och segmentera användare baserat på deras beteende.
• Amplitude: En annan populär produktanalysplattform som erbjuder liknande funktioner som Mixpanel.
• Matomo (tidigare Piwik): En analysplattform med öppen källkod som ger dig full kontroll över din data. Du kan hosta den själv.
• Plausible Analytics: Ett integritetsfokuserat, lättviktigt analysalternativ.

Tänk på faktorer som prissättning, funktioner, enkel integration och dataskydd när du väljer en analysplattform. För enkelhetens skull kommer exemplen nedan främst att använda Google Analytics, men koncepten kan anpassas till andra plattformar.

2. Integrera analysplattformen i din PWA

Följ dokumentationen från din valda analysplattform för att integrera den i din PWA. Detta innebär vanligtvis att lägga till ett JavaScript-kodavsnitt i din PWA:s huvudsakliga HTML-fil.

Exempel (Google Analytics):

            
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y');
</script>

            

              
                Copy
              
            
          

Ersätt UA-XXXXX-Y med ditt spårnings-ID för Google Analytics.

3. Spåra visningar av installationsprompt

Du måste upptäcka när webbläsaren utlöser händelsen 'beforeinstallprompt'. Denna händelse avfyras när webbläsaren bedömer att PWA:n uppfyller installerbarhetskriterierna.

Exempel på JavaScript-kod:

            
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Report to Google Analytics that the install prompt was shown.
  gtag('event', 'install_prompt_viewed', {
    'event_category': 'PWA',
    'event_label': 'Install Prompt Viewed'
  });
});

            

              
                Copy
              
            
          

Detta kodavsnitt lyssnar efter händelsen beforeinstallprompt, förhindrar att standardprompten visas (vilket ger dig kontroll över när och hur du visar prompten), lagrar händelsen för senare användning och skickar en händelse till Google Analytics som indikerar att installationsprompten har visats. event_category och event_label kan anpassas efter dina behov.

4. Spåra åtgärder för installationsprompt (Accepterat, Avvisat, Ignorerat)

När användaren interagerar med din anpassade installationsprompt måste du spåra deras åtgärder. Du kommer att använda deferredPrompt-objektet som du lagrade tidigare.

Exempel på JavaScript-kod (Accepterad prompt):

            
// Assuming you have a button or element that triggers the install
installButton.addEventListener('click', (e) => {
  // Show the install prompt
  deferredPrompt.prompt();
  // Report to Google Analytics that the install prompt was accepted.
  gtag('event', 'install_prompt_accepted', {
    'event_category': 'PWA',
    'event_label': 'Install Prompt Accepted'
  });
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the install prompt');
      } else {
        console.log('User dismissed the install prompt');
        gtag('event', 'install_prompt_dismissed', {
          'event_category': 'PWA',
          'event_label': 'Install Prompt Dismissed'
        });
      }
      deferredPrompt = null;
    });
});

            

              
                Copy
              
            
          

Detta kodavsnitt utlöser installationsprompten när användaren klickar på en knapp (installButton). Det skickar sedan en händelse till Google Analytics som indikerar att prompten accepterades. Det använder också egenskapen userChoice för att avgöra om användaren accepterade eller avvisade prompten och skickar en annan händelse i enlighet med detta. Slutligen sätter det deferredPrompt till null eftersom det bara kan användas en gång.

För att spåra ignorerade prompter kan du ställa in en timeout efter att prompten har visats. Om användaren inte interagerar med prompten inom en viss tid (t.ex. 5 sekunder) kan du anta att de ignorerade den och skicka en händelse till Google Analytics.

Exempel på JavaScript-kod (Ignorerad prompt):

            
// After showing the prompt (using deferredPrompt.prompt()), start a timer
let ignoreTimer = setTimeout(() => {
  gtag('event', 'install_prompt_ignored', {
    'event_category': 'PWA',
    'event_label': 'Install Prompt Ignored'
  });
  ignoreTimer = null; // Clear the timer
}, 5000); // 5 seconds

// If the user interacts with the prompt (accepts or dismisses), clear the timer
deferredPrompt.userChoice.then(() => {
  clearTimeout(ignoreTimer);
  ignoreTimer = null;
});

            

              
                Copy
              
            
          

5. Spåra lyckade installationer

Du kan upptäcka när PWA:n har installerats framgångsrikt med hjälp av händelsen appinstalled.

Exempel på JavaScript-kod:

            
window.addEventListener('appinstalled', (evt) => {
  // Log install to analytics
  gtag('event', 'app_installed', {
    'event_category': 'PWA',
    'event_label': 'App Installed Successfully'
  });
});

            

              
                Copy
              
            
          

Detta kodavsnitt lyssnar efter händelsen appinstalled och skickar en händelse till Google Analytics som indikerar att PWA:n har installerats framgångsrikt.

6. Spåra installationstid (Avancerat)

Att spåra tiden det tar att installera PWA:n kan hjälpa till att identifiera potentiella prestandaflaskhalsar, som stora service worker-cacher eller långsamma nätverksanslutningar. Detta kräver en något mer komplex implementering.

Exempel på JavaScript-kod:

            
let installStartTime;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  installStartTime = Date.now(); // Record the time when the prompt is shown
});

installButton.addEventListener('click', (e) => {
  deferredPrompt.prompt();

  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the install prompt');
      } else {
        console.log('User dismissed the install prompt');
      }
      deferredPrompt = null;
    });
});

window.addEventListener('appinstalled', (evt) => {
  const installEndTime = Date.now();
  const installDuration = installEndTime - installStartTime;

  gtag('event', 'app_installed', {
    'event_category': 'PWA',
    'event_label': 'App Installed Successfully',
    'value': installDuration // Send the installation time as a numeric value
  });

  installStartTime = null; // Reset the start time
});

            

              
                Copy
              
            
          

Detta kodavsnitt registrerar tidsstämpeln när installationsprompten visas (installStartTime) och beräknar sedan varaktigheten mellan den tiden och appinstalled-händelsen (installDuration). Installationsvaraktigheten skickas sedan till Google Analytics som value för app_installed-händelsen. Du kan sedan analysera detta värde i Google Analytics för att identifiera långsamma installationer.

7. Analysera data och optimera

När du har implementerat spårningskoden kan du börja samla in data och analysera den för att identifiera områden för förbättring. Använd rapporterna och instrumentpanelerna som din analysplattform tillhandahåller för att visualisera data och få insikter.

Exempel på optimeringsstrategier baserade på analysdata:

• Lågt antal visningar av installationsprompt: Undersök varför händelsen beforeinstallprompt inte avfyras som förväntat. Se till att din PWA uppfyller installerbarhetskriterierna (t.ex. giltigt manifest, registrerad service worker, serveras över HTTPS).
• Låg installationsfrekvens: Experimentera med olika designer, budskap och timing för installationsprompten. Överväg A/B-testning av olika promptstrategier för att se vilken som presterar bäst. Se till att din PWA ger ett tydligt värde och motiverar installationen.
• Högt antal avvisade/ignorerade installationsprompter: Omvärdera din strategi för installationsprompten. Är prompten för påträngande? Visas den vid fel tidpunkt? Överväg att tillhandahålla en mer subtil prompt initialt och endast visa en mer framträdande prompt efter att användaren har engagerat sig med PWA:n ett tag. Överväg också att lägga till en "Varför installera?"-länk till prompten som förklarar fördelarna.
• Långsam installationstid: Optimera din service worker-kod, minska storleken på cachade tillgångar och se till att din server levererar tillgångar snabbt. Använd webbläsarens utvecklarverktyg för att identifiera prestandaflaskhalsar.

Avancerade tekniker och överväganden

Anpassade dimensioner och mätvärden

De flesta analysplattformar låter dig definiera anpassade dimensioner och mätvärden för att spåra specifik data som är relevant för din PWA. Du kan till exempel skapa en anpassad dimension för att spåra användarens prenumerationsstatus eller ett anpassat mätvärde för att spåra antalet gånger en specifik funktion används före installation. Detta möjliggör mer detaljerad analys.

A/B-testning

A/B-testning är en kraftfull teknik för att jämföra olika versioner av din installationsprompt eller installationsprocess. Använd A/B-testverktyg för att slumpmässigt visa olika versioner för olika användare och spåra vilken version som presterar bäst när det gäller installationsfrekvens. Google Optimize är en populär A/B-testplattform som integreras sömlöst med Google Analytics.

Användarsegmentering

Att segmentera dina användare baserat på deras beteende, demografi eller andra egenskaper låter dig identifiera mönster och trender som kanske inte är uppenbara när du analyserar data som helhet. Du kan till exempel segmentera användare baserat på deras hänvisningskälla för att se vilka marknadsföringskanaler som är mest effektiva för att driva PWA-installationer bland olika användargrupper.

Integritetsöverväganden

Var medveten om användarnas integritet när du implementerar analys. Se till att du följer alla tillämpliga integritetsbestämmelser (t.ex. GDPR, CCPA) och var transparent med hur du samlar in och använder användardata. Överväg att använda anonymiseringstekniker för att skydda användarnas integritet samtidigt som du samlar in värdefulla insikter. Implementera en tydlig integritetspolicy och inhämta användarens samtycke där det krävs.

Hantering av kantfall och fel

Förutse potentiella kantfall och fel i din spårningskod och implementera lämpliga felhanteringsmekanismer. Till exempel kanske händelsen beforeinstallprompt inte avfyras i alla webbläsare eller under alla förhållanden. Se till att din kod hanterar dessa situationer elegant och inte förstör din PWA:s funktionalitet. Använd try-catch-block för att fånga potentiella fel och logga dem till konsolen eller en loggningstjänst på serversidan.

Server-side-analys (Valfritt)

Även om den här guiden fokuserar på frontend-analys kan du också komplettera dina data med server-side-analys. Detta kan vara användbart för att spåra händelser som inträffar på servern, såsom en lyckad användarregistrering eller ett slutfört köp, och för att korrelera server-side-händelser med frontend-installationsdata. Du kan till exempel skicka en server-side-händelse till din analysplattform när en användare slutför ett köp efter att ha installerat PWA:n, vilket gör att du kan mäta avkastningen på investeringen (ROI) för din PWA.

Globala exempel och bästa praxis

När du implementerar PWA-installationsanalys för en global publik, överväg följande:

• Lokalisering: Se till att dina installationsprompter och meddelanden är lokaliserade till olika språk för att tillgodose användare från olika länder.
• Tidszoner: Var medveten om olika tidszoner när du analyserar data. Använd en konsekvent tidszon (t.ex. UTC) för rapportering.
• Nätverksanslutning: Nätverksanslutningen varierar avsevärt mellan olika regioner. Tänk på detta när du analyserar installationstider och optimerar din PWA:s prestanda. Implementera strategier för att hantera anslutningar med låg bandbredd.
• Kulturell känslighet: Var medveten om kulturella skillnader när du designar dina installationsprompter och meddelanden. Undvik att använda bilder eller språk som kan vara stötande eller olämpligt i vissa kulturer.
• Dataskyddsbestämmelser: Följ dataskyddsbestämmelserna i alla länder där din PWA är tillgänglig. Detta kan kräva implementering av olika mekanismer för datainsamling och samtycke för olika regioner.

Exempel: En global e-handels-PWA kan spåra installationsfrekvensen i olika länder och skräddarsy sina marknadsföringskampanjer för att fokusera på regioner med högst potential för PWA-adoption. De kan också A/B-testa olika designer på installationsprompter för att se vilken som resonerar bäst med användare i olika kulturella sammanhang.

Slutsats

Att spåra PWA-installationsbeteende är avgörande för att optimera användarupplevelsen och maximera installationsfrekvensen. Genom att implementera teknikerna som beskrivs i den här guiden kan du få värdefulla insikter i hur användare interagerar med din PWA:s installationsprocess och fatta datadrivna beslut för att förbättra dess prestanda. Kom ihåg att välja rätt analysplattform, spåra nyckeltal, analysera data regelbundet och anpassa dina strategier baserat på dina resultat. Genom att fokusera på användarbeteende och kontinuerligt optimera din PWA kan du skapa en övertygande och engagerande app-liknande upplevelse som driver användaradoption och uppnår dina affärsmål.

Vidare läsning

• Google Developers: Appinstallationsbanners
• web.dev: Lägg till ett webbappmanifest
• Workbox: JavaScript-bibliotek för att lägga till offlinestöd i webbappar