Adicione um programa de afiliados ou de indicação ao seu app Capacitor ou Ionic.

Por que apps WebView conseguem atribuir mais indicações com exatidão

Um app nativo obtém correspondência exata a partir de um código digitado. Um toque que passa pela loja é associado depois. Um app WebView pode receber o próprio código, de três formas:

• A URL de abertura. Defina Settings → General → Web app URL, e os links de indicação enviarão para ela os visitantes no desktop (e no celular, quando você não tem página na loja para a plataforma deles), com influto_code e influto_click anexados. O initialize lê os dois e limpa a barra de endereço.

• Deep links. listenForCapacitorLaunchUrls(InfluTo) passa ao SDK a URL da inicialização a frio e cada evento appUrlOpen. No Cordova, chame InfluTo.handleLaunchUrl(url).

• O Play Install Referrer. Os links do Google Play gerados pelo InfluTo levam o código e o clique no parâmetro referrer do Play. Leia-o na primeira abertura com um plugin de Install Referrer e passe-o ao captureInstallReferrer.

Sem um código transportado, o InfluTo recorre à correspondência por clique no link em até 72 horas, que nunca compara características do dispositivo.

Passo 1: instalar

Adicione o pacote. No Capacitor, três plugins são opcionais, mas recomendados: @capacitor/device para dados do dispositivo, @capacitor/preferences para um armazenamento que sobrevive a redefinições da WebView e @capacitor/app para deep links. Rode npx cap sync depois de adicioná-los. Se algum faltar, o SDK usa os padrões do navegador.

Sem bundler? Carregue a versão para script tag em https://cdn.jsdelivr.net/npm/@influto/web@1/dist/index.global.js e use window.InfluTo. Ela contém só o SDK principal. Os helpers de subcaminho precisam de um bundler.

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

Passo 2: inicializar uma vez, na hora certa

Chame initialize uma vez, na raiz do app, e aguarde o resultado. Em caso de falha, ele lança um InfluToApiError (status, body): capture o erro, registre-o e siga em frente. A próxima abertura tenta de novo. A tabela abaixo mostra quando chamá-lo em cada runtime.

A chave de API (it_…, em Setup & SDK) vale para desenvolvimento e produção. Guarde-a em um .env.local fora do git, lido pelo seu bundler. Uma inicialização típica no Capacitor, em um app com RevenueCat, na ordem:

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);
}

Passo 3: registrar com exatidão as instalações pela Play Store

No Android, leia a string do referrer na primeira abertura com @capgo/capacitor-install-referrer ou cordova-play-install-referrer e entregue-a depois do initialize, antes do checkAttribution. Um código obtido mais tarde reabre uma resposta “orgânica” anterior. Uma instalação já atribuída mantém o seu criador.

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

Passo 4: deixar o usuário digitar um código

applyCode(code) valida um código digitado pelo usuário e o aplica, se for válido. Os códigos têm os espaços removidos e são convertidos em maiúsculas. Um código inválido retorna valid: false com um error_code, como CODE_NOT_FOUND ou CODE_EXPIRED.

Em React e Ionic React, o ReferralCodeInput de @influto/web/react é um formulário simples, sem estilo, que preenche automaticamente um código vindo de um link e o aplica ao enviar. Em Angular, Vue ou sem framework, monte o campo sobre o applyCode.

Passo 5: conectar as compras

O InfluTo só paga comissão sobre compras verificadas pela loja. Escolha um caminho por plataforma:

• RevenueCat: passe um binding como revenueCat: revenueCatCapacitor(Purchases) para o @revenuecat/purchases-capacitor 7.5.10+, revenueCatCordova(window.Purchases) para o cordova-plugin-purchases ou revenueCatJs para o purchases-js. Conecte-o antes do checkAttribution, porque o atributo é gravado quando a indicação é encontrada. Gravações que falham são repetidas até 3 vezes.

• Direto pela loja: passe um purchaseSource (veja a tabela). Quando o app está configurado como direto pela loja em Settings → Validation, o initialize informa as novas compras e preenche as já existentes, cada uma uma só vez.

No iOS, o modo direto pela loja precisa da transação assinada do StoreKit 2: o capgoNativePurchasesSource a repassa, mas com o cordova-plugin-purchase você precisa conferir se a sua configuração a expõe. No Android, essas fontes não trazem preço. Por isso, informe você mesmo os produtos de compra única, com price e currency, ou eles serão registrados como $0.

Em uma TWA, a Digital Goods API não tem evento de compra. Chame InfluTo.syncExistingPurchases() depois de cada checkout. O digitalGoodsSource busca o preço para você.

Armadilhas de cada plataforma

A maioria das integrações em WebView que dão errado esbarra em um destes pontos:

• Armazenamento do Capacitor. Com o @capacitor/preferences instalado, o SDK guarda seu estado nele. O localStorage da WebView é apagado quando androidScheme ou iosScheme muda.

• ionic serve. Em um build de desenvolvimento para web, o plugin do RevenueCat para Capacitor é apenas um substituto, então as gravações de atributos não fazem nada. Teste em um dispositivo.

• O Cordova bloqueia a API por padrão. Um template novo precisa de uma entrada access origin para https://influ.to no config.xml e de connect-src https://influ.to na Content-Security-Policy. A RevenueCat descontinuou o plugin para Cordova; em um app novo, prefira o Capacitor.

• Navegadores e PWAs. Em um navegador ou PWA, sempre passe platform (ios ou android) para reportPurchase; o SDK não tenta adivinhar quando detecta web. Web apps na tela de início do iOS não podem vender compras no app, mas a atribuição continua funcionando.

Passo 6: teste

Compras de teste nunca movimentam dinheiro nem alteram suas estatísticas:

1. 1

   Confira Configuração e SDK. Depois do primeiro initialize bem-sucedido, aparece “SDK conectado” com a plataforma, o @influto/web e a versão do SDK; debug: true registra cada etapa.

2. 2

   Simule uma compra. Simular uma compra em Configuração e SDK envia uma compra de teste em sandbox pelo pipeline real da InfluTo. Digite um dos seus códigos para ver como ele é resolvido.

3. 3

   Rode uma instalação indicada em um dispositivo. Abra o link de indicação de um criador em um dispositivo de teste, instale, abra o app e compre com um testador sandbox, TestFlight ou de licença. O log de integração, no modo Sandbox, mostra a compra atribuída.

clearAttribution() apaga a atribuição, o código e o código de abertura armazenados, para você testar de novo. Com um agente de código conectado por MCP, ele pode fazer essas verificações por você.