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

Uppdaterad den 6. maj 2024 av Jan Bunk

En humanoid robot inspekterar en app och en webbläsare för att hitta skillnader, digital konst

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

Filtrering efter användaragent fungerar endast om du har konfigurerat appen så att den kan justera vilken användaragent den använder. Du kan aktivera det här alternativet i appens navigeringsinställningar. Öppna navigeringsinställningar
Om du inte vill aktivera det alternativet kan du kolla in de andra filtreringsmetoderna som presenteras i den här artikeln.

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:

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

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

With the Default WordPress Editor

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 En skärmdump av det ifyllda formuläret med ovanstående information.
  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]
    En skärmdump av ovanstående text i WordPress kodredigerare.

With Elementor

If you're using Elementor, you can instead use the free Powerpack plugin with the powerpack-webtoapp extension plugin. Here's how it works:

  1. Install the Powerpack plugin through the WordPress store.
  2. Download the powerpack-webtoapp plugin as a zip file and install it.
    The powerpack-webtoapp plugin (and the idea to use Powerpack on Elementor websites) was created by ALL IN APPLI. They use the plugin to manage multiple webtoapp.design apps and generously decided to share it.
  3. Now you can set specific elements to only be displayed in the app. A screenshot of the Powerpack settings.

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.

Filtrering efter användaragent fungerar endast om du har konfigurerat appen så att den kan justera vilken användaragent den använder. Du kan aktivera det här alternativet i appens navigeringsinställningar. Öppna navigeringsinställningar

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.");
}
    
Alternativt kan du använda getAppPlatform från apphjälpsskriptet, vilket fungerar på liknande sätt.

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;
}
En skärmdump av den ifyllda webbplatsanpassningen.

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

Relaterade artiklar


En humanoid robot använder ett förstoringsglas för att titta på en smartphone. På smarttelefonen visas bokstäverna PWA, digital konst

Progressiva webbappar vs. inbyggda appar

Vill du ta din webbplats till nästa nivå? Så här står sig progressiva webbappar mot vanliga native-appar och hur du förvandlar din webbplats till en app.

En humanoid robot med ett fysiskt stoppur som övervakar ett fabriksgolv med robotar som arbetar vid skrivbord, digital konst

Vi publicerade 238 appar - så här lång tid tog appgranskningen

Vi publicerade många appar och spårade hur lång tid det tog att få in dem i appbutikerna, bland annat hur lång tid det tog innan appen avvisades och skickades in på nytt.

Bild med text: Förbered ditt Apple Developer-konto för uppdatering av din befintliga app

Nödvändiga steg för att vi ska kunna uppdatera din befintliga iOS-app

Den här guiden förklarar alla steg som du måste utföra för att vi ska kunna uppdatera din app som redan är publicerad i Apple App Store.


Författare Jan Bunk
Skrivet av
Jan Bunk

Hej, jag heter Jan! Jag skapade webtoapp.design 2019 när jag studerade datavetenskap på universitetet. Mycket har förändrats sedan dess - inte bara har jag tagit examen, utan det är också inte längre bara jag som driver webtoapp.design. Vi har vuxit till ett globalt, helt fjärrstyrt team och har samlat massor av erfarenhet kring apputveckling och apppublicering. Vi har skapat och publicerat hundratals appar i appbutikerna, där de har laddats ner hundratusentals gånger.