Deep Linking in React Native Apps: Alles, was Sie wissen müssen!

Deep Linking ist zu einer wesentlichen Komponente in der heutigen vernetzten Welt geworden. Der Begriff „Deep Linking“ mag für viele neu klingen; aber die meisten von Ihnen müssen das Konzept des Deep-Linking in irgendeiner Form verwendet haben.

Erinnern Sie sich an einen Fall, in dem Sie auf einen Link geklickt haben und dieser direkt einen bestimmten Bildschirm in einer auf Ihrem Gerät installierten App geöffnet hat; ohne dass Sie manuell durch die App navigieren müssen? Oder Sie wollten beispielsweise, dass Ihr Freund einen Artikel liest, und haben die URL dieses Artikels geteilt. Ihr Freund hat auf den Link geklickt und wurde auf einen Schlag zum gewünschten Inhalt geleitet, anstatt zuerst die Homepage starten und dann nach dem Artikel suchen zu müssen.

Haben Sie sich jemals gefragt, wie das passiert?

Nun, genau das macht Deep Linking. Benutzer klicken auf einen Link und werden zu einer bestimmten Stelle in einer mobilen App oder einer Website weitergeleitet, ohne Zeit mit der Navigation über den Hauptbildschirm verschwenden zu müssen. Andere Beispiele sind das Teilen des Links für ein YouTube-Video oder Amazon-Produkt mit einem Freund, das Öffnen eines Werbelinks von einer Marke, um zu einer bestimmten Produktseite zu gelangen, und so weiter. In solchen Szenarien ist Deep Linking unerlässlich, da normale Weblinks mit nativen mobilen Anwendungen nicht effektiv funktionieren.

In diesem Beitrag geht es darum, zu verstehen, wie das Konzept des Deep Linking funktioniert, und seine Vorteile kennenzulernen. Wir werden auch die wichtigsten Schritte zur Implementierung von Deep Linking in mobilen React Native-Apps für die Betriebssysteme Android und iOS besprechen. Wir haben uns für das React Native-Framework entschieden, da es heutzutage eine der beliebtesten Einstellungen für die Entwicklung mobiler Apps ist.

Was ist Deeplinking?

Deep Linking ist eine Technik, die es einem ermöglicht, einen bestimmten Inhalt oder Bildschirm innerhalb einer mobilen Anwendung von einer externen Quelle wie einer anderen Anwendung oder einer Website zu verlinken. Deep-Links sind anklickbare Links, die Benutzer direkt zu einem bestimmten Ort innerhalb einer mobilen App und nicht zu einem Online-Shop oder einem Weblink weiterleiten. Dieser In-App-Speicherort kann so etwas wie ein sicherer Inhalt hinter einer Paywall, ein Artikel, ein Produkt oder ein Anmeldebildschirm sein. Benutzer können den gewünschten Ort in der App erreichen, indem sie einfach auf eine URL oder Ressource klicken, ohne selbst nach der Seite suchen zu müssen.

Wie funktioniert das Konzept des Deep Linking?

Deep Linking gibt ein benutzerdefiniertes URL-Schema wie universelle Links (für iOS-Geräte) und eine Absichts-URL (für Android-Geräte) an. Wenn ein Benutzer auf einen Deep-Link klickt, fängt das Betriebssystem den Link ab und öffnet die relevante Anwendung, wenn sie auf dem Gerät des Benutzers installiert ist. Die im Deeplink enthaltenen Informationen werden dann von der Anwendung verwendet, um zum gewünschten Inhalt oder Bildschirm zu navigieren.

Verzögerte Deeplinks?

Was ist, wenn Benutzer per Deep Link zu einer Anwendung gelangen, die Anwendung jedoch nicht auf ihrem Gerät installiert ist? Hier kommen verzögerte Deeplinks ins Spiel. Wenn ein Benutzer auf einen Link klickt und die App, zu der der Link gehört, nicht heruntergeladen wird; der Benutzer wird stattdessen zum App Store geleitet. Hier werden die Nutzer an die exakte Stelle des App Stores geleitet, wo sie mit nur einem Klick die gewünschte App installieren können. Und sobald die App installiert ist, öffnet sich sofort der spezifische Bildschirm.

Was sind die Vorteile von Deep Linking?

Deep Linking spart den Benutzern Zeit und verbessert die Benutzererfahrung erheblich.

Deep Links sind großartige Tools für Unternehmensmarken, um die Benutzerbindung und die Konversionsrate zu steigern. Marken können Werbekampagnen und Anreize mit Deep Links verknüpfen; Benutzer mit nur einem Klick auf ihre Produktseite umleiten. Auf diese Weise können Marken Benutzer leicht davon überzeugen, neue Produkte oder Dienstleistungen auszuprobieren. Beispielsweise möchte ein Musik-App-Besitzer ein neues Musikalbum bewerben. Also investiert der Besitzer in Werbung und knüpft an eine berühmte Website an. Das Musikalbum-Cover mit einem Deep-Link wird auf dieser Website als Werbekampagne angezeigt. Wenn die Website-Benutzer auf den Deep-Link klicken, werden sie auf die entsprechende Seite in der Musik-App weitergeleitet und können das Album anhören.

Darüber hinaus können Sie Deep-Linking-Kampagnen verfolgen und die Leistung Ihrer Kampagnen überprüfen. Deep Linking verbessert auch Ihre SEO-Rankings und minimiert die Abwanderung Ihrer Anwendung.

Wie können Sie Deep Linking in React Native Apps implementieren?

Die React-Navigation-Bibliothek bietet das Linking-Modul zum Deep-Linking von React Native-Apps. Dies erweist sich als praktisch für React Native-Entwickler.

Sie müssen in der Anwendung ein Deep-Link-Schema definieren, das bestimmte URLs den relevanten App-Bildschirmen zuordnet. React-Navigation stellt Komponenten wie das Linking-Modul und den NavigationContainer bereit, um das Schema zu definieren. Nach der Definition des Schemas kann es zur Handhabung der eingehenden Deeplinks verwendet werden. Sie müssen eine Callback-Funktion mit Hilfe der addEventListener-Methode registrieren, die vom Linking-Modul bereitgestellt wird, um die eingehenden Deep-Links zu verarbeiten. Wenn die App über einen Deep-Link gestartet wird, wird die Callback-Funktion aufgerufen. Diese Rückruffunktion kann zum Navigieren zum gewünschten Bildschirm in der Anwendung verwendet werden.

Konfigurieren von Deep Linking in IoS und Android

Sie müssen eine mobile App mit einem URL-Schema (einer eindeutigen URL) konfigurieren. Dieses URL-Schema ist für das Auffinden und Starten der auf dem Smartphone des Benutzers installierten App verantwortlich. Damit die App zu einem Bildschirm navigiert, müssen Sie Präfixe einrichten, die dem URL-Schema entsprechen, für das die App konfiguriert wurde. Dann müssen die Bildschirme innerhalb der App mit ihren jeweiligen Pfaden abgebildet werden. Wenn der Pfad an die URL angehängt wird, kann die App direkt zu bestimmten Bildschirmen navigieren.

Die Konfiguration von Deeplinks ist für die Betriebssysteme iOS und Android etwas anders. Werfen wir einen Blick darauf, wie professionelle React Native-Entwickler Deep Linking für Android und iOS implementieren!

Konfigurieren von Deep Links in nativen Android-Apps von React

Schritt #1 Definieren von Deep Links

Öffnen Sie die Manifestdatei und definieren Sie die Tiefenlinks, die Sie in Ihrer App verwenden möchten, damit Benutzer direkt zu einer bestimmten Seite in der App navigieren können. Hier müssen Sie einen Deep-Link für diese bestimmte Seite definieren. So können Sie einen Deep-Link in Ihrer AndroidManifest.xml-Datei definieren:
<Aktivität

android:name=".ProductActivity"

android:label="Produkt">

<Absichtsfilter>

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

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

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

<Daten

android:host="example.com"

android:pathPrefix="/products"

android:scheme="http" />

<Daten

android:host="example.com"

android:pathPrefix="/products"

android:scheme="https" />

</intent-filter>

</Aktivität>

Schritt #2 Konfigurieren des Intent-Filters

Gehen Sie zu android/app/src/main und öffnen Sie von dort aus die Datei mit dem Namen AndroidManifest.xml. Jetzt müssen Sie den Intent-Filter für jeden Deep-Link konfigurieren. Der Absichtsfilter gibt die Datenmenge und die Aktionen an, die Ihre Anwendung verarbeiten kann.

Schritt Nr. 3 Absichtsbehandlung

Sie müssen die Absicht in der Aktivität Ihrer Anwendung behandeln. Dieser Intent startet Ihre Anwendung über einen Deep Link. Für die Absichtsverarbeitung müssen Sie Daten aus der Absicht extrahieren und diesen bestimmten Ort oder bestimmten Bildschirm in Ihrer App bestimmen, zu dem die Benutzer geleitet werden sollen. Danach muss Ihr Projekt im Android-Emulator neu erstellt werden.

Konfigurieren von Deep Links in React Native IOS-Apps

Richten Sie Ihr URL-Schema unter URL-Typen in Xcode ein. Ändern Sie die Datei „AppDelegate“ und erstellen Sie das Projekt im iOS-Emulator neu. Jetzt wird das iOS-Projekt in Xcode geöffnet.

Schritt #1 Das URL-Schema definieren

Definieren Sie ein benutzerdefiniertes URL-Schema für Ihre Anwendung. Dieses URL-Schema ist eine einzigartige Möglichkeit für Ihre App, identifiziert zu werden. Andere Websites oder Apps verwenden diese eindeutige Kennung, um Ihre Anwendung zu starten.

Öffnen Sie die Datei info.plist. Fügen Sie oben in dieser Datei einen neuen URL-Typ hinzu. Das URL-Schema kann in das Feld Identifikator und URL-Schemata eingegeben werden. Erweitern Sie dann Element 0 (Null), wählen Sie die URL-Schemata aus und benennen Sie Element 0. Dieser Name ist derjenige, unter dem Ihre Anwendung verlinkt werden kann. Der Name Ihrer App lautet beispielsweise „OurApp“. Das URL-Schema sieht folgendermaßen aus: „ourapp://“ oder „ourapp://detail?id=123“.

Schritt Nr. 2 Handhabung der Code-Implementierung

Jetzt müssen Sie den Code implementieren, der den Deep-Link verarbeitet. Gehen Sie zur Datei „AppDelegate“ und fügen Sie eine Methode zur Handhabung des Schemas hinzu. Wann Ihre App über das URL-Schema gestartet wird; Diese Methode wird aufgerufen. Die URL wird mit dieser Methode empfangen. Die notwendigen Informationen werden aus der URL extrahiert und der richtige Bildschirm wird in Ihrer App angezeigt.

Schritt #3 Testen

Nun muss der Deeplink getestet werden. Dazu können Sie das Tool Safari oder andere Drittanwendungen verwenden, die das Deep-Linking-Konzept unterstützen. Sie verwenden beispielsweise Safari. Öffnen Sie die URL mit dem definierten URL-Schema in Safari. Danach startet Ihre App mit dem richtigen Bildschirm.

Schritt #4 Universelles Link-Handling

Neben dem Hinzufügen von benutzerdefinierten URL-Schemata kann Ihre App auch so konfiguriert werden, dass sie universelle Links – Standard-HTTPS-Links, die von anderen Apps oder Websites verwendet werden – zum Starten Ihrer App unterstützt. So müssen Sie mit universellen Links umgehen. Konfigurieren Sie die Berechtigungen Ihrer Anwendung. Erstellen Sie dann den relevanten Code für die universelle Linkbehandlung und implementieren Sie den Code im Delegaten Ihrer App.

Jetzt können Sie Ihr Projekt im iOS-Simulator neu erstellen.

Abschließende Gedanken

Ich hoffe, Sie sind jetzt mit dem Konzept des Delinking sowie dessen Ausführungsprozess vertraut. Deep Linking ist für heutige Anwendungen zu einer Notwendigkeit geworden. Es ist jedoch wichtig, den Deep-Linking-Implementierungsprozess mit einem Höchstmaß an professioneller Expertise durchzuführen. Wenn Ihnen das technische Know-how oder die erforderlichen Ressourcen fehlen, kann Ihnen ein erfahrenes Unternehmen für die Entwicklung nativer React-Apps dabei helfen, mühelos durch den Deep-Linking-Erstellungs- und Ausführungsprozess zu navigieren.