Come capire se un utente sta utilizzando il tuo sito web o la tua applicazione

Ci sono molti casi in cui può essere utile distinguere tra una persona che visualizza il tuo sito web nel browser e una persona che lo visualizza attraverso la tua app. Forse vuoi visualizzare i dati analitici relativi al grado di adozione della tua app da parte degli utenti o vuoi mostrare contenuti diversi agli utenti dell'app.

Così come esistono diversi casi d'uso, esistono anche diversi modi per raggiungere questo obiettivo. Analizziamoli uno per uno.

In base all'agente utente

L'agente utente è una breve stringa che il browser invia ai siti web ogni volta che carica una pagina. L'user agent contiene informazioni sul browser, ad esempio un browser Firefox potrebbe inviare qualcosa come questo user agent:

Da qui, il tuo sito web può rilevare che l'utente sta utilizzando la versione 47.0 del browser Mozilla Firefox. Proprio come i browser, anche la tua applicazione invia un user agent che la identifica.

User agent utilizzati dall'applicazione

L'applicazione utilizza alcuni user agent diversi:

• $regularUserAgent App-WebView ($operatingSystem) $version
  Questo è il tipico user agent utilizzato dal browser interno dell'app (che visualizza il tuo sito web all'interno dell'app). Le richieste effettuate con questo user agent vengono avviate dall'utente dell'app navigando tra le pagine.
• App-HttpClient $version
  Questo è lo user agent utilizzato per le richieste fatte dall'applicazione che non sono direttamente iniziate dall'utente. Per esempio l'app fa alcune richieste con questo per memorizzare parti del sito web per l'uso offline. La modalità offline è disabilitata di default, quindi probabilmente non vedrai molte richieste con questo user agent.

$version è la versione interna dell'app (es. 1.4.8+52) e $operatingSystem è la piattaforma su cui l'app viene utilizzata (es. ios o android).

$regularUserAgent è lo user agent di un browser mobile che ci si aspetterebbe da dispositivi, come Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Quindi un esempio di user-agent che l'app potrebbe utilizzare su iOS sarebbe: 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

Filtro per l'agente utente dell'app

In base al formato dell'user agent di cui sopra, puoi rilevare che il tuo sito web viene caricato dall'applicazione controllando se l'user agent contiene "App-WebView". Se vuoi verificare anche il sistema operativo, puoi controllare se l'user agent contiene anche "(android)" o "(ios)".

Esempio: Mostra contenuti diversi su un sito WordPress

Se utilizzi WordPress, puoi utilizzare il plugin "UserAgent Content Switcher". Il nome del plugin è abbastanza descrittivo: ti permette di mostrare contenuti diversi agli utenti in base al loro user agent. Ecco come puoi configurarlo (e un esempio di utilizzo):

1. Installa il plugin sul tuo sito web. Ti ricordiamo che non siamo affiliati al plugin o al suo sviluppatore, abbiamo solo testato il plugin e ci è sembrato gratuito e funzionante.
2. Nella pagina delle impostazioni del plugin, aggiungi un nuovo tipo con queste impostazioni:
   • Nome del tipo: App
   • Attributo del codice breve: app
   • Agente utente: App-WebView
3. Modifica una delle tue pagine e passa all'editor di codice.
4. Ora puoi creare delle sezioni che sono visibili solo nell'app, come in questo caso:

   
   Questo testo è visibile a tutti.
   
   [agentsw ua='app']
   Questo testo è visibile solo agli utenti dell'app!
   [/agentsw]

   

Utilizzo di JavaScript

In base all'agente utente

Ovviamente non puoi controllare l'agente utente solo sul lato server (come descritto nella sezione precedente), ma anche in JavaScript.

Ecco un esempio di come puoi utilizzare JavaScript per rilevare se l'utente sta utilizzando l'app o un browser:

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

Controllando le modifiche HTML

L'applicazione apporta piccole modifiche invisibili all'HTML del sito web, necessarie per alcune funzioni dell'applicazione. Possiamo anche utilizzare queste modifiche per rilevare se la pagina è stata caricata dall'applicazione.

Poiché è un po' complicato, ti consigliamo di utilizzare executeWhenAppReady dallo script helper dell'app. Quindi puoi inserire qualsiasi codice all'interno della funzione executeWhenAppReady e verrà eseguito solo se la pagina è stata caricata dall'applicazione. Un piccolo svantaggio di questo metodo è che ci vogliono alcuni millisecondi prima che il codice venga eseguito, anche se la pagina è stata caricata dall'applicazione.

Iniettando codice nell'app

Nella pagina di personalizzazione del sito web hai la possibilità di aggiungere qualsiasi JavaScript o CSS che l'applicazione deve iniettare in ogni pagina caricata. Le possibilità sono infinite ma, a titolo di esempio, rendiamo questo testo verde nell'applicazione:

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

Ora possiamo configurare questo JavaScript da iniettare:

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

Oppure, in alternativa, questo CSS da iniettare:

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

Quindi, come puoi vedere, questo funziona anche come un modo per avere un comportamento diverso sul sito web rispetto all'app.