Ein Affiliate- oder Empfehlungsprogramm in deine React-Native-App einbauen.

Was das SDK in einer React-Native-App tut

Ein Paket deckt iOS, Android und jeden Expo-Workflow ab. Es erledigt drei Aufgaben:

• Findet den Creator hinter einem Install. checkAttribution antwortet einmal pro Install. Ein eingetippter Code ist ein exakter Treffer; andernfalls ordnet das Link-Klick-Matching den Install einem Klick auf den Link des Creators zu, der höchstens 72 Stunden zurückliegt. Keine IDFA, keine ATT-Abfrage.

• Nimmt eingetippte Empfehlungscodes entgegen. applyCode oder das fertige Eingabefeld ReferralCodeInput deckt Podcast- und Video-Erwähnungen ab, bei denen niemand auf einen Link tippt.

• Verknüpft Käufe mit der Empfehlung. Mit RevenueCat markiert es den Abonnenten; Store-direkt meldet es den vom Store signierten Kauf, den InfluTo bei Apple oder Google verifiziert. Eine Provision entsteht erst nach dieser Prüfung.

Schritt 1: Paket installieren

Füge das SDK und AsyncStorage hinzu, das den lokalen Zustand des SDK speichert. AsyncStorage ist ein natives Modul und muss für das Autolinking in den eigenen Abhängigkeiten deiner App stehen. In Bare React Native führst du danach pod install in ios/ aus.

In Expo ist nichts weiter nötig und es gibt kein Config-Plugin: Das SDK ist reines JavaScript auf AsyncStorage und läuft deshalb in Expo Go, in Development Builds und in Production Builds. Es setzt React Native 0.60+ und React 16.8+ voraus.

npm install @influto/react-native-sdk
# AsyncStorage is a native module — install it in the app too
npm install @react-native-async-storage/async-storage

Schritt 2: Einmal initialisieren, dann Attribution prüfen

Rufe initialize einmal so früh wie möglich auf und warte darauf, bevor etwas anderes passiert. Bei einem Fehler (falscher Schlüssel, kein Netz) wirft es eine Exception: Fang sie ab, logge sie und mach weiter; beim nächsten Start klappt es erneut.

checkAttribution sagt, ob der Install geworben wurde und über welchen Code. Das wird einmal pro Install entschieden, auf dem Gerät gespeichert und fällt sanft aus: Bei einem Netzwerkfehler kommt attributed: false zurück. Nutze es, um geworbene Nutzer zu begrüßen oder ihnen das Angebot zu zeigen, das ihr Creator angekündigt hat.

Der API-Schlüssel (it_…, unter Setup & SDK) gilt für Entwicklung und Produktion. Halte ihn aus dem eingecheckten Quellcode heraus, zum Beispiel in einer per gitignore ausgeschlossenen .env, die über die EXPO_PUBLIC_-Variablen von Expo gelesen wird. Eine typische App.tsx bei einer RevenueCat-App, der Reihenfolge nach:

import { useEffect } from 'react';
import Purchases from 'react-native-purchases';
import InfluTo from '@influto/react-native-sdk';

export default function App() {
  useEffect(() => {
    (async () => {
      Purchases.configure({ apiKey: REVENUECAT_API_KEY }); // RevenueCat apps: configure it first
      try {
        await InfluTo.initialize({
          apiKey: process.env.EXPO_PUBLIC_INFLUTO_API_KEY!,
          appVersion: '1.4.0',
          debug: __DEV__,
        });
      } catch (error) {
        console.warn('InfluTo initialize failed', error); // retried on the next launch
        return;
      }
      const attribution = await InfluTo.checkAttribution();
      await InfluTo.identifyUser(await Purchases.getAppUserID());
    })();
  }, []);
  // …
}

Schritt 3: Eingabefeld für den Empfehlungscode hinzufügen

Viele Empfehlungen kommen als gesprochener Code an, nicht als Klick. applyCode(code) prüft den Code und wendet ihn an, wenn er gültig ist; Leerzeichen entfernen und Großschreibung übernimmt das SDK für dich. Ein ungültiger Code liefert valid: false mit einem error_code wie CODE_NOT_FOUND oder CODE_EXPIRED.

Oder nimm ReferralCodeInput aus @influto/react-native-sdk/ui. Das Feld füllt den Code bei einem Install über einen Link vor, übernimmt deine Farben, Schriften und übersetzten Beschriftungen und zeigt den Namen eines Creators nur an, wenn du das einschaltest.

// Validate, then apply a code the user typed
const result = await InfluTo.applyCode('FITGURU30');
if (result.valid && result.applied) {
  // Unlock the offer
}

// Or drop in the ready-made UI:
import { ReferralCodeInput } from '@influto/react-native-sdk/ui';
<ReferralCodeInput onApplied={(result) => {/* ... */}} />

Schritt 4: Käufe anbinden, RevenueCat oder Store-direkt

InfluTo zahlt Provision nur auf Käufe, die beim Store verifiziert wurden. Wähle pro Plattform genau einen Weg; iOS kann Store-direkt laufen, während Android bei RevenueCat bleibt.

• RevenueCat: Im Code musst du nichts verdrahten. Ist react-native-purchases installiert, setzt das SDK influto_code und influto_referral auf den Abonnenten, sobald eine Empfehlung gefunden oder ein Code angewendet wird. Verbinde dann den Webhook unter Setup & SDK, automatisch mit einem RevenueCat-v2-Secret-Key oder von Hand.

• Store-direkt: Installiere expo-iap oder react-native-iap, hinterlege deine App-Store- und Google-Play-Zugangsdaten unter Settings → Validation und stelle die Plattform auf Store-direkt. initialize erfasst dann neue Käufe und holt bestehende nach, jeden nur einmal gemeldet. Setze autoCapture: false, wenn du reportPurchase lieber selbst aufrufst.

Die Stolperfalle bei RevenueCat: Das Attribut wird einmal geschrieben, nämlich wenn die Empfehlung gefunden wird, und das Schreiben entfällt, wenn RevenueCat noch nicht konfiguriert ist. Konfiguriere also zuerst Purchases, dann initialize, dann checkAttribution, und rufe identifyUser mit der RevenueCat-App-User-ID als Absicherung auf.

Die Stolperfalle bei Store-direkt: Trage Android-Einmalprodukte in oneTimeProductIds ein und melde sie selbst mit Preis und Währung, wenn deine IAP-Bibliothek den Preis nicht liefert. Sonst werden sie mit 0 $ erfasst. Das übernimmt das SDK von allein:

Hinweise zu Expo und React Native

Die meisten Integrationsprobleme in React Native entstehen durch Mounting und Reihenfolge:

• Expo Go ist okay, Store-Bibliotheken nicht. Expo Go führt das InfluTo-SDK aus, aber expo-iap, react-native-iap und RevenueCat enthalten nativen Code. Mach Testkäufe daher in einem Development Build. Die automatische Erfassung tut in Expo Go still nichts, das ist unbedenklich.

• Einmal initialisieren, im Root. Nicht in einem Screen, der wiederholt gemountet wird. Rufe identifyUser einmal pro Anmeldung auf, nicht aus dem Render-Pfad.

• AsyncStorage in deiner eigenen package.json. Sonst wird das native Modul nicht gelinkt, und das SDK kann seinen Zustand nicht speichern.

Schritt 5: Testen, bevor du Creator einlädst

Sandbox-Käufe bewegen kein Geld und verändern deine Statistiken nicht. Du kannst den Test also beliebig oft wiederholen:

1. 1

   Prüfe, ob das SDK verbunden ist. Nach dem ersten erfolgreichen initialize zeigt Setup & SDK „SDK connected“ mit Plattform und SDK-Version; debug: __DEV__ loggt jeden Schritt.

2. 2

   Simuliere einen Kauf. Simulate a purchase 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; ein Setup-Schritt wird dadurch nie abgeschlossen.

3. 3

   Installiere über einen Creator-Link. Tritt deiner Kampagne mit einem zweiten Creator-Konto bei, öffne den Empfehlungslink auf einem Testgerät, installiere deinen Development Build und starte die App. Den Code einzutippen ist der zuverlässigste Test.

4. 4

   Mach einen Sandbox-Kauf. Kaufe mit einem Sandbox- oder TestFlight-Tester oder einem Google-Play-Lizenztester. Das Integration-Log, auf Sandbox umgestellt, zeigt den Kauf deinem Code zugeordnet.

clearAttribution() setzt das Gerät für einen weiteren Durchlauf zurück.

Oder überlass es deinem Coding-Agenten

Du arbeitest in Claude Code, Codex oder Cursor? Verbinde den MCP-Server von InfluTo und bitte um die Integration: Der Agent ordnet „expo“ diesem SDK zu, schreibt die obigen Schritte und prüft influto_integration_status, bis ein Sandbox-Kauf mit Zuordnung eintrifft.