Hur man ser om en användare använder din webbplats eller din app

Det finns många fall där det kan vara användbart att skilja mellan en person som tittar på din webbplats i webbläsaren och en person som tittar på den via din app. Kanske vill du se analyser av hur väl din app tas emot av användarna eller så vill du visa olika innehåll för appanvändare.

Precis som det finns flera användningsfall finns det också flera sätt att uppnå detta mål. Låt oss gå igenom dem en efter en.

Baserat på användaragenten

Användaragenten är en kort sträng som webbläsaren skickar till webbplatser när den laddar en sida. Användaragenten innehåller information om webbläsaren, t.ex. kan en Firefox-webbläsare skicka något i stil med följande användaragent:

Utifrån detta kan din webbplats upptäcka att användaren använder version 47.0 av webbläsaren Mozilla Firefox. Precis som webbläsare skickar din app också en användaragent som identifierar den.

Användaragenter som används av appen

Appen använder några olika användaragenter:

• $regularUserAgent App-WebView ($operatingSystem) $version
  Detta är den typiska användaragenten som används av appens interna webbläsare (som visar din webbplats inuti appen). Förfrågningar som görs med denna användaragent initieras av appanvändaren genom att navigera mellan sidor.
• App-HttpClient $version
  Detta är den användaragent som används för förfrågningar från appen som inte initieras direkt av användaren. Till exempel gör appen vissa förfrågningar med denna för att lagra delar av webbplatsen för användning offline. Offline-läget är numera inaktiverat som standard, så du kommer förmodligen inte att se många förfrågningar med denna användaragent.

$version är appens interna version (t.ex. 1.4.8+52) och $operatingSystem är den plattform som appen används på (t.ex. ios eller android).

$regularUserAgent är användaragenten för en mobil webbläsare som kan förväntas av enheten, till exempel Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Så ett exempel på en användaragent som appen kan använda på iOS skulle vara: Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 App-WebView (ios) 1.4.8+52

Filtrering för appens användaragent

Baserat på ovanstående user agent-format kan du upptäcka att din webbplats laddas av appen genom att kontrollera om user agenten innehåller "App-WebView". Om du även vill kontrollera operativsystemet kan du dessutom kontrollera om användaragenten innehåller "(android)" eller "(ios)".

Exempel: Visa olika innehåll på en WordPress-webbplats

Om du använder WordPress kan du använda pluginet "UserAgent Content Switcher". Namnet på pluginet är ganska beskrivande: det gör att du kan visa olika innehåll för användare baserat på deras användaragent. Här är hur du kan ställa in det (och ett exempel på användningsfall):

1. Installera insticksprogrammet på din webbplats. Observera att vi inte är anslutna till pluginet eller dess utvecklare, vi testade det bara och det verkade vara gratis och fungerade bra.
2. På pluginets inställningssida lägger du till en ny typ med dessa inställningar:
   • Typ av namn: App
   • Kort kod Attribut: app
   • Användaragent: App-WebView
3. Redigera en av dina sidor och växla till kodredigeraren.
4. Nu kan du skapa sektioner som bara är synliga i appen, till exempel så här:

   
   Denna text är synlig för alla.
   
   [agentsw ua='app']
   Denna text är endast synlig för app-användare!
   [/agentsw]

   

Använda JavaScript

Baserat på användaragenten

Naturligtvis kan du inte bara kontrollera användaragenten på serversidan (som beskrivs i föregående avsnitt), utan även i JavaScript.

Här är ett exempel på hur du kan använda JavaScript för att upptäcka om användaren använder appen eller en webbläsare:

const isApp = navigator.userAgent.includes("App-WebView");
if (isApp) {
    console.log("The user is using the app.");
} else {
    console.log("The user is using a browser.");
}
    

Genom att kontrollera HTML-modifieringar

Appen gör små osynliga ändringar i webbplatsens HTML som är nödvändiga för vissa funktioner i appen. Vi kan också använda dessa ändringar för att se om sidan har laddats av appen.

Eftersom detta är lite knepigt rekommenderar vi att du använder executeWhenAppReady från apphjälpsskriptet. Sedan kan du lägga in valfri kod i funktionen executeWhenAppReady, och den kommer bara att exekveras om sidan laddades av appen. En liten nackdel med den här metoden är att det tar några millisekunder innan koden exekveras, även om sidan laddades av appen.

Genom att injicera kod i appen

På sidan för anpassning av webbplatsen har du möjlighet att lägga till JavaScript eller CSS som appen ska injicera i varje sida som laddas. Möjligheterna är oändliga med detta, men som ett exempel, låt oss göra denna text grön i appen:

<p id="red-text" style="color: red;">This text is red in the browser.</p>

Nu kan vi konfigurera detta JavaScript för att injicera:

document.getElementById("red-text").style.color = "green";

Eller alternativt denna CSS för att injicera:

#red-text {
    color: green !important;
}

Så som du kan se fungerar detta också som ett sätt att ha ett annat beteende på webbplatsen än i appen.