Építs be affiliate- vagy ajánlóprogramot a Capacitor- vagy Ionic-alkalmazásodba.

Miért tud egy WebView-alkalmazás több ajánlást pontosan hozzárendelni

A natív alkalmazás a beírt kódból pontos egyezést kap. Az áruházon átmenő koppintást utólag párosítjuk. A WebView-alkalmazás magát a kódot is megkaphatja, háromféleképpen:

• Az indítási URL. Állítsd be a Settings → General → Web app URL mezőt, és az ajánlói linkek ide küldik az asztali látogatókat (és a telefonosokat is, ha nincs áruházi oldalad az ő platformjukra). Az influto_code és influto_click paraméter hozzáadódik a címhez. Az initialize mindkettőt beolvassa, és megtisztítja a címsort.

• Deep linkek. A listenForCapacitorLaunchUrls(InfluTo) átadja az SDK-nak a hidegindításkori URL-t és minden appUrlOpen eseményt. Cordovában hívd meg az InfluTo.handleLaunchUrl(url) függvényt.

• A Play Install Referrer. Az InfluTo Google Play-linkjei a kódot és a kattintást a Play referrer paraméterében viszik. Első indításkor olvasd ki egy Install Referrer pluginnal, és add át a captureInstallReferrer-nek.

Ha nincs kód, az InfluTo 72 órán belüli linkkattintás-egyeztetésre vált, amely soha nem hasonlít össze eszközjellemzőket.

1. lépés: telepítés

Add hozzá a csomagot. Capacitoron három plugin opcionális, de ajánlott: a @capacitor/device az eszközadatokhoz, a @capacitor/preferences a WebView-újraindítást túlélő tároláshoz, a @capacitor/app a deep linkekhez. Hozzáadásuk után futtasd az npx cap sync parancsot. A hiányzó pluginok helyett a böngésző alapértelmezései lépnek életbe.

Nincs bundlered? Töltsd be a script-tagos buildet a https://cdn.jsdelivr.net/npm/@influto/web@1/dist/index.global.js címről, és használd a window.InfluTo objektumot. Ez csak az SDK magját tartalmazza, az alútvonalas segédekhez bundler kell.

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

2. lépés: egyszeri inicializálás, a megfelelő pillanatban

Az initialize-t egyszer hívd meg, az app gyökerében, és várd meg. Hiba esetén InfluToApiError-t (status, body) dob. Kapd el, naplózd, és folytasd: a következő indításkor újra próbálkozik. Az alábbi táblázat futtatókörnyezetenként mutatja, mikor hívd meg.

Az API-kulcs (it_…, a Setup & SDK oldalon) fejlesztésre és éles használatra is érvényes. Tartsd egy gitignore-olt .env.local fájlban, amelyet a bundlered olvas be. Tipikus Capacitor-indítás egy RevenueCat-es appnál, sorrendben:

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

3. lépés: a Google Play-telepítések pontos beváltása

Androidon az első indításkor olvasd ki a referrer stringet az @capgo/capacitor-install-referrer vagy a cordova-play-install-referrer segítségével. Add át az initialize után, a checkAttribution előtt. Egy később felvett kód újra megnyitja a korábbi „organikus” választ. A már hozzárendelt telepítés megtartja az alkotóját.

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

4. lépés: kód beírása a felhasználónak

Az applyCode(code) ellenőrzi a felhasználó által beírt kódot, és ha érvényes, alkalmazza. A kódokból levágja a szóközöket, és nagybetűssé alakítja őket. Az érvénytelen kód valid: false értéket ad vissza error_code-dal, például CODE_NOT_FOUND vagy CODE_EXPIRED.

Reactben és Ionic Reactben az @influto/web/react ReferralCodeInput eleme egy egyszerű, stílus nélküli űrlap. Előtölti a linkből érkezett kódot, és beküldéskor alkalmazza. Angularban, Vue-ban vagy keretrendszer nélkül építsd a mezőt az applyCode-ra.

5. lépés: vásárlások összekötése

Az InfluTo csak az áruházban ellenőrzött vásárlások után fizet jutalékot. Platformonként válassz egy utat:

• RevenueCat: add át a kötést a revenueCat paraméterben: revenueCatCapacitor(Purchases) az @revenuecat/purchases-capacitor 7.5.10+ verzióhoz, revenueCatCordova(window.Purchases) a cordova-plugin-purchases-hez, vagy revenueCatJs a purchases-js-hez. Csatold a checkAttribution előtt, mert az attribútum az ajánlás megtalálásakor íródik. A sikertelen írásokat legfeljebb háromszor próbálja újra.

• Közvetlenül az áruházból: add át a purchaseSource-t (lásd a táblázatot). Ha az app a Settings → Validation alatt store-direct módra van állítva, az initialize jelenti az új vásárlásokat, a meglévőket pedig pótlólag felküldi, mindegyiket egyszer.

iOS-en a store-direct a StoreKit 2 aláírt tranzakcióját igényli. A capgoNativePurchasesSource továbbadja, a cordova-plugin-purchase esetén viszont ellenőrizned kell, hogy a beállításod ad-e ilyet. Androidon ezek a források nem hordoznak árat, ezért az egyszeri termékeket jelentsd te magad árral és pénznemmel, különben 0 $-ként rögzítjük őket.

TWA-ban a Digital Goods API-nak nincs vásárlási eseménye, ezért minden fizetés után hívd meg az InfluTo.syncExistingPurchases() függvényt. Az árat a digitalGoodsSource megkeresi helyetted.

Platformspecifikus buktatók

A legtöbb sikertelen WebView-integráció az alábbiak egyikére vezethető vissza:

• Capacitor-tárolás. Telepített @capacitor/preferences esetén az SDK ott tárolja az állapotát. A WebView localStorage törlődik, ha az androidScheme vagy az iosScheme megváltozik.

• ionic serve. Webes fejlesztői buildben a RevenueCat Capacitor plugin csak helyettesítő, ezért az attribútumírás ott nem csinál semmit. Eszközön tesztelj.

• A Cordova alapértelmezés szerint blokkolja az API-t. Egy friss sablonban a config.xml fájlba kell egy access origin bejegyzés a https://influ.to címhez, a Content-Security-Policy-ba pedig a connect-src https://influ.to. A RevenueCat elavultnak nyilvánította a Cordova-bővítményét, ezért új apphoz inkább a Capacitort válaszd.

• Böngészők és PWA-k. Böngészőben vagy PWA-ban a reportPurchase hívásnak mindig add át a platformot (ios vagy android). Ha az SDK webes környezetet észlel, nem találgat. Az iOS kezdőképernyős webappjai nem tudnak alkalmazáson belüli vásárlást értékesíteni, de az attribúció így is működik.

6. lépés: tesztelés

A tesztvásárlások nem mozgatnak pénzt, és nem módosítják a statisztikáidat:

1. 1

   Nézd meg a Setup & SDK oldalt. Az első sikeres initialize után megjelenik az „SDK connected” felirat a platformmal, az @influto/web csomaggal és az SDK verziójával. A debug: true minden lépést naplóz.

2. 2

   Szimulálj egy vásárlást. A Setup & SDK oldalon a Simulate a purchase egy sandbox-teszvásárlást küld az InfluTo éles folyamatán keresztül. Add meg az egyik kódodat, és látni fogod, hogyan oldódik fel.

3. 3

   Futtass le egy ajánlott telepítést eszközön. Nyisd meg egy alkotó ajánlói linkjét egy tesztelésre használt eszközön, telepítsd az appot, indítsd el, és vásárolj sandbox-, TestFlight- vagy licenctesztelő fiókkal. Az Integration napló Sandbox nézetben mutatja a hozzárendelt vásárlást.

A clearAttribution() törli a tárolt attribúciót, a kódot és az indítási kódot, így újra lefuttathatod a tesztet. Ha egy kódoló ágens MCP-n keresztül csatlakozik, ezeket az ellenőrzéseket el tudja végezni helyetted.