Dodaj program partnerski lub poleceń do swojej aplikacji Capacitor lub Ionic.

Dlaczego aplikacje WebView mogą dokładnie przypisać więcej poleceń

Aplikacja natywna dostaje dokładne dopasowanie z wpisanego kodu, a kliknięcie, które przechodzi przez sklep, jest dopasowywane dopiero później. Aplikacja WebView może dostać sam kod na trzy sposoby:

• Adres startowy. Ustaw Settings → General → Web app URL, a linki polecające będą kierować tam odwiedzających z komputerów (oraz z telefonów, gdy nie masz strony w sklepie dla ich platformy), z dopisanymi influto_code i influto_click. initialize odczytuje oba parametry i czyści pasek adresu.

• Deep linki. listenForCapacitorLaunchUrls(InfluTo) przekazuje do SDK adres z zimnego startu i każde zdarzenie appUrlOpen. W Cordova wywołaj InfluTo.handleLaunchUrl(url).

• Play Install Referrer. Linki Google Play z InfluTo niosą kod i kliknięcie w parametrze referrer Google Play. Odczytaj go przy pierwszym uruchomieniu wtyczką Install Referrer i przekaż do captureInstallReferrer.

Bez przeniesionego kodu InfluTo wraca do dopasowania po kliknięciu linku w ciągu 72 godzin. Takie dopasowanie nigdy nie porównuje cech urządzenia.

Krok 1: instalacja

Dodaj pakiet. W Capacitor trzy wtyczki są opcjonalne, ale zalecane: @capacitor/device dla danych urządzenia, @capacitor/preferences dla pamięci, która przetrwa reset WebView, i @capacitor/app dla deep linków. Po ich dodaniu uruchom npx cap sync. Brakujące wtyczki zastępują domyślne mechanizmy przeglądarki.

Nie masz bundlera? Załaduj wersję ze znacznikiem script z https://cdn.jsdelivr.net/npm/@influto/web@1/dist/index.global.js i używaj window.InfluTo. Zawiera tylko rdzeń SDK; pomocniki z podścieżek wymagają bundlera.

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

Krok 2: zainicjuj raz, we właściwym momencie

Wywołaj initialize raz, w korzeniu aplikacji, i poczekaj na wynik. Przy błędzie rzuca InfluToApiError (status, body): przechwyć go, zaloguj i działaj dalej. Kolejne uruchomienie spróbuje ponownie. Tabela poniżej pokazuje, kiedy wywołać go w danym środowisku.

Klucz API (it_…, w Setup & SDK) obejmuje development i produkcję. Trzymaj go w pliku .env.local wykluczonym z gita i odczytuj przez bundler. Typowy start Capacitor w aplikacji z RevenueCat, po kolei:

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

Krok 3: dokładnie przypisuj instalacje z Google Play

Na Androidzie odczytaj ciąg referrera przy pierwszym uruchomieniu za pomocą @capgo/capacitor-install-referrer lub cordova-play-install-referrer i przekaż go po initialize, przed checkAttribution. Kod przechwycony później otwiera na nowo wcześniejszą odpowiedź „organic”, a instalacja z przypisaniem zachowuje swojego twórcę.

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

Krok 4: pozwól użytkownikom wpisać kod

applyCode(code) sprawdza kod wpisany przez użytkownika i stosuje go, jeśli jest prawidłowy. Kody są przycinane z białych znaków i zamieniane na wielkie litery, a nieprawidłowy zwraca valid: false z error_code, np. CODE_NOT_FOUND lub CODE_EXPIRED.

W React i Ionic React ReferralCodeInput z @influto/web/react to zwykły formularz bez stylów. Wstępnie wypełnia kod przypisany z linku i stosuje go po wysłaniu. W Angular, Vue lub bez frameworka zbuduj pole na bazie applyCode.

Krok 5: podłącz zakupy

InfluTo płaci prowizję tylko od zakupów zweryfikowanych w sklepie. Wybierz jedną ścieżkę dla każdej platformy:

• RevenueCat: przekaż binding jako revenueCat: revenueCatCapacitor(Purchases) dla @revenuecat/purchases-capacitor 7.5.10+, revenueCatCordova(window.Purchases) dla cordova-plugin-purchases lub revenueCatJs dla purchases-js. Podłącz go przed checkAttribution, bo atrybut jest zapisywany w chwili znalezienia polecenia. Nieudane zapisy są ponawiane do 3 razy.

• Store-direct: przekaż purchaseSource (zobacz tabelę). Gdy aplikacja ma w Settings → Validation ustawiony tryb store-direct, initialize zgłasza nowe zakupy i uzupełnia istniejące, każdy tylko raz.

Na iOS store-direct wymaga podpisanej transakcji StoreKit 2: capgoNativePurchasesSource ją przekazuje, a przy cordova-plugin-purchase musisz sprawdzić, czy Twoja konfiguracja ją udostępnia. Na Androidzie te źródła nie niosą ceny, więc produkty jednorazowe zgłaszaj samodzielnie z price i currency. Inaczej zapiszą się jako 0 $.

W TWA Digital Goods API nie ma zdarzenia zakupu, więc wywołuj InfluTo.syncExistingPurchases() po każdej płatności. digitalGoodsSource sam sprawdzi cenę.

Pułapki platform

Większość nieudanych integracji WebView sprowadza się do jednej z tych rzeczy:

• Pamięć w Capacitor. Gdy zainstalowano @capacitor/preferences, SDK trzyma tam swój stan. localStorage w WebView jest czyszczone, gdy zmieni się androidScheme lub iosScheme.

• ionic serve. W buildzie deweloperskim w przeglądarce wtyczka RevenueCat Capacitor jest atrapą, więc zapisy atrybutów nic tam nie robią. Testuj na urządzeniu.

• Cordova domyślnie blokuje API. Nowy szablon wymaga wpisu access origin dla https://influ.to w config.xml oraz connect-src https://influ.to w Content-Security-Policy. RevenueCat wycofał swoją wtyczkę do Cordovy, więc w nowej aplikacji lepiej wybrać Capacitor.

• Przeglądarki i PWA. W przeglądarce lub PWA zawsze przekazuj platform (ios lub android) do reportPurchase. SDK nie zgaduje, gdy wykryje web. Aplikacje webowe na ekranie głównym iOS nie mogą sprzedawać zakupów w aplikacji, ale atrybucja nadal działa.

Krok 6: przetestuj

Zakupy testowe nie przesuwają pieniędzy ani nie zmieniają Twoich statystyk:

1. 1

   Sprawdź Setup & SDK. Po pierwszym udanym initialize zobaczysz „SDK connected” z platformą, @influto/web i wersją SDK. debug: true loguje każdy krok.

2. 2

   Zasymuluj zakup. Przycisk Zasymuluj zakup w Setup & SDK wysyła testowy zakup sandbox prawdziwym potokiem InfluTo. Wpisz jeden ze swoich kodów, żeby zobaczyć, jak jest rozpoznawany.

3. 3

   Uruchom polecaną instalację na urządzeniu. Otwórz link polecający twórcy na urządzeniu testowym, zainstaluj aplikację, uruchom ją i kup jako tester sandbox, TestFlight lub licencji. Dziennik integracji przełączony na Sandbox pokaże przypisany zakup.

clearAttribution() usuwa zapisaną atrybucję, kod i kod z uruchomienia, żeby można było powtórzyć test. Jeśli agent kodujący jest połączony przez MCP, może wykonać te sprawdzenia za Ciebie.