Suscripciones y seguimiento de afiliados en React Native
Crear un modelo de suscripción en React Native requiere conectar varias piezas: las tiendas de aplicaciones nativas para procesar los pagos, un servicio de validación de recibos para gestionar las suscripciones y un sistema de seguimiento de afiliados para darles crédito a los socios que traen nuevos suscriptores. Esta guía recorre la configuración completa.
Resumen de la arquitectura
El stack de suscripción típico de una app de React Native con seguimiento de afiliados consta de tres capas:
- Capa de pago: Apple App Store y Google Play gestionan las transacciones de pago reales a través de sus sistemas nativos de IAP
- Capa de gestión de suscripciones: RevenueCat (o Adapty) valida los recibos, gestiona el estado de la suscripción y ofrece una API unificada entre plataformas
- Capa de seguimiento de afiliados: Insert Affiliate conecta los clics en enlaces de afiliado con las compras de suscripción y atribuye los ingresos al afiliado correcto
Estas capas se comunican mediante webhooks y callbacks del lado del servidor, lo que significa que el trabajo de integración ocurre tanto en tu código de React Native como en la configuración de tu backend.
Configuración de RevenueCat
Empieza por instalar el SDK de RevenueCat en tu proyecto de React Native. RevenueCat ofrece un paquete de React Native que envuelve las API de compra nativas de iOS y Android en una sola interfaz de JavaScript.
Configura primero tus productos en App Store Connect y Google Play Console: tus niveles de suscripción, precios y ofertas de prueba gratuita. Después replica esos productos en el panel de RevenueCat como Offerings que tu app pueda mostrar.
En tu código de React Native, inicializa RevenueCat al comienzo del ciclo de vida de la app con tu clave de API. Usa la API de Offerings para obtener los planes de suscripción disponibles y mostrarlos en tu componente de paywall. Cuando un usuario toque suscribirse, llama al método de compra con el paquete seleccionado.
RevenueCat se encarga de la validación de recibos y del ciclo de vida de la suscripción (renovaciones, cancelaciones, periodos de gracia), y ofrece una fuente de verdad del lado del servidor para el estado de la suscripción.
Integración de Insert Affiliate
Insert Affiliate sigue el recorrido desde el clic en el enlace de afiliado hasta la compra de la suscripción. La integración tiene dos partes: manejar los enlaces de afiliado entrantes en tu app y conectar los eventos de compra con las atribuciones de afiliados.
Manejo de enlaces de afiliado: cuando un usuario toca un enlace de afiliado, se le dirige a la App Store o a la Play Store (si la app no está instalada) o entra a la app mediante un deep link (si está instalada). Instala el SDK de Insert Affiliate para React Native para capturar los datos de atribución cuando la app se abre.
El SDK captura el identificador del afiliado desde el deep link y lo guarda localmente. Este identificador se conserva durante el flujo de instalación, incluso cuando el usuario instala desde la tienda y abre la app por primera vez.
Conexión de las compras: configura Insert Affiliate para recibir notificaciones de webhook de RevenueCat. Cuando un usuario se suscribe, RevenueCat envía un evento al servidor de Insert Affiliate, que asocia la compra con la atribución de afiliado guardada. El afiliado recibe el crédito por la conversión.
Cómo construir el componente de paywall
Tu paywall es donde ocurre la conversión. Constrúyelo como una pantalla dedicada de React Native que muestre las ofertas de suscripción obtenidas de RevenueCat.
Elementos clave de un paywall efectivo:
- Propuesta de valor clara, visible sin desplazarse
- Opciones de niveles de suscripción con precios
- Mención de la prueba gratuita, si aplica
- Prueba social o reseñas destacadas
- Botón de suscripción destacado
Mantén el componente enfocado. Cada elemento debe acercar al usuario a suscribirse. Evita saturar la pantalla con funciones que distraigan de la decisión de compra.
Prueba del flujo completo
Prueba el recorrido completo del usuario en modo sandbox:
- Genera un enlace de afiliado de prueba en Insert Affiliate
- Haz clic en el enlace en un dispositivo de prueba
- Instala la app (o ábrela si ya está instalada)
- Completa una compra de suscripción en sandbox
- Verifica que la atribución aparezca en el panel de Insert Affiliate
- Confirma que al afiliado se le acredite la comisión correcta
Prueba tanto en iOS como en Android. El comportamiento del deep linking es distinto en cada plataforma, y cada tienda de aplicaciones tiene su propio entorno sandbox de compras.
Manejo de casos especiales
Varios escenarios requieren atención:
Deep links diferidos: cuando un usuario hace clic en un enlace de afiliado pero no tiene la app instalada, el deep linking diferido de Insert Affiliate conserva la atribución durante el proceso de instalación. Prueba este flujo de forma específica.
Restauración de la suscripción: cuando un usuario reinstala la app o cambia de dispositivo, RevenueCat restaura su suscripción. La atribución original del afiliado se mantiene intacta porque se guarda del lado del servidor.
Compartir en familia: si un suscriptor comparte su suscripción mediante Compartir en familia, los usuarios adicionales no son conversiones nuevas y no deben generar comisiones de afiliado adicionales. El sistema de entitlements de RevenueCat se encarga de esta distinción.
Salida a producción
Antes de lanzar, verifica que tus conexiones de webhook entre RevenueCat e Insert Affiliate estén configuradas para producción (no para sandbox). Define tus tasas de comisión, la ventana de atribución y cualquier condición promocional para tus primeros afiliados.
Con la integración técnica terminada, tu atención pasa a reclutar afiliados y optimizar la tasa de conversión de tu paywall, las dos palancas que determinan cuántos ingresos genera tu canal de afiliados.