Hoe je kunt zien of een gebruiker je website of app gebruikt

Er zijn veel gevallen waarin het nuttig kan zijn om onderscheid te maken tussen iemand die je website in de browser bekijkt en iemand die je website bekijkt via je app. Misschien wil je statistieken bekijken over hoe goed je app wordt gebruikt door gebruikers of wil je andere inhoud laten zien aan app-gebruikers.

Net zoals er meerdere use cases zijn, zijn er ook meerdere manieren om dit doel te bereiken. Laten we ze een voor een doorlopen.

Gebaseerd op de User Agent

De user agent is een korte string die de browser naar websites stuurt wanneer deze een pagina laadt. De user agent bevat informatie over de browser, bijvoorbeeld een Firefox browser kan iets als dit sturen:

Aan de hand daarvan kan je website detecteren dat de gebruiker versie 47.0 van de Mozilla Firefox browser gebruikt. Net als browsers stuurt je app ook een user agent die hem identificeert.

Door de app gebruikte user agents

De app gebruikt een paar verschillende user agents:

• $regularUserAgent App-WebView ($operatingSystem) $version
  Dit is de typische user agent die wordt gebruikt door de interne browser van de app (die je website weergeeft in de app). Verzoeken met deze user agent worden geïnitieerd door de gebruiker van de app door tussen pagina's te navigeren.
• App-HttpClient $version
  Dit is de user agent die gebruikt wordt voor verzoeken van de app die niet direct door de gebruiker geïnitieerd worden. De app doet hiermee bijvoorbeeld enkele verzoeken om delen van de website op te slaan voor offline gebruik. De offline modus is tegenwoordig standaard uitgeschakeld, dus je zult waarschijnlijk niet veel aanvragen zien met deze user agent.

$version is de interne versie van de app (b.v. 1.4.8+52) en $operatingSystem is het platform waarop de app gebruikt wordt (bijv. ios of android).

$regularUserAgent is de user agent van een mobiele browser die van het toestel verwacht zou worden, zoals Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Dus een voorbeeld user-agent die de app op iOS zou kunnen gebruiken zou zijn: 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

Filteren op de gebruikersagent van de app

Op basis van de bovenstaande indeling van de user agent kun je detecteren of je website wordt geladen door de app door te controleren of de user agent "App-WebView" bevat. Als je ook het besturingssysteem wilt controleren, kun je aanvullend controleren of de user agent ook "(android)" of "(ios)" bevat.

Voorbeeld: Verschillende inhoud tonen op een WordPress website

Als je WordPress gebruikt, kun je de plugin "UserAgent Content Switcher" gebruiken. De naam van de plugin is vrij beschrijvend: hiermee kun je verschillende inhoud laten zien aan gebruikers op basis van hun user agent. Hier zie je hoe je het kunt instellen (en een voorbeeld):

1. Installeer de plugin op je website. Let op: we zijn niet verbonden aan de plugin of de ontwikkelaar ervan, we hebben hem gewoon getest en hij leek gratis te zijn en werkte prima.
2. Voeg op de instellingenpagina van de plugin een nieuw type toe met deze instellingen:
   • Type naam: App
   • Kort-codekenmerk: app
   • Gebruiker agent: App-WebView
3. Bewerk een van je pagina's en schakel over naar de code-editor.
4. Nu kun je secties maken die alleen zichtbaar zijn in de app, zoals deze:

   
   Deze tekst is voor iedereen zichtbaar.
   
   [agentsw ua='app']
   Deze tekst is alleen zichtbaar voor app-gebruikers!
   [/agentsw]

   

JavaScript gebruiken

Gebaseerd op de User Agent

Natuurlijk kun je de user agent niet alleen aan de serverkant controleren (zoals beschreven in de vorige sectie), maar ook in JavaScript.

Hier is een voorbeeld van hoe je JavaScript kunt gebruiken om te detecteren of de gebruiker de app of een browser gebruikt:

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.");
}
    

Door te controleren op HTML-aanpassingen

De app maakt kleine onzichtbare wijzigingen in de HTML van de website die nodig zijn voor sommige functies van de app. We kunnen deze wijzigingen ook gebruiken om te detecteren of de pagina is geladen door de app.

Omdat dit een beetje lastig is, raden we je aan om executeWhenAppReady van het app helper script te gebruiken. Dan kun je elke code in de executeWhenAppReady functie zetten, en deze wordt alleen uitgevoerd als de pagina is geladen door de app. Een klein nadeel van deze methode is dat het een paar milliseconden duurt voordat de code wordt uitgevoerd, zelfs als de pagina is geladen door de app.

Door code in de app te injecteren

Op de aanpassingspagina van je website heb je de mogelijkheid om JavaScript of CSS toe te voegen die de app moet injecteren in elke pagina die wordt geladen. De mogelijkheden zijn eindeloos, maar laten we als voorbeeld deze tekst groen maken in de app:

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

Nu kunnen we dit JavaScript configureren om te injecteren:

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

Of anders deze CSS om te injecteren:

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

Dus zoals je kunt zien, werkt dit ook als een manier om ander gedrag te hebben op de website dan op de app.