Añade un programa de afiliados o referidos a tu app de Capacitor o Ionic.

Por qué las apps WebView pueden atribuir más referidos con exactitud

Una app nativa logra una coincidencia exacta con un código escrito; un toque que pasa por la tienda se asocia después. Una app WebView puede recibir el código directamente, de tres maneras:

• La URL de inicio. Define Ajustes → General → URL de la app web, y los enlaces de referido llevarán allí a los visitantes de escritorio (y a los de móvil si no tienes ficha en la tienda de su plataforma), con influto_code e influto_click añadidos. initialize lee ambos y limpia la barra de direcciones.

• Deep links. listenForCapacitorLaunchUrls(InfluTo) pasa al SDK la URL del arranque en frío y cada evento appUrlOpen. En Cordova, llama a InfluTo.handleLaunchUrl(url).

• El Play Install Referrer. Los enlaces de Google Play de InfluTo llevan el código y el clic en el parámetro referrer de Play. Léelo en el primer arranque con un plugin de Install Referrer y pásalo a captureInstallReferrer.

Si no llega ningún código, InfluTo recurre a asociar el clic del enlace dentro de las 72 horas siguientes, sin comparar nunca características del dispositivo.

Paso 1: instalar

Añade el paquete. En Capacitor, hay tres plugins opcionales pero recomendados: @capacitor/device para los datos del dispositivo, @capacitor/preferences para un almacenamiento que sobreviva a los reinicios del WebView y @capacitor/app para los deep links. Ejecuta npx cap sync después de añadirlos; si falta alguno, se usan los valores predeterminados del navegador.

¿Sin bundler? Carga la versión para script tag desde https://cdn.jsdelivr.net/npm/@influto/web@1/dist/index.global.js y usa window.InfluTo. Solo incluye el SDK principal; los helpers de subruta requieren un bundler.

npm install @influto/web
# Capacitor / Ionic apps (device info, storage, deep links):
npm install @capacitor/device @capacitor/preferences @capacitor/app

Paso 2: inicializar una vez, en el momento justo

Llama a initialize una sola vez, en la raíz de la app, y espera a que termine. Si falla, lanza un InfluToApiError (status, body): captúralo, regístralo y sigue; en el siguiente arranque se volverá a intentar. La tabla de abajo indica cuándo llamarlo según el entorno.

La clave de API (it_…, en Configuración y SDK) sirve para desarrollo y producción; guárdala en un .env.local excluido de git y léela a través de tu bundler. Un arranque típico en Capacitor con una app que usa RevenueCat, en orden:

import InfluTo from '@influto/web';
import { capacitorAdapters, listenForCapacitorLaunchUrls } from '@influto/web/capacitor';
import { revenueCatCapacitor } from '@influto/web/revenuecat';
import { Purchases } from '@revenuecat/purchases-capacitor';

export async function startInfluTo() {
  await Purchases.configure({ apiKey: 'appl_…' }); // RevenueCat apps: configure it first
  try {
    await InfluTo.initialize({
      apiKey: import.meta.env.VITE_INFLUTO_API_KEY,
      appVersion: '1.4.0',
      ...(await capacitorAdapters()),
      revenueCat: revenueCatCapacitor(Purchases),
    });
  } catch (error) {
    console.warn('InfluTo initialize failed', error); // retried on the next launch
    return;
  }
  await listenForCapacitorLaunchUrls(InfluTo); // deep links → referral claim
  const attribution = await InfluTo.checkAttribution();
  const { appUserID } = await Purchases.getAppUserID();
  await InfluTo.identifyUser(appUserID);
}

Paso 3: reclamar con exactitud las instalaciones de Play Store

En Android, lee la cadena del referrer en el primer arranque con @capgo/capacitor-install-referrer o cordova-play-install-referrer, y entrégala después de initialize y antes de checkAttribution. Un código obtenido más tarde reabre una respuesta “orgánica” anterior; una instalación ya atribuida conserva a su creador.

await InfluTo.captureInstallReferrer(referrer); // the raw referrer string from the plugin
const attribution = await InfluTo.checkAttribution();

Paso 4: dejar que los usuarios escriban un código

applyCode(code) valida el código que escribe el usuario y lo aplica si es válido. Los códigos se recortan y se pasan a mayúsculas, y uno inválido devuelve valid: false con un error_code como CODE_NOT_FOUND o CODE_EXPIRED.

En React e Ionic React, ReferralCodeInput de @influto/web/react es un formulario simple y sin estilos que rellena de antemano el código atribuido por enlace y lo aplica al enviarse. En Angular, Vue o sin framework, crea el campo sobre applyCode.

Paso 5: conectar las compras

InfluTo solo paga comisión por compras verificadas con la tienda. Elige un camino por plataforma:

• RevenueCat: pasa un binding como revenueCat: revenueCatCapacitor(Purchases) para @revenuecat/purchases-capacitor 7.5.10+, revenueCatCordova(window.Purchases) para cordova-plugin-purchases, o revenueCatJs para purchases-js. Añádelo antes de checkAttribution, porque el atributo se escribe cuando se encuentra el referido; las escrituras fallidas se reintentan hasta 3 veces.

• Directo con la tienda: pasa un purchaseSource (mira la tabla). Si la app está configurada como directa con la tienda en Ajustes → Validación, initialize informa de las compras nuevas y registra las existentes, cada una una sola vez.

En iOS, el modo directo con la tienda necesita la transacción firmada de StoreKit 2: capgoNativePurchasesSource la transmite, mientras que con cordova-plugin-purchase debes comprobar que tu configuración exponga una. En Android, estas fuentes no incluyen el precio, así que informa tú de los productos de pago único con price y currency; si no, se registran a 0 $.

En una TWA, la Digital Goods API no tiene evento de compra, así que llama a InfluTo.syncExistingPurchases() después de cada pago; digitalGoodsSource consulta el precio por ti.

Trampas de cada plataforma

La mayoría de las integraciones WebView que fallan se deben a una de estas causas:

• Almacenamiento en Capacitor. Con @capacitor/preferences instalado, el SDK guarda ahí su estado; el localStorage del WebView se borra cuando cambia androidScheme o iosScheme.

• ionic serve. En una compilación de desarrollo web, el plugin de RevenueCat para Capacitor es solo un sustituto, así que ahí las escrituras de atributos no hacen nada. Prueba en un dispositivo.

• Cordova bloquea la API por defecto. Una plantilla nueva necesita una entrada access origin para https://influ.to en config.xml y connect-src https://influ.to en la Content-Security-Policy. RevenueCat ha dejado obsoleto su plugin de Cordova; para una app nueva, es mejor Capacitor.

• Navegadores y PWA. En un navegador o una PWA, pasa siempre platform (ios o android) a reportPurchase; el SDK no lo adivina cuando detecta web. Las web apps de iOS en la pantalla de inicio no pueden vender compras dentro de la app, pero la atribución sigue funcionando.

Paso 6: pruébalo

Las compras de prueba nunca mueven dinero ni cambian tus estadísticas:

1. 1

   Revisa Configuración y SDK. Tras el primer initialize correcto muestra “SDK conectado” con la plataforma, @influto/web y la versión del SDK; debug: true registra cada paso.

2. 2

   Simula una compra. Simular una compra en Configuración y SDK envía una compra de prueba en sandbox por el flujo real de InfluTo. Introduce uno de tus códigos para ver cómo se resuelve.

3. 3

   Prueba una instalación referida en un dispositivo. Abre el enlace de referido de un creador en un dispositivo de prueba, instala, abre la app y compra con un tester de sandbox, de TestFlight o de licencias. El registro de integración, cambiado a Sandbox, muestra la compra atribuida.

clearAttribution() borra la atribución guardada, el código y el código de lanzamiento para empezar otra prueba. Con un agente de programación conectado por MCP, puede hacer estas comprobaciones por ti.