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

Er zijn veel gevallen waarin het nuttig kan zijn om te differentiëren tussen iemand die je website in de browser bekijkt en iemand die deze via je app bekijkt. Misschien wil je analyses bekijken over hoe goed je app wordt geadopteerd door gebruikers of wil je andere inhoud tonen aan app-gebruikers.

Net zoals er meerdere gebruikssituaties zijn, zijn er ook meerdere manieren om dit doel te bereiken. Laten we ze één voor één doornemen.

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 zou zoiets als deze user agent kunnen sturen:

Daaruit 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 deze 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 binnen de app weergeeft). Verzoeken die met deze user agent worden gedaan, worden geïnitieerd door de app-gebruiker 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 verzoeken met deze user agent zien.

$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 van een user-agent die de app op iOS zou kunnen gebruiken, is: 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 User Agent van de app

Op basis van het bovenstaande user agent-formaat kun je detecteren dat 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 daarnaast controleren of de user agent ook '(android)' of '(ios)' bevat.

Voorbeeld: Verschillende inhoud tonen op een WordPress-website

Met de standaard WordPress-editor

Als je WordPress gebruikt, kun je de plugin 'UserAgent Content Switcher' gebruiken. De naam van de plugin is vrij beschrijvend: het stelt je in staat om verschillende inhoud te tonen aan gebruikers op basis van hun user agent. Hier is hoe je het kunt instellen (en een voorbeeld van een gebruikssituatie):

1. Installeer de plugin op je website. Let op dat we niet verbonden zijn met de plugin of de ontwikkelaar ervan, we hebben het alleen getest en het leek gratis en goed te werken.
2. Op de instellingenpagina van de plugin, voeg een nieuw type toe met deze instellingen:
   • Typenaam: App
   • Short-code Attribuut: app
   • User 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 dit:

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

   

Met Elementor

Als je Elementor gebruikt, kun je in plaats daarvan de gratis Powerpack plugin gebruiken met de powerpack-webtoapp extensie plugin. Zo werkt het:

1. Installeer de Powerpack plugin via de WordPress store.
2. Download de powerpack-webtoapp plugin als een zip-bestand en installeer het.
   De powerpack-webtoapp plugin (en het idee om Powerpack te gebruiken op Elementor websites) is gemaakt door ALL IN APPLI. Zij gebruiken de plugin om meerdere webtoapp.design apps te beheren en hebben genereus besloten het te delen.
3. Nu kun je specifieke elementen instellen om alleen in de app te worden weergegeven.

Met JavaScript

Gebaseerd op de User Agent

Natuurlijk kun je niet alleen de user agent aan de serverzijde controleren (zoals beschreven in het vorige gedeelte), 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 HTML-wijzigingen te controleren

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

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

Door code in de app te injecteren

Op je website-aanpassingspagina heb je de optie om JavaScript of CSS toe te voegen dat de app in elke geladen pagina moet injecteren. De mogelijkheden zijn eindeloos hiermee, maar als voorbeeld, laten we 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 deze JavaScript configureren om te injecteren:

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

Of als alternatief, deze CSS om te injecteren:

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

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