Volver a los artículos
Michael Butler
Michael Butler
Fundador, Insert Affiliate
8 de octubre de 2026
8 min de lectura
Seguimiento y atribución

Cómo implementar el seguimiento de afiliados en una app React Native con IAP

How to Implement Affiliate Tracking in a React Native App with IAPs

Cómo implementar el seguimiento de afiliados en una app React Native con IAP

Qué vas a construir

Al terminar este tutorial, tu app de React Native atribuirá las compras dentro de la app a los afiliados que las generaron. Cuando un usuario haga clic en un enlace de afiliado, abra tu app y haga una compra, la transacción aparecerá en tu panel de Insert Affiliate con el afiliado correcto acreditado y la comisión calculada.

La integración usa el paquete insert-affiliate-react-native-sdk y toma unos 30 minutos.

Requisitos previos

  • React Native 0.60 o posterior
  • iOS 13.0+ / Android API 21+
  • Un Company Code de tu panel de Insert Affiliate (página de Configuración)
  • Una plataforma de verificación de compras configurada (este tutorial usa RevenueCat, pero el SDK también es compatible con Adapty, Apphud, Iaptic, App Store directo y Google Play directo)

Paso 1: instala el SDK

Instala el SDK de Insert Affiliate y las dependencias peer que requiere:

npm install insert-affiliate-react-native-sdk
npm install @react-native-async-storage/async-storage @react-native-clipboard/clipboard @react-native-community/netinfo react-native-device-info axios

Para proyectos bare de React Native, instala los pods de iOS:

cd ios && pod install && cd ..

Para el flujo administrado de Expo, omite la instalación de pods. Los pods se instalan automáticamente cuando ejecutas npx expo prebuild o npx expo run:ios.

Paso 2: envuelve tu app con el provider

El SDK usa React Context para administrar el estado. Envuelve tu app con DeepLinkIapProvider en tu archivo de entrada (index.js):

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { DeepLinkIapProvider } from 'insert-affiliate-react-native-sdk';

const RootComponent = () => {
  return (
    
      
    
  );
};

AppRegistry.registerComponent(appName, () => RootComponent);

Paso 3: inicializa el SDK

En tu App.tsx, llama a initialize() con tu Company Code:

import React, { useEffect } from 'react';
import { useDeepLinkIapProvider } from 'insert-affiliate-react-native-sdk';

const App = () => {
  const { initialize, isInitialized } = useDeepLinkIapProvider();

  useEffect(() => {
    if (!isInitialized) {
      initialize(
        "YOUR_COMPANY_CODE",
        true,   // verbose logging (disable in production)
        true,   // enable Insert Links
        false   // clipboard attribution
      );
    }
  }, [initialize, isInitialized]);

  return ;
};

Cuando la inicialización se complete correctamente, verás esto en tu consola:

[Insert Affiliate] SDK initialized with company code: YOUR_COMPANY_CODE

Paso 4: conecta con RevenueCat

Este es el paso crítico que une la atribución de afiliados con el seguimiento de compras. Cuando el SDK detecta un identificador de afiliado (de un deep link o un short code), se lo pasas a RevenueCat como atributo de suscriptor:

import React, { useEffect } from 'react';
import { AppState } from 'react-native';
import Purchases from 'react-native-purchases';
import { useDeepLinkIapProvider } from 'insert-affiliate-react-native-sdk';

const App = () => {
  const {
    initialize,
    isInitialized,
    setInsertAffiliateIdentifierChangeCallback,
    isAffiliateAttributionValid,
    getAffiliateExpiryTimestamp
  } = useDeepLinkIapProvider();

  useEffect(() => {
    if (!isInitialized) {
      initialize("YOUR_COMPANY_CODE", true, true, false);
    }
  }, [initialize, isInitialized]);

  useEffect(() => {
    setInsertAffiliateIdentifierChangeCallback(async (identifier, offerCode) => {
      if (identifier) {
        await Purchases.setAttributes({
          "insert_affiliate": identifier,
          "affiliateOfferCode": offerCode || "",
          "insert_timedout": ""
        });
        await Purchases.syncAttributesAndOfferingsIfNeeded();
      }
    });

    return () => setInsertAffiliateIdentifierChangeCallback(null);
  }, [setInsertAffiliateIdentifierChangeCallback]);

  useEffect(() => {
    if (!isInitialized) return;

    const clearExpiredAffiliation = async () => {
      const isValid = await isAffiliateAttributionValid();
      if (!isValid) {
        const expiryTimestamp = await getAffiliateExpiryTimestamp();
        if (!expiryTimestamp) return;

        await Purchases.setAttributes({
          "affiliateOfferCode": "",
          "insert_timedout": expiryTimestamp.toString()
        });
        await Purchases.syncAttributesAndOfferingsIfNeeded();
      }
    };

    clearExpiredAffiliation();

    const subscription = AppState.addEventListener('change', (state) => {
      if (state === 'active') {
        clearExpiredAffiliation();
      }
    });

    return () => subscription?.remove();
  }, [isInitialized, isAffiliateAttributionValid, getAffiliateExpiryTimestamp]);

  return ;
};

El callback se ejecuta cada vez que cambia el identificador de afiliado. El atributo insert_timedout guarda la marca de tiempo de vencimiento para que el webhook pueda comparar las fechas de compra con la ventana de atribución.

Paso 5: configura el webhook de RevenueCat

  1. En RevenueCat, crea un nuevo webhook.
  2. Define la URL del webhook como https://api.insertaffiliate.com/v1/api/revenuecat-webhook.
  3. Define el tipo de evento como "All events".
  4. En la Configuración de tu panel de Insert Affiliate, define RevenueCat como método de verificación de compras dentro de la app.
  5. Copia el valor de RevenueCat Webhook Authentication Header desde el panel de Insert Affiliate.
  6. Pégalo en el campo del encabezado Authorization en la configuración del webhook de RevenueCat.

Paso 6: configura el deep linking (iOS)

Actualiza tu ios/YourApp/AppDelegate.mm para manejar las URL entrantes:

#import 

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity
 restorationHandler:(void(^)(NSArray * __nullable restorableObjects))restorationHandler
{
  return [RCTLinkingManager application:application
                   continueUserActivity:userActivity
                     restorationHandler:restorationHandler];
}

Agrega tu esquema de URL de iOS a Info.plist y, para Universal Links, agrega applinks:insertaffiliate.link a Associated Domains en Xcode.

Paso 7: configura el deep linking (Android)

Agrega un intent filter a tu activity principal en android/app/src/main/AndroidManifest.xml:

Para Android App Links, agrega un segundo intent filter con android:autoVerify="true" y android:host="insertaffiliate.link". Define android:launchMode="singleTop" en tu activity.

Paso 8: maneja Expo Router (si aplica)

Si usas Expo Router, crea app/+native-intent.tsx para evitar conflictos de rutas:

export function redirectSystemPath({ path }: { path: string }): string | null {
  if (path.includes('insert-affiliate') || path.includes('insertAffiliate')) {
    return null;
  }
  return path;
}

Paso 9: prueba la integración

Crea un afiliado de prueba en tu panel de Insert Affiliate usando un alias de correo (por ejemplo, [email protected]). Luego prueba el deep link:

# iOS Simulator
xcrun simctl openurl booted "https://insertaffiliate.link/YOUR_COMPANY_CODE/TEST_SHORT_CODE"

# Android Emulator
adb shell am start -a android.intent.action.VIEW -d "https://insertaffiliate.link/YOUR_COMPANY_CODE/TEST_SHORT_CODE"

Verifica que el identificador de afiliado quedó guardado revisando los logs de la consola, luego haz una compra en sandbox y confirma que la transacción aparece en tu panel.

Cómo usar otras plataformas de verificación de compras

Si usas Adapty en lugar de RevenueCat, el callback del identificador define un atributo personalizado mediante adapty.updateProfile(). Para Iaptic, llama a validatePurchaseWithIapticAPI() desde el SDK. Para la integración directa con App Store, llama a returnUserAccountTokenAndStoreExpectedTransaction() antes de cada compra. Para Google Play directo, llama a storeExpectedStoreTransaction() con el token de compra después de cada compra.

Los pasos de deep linking y de inicialización del SDK son los mismos sin importar qué plataforma de verificación de compras elijas.

Funciones avanzadas

Cuando la integración básica esté funcionando, considera agregar:

  • Short codes: permite que los afiliados compartan códigos como "SAVE20" que los usuarios ingresan en tu app. Llama a setShortCode(code) para validarlo y guardarlo.
  • Códigos de oferta dinámicos: configura modificadores de códigos de oferta en el panel y usa OfferCode del SDK para construir ID de producto dinámicos.
  • Seguimiento de eventos: registra eventos personalizados, como los registros de usuarios, con trackEvent('user_signup') para estructuras de comisiones que van más allá de las compras.
  • Tiempo límite de atribución: define un límite de tiempo para la vigencia de la atribución de afiliado, por ejemplo 7 días (604,800 segundos).
  • Evitar la transferencia de afiliado: bloquea la primera atribución de afiliado para que los clics posteriores en otros enlaces no puedan sobrescribirla.

Comentarios

¿Listo para hacer crecer tu app con marketing de afiliados?

Únete a cientos de desarrolladores de apps que ya hacen seguimiento de las compras dentro de la app generadas por afiliados y recompensan a sus socios.

Book a DemoLearn More