Baue ein Affiliate- oder Empfehlungsprogramm in deine Capacitor- oder Ionic-App ein.

Warum WebView-Apps mehr Empfehlungen exakt zuordnen können

Eine native App erhält einen exakten Treffer über einen eingegebenen Code; ein Tipp, der über den Store läuft, wird erst im Nachhinein zugeordnet. Eine WebView-App kann den Code selbst empfangen, und zwar auf drei Wegen:

• Die Start-URL. Trage unter Einstellungen → Allgemein → Web-App-URL deine Adresse ein. Empfehlungslinks leiten dann Desktop-Besucher dorthin (und Handy-Besucher, wenn du für ihre Plattform keinen Store-Eintrag hast), mit angehängtem influto_code und influto_click. initialize liest beide aus und bereinigt die Adressleiste.

• Deep Links. listenForCapacitorLaunchUrls(InfluTo) übergibt die URL beim Kaltstart und jedes appUrlOpen-Event an das SDK; in Cordova rufst du InfluTo.handleLaunchUrl(url) auf.

• Der Play Install Referrer. Google-Play-Links von InfluTo tragen Code und Klick im Referrer-Parameter von Play. Lies ihn beim ersten Start mit einem Install-Referrer-Plugin aus und übergib ihn an captureInstallReferrer.

Ohne mitgelieferten Code greift InfluTo auf den Abgleich per Link-Klick innerhalb von 72 Stunden zurück. Dabei werden nie Geräteeigenschaften verglichen.

Schritt 1: Installieren

Füge das Paket hinzu. Unter Capacitor sind drei Plugins optional, aber empfohlen: @capacitor/device für Geräteangaben, @capacitor/preferences für Speicher, der WebView-Resets übersteht, und @capacitor/app für Deep Links. Führe nach dem Hinzufügen npx cap sync aus. Fehlende Plugins fallen auf Browser-Standards zurück.

Kein Bundler? Lade den Script-Tag-Build von https://cdn.jsdelivr.net/npm/@influto/web@1/dist/index.global.js und nutze window.InfluTo. Er enthält nur das Core-SDK; die Subpath-Helfer brauchen einen Bundler.

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

Schritt 2: Einmal initialisieren, im richtigen Moment

Rufe initialize einmal im App-Root auf und warte darauf. Bei einem Fehler wirft es einen InfluToApiError (status, body): Fange ihn ab, logge ihn und mach weiter. Beim nächsten Start wird es erneut versucht. Die Tabelle unten zeigt, wann du es je Runtime aufrufst.

Der API-Schlüssel (it_…, unter Setup & SDK) gilt für Entwicklung und Produktion. Lege ihn in einer per gitignore ausgeschlossenen .env.local ab, die dein Bundler einliest. Ein typischer Capacitor-Start bei einer RevenueCat-App, der Reihe nach:

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

Schritt 3: Play-Store-Installs exakt zuordnen

Lies unter Android beim ersten Start den Referrer-String mit @capgo/capacitor-install-referrer oder cordova-play-install-referrer aus und übergib ihn nach initialize, vor checkAttribution. Ein später erfasster Code öffnet eine frühere „organische“ Antwort erneut. Ein zugeordneter Install behält seinen Creator.

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

Schritt 4: Nutzer einen Code eingeben lassen

applyCode(code) prüft einen vom Nutzer eingegebenen Code und wendet ihn an, wenn er gültig ist. Codes werden getrimmt und in Großbuchstaben umgewandelt. Ein ungültiger Code liefert valid: false mit einem error_code wie CODE_NOT_FOUND oder CODE_EXPIRED.

In React und Ionic React ist ReferralCodeInput aus @influto/web/react ein schlichtes Formular ohne Styling. Es füllt einen per Link zugeordneten Code vorab aus und wendet ihn beim Absenden an. In Angular, Vue oder ohne Framework baust du das Feld auf applyCode auf.

Schritt 5: Käufe verbinden

InfluTo zahlt Provision nur auf Käufe, die beim Store verifiziert wurden. Wähle pro Plattform einen Weg:

• RevenueCat: Übergib ein Binding als revenueCat: revenueCatCapacitor(Purchases) für @revenuecat/purchases-capacitor 7.5.10+, revenueCatCordova(window.Purchases) für cordova-plugin-purchases oder revenueCatJs für purchases-js. Hänge es vor checkAttribution an, denn das Attribut wird geschrieben, sobald die Empfehlung gefunden wird. Fehlgeschlagene Schreibvorgänge werden bis zu 3-mal wiederholt.

• Store-direkt: Übergib eine purchaseSource (siehe Tabelle). Ist die App unter Einstellungen → Validierung auf Store-direkt gestellt, meldet initialize neue Käufe und trägt bestehende nach, jeweils einmal.

Unter iOS braucht Store-direkt die signierte StoreKit-2-Transaktion: capgoNativePurchasesSource reicht sie weiter, bei cordova-plugin-purchase musst du prüfen, ob dein Setup eine bereitstellt. Unter Android tragen diese Sources keinen Preis. Melde Einmalkäufe deshalb selbst mit price und currency, sonst werden sie mit 0 $ erfasst.

In einer TWA hat die Digital Goods API kein Kauf-Event. Rufe deshalb nach jedem Checkout InfluTo.syncExistingPurchases() auf. digitalGoodsSource schlägt den Preis für dich nach.

Stolpersteine je Plattform

Die meisten gescheiterten WebView-Integrationen liegen an einem dieser Punkte:

• Capacitor-Speicher. Ist @capacitor/preferences installiert, speichert das SDK seinen Zustand dort. Der localStorage der WebView wird gelöscht, wenn sich androidScheme oder iosScheme ändert.

• ionic serve. In einem Web-Dev-Build ist das RevenueCat-Capacitor-Plugin nur ein Platzhalter, Attribut-Schreibvorgänge bewirken dort also nichts. Teste auf einem Gerät.

• Cordova blockiert die API standardmäßig. Ein frisches Template braucht in der config.xml einen access-origin-Eintrag für https://influ.to und in der Content-Security-Policy connect-src https://influ.to. RevenueCat hat sein Cordova-Plugin als veraltet markiert; für eine neue App nimm lieber Capacitor.

• Browser und PWAs. In einem Browser oder einer PWA übergibst du platform (ios oder android) immer an reportPurchase; das SDK rät nicht, wenn es Web erkennt. iOS-Web-Apps auf dem Home-Bildschirm können keine In-App-Käufe verkaufen, die Attribution funktioniert aber trotzdem.

Schritt 6: Testen

Testkäufe bewegen kein Geld und verändern deine Statistiken nicht:

1. 1

   Setup & SDK prüfen. Nach dem ersten erfolgreichen initialize zeigt die Seite „SDK verbunden“ mit Plattform, @influto/web und SDK-Version an; debug: true protokolliert jeden Schritt.

2. 2

   Einen Kauf simulieren. Kauf simulieren unter Setup & SDK schickt einen Sandbox-Testkauf durch die echte Pipeline von InfluTo. Gib einen deiner Codes ein, um zu sehen, wie er aufgelöst wird.

3. 3

   Eine vermittelte Installation auf einem Gerät durchspielen. Öffne den Empfehlungslink eines Creators auf einem Testgerät, installiere und starte die App und kaufe als Sandbox-, TestFlight- oder Lizenztester. Das Integrationsprotokoll zeigt, auf Sandbox umgestellt, den zugeordneten Kauf.

clearAttribution() löscht die gespeicherte Attribution, den Code und den Launch-Code für einen neuen Durchlauf. Ist ein Coding-Agent per MCP verbunden, kann er diese Prüfungen für dich übernehmen.