Enlaces profundos en las aplicaciones React Native: ¡todo lo que necesita saber!

Los enlaces profundos se han convertido en un componente esencial en el mundo interconectado de hoy. El término "enlace profundo" puede sonar nuevo para muchos; pero, la mayoría de ustedes debe haber usado el concepto de enlace profundo de una forma u otra.

¿Recuerda una instancia en la que hizo clic en un enlace y abrió directamente una pantalla específica en una aplicación instalada en su dispositivo; sin tener que navegar manualmente a través de la aplicación? O, por ejemplo, quería que su amigo leyera un artículo y compartió la URL de ese artículo. Su amigo hizo clic en el enlace y fue dirigido al contenido deseado de una sola vez en lugar de tener que iniciar primero la página de inicio y luego buscar el artículo.

¿Alguna vez te has preguntado cómo sucede esto?

Bueno, esto es lo que hacen los enlaces profundos. Los usuarios hacen clic en un enlace y son redirigidos a una ubicación particular en una aplicación móvil o un sitio web sin tener que perder tiempo navegando a través de la pantalla principal. Otros ejemplos incluyen compartir el enlace de un video de YouTube o un producto de Amazon con un amigo, abrir un enlace promocional de una marca para ir a la página de un producto específico, etc. En tales escenarios, los enlaces profundos son esenciales ya que los enlaces web regulares no funcionan de manera efectiva con las aplicaciones móviles nativas.

Esta publicación se trata de comprender cómo funciona el concepto de enlaces profundos y conocer sus beneficios. También discutiremos los pasos clave sobre cómo implementar enlaces profundos en las aplicaciones móviles React Native para los sistemas operativos Android e iOS. Elegimos el marco React Native porque es una de las preferencias más populares para el desarrollo de aplicaciones móviles en estos días.

¿Qué es la vinculación profunda?

La vinculación profunda es una técnica que permite vincular un contenido o una pantalla en particular dentro de una aplicación móvil desde una fuente externa como otra aplicación o un sitio web. Los enlaces profundos son enlaces en los que se puede hacer clic que envían a los usuarios directamente a una ubicación particular dentro de una aplicación móvil en lugar de una tienda en línea o un enlace web. Esta ubicación dentro de la aplicación puede ser algo así como una pieza de contenido seguro detrás de un muro de pago, un artículo, un producto o una pantalla de inicio de sesión. Los usuarios pueden llegar a la ubicación deseada en la aplicación simplemente haciendo clic en una URL o recurso sin necesidad de buscar la página ellos mismos.

¿Cómo funciona el concepto de enlace profundo?

Los enlaces profundos especifican un esquema de URL personalizado, como enlaces universales (para dispositivos iOS) y una URL de intención (para dispositivos Android). Cuando un usuario hace clic en un enlace profundo, el sistema operativo intercepta el enlace y abre la aplicación correspondiente si está instalada en el dispositivo del usuario. La información presente en el enlace profundo luego es utilizada por la aplicación para navegar al contenido o pantalla deseados.

¿Enlaces profundos diferidos?

¿Qué sucede si los usuarios obtienen un vínculo profundo a una aplicación, pero la aplicación no está instalada en su dispositivo? Aquí, los enlaces profundos diferidos entran en escena. Si un usuario hace clic en un enlace y la aplicación a la que pertenece el enlace no se descarga; el usuario es dirigido a la App Store en su lugar. Aquí, los usuarios son dirigidos a la ubicación exacta de la tienda de aplicaciones donde pueden instalar la aplicación deseada con un solo clic. Y, una vez que la aplicación se instala, la pantalla específica se abre de inmediato.

¿Cuáles son los beneficios de los enlaces profundos?

Los enlaces profundos ahorran tiempo a los usuarios y mejoran significativamente la experiencia del usuario.

Los enlaces profundos son excelentes herramientas para que las marcas comerciales aumenten la retención de usuarios y la tasa de conversión. Las marcas pueden vincular campañas promocionales e incentivos a vínculos profundos; redirigiendo a los usuarios a la página de su producto con un solo clic. De esta manera, las marcas pueden convencer fácilmente a los usuarios para que prueben nuevos productos o servicios. Por ejemplo, al propietario de una aplicación de música le gustaría promocionar un nuevo álbum de música. Entonces, el propietario invierte en publicidad y se vincula con un sitio web famoso. La portada del álbum de música con un enlace profundo se muestra en ese sitio web como una campaña publicitaria. Cuando los usuarios del sitio web hacen clic en el enlace profundo, son redirigidos a la página específica en la aplicación de música y pueden escuchar el álbum.

Además, puede realizar un seguimiento de las campañas de enlaces profundos y comprobar el rendimiento de sus campañas. Los enlaces profundos también mejoran sus clasificaciones de SEO y minimizan la rotación de su aplicación.

¿Cómo puede implementar enlaces profundos en aplicaciones nativas de React?

La biblioteca de navegación de reacción proporciona el módulo de vinculación para vincular profundamente las aplicaciones React Native. Esto resulta útil para los desarrolladores de React Native.

Debe definir un esquema de vínculo profundo en la aplicación que asignará direcciones URL específicas a las pantallas de la aplicación correspondiente. react-navigation proporciona componentes como el módulo de enlace y el contenedor de navegación para definir el esquema. Después de definir el esquema, se puede usar para manejar los enlaces profundos entrantes. Debe registrar una función de devolución de llamada con la ayuda del método addEventListner proporcionado por el módulo de vinculación para manejar los enlaces profundos entrantes. Cuando la aplicación se inicia a través de un enlace profundo, se llama a la función de devolución de llamada. Esta función de devolución de llamada se puede utilizar para navegar por la pantalla deseada en la aplicación.

Configuración de enlaces profundos en IoS y Android

Debe configurar una aplicación móvil con un esquema de URL (una URL única). Este esquema de URL es responsable de ubicar e iniciar la aplicación instalada en el dispositivo de teléfono inteligente del usuario. Para hacer que la aplicación navegue a una pantalla, debe configurar prefijos que coincidan con el esquema de URL en el que se configuró la aplicación. Luego, las pantallas deben mapearse dentro de la aplicación con sus respectivas rutas. Cuando la ruta se adjunta a la URL, la aplicación puede navegar directamente a pantallas específicas.

La configuración de enlaces profundos es un poco diferente para los sistemas operativos iOS y Android. ¡Echemos un vistazo a cómo los desarrolladores profesionales de React Native implementan enlaces profundos para Android e iOS!

Configuración de enlaces profundos en aplicaciones nativas de Android React

Paso #1 Definición de enlaces profundos

Abra el archivo Manifiesto y defina los enlaces profundos que planea usar en su aplicación para que los usuarios puedan navegar directamente a una página específica dentro de la aplicación. Aquí, debe definir un enlace profundo para esa página específica. Así es como puede definir un vínculo profundo en su archivo AndroidManifest.xml:
<actividad

android:nombre=”.ProductActivity”

android:etiqueta=”Producto”>

<intent-filter>

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

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

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

<datos

android:host=”ejemplo.com”

android:pathPrefix=”/productos”

android:esquema=”http” />

<datos

android:host=”ejemplo.com”

android:pathPrefix=”/productos”

android:esquema=”https” />

</intent-filter>

</actividad>

Paso #2 Configurar el filtro de intenciones

Vaya a android/app/src/main y desde allí abra el archivo llamado AndroidManifest.xml. Ahora, debe configurar el filtro de intención para cada enlace profundo. El filtro de intención especifica la cantidad de datos y las acciones que su aplicación es capaz de manejar.

Paso #3 Manejo de intención

Debe manejar la intención en la actividad de su aplicación. Esta intención lanzará su aplicación desde un enlace profundo. Para el manejo de la intención, debe extraer datos de la intención y determinar esa ubicación particular o pantalla específica dentro de su aplicación a la que desea que se dirija a los usuarios. A partir de entonces, su proyecto debe reconstruirse en el emulador de Android.

Configuración de enlaces profundos en aplicaciones React Native IOS

Configure su esquema de URL en tipos de URL en Xcode. Modifique el archivo 'AppDelegate' y reconstruya el proyecto en el emulador de iOS. Ahora el proyecto iOS está abierto en Xcode.

Paso #1 Definición del esquema de URL

Defina un esquema de URL personalizado para su aplicación. Este esquema de URL es una forma única de identificar su aplicación. Otros sitios web o aplicaciones utilizarán este identificador único para iniciar su aplicación.

Abra el archivo info.plist. Agregue un nuevo tipo de URL en la parte superior de este archivo. El esquema de URL se puede ingresar en el campo de esquemas de identificador y URL. Luego expanda el elemento 0 (cero), seleccione los esquemas de URL y nombre el elemento 0. Este nombre es el que se vinculará a su aplicación. Por ejemplo, el nombre de su aplicación es "NuestraAplicación". El esquema de URL se verá así “nuestraaplicación://” o “nuestraaplicación://detalle?id=123”.

Paso #2 Manejo de la implementación del código

Ahora, debe implementar el código que manejará el enlace profundo. Vaya al archivo 'AppDelegate' y agregue un método para manejar el esquema. Cuándo se lanzará su aplicación a través del esquema de URL; este método será llamado. La URL será recibida por este método. La información necesaria se extraerá de la URL y se mostrará la pantalla correcta en su aplicación.

Paso #3 Prueba

Ahora, el enlace profundo necesita ser probado. Para ello, puede utilizar la herramienta Safari o cualquier otra aplicación de terceros que admita el concepto de enlaces profundos. Por ejemplo, está utilizando Safari. Abra la URL que tenía el esquema de URL definido en Safari. A partir de entonces, su aplicación se inicia con la pantalla correcta.

Paso #4 Manejo de enlaces universales

Además de agregar esquemas de URL personalizados, su aplicación también se puede configurar para admitir enlaces universales (enlaces HTTPS estándar utilizados por otras aplicaciones o sitios web) para iniciar su aplicación. Así es como debe manejar los enlaces universales. Configure los derechos de su aplicación. Luego, cree el código relevante para el manejo universal de enlaces e implemente el código en el delegado de su aplicación.

Ahora, puede reconstruir su proyecto en el simulador de iOS.

Pensamientos finales

Espero que ahora esté bien versado en el concepto de desvinculación, así como en su proceso de ejecución. La vinculación profunda se ha convertido en una necesidad para las aplicaciones actuales. Sin embargo, es importante llevar a cabo el proceso de implementación de enlaces profundos con la máxima experiencia profesional. Si carece de la experiencia técnica o los recursos necesarios, una empresa de desarrollo de aplicaciones nativas de React puede ayudarlo a navegar sin esfuerzo por el proceso de creación y ejecución de enlaces profundos.