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

Aggiornato il 6. maggio 2024 da Jan Bunk

Un robot umanoide che ispeziona un'app e un browser per trovare le differenze, arte digitale

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

Il filtro per user agent funziona solo se hai configurato l'applicazione per regolare l'user agent che utilizza. Puoi attivare questa opzione nelle impostazioni di navigazione della tua app. Apri le impostazioni di navigazione
Se non vuoi attivare questa opzione, controlla gli altri filtri presentati in questo articolo.

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:

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

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

With the Default WordPress Editor

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 Uno screenshot del modulo compilato con le informazioni di cui sopra.
  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]
    Uno screenshot del testo sopra riportato nell'editor di codice di WordPress.

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.

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.

Il filtro per user agent funziona solo se hai configurato l'applicazione per regolare l'user agent che utilizza. Puoi attivare questa opzione nelle impostazioni di navigazione della tua app. Apri le impostazioni di navigazione

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.");
}
    
In alternativa, puoi utilizzare getAppPlatform dallo script helper dell'app, che funziona in modo molto simile.

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;
}
Una schermata della personalizzazione del sito web compilata.

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

Articoli correlati


Un robot umanoide che utilizza una lente di ingrandimento per guardare uno smartphone. Sullo smartphone compaiono le lettere PWA, arte digitale

Applicazioni web progressive vs. applicazioni native

Vuoi portare il tuo sito web a un livello superiore? Ecco come le progressive web app si posizionano rispetto alle app native standard e come trasformare il tuo sito web in un'app.

Un robot umanoide con un cronometro fisico che supervisiona una fabbrica di robot che lavorano alle scrivanie, arte digitale

Abbiamo pubblicato le app di 238: ecco quanto tempo ha richiesto la revisione delle app

Abbiamo pubblicato molte app e abbiamo monitorato il tempo necessario per inserirle negli app store, compresi i tempi di rifiuto e di ripresentazione delle app.

Immagine con testo: preparare il tuo account Apple Developer per aggiornare la tua app esistente

Passaggi necessari per poter aggiornare la tua App iOS esistente

Questa guida spiega tutti i passaggi che devi completare per permetterci di aggiornare la tua applicazione già pubblicata sull'App Store Apple.


Autore Jan Bunk
Scritto da
Jan Bunk

Ciao, sono Jan! Ho creato webtoapp.design nel 2019 mentre studiavo informatica all'università. Da allora sono cambiate molte cose: non solo mi sono laureato, ma non sono più solo nella gestione di webtoapp.design. Siamo diventati un team globale e completamente in remoto e abbiamo accumulato molta esperienza nello sviluppo e nella pubblicazione di app. Abbiamo creato e pubblicato centinaia di app negli app store, dove sono state scaricate centinaia di migliaia di volte.