Affiliate tracking implementeren in een React Native app met IAP's

Wat je gaat bouwen

Aan het einde van deze tutorial koppelt je React Native app in-app aankopen aan de affiliates die ze hebben opgeleverd. Wanneer een gebruiker op een affiliatelink klikt, je app opent en een aankoop doet, verschijnt de transactie in je Insert Affiliate dashboard, met de juiste affiliate gecrediteerd en de commissie berekend.

De integratie gebruikt het pakket insert-affiliate-react-native-sdk en kost ongeveer 30 minuten.

Vereisten

• React Native 0.60 of hoger
• iOS 13.0+ / Android API 21+
• Een Company Code uit je Insert Affiliate dashboard (pagina Settings)
• Een geconfigureerd platform voor aankoopverificatie (deze tutorial gebruikt RevenueCat, maar de SDK ondersteunt ook Adapty, Apphud, Iaptic, direct App Store en direct Google Play)

Stap 1: Installeer de SDK

Installeer de Insert Affiliate SDK en de vereiste peer dependencies:

npm install insert-affiliate-react-native-sdk
npm install @react-native-async-storage/async-storage @react-native-clipboard/clipboard @react-native-community/netinfo react-native-device-info axios

Installeer voor bare React Native projecten de iOS pods:

cd ios && pod install && cd ..

Gebruik je de Expo managed workflow, sla dan de pod install over. Pods worden automatisch geïnstalleerd wanneer je npx expo prebuild of npx expo run:ios uitvoert.

Stap 2: Wrap je app met de Provider

De SDK gebruikt React Context om state te beheren. Wrap je app met de DeepLinkIapProvider in je entry file (index.js):

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { DeepLinkIapProvider } from 'insert-affiliate-react-native-sdk';

const RootComponent = () => {
  return (
    
      
    
  );
};

AppRegistry.registerComponent(appName, () => RootComponent);

Stap 3: Initialiseer de SDK

Roep in je App.tsx initialize() aan met je Company Code:

import React, { useEffect } from 'react';
import { useDeepLinkIapProvider } from 'insert-affiliate-react-native-sdk';

const App = () => {
  const { initialize, isInitialized } = useDeepLinkIapProvider();

  useEffect(() => {
    if (!isInitialized) {
      initialize(
        "YOUR_COMPANY_CODE",
        true,   // verbose logging (disable in production)
        true,   // enable Insert Links
        false   // clipboard attribution
      );
    }
  }, [initialize, isInitialized]);

  return ;
};

Als de initialisatie slaagt, zie je dit in je console:

[Insert Affiliate] SDK initialized with company code: YOUR_COMPANY_CODE

Stap 4: Koppel RevenueCat

Dit is de cruciale stap die affiliate-attributie verbindt met het bijhouden van aankopen. Wanneer de SDK een affiliate-identifier detecteert (uit een deeplink of shortcode), geef je die als subscriber attribute door aan RevenueCat:

import React, { useEffect } from 'react';
import { AppState } from 'react-native';
import Purchases from 'react-native-purchases';
import { useDeepLinkIapProvider } from 'insert-affiliate-react-native-sdk';

const App = () => {
  const {
    initialize,
    isInitialized,
    setInsertAffiliateIdentifierChangeCallback,
    isAffiliateAttributionValid,
    getAffiliateExpiryTimestamp
  } = useDeepLinkIapProvider();

  useEffect(() => {
    if (!isInitialized) {
      initialize("YOUR_COMPANY_CODE", true, true, false);
    }
  }, [initialize, isInitialized]);

  useEffect(() => {
    setInsertAffiliateIdentifierChangeCallback(async (identifier, offerCode) => {
      if (identifier) {
        await Purchases.setAttributes({
          "insert_affiliate": identifier,
          "affiliateOfferCode": offerCode || "",
          "insert_timedout": ""
        });
        await Purchases.syncAttributesAndOfferingsIfNeeded();
      }
    });

    return () => setInsertAffiliateIdentifierChangeCallback(null);
  }, [setInsertAffiliateIdentifierChangeCallback]);

  useEffect(() => {
    if (!isInitialized) return;

    const clearExpiredAffiliation = async () => {
      const isValid = await isAffiliateAttributionValid();
      if (!isValid) {
        const expiryTimestamp = await getAffiliateExpiryTimestamp();
        if (!expiryTimestamp) return;

        await Purchases.setAttributes({
          "affiliateOfferCode": "",
          "insert_timedout": expiryTimestamp.toString()
        });
        await Purchases.syncAttributesAndOfferingsIfNeeded();
      }
    };

    clearExpiredAffiliation();

    const subscription = AppState.addEventListener('change', (state) => {
      if (state === 'active') {
        clearExpiredAffiliation();
      }
    });

    return () => subscription?.remove();
  }, [isInitialized, isAffiliateAttributionValid, getAffiliateExpiryTimestamp]);

  return ;
};

De callback wordt elke keer aangeroepen wanneer de affiliate-identifier verandert. Het attribuut insert_timedout slaat de vervaltijd op, zodat de webhook aankoopdatums kan vergelijken met het attributievenster.

Stap 5: Configureer de RevenueCat webhook

1. Maak in RevenueCat een nieuwe webhook aan.
2. Stel de Webhook URL in op https://api.insertaffiliate.com/v1/api/revenuecat-webhook.
3. Stel Event Type in op "All events".
4. Stel in de Settings van je Insert Affiliate dashboard de In-App Purchase Verification-methode in op RevenueCat.
5. Kopieer de waarde van de RevenueCat Webhook Authentication Header uit het Insert Affiliate dashboard.
6. Plak die in het veld Authorization header in de webhookconfiguratie van RevenueCat.

Stap 6: Stel deeplinking in (iOS)

Werk je ios/YourApp/AppDelegate.mm bij om inkomende URL's af te handelen:

#import 

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity
 restorationHandler:(void(^)(NSArray * __nullable restorableObjects))restorationHandler
{
  return [RCTLinkingManager application:application
                   continueUserActivity:userActivity
                     restorationHandler:restorationHandler];
}

Voeg je iOS URL scheme toe aan Info.plist en voeg voor Universal Links applinks:insertaffiliate.link toe aan Associated Domains in Xcode.

Stap 7: Stel deeplinking in (Android)

Voeg een intent filter toe aan je main activity in android/app/src/main/AndroidManifest.xml:

Voeg voor Android App Links een tweede intent filter toe met android:autoVerify="true" en android:host="insertaffiliate.link". Stel android:launchMode="singleTop" in op je activity.

Stap 8: Handel Expo Router af (indien van toepassing)

Gebruik je Expo Router, maak dan app/+native-intent.tsx aan om routeconflicten te voorkomen:

export function redirectSystemPath({ path }: { path: string }): string | null {
  if (path.includes('insert-affiliate') || path.includes('insertAffiliate')) {
    return null;
  }
  return path;
}

Stap 9: Test de integratie

Maak een test-affiliate aan in je Insert Affiliate dashboard met een e-mailalias (bijv. [email protected]). Test daarna de deeplink:

# iOS Simulator
xcrun simctl openurl booted "https://insertaffiliate.link/YOUR_COMPANY_CODE/TEST_SHORT_CODE"

# Android Emulator
adb shell am start -a android.intent.action.VIEW -d "https://insertaffiliate.link/YOUR_COMPANY_CODE/TEST_SHORT_CODE"

Controleer in de consolelogs of de affiliate-identifier is opgeslagen, doe daarna een sandbox-aankoop en controleer of de transactie in je dashboard verschijnt.

Andere platforms voor aankoopverificatie gebruiken

Gebruik je Adapty in plaats van RevenueCat, dan stelt de identifier-callback een custom attribute in via adapty.updateProfile(). Voor Iaptic roep je validatePurchaseWithIapticAPI() uit de SDK aan. Voor een directe App Store-integratie roep je returnUserAccountTokenAndStoreExpectedTransaction() aan vóór elke aankoop. Voor direct Google Play roep je na elke aankoop storeExpectedStoreTransaction() aan met het purchase token.

De stappen voor deeplinking en SDK-initialisatie blijven hetzelfde, welk platform voor aankoopverificatie je ook kiest.

Geavanceerde functies

Zodra de basisintegratie werkt, kun je overwegen het volgende toe te voegen:

• Shortcodes: laat affiliates codes zoals "SAVE20" delen die gebruikers in je app invoeren. Roep setShortCode(code) aan om te valideren en op te slaan.
• Dynamische aanbiedingscodes: configureer offer code modifiers in het dashboard en gebruik OfferCode uit de SDK om dynamische product-ID's op te bouwen.
• Event tracking: houd custom events zoals aanmeldingen bij met trackEvent('user_signup') voor commissiestructuren die verder gaan dan aankopen.
• Attributietimeout: stel een tijdslimiet in voor hoe lang affiliate-attributie actief blijft, bijvoorbeeld 7 dagen (604,800 seconden).
• Affiliate-overdracht voorkomen: vergrendel de eerste affiliate-attributie, zodat latere klikken op links die niet kunnen overschrijven.