Cómo configurar deep links de afiliados en React Native con React Navigation

Deep linking para la atribución de afiliados en React Native

El deep linking es la base del seguimiento de afiliados en móviles. Conecta el toque en el enlace de afiliado con tu app y lleva los datos de atribución que identifican qué afiliado refirió al usuario. En React Native con React Navigation, configurar deep links requiere tanto la configuración nativa de cada plataforma como la configuración de rutas en JavaScript.

Configuración de la plataforma

iOS (Universal Links)

1. Agrega la capability Associated Domains en Xcode (applinks:yourdomain.com)
2. Aloja el archivo apple-app-site-association en tu dominio
3. Configura tu AppDelegate para manejar las URL entrantes

Android (App Links)

1. Aloja assetlinks.json en tu dominio
2. Agrega intent filters con autoVerify="true" en AndroidManifest.xml
3. Configura tu MainActivity para manejar los intents entrantes

Ambas plataformas requieren los archivos de configuración nativos para verificar que tu app maneja legítimamente los enlaces de tu dominio.

Configuración de deep links en React Navigation

React Navigation admite deep linking mediante su configuración de linking. Define patrones de URL que correspondan a las pantallas de tu app:

Configura la prop linking en tu NavigationContainer con los prefixes (tu dominio de afiliados) y un objeto config que asigne rutas de URL a nombres de pantallas.

Sin embargo, para el seguimiento de afiliados no necesitas forzosamente que el deep link navegue a una pantalla específica. El propósito principal es capturar el identificador del afiliado desde los parámetros de la URL.

Captura de los datos de atribución

El SDK de React Native de Insert Affiliate se encarga de capturar la atribución cuando llega un deep link:

1. La app recibe el universal link / app link
2. Antes de que React Navigation procese la URL para el enrutamiento, el SDK de Insert Affiliate extrae el identificador del afiliado
3. El SDK guarda la atribución localmente y la confirma con el servidor
4. React Navigation se encarga después de cualquier enrutamiento de navegación con normalidad

Inicializa el SDK de Insert Affiliate antes de configurar React Navigation para asegurar que la atribución se capture antes de que el router consuma la URL.

Manejo del ciclo de vida del linking

Los deep links llegan en dos escenarios:

La app está en ejecución (warm start): el enlace llega a través de la API Linking de React Native. Escucha los eventos de URL y pasa las URL entrantes tanto al SDK de afiliados como a tu manejador de navegación.

La app no está en ejecución (cold start): la URL inicial que abrió la app está disponible a través de Linking.getInitialURL(). Revísala al iniciar la app y procesa cualquier parámetro de afiliado.

Deferred deep links (instalaciones nuevas)

Cuando un usuario toca un enlace de afiliado pero no tiene la app instalada:

1. Se le redirige a la tienda de apps
2. Instala y abre la app
3. No llega ninguna URL de deep link (la instalación vino de la tienda)
4. El SDK de Insert Affiliate busca atribuciones pendientes del lado del servidor en el primer inicio
5. La atribución se resuelve mediante la coincidencia de dispositivos

Llama a la verificación de atribución diferida del SDK durante la secuencia de carga inicial de tu app.

Cómo probar los deep links

Prueba en dispositivos reales (no en simuladores en el caso de los universal links):

• Usa la app Notas de iOS o Safari para hacer clic en enlaces de afiliado de prueba
• En Android, prueba desde Chrome y apps de mensajería
• Prueba los escenarios de cold start y de warm start
• Verifica que la atribución aparezca en el panel de Insert Affiliate

Problemas comunes

• Los universal links no se activan: asegúrate de que el archivo AASA sea accesible y válido. Prueba desde Safari, no desde navegadores integrados en apps.
• Conflictos de navegación: si varias bibliotecas manejan URL, asegúrate de que el SDK de afiliados procese la URL primero.
• Limitaciones del flujo de trabajo administrado de Expo: usa development builds para probar los deep links por completo.

El SDK de React Native de Insert Affiliate se integra con el ciclo de vida de React Navigation, lo que asegura que la atribución se capture de forma confiable sin importar cómo llegue el usuario a tu app.