Głębokie linkowanie w aplikacjach React Native: wszystko, co musisz wiedzieć!

Głębokie linkowanie stało się istotnym elementem dzisiejszego połączonego świata. Termin „głębokie linkowanie” może dla wielu wydawać się nowy; ale większość z was musiała używać koncepcji głębokiego linkowania w takiej czy innej formie.

Czy pamiętasz przypadek, w którym kliknąłeś link, który otworzył bezpośrednio określony ekran w aplikacji zainstalowanej na Twoim urządzeniu; bez konieczności ręcznego poruszania się po aplikacji? Lub na przykład chciałeś, aby twój znajomy przeczytał artykuł i udostępnił adres URL tego artykułu. Twój znajomy kliknął link i został przekierowany do żądanej treści za jednym razem, zamiast najpierw otwierać stronę główną, a następnie wyszukiwać artykuł.

Czy zastanawiałeś się kiedyś, jak to się dzieje?

Cóż, to właśnie robi głębokie linkowanie. Użytkownicy klikają w link i zostają przekierowani do określonej lokalizacji w aplikacji mobilnej lub na stronie internetowej bez konieczności marnowania czasu na poruszanie się po ekranie głównym. Inne przykłady obejmują udostępnianie linku do filmu YouTube lub produktu Amazon znajomemu, otwieranie linku promocyjnego od marki, aby przejść do strony określonego produktu i tak dalej. W takich sytuacjach głębokie linkowanie jest niezbędne, ponieważ zwykłe linki internetowe nie działają skutecznie z natywnymi aplikacjami mobilnymi.

Ten post ma na celu zrozumienie, jak działa koncepcja głębokiego linkowania i poznanie jego zalet. Omówimy również kluczowe kroki, jak wdrożyć deep linking w aplikacjach mobilnych React Native dla systemów operacyjnych Android i iOS. Wybraliśmy framework React Native, ponieważ jest to obecnie jedna z najpopularniejszych preferencji do tworzenia aplikacji mobilnych.

Co to jest głębokie linkowanie?

Głębokie linkowanie to technika, która umożliwia powiązanie określonej treści lub ekranu w aplikacji mobilnej z zewnętrznego źródła, takiego jak inna aplikacja lub strona internetowa. Głębokie linki to klikalne łącza, które kierują użytkowników bezpośrednio do określonej lokalizacji w aplikacji mobilnej, a nie do sklepu internetowego lub łącza internetowego. Ta lokalizacja w aplikacji może być dowolną częścią bezpiecznej treści za zaporą płatną, artykułem, produktem lub ekranem logowania. Użytkownicy mogą dotrzeć do żądanej lokalizacji w aplikacji, klikając adres URL lub zasób bez konieczności samodzielnego wyszukiwania strony.

Jak działa koncepcja głębokiego linkowania?

Głębokie linki określają dostosowany schemat adresów URL, na przykład linki uniwersalne (dla urządzeń z systemem iOS) i adres URL intencji (dla urządzeń z Androidem). Gdy użytkownik kliknie precyzyjny link, system operacyjny przechwytuje ten link i otwiera odpowiednią aplikację, jeśli jest zainstalowana na urządzeniu użytkownika. Informacje zawarte w precyzyjnym łączu są następnie wykorzystywane przez aplikację do nawigowania do żądanej treści lub ekranu.

Odroczone głębokie linki?

Co się stanie, jeśli użytkownicy otrzymają głębokie łącze do aplikacji, ale aplikacja nie jest zainstalowana na ich urządzeniu? Tutaj pojawiają się odroczone głębokie linki. Jeśli użytkownik kliknie łącze, a aplikacja, do której należy łącze, nie zostanie pobrana; zamiast tego użytkownik zostaje przekierowany do App Store. W tym miejscu użytkownicy są kierowani do dokładnej lokalizacji sklepu App Store, gdzie jednym kliknięciem mogą zainstalować wybraną aplikację. A po zainstalowaniu aplikacji określony ekran otwiera się od razu.

Jakie są zalety głębokiego linkowania?

Głębokie linkowanie oszczędza czas użytkowników i znacznie poprawia komfort użytkowania.

Głębokie linki to świetne narzędzia dla marek biznesowych do zwiększania retencji użytkowników, a także współczynnika konwersji. Marki mogą powiązać kampanie promocyjne i zachęty z głębokimi linkami; przekierowanie użytkowników na stronę produktu za pomocą jednego kliknięcia. W ten sposób marki mogą łatwo przekonać użytkowników do wypróbowania nowych produktów lub usług. Na przykład właściciel aplikacji muzycznej chciałby promować nowy album muzyczny. Właściciel inwestuje więc w reklamę i wiąże się ze znanym portalem. Okładka albumu muzycznego z głębokim linkiem jest wyświetlana na tej stronie jako kampania reklamowa. Kiedy użytkownicy witryny klikną w precyzyjny link, zostaną przekierowani na określoną stronę w aplikacji muzycznej i będą mogli posłuchać albumu.

Ponadto możesz śledzić kampanie z głębokim linkowaniem i sprawdzać skuteczność swoich kampanii. Głębokie linkowanie poprawia również Twoje rankingi SEO i minimalizuje rezygnację z Twojej aplikacji.

Jak zaimplementować głębokie linkowanie w aplikacjach React Native?

Biblioteka React-Navigation udostępnia moduł Linking do głębokiego linkowania aplikacji React Native. Jest to przydatne dla programistów React Native.

Musisz zdefiniować schemat precyzyjnych linków w aplikacji, który będzie mapował określone adresy URL na odpowiednie ekrany aplikacji. React-navigation udostępnia komponenty, takie jak moduł Linking i NavigationContainer do definiowania schematu. Po zdefiniowaniu schematu można go wykorzystać do obsługi przychodzących głębokich linków. Musisz zarejestrować funkcję wywołania zwrotnego za pomocą metody addEventListner dostarczonej przez moduł Linking do obsługi przychodzących głębokich linków. Gdy aplikacja zostanie uruchomiona za pośrednictwem głębokiego łącza, wywoływana jest funkcja wywołania zwrotnego. Tej funkcji wywołania zwrotnego można używać do poruszania się po żądanym ekranie w aplikacji.

Konfigurowanie głębokiego linkowania w IoS i Androidzie

Musisz skonfigurować aplikację mobilną ze schematem adresu URL (unikalny adres URL). Ten schemat adresu URL odpowiada za zlokalizowanie i uruchomienie aplikacji zainstalowanej na smartfonie użytkownika. Aby aplikacja przechodziła do ekranu, musisz skonfigurować prefiksy pasujące do schematu adresu URL, na którym skonfigurowano aplikację. Następnie ekrany muszą zostać zmapowane w aplikacji wraz z ich ścieżkami. Gdy ścieżka zostanie dołączona do adresu URL, aplikacja może bezpośrednio przechodzić do określonych ekranów.

Konfigurowanie precyzyjnych linków jest nieco inne w systemach operacyjnych iOS i Android. Przyjrzyjmy się, jak profesjonalni programiści React Native wdrażają głębokie linki na Androida i iOS!

Konfigurowanie głębokich linków w natywnych aplikacjach React na Androida

Krok 1 Definiowanie głębokich linków

Otwórz plik Manifest i zdefiniuj precyzyjne linki, których planujesz używać w swojej aplikacji, aby użytkownicy mogli bezpośrednio przechodzić do określonej strony w aplikacji. Tutaj musisz zdefiniować precyzyjny link do tej konkretnej strony. Oto jak zdefiniować precyzyjny link w pliku AndroidManifest.xml:
<aktywność

android:name=”.Aktywność produktu”

android:label=”Produkt”>

<filtr-intencji>

<akcja android:nazwa=”android.intent.action.VIEW” />

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

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

<dane

android:host=”example.com”

android:pathPrefix=”/produkty”

android:scheme=”http” />

<dane

android:host=”example.com”

android:pathPrefix=”/produkty”

android:scheme=”https” />

</intent-filter>

</aktywność>

Krok 2 Konfigurowanie filtra intencji

Przejdź do android/app/src/main i stamtąd otwórz plik o nazwie AndroidManifest.xml. Teraz musisz skonfigurować filtr intencji dla każdego precyzyjnego linku. Filtr intencji określa ilość danych i akcje, które Twoja aplikacja może obsłużyć.

Krok 3. Obsługa intencji

Musisz obsłużyć intencję w działaniu aplikacji. Ta intencja spowoduje uruchomienie aplikacji z głębokiego łącza. Aby obsłużyć intencję, musisz wyodrębnić dane z intencji i określić konkretną lokalizację lub konkretny ekran w aplikacji, do którego mają być kierowani użytkownicy. Następnie twój projekt musi zostać przebudowany w emulatorze Androida.

Konfigurowanie głębokich linków w natywnych aplikacjach React na IOS

Skonfiguruj schemat adresu URL w obszarze Typy adresów URL w Xcode. Zmodyfikuj plik „AppDelegate” i odbuduj projekt w emulatorze iOS. Teraz projekt iOS jest otwierany w Xcode.

Krok 1 Definiowanie schematu adresu URL

Zdefiniuj niestandardowy schemat adresów URL dla swojej aplikacji. Ten schemat adresów URL to unikalny sposób identyfikacji Twojej aplikacji. Inne strony internetowe lub aplikacje będą używać tego unikalnego identyfikatora do uruchamiania Twojej aplikacji.

Otwórz plik info.plist. Dodaj nowy typ adresu URL na górze tego pliku. Schemat URL można wpisać w polu Identyfikator i Schematy URL. Następnie rozwiń pozycję 0 (zero), wybierz schematy adresów URL i nazwij pozycję 0. Ta nazwa jest nazwą, pod którą będzie można łączyć aplikację. Na przykład nazwa Twojej aplikacji to „Nasza aplikacja”. Schemat adresu URL będzie wyglądał następująco: „ourapp://” lub „ourapp://detail?id=123”.

Krok 2 Obsługa implementacji kodu

Teraz musisz zaimplementować kod, który będzie obsługiwał precyzyjny link. Przejdź do pliku „AppDelegate” i dodaj metodę obsługi schematu. Kiedy Twoja aplikacja zostanie uruchomiona za pomocą schematu adresu URL; ta metoda zostanie wywołana. Adres URL zostanie odebrany tą metodą. Niezbędne informacje zostaną wyodrębnione z adresu URL, a odpowiedni ekran zostanie wyświetlony w Twojej aplikacji.

Krok 3 Testowanie

Teraz głęboki link musi zostać przetestowany. W tym celu możesz użyć narzędzia Safari lub innych aplikacji innych firm, które obsługują koncepcję głębokiego linkowania. Na przykład używasz Safari. Otwórz adres URL, który miał zdefiniowany schemat adresu URL w Safari. Następnie Twoja aplikacja zostanie uruchomiona z odpowiednim ekranem.

Krok 4 Uniwersalna obsługa linków

Oprócz dodawania niestandardowych schematów adresów URL, aplikację można również skonfigurować tak, aby obsługiwała łącza uniwersalne — standardowe łącza HTTPS używane przez inne aplikacje lub strony internetowe — do uruchamiania aplikacji. W ten sposób musisz obsługiwać uniwersalne linki. Skonfiguruj uprawnienia swojej aplikacji. Następnie utwórz odpowiedni kod do obsługi linków uniwersalnych i zaimplementuj kod w delegacie swojej aplikacji.

Teraz możesz odbudować swój projekt w symulatorze iOS.

Końcowe przemyślenia

Mam nadzieję, że jesteś teraz dobrze zaznajomiony z koncepcją delinkowania, a także procesem jego wykonywania. Głębokie linkowanie stało się koniecznością dla dzisiejszych aplikacji. Jednak ważne jest, aby przeprowadzić proces wdrażania głębokiego linkowania z najwyższą profesjonalną wiedzą. Jeśli brakuje Ci wiedzy technicznej lub niezbędnych zasobów, doświadczona firma React Native App Development może pomóc Ci bez wysiłku przejść przez proces tworzenia i wykonywania głębokiego linkowania.