Deep Linking nelle app native di React: tutto quello che devi sapere!

Il deep linking è diventato una componente essenziale nel mondo interconnesso di oggi. Il termine "deep linking" può suonare nuovo a molti; ma la maggior parte di voi deve aver usato il concetto di deep linking in una forma o nell'altra.

Ricordi un'istanza in cui hai fatto clic su un collegamento e ha aperto direttamente una schermata specifica in un'app installata sul tuo dispositivo; senza che tu debba navigare manualmente attraverso l'app? Oppure, ad esempio, volevi che il tuo amico leggesse un articolo e condividesse l'URL di quell'articolo. Il tuo amico ha cliccato sul link ed è stato indirizzato al contenuto desiderato in una volta sola invece di dover prima aprire la home page e poi cercare l'articolo.

Ti sei mai chiesto come succede?

Bene, questo è ciò che fa il deep linking. Gli utenti fanno clic su un collegamento e vengono reindirizzati a una determinata posizione in un'app mobile o in un sito Web senza dover perdere tempo a navigare attraverso la schermata principale. Altri esempi includono la condivisione del collegamento per un video di YouTube o un prodotto Amazon con un amico, l'apertura di un collegamento promozionale da un marchio per accedere a una pagina di prodotto specifica e così via. In tali scenari, il deep linking è essenziale poiché i normali collegamenti Web non funzionano in modo efficace con le applicazioni mobili native.

Questo post riguarda la comprensione di come funziona il concetto di deep linking e l'apprendimento dei suoi vantaggi. Discuteremo anche i passaggi chiave su come implementare il deep linking nelle app mobili React Native per i sistemi operativi Android e iOS. Abbiamo scelto il framework React Native in quanto è una delle preferenze più popolari per lo sviluppo di app mobili in questi giorni.

Cos'è il collegamento profondo?

Il deep linking è una tecnica che consente di collegare un particolare contenuto o schermata all'interno di un'applicazione mobile da una fonte esterna come un'altra applicazione o un sito web. I deep link sono collegamenti cliccabili che inviano gli utenti direttamente a una posizione specifica all'interno di un'app mobile anziché a un negozio online o a un collegamento Web. Questa posizione in-app può essere qualcosa di simile a un contenuto protetto dietro un paywall, un articolo, un prodotto o una schermata di accesso. Gli utenti possono raggiungere la posizione in-app desiderata semplicemente facendo clic su un URL o una risorsa senza la necessità di cercare la pagina da soli.

Come funziona il concetto di deep linking?

Il collegamento diretto specifica uno schema URL personalizzato come collegamenti universali (per dispositivi iOS) e un URL di intenti (per dispositivi Android). Quando un utente fa clic su un collegamento diretto, il sistema operativo intercetta il collegamento e apre l'applicazione pertinente se è installata sul dispositivo dell'utente. Le informazioni presenti nel deep link vengono quindi utilizzate dall'applicazione per navigare verso il contenuto o la schermata desiderati.

Link profondi differiti?

Cosa succede se gli utenti ottengono collegamenti diretti a un'applicazione, ma l'applicazione non è installata sul loro dispositivo? Qui entrano in gioco i deep link differiti. Se un utente fa clic su un collegamento e l'app a cui appartiene il collegamento non viene scaricata; l'utente viene invece indirizzato all'App Store. Qui, gli utenti vengono indirizzati alla posizione esatta dell'App Store dove possono installare l'app desiderata con un solo clic. E, una volta installata l'app, la schermata specifica si apre immediatamente.

Quali sono i vantaggi del collegamento profondo?

Il deep linking fa risparmiare tempo agli utenti e migliora notevolmente l'esperienza dell'utente.

I deep link sono ottimi strumenti per i marchi aziendali per aumentare la fidelizzazione degli utenti e il tasso di conversione. I marchi possono collegare campagne promozionali e incentivi a collegamenti profondi; reindirizzare gli utenti alla pagina del loro prodotto con un solo clic. In questo modo, i marchi possono facilmente convincere gli utenti a provare nuovi prodotti o servizi. Ad esempio, il proprietario di un'app musicale vorrebbe promuovere un nuovo album musicale. Così, il proprietario investe in pubblicità e si lega a un famoso sito web. La copertina dell'album musicale con un collegamento diretto viene visualizzata su quel sito Web come campagna pubblicitaria. Quando gli utenti del sito Web fanno clic sul collegamento diretto, vengono reindirizzati alla pagina specifica nell'app musicale e possono ascoltare l'album.

Inoltre, puoi monitorare le campagne di deep linking e verificare il rendimento delle tue campagne. Il deep linking migliora anche le tue classifiche SEO e riduce al minimo il tasso di abbandono della tua applicazione.

Come puoi implementare il deep linking nelle app native di React?

La libreria react-navigation fornisce il modulo Linking per il deep-linking delle app React Native. Questo si rivela utile per gli sviluppatori React Native.

È necessario definire uno schema di collegamento diretto nell'applicazione che mapperà URL specifici alle schermate dell'app pertinenti. react-navigation fornisce componenti come il modulo Linking e NavigationContainer per definire lo schema. Dopo aver definito lo schema, può essere utilizzato per gestire i deep link in entrata. È necessario registrare una funzione di callback con l'aiuto del metodo addEventListner fornito dal modulo Linking per gestire i deep link in entrata. Quando l'app viene avviata tramite un deep link, viene chiamata la funzione di callback. Questa funzione di richiamata può essere utilizzata per navigare nella schermata desiderata nell'applicazione.

Configurazione del deep linking in IoS e Android

Devi configurare un'app per dispositivi mobili con uno schema URL (un URL univoco). Questo schema URL è responsabile dell'individuazione e dell'avvio dell'app installata sul dispositivo smartphone dell'utente. Per fare in modo che l'app passi a una schermata, devi impostare prefissi che corrispondano allo schema URL su cui è stata configurata l'app. Quindi gli schermi devono essere mappati all'interno dell'app con i rispettivi percorsi. Quando il percorso viene collegato all'URL, l'app è in grado di passare direttamente a schermate specifiche.

La configurazione dei deep link è leggermente diversa per i sistemi operativi iOS e Android. Diamo un'occhiata a come gli sviluppatori React Native professionisti implementano il deep linking per Android e iOS!

Configurazione di collegamenti diretti nelle app Android native di React

Passaggio n. 1 Definizione dei collegamenti diretti

Apri il file manifest e definisci i link diretti che prevedi di utilizzare nella tua app in modo che gli utenti possano accedere direttamente a una pagina specifica all'interno dell'app. Qui, devi definire un collegamento diretto per quella pagina specifica. Ecco come puoi definire un deep link nel tuo file AndroidManifest.xml:
<attività

android:name=".ProductActivity"

android:label="Prodotto">

<filtro-intento>

<action android:name=”android.intent.action.VIEW” />

<category android:name=”android.intent.category.DEFAULT” />

<category android:name=”android.intent.category.BROWSABLE” />

<dati

android:host=”esempio.com”

android:pathPrefix=”/prodotti”

android:scheme=”http” />

<dati

android:host=”esempio.com”

android:pathPrefix=”/prodotti”

android:scheme=”https” />

</intent-filter>

</attività>

Passo # 2 Configurazione del filtro intent

Vai su android/app/src/main e da lì apri il file denominato AndroidManifest.xml. Ora devi configurare il filtro intent per ogni deep link. Il filtro intent specifica la quantità di dati e le azioni che l'applicazione è in grado di gestire.

Passaggio n. 3 Gestione dell'intento

È necessario gestire l'intento nell'attività dell'applicazione. Questo intento avvierà la tua applicazione da un collegamento profondo. Per la gestione dell'intento, è necessario estrarre i dati dall'intento e determinare quella particolare posizione o schermata specifica all'interno dell'app a cui si desidera indirizzare gli utenti. Successivamente, il tuo progetto deve essere ricostruito nell'emulatore Android.

Configurazione di collegamenti diretti nelle app IOS native di React

Imposta il tuo schema URL sotto i tipi di URL in Xcode. Modifica il file "AppDelegate" e ricostruisci il progetto nell'emulatore iOS. Ora il progetto iOS è aperto in Xcode.

Passaggio n. 1 Definizione dello schema URL

Definisci uno schema URL personalizzato per la tua applicazione. Questo schema URL è un modo univoco per identificare la tua app. Altri siti Web o app utilizzeranno questo identificatore univoco per avviare la tua applicazione.

Apri il file info.plist. Aggiungi un nuovo tipo di URL nella parte superiore di questo file. Lo schema URL può essere immesso nel campo identificatore e schemi URL. Quindi espandere l'elemento 0 (zero), selezionare gli schemi URL e assegnare un nome all'elemento 0. Questo nome è quello con cui l'applicazione sarà collegabile. Ad esempio, il nome della tua app è "OurApp". Lo schema dell'URL sarà simile a questo "ourapp://" o "ourapp://detail?id=123".

Step#2 Gestione dell'implementazione del codice

Ora devi implementare il codice che gestirà il deep link. Vai al file "AppDelegate" e aggiungi un metodo per gestire lo schema. Quando la tua app verrà lanciata tramite lo schema URL; questo metodo verrà chiamato. L'URL verrà ricevuto con questo metodo. Le informazioni necessarie verranno estratte dall'URL e la schermata di destra verrà visualizzata nella tua app.

Fase # 3 Test

Ora, il deep link deve essere testato. Per questo, puoi utilizzare lo strumento Safari o qualsiasi altra applicazione di terze parti che supporti il ​​concetto di deep linking. Ad esempio, stai utilizzando Safari. Apri l'URL con lo schema URL definito in Safari. Successivamente, la tua app si avvia con la schermata corretta.

Passaggio n. 4 Gestione dei collegamenti universali

Oltre ad aggiungere schemi URL personalizzati, la tua app può anche essere configurata per supportare collegamenti universali (collegamenti HTTPS standard utilizzati da altre app o siti Web) per avviare la tua app. Ecco come devi gestire i collegamenti universali. Configura i diritti della tua applicazione. Quindi, crea il codice pertinente per la gestione dei collegamenti universali e implementa il codice nel delegato della tua app.

Ora puoi ricostruire il tuo progetto nel simulatore iOS.

Pensieri finali

Spero che ora tu sia esperto nel concetto di delinking e nel suo processo di esecuzione. Il deep linking è diventato una necessità per le applicazioni odierne. Tuttavia, è importante eseguire il processo di implementazione del deep linking con la massima competenza professionale. Se ti mancano le competenze tecniche o le risorse necessarie, un'esperta società di sviluppo di app native React può aiutarti a navigare attraverso il processo di creazione ed esecuzione di deep linking senza sforzo.