Abonnementen en affiliate tracking in React Native
Een abonnementsmodel bouwen in React Native vraagt om het koppelen van meerdere onderdelen: de native app stores voor de betalingsverwerking, een dienst voor receiptvalidatie voor het beheer van abonnementen, en een systeem voor affiliate tracking om partners te belonen die nieuwe abonnees aanbrengen. Deze gids loopt de volledige setup met je door.
Overzicht van de architectuur
De typische abonnementsstack voor een React Native app met affiliate tracking bestaat uit drie lagen:
- Betaallaag: de Apple App Store en Google Play verwerken de daadwerkelijke betalingstransacties via hun native IAP-systemen
- Laag voor abonnementsbeheer: RevenueCat (of Adapty) valideert receipts, beheert de abonnementsstatus en biedt één uniforme API voor alle platforms
- Laag voor affiliate tracking: Insert Affiliate koppelt klikken op affiliatelinks aan aankopen van abonnementen en kent de omzet toe aan de juiste affiliatepartner
Deze lagen communiceren via server-side webhooks en callbacks. Het integratiewerk vindt dus zowel plaats in je React Native code als in de configuratie van je backend.
RevenueCat instellen
Begin met het installeren van de RevenueCat SDK in je React Native project. RevenueCat biedt een React Native package dat de native aankoop-API's van iOS en Android bundelt in één JavaScript-interface.
Configureer eerst je producten in App Store Connect en de Google Play Console: je abonnementsniveaus, prijzen en gratis proefperiodes. Spiegel deze producten daarna in het dashboard van RevenueCat als Offerings die je app kan tonen.
Initialiseer RevenueCat in je React Native code vroeg in de levenscyclus van de app met je API-sleutel. Gebruik de Offerings API om de beschikbare abonnementen op te halen en toon ze in je paywallcomponent. Wanneer een gebruiker op abonneren tikt, roep je de aankoopmethode aan met het gekozen package.
RevenueCat regelt de receiptvalidatie en de levenscyclus van abonnementen (verlengingen, opzeggingen, respijtperiodes), en biedt een server-side bron van waarheid voor de abonnementsstatus.
Insert Affiliate integreren
Insert Affiliate volgt het pad van een klik op een affiliatelink tot de aankoop van een abonnement. De integratie bestaat uit twee delen: inkomende affiliatelinks afhandelen in je app en aankoopgebeurtenissen koppelen aan affiliate-attributies.
Affiliatelinks afhandelen: wanneer een gebruiker op een affiliatelink tikt, wordt hij doorgestuurd naar de App Store of Play Store (als de app niet geïnstalleerd is) of via een deeplink de app in gestuurd (als die wel geïnstalleerd is). Installeer de Insert Affiliate React Native SDK om de attributiegegevens vast te leggen wanneer de app opent.
De SDK haalt de affiliate-identifier uit de deeplink en slaat die lokaal op. Deze identifier blijft behouden tijdens de installatie, ook wanneer de gebruiker de app uit de store installeert en voor het eerst opent.
Aankopen koppelen: configureer Insert Affiliate zo dat het webhookmeldingen van RevenueCat ontvangt. Wanneer een gebruiker een abonnement afsluit, stuurt RevenueCat een event naar de server van Insert Affiliate, die de aankoop koppelt aan de opgeslagen affiliate-attributie. De affiliate krijgt de conversie toegekend.
De paywallcomponent bouwen
Je paywall is waar de conversie plaatsvindt. Bouw hem als een apart React Native scherm dat je abonnementsaanbod toont zoals dat uit RevenueCat wordt opgehaald.
Belangrijke elementen van een effectieve paywall:
- Een duidelijke waardepropositie boven de vouw
- Abonnementsniveaus met prijzen
- Een vermelding van de gratis proefperiode, indien van toepassing
- Social proof of uitgelichte reviews
- Een opvallende abonneerknop
Houd de component gefocust. Elk element moet de gebruiker richting een abonnement bewegen. Vermijd een overvol scherm met functies die afleiden van de aankoopbeslissing.
De volledige flow testen
Test de complete gebruikersreis in sandboxmodus:
- Genereer een test-affiliatelink via Insert Affiliate
- Klik op de link op een testapparaat
- Installeer de app (of open hem als hij al geïnstalleerd is)
- Rond een sandbox-aankoop van een abonnement af
- Controleer of de attributie verschijnt in het dashboard van Insert Affiliate
- Bevestig dat de affiliate de juiste commissie krijgt
Test op zowel iOS als Android. Het gedrag van deeplinks verschilt per platform, en elke app store heeft zijn eigen sandboxomgeving voor aankopen.
Randgevallen afhandelen
Een aantal scenario's verdient aandacht:
Deferred deeplinks: wanneer een gebruiker op een affiliatelink klikt maar de app niet geïnstalleerd heeft, bewaart de deferred deeplinking van Insert Affiliate de attributie tijdens het installatieproces. Test deze flow specifiek.
Herstel van abonnementen: wanneer een gebruiker de app opnieuw installeert of van apparaat wisselt, herstelt RevenueCat het abonnement. De oorspronkelijke affiliate-attributie blijft intact omdat die server-side is opgeslagen.
Delen met gezin: als een abonnee zijn abonnement deelt via Delen met gezin, zijn de extra gebruikers geen nieuwe conversies en mogen ze geen extra affiliatecommissies opleveren. Het entitlementsysteem van RevenueCat regelt dit onderscheid.
Live gaan
Controleer voor de lancering of je webhookverbindingen tussen RevenueCat en Insert Affiliate zijn geconfigureerd voor productie (niet voor sandbox). Stel je commissietarieven, je attributievenster en eventuele promotievoorwaarden in voor je eerste affiliatepartners.
Als de technische integratie af is, verschuift je focus naar het werven van affiliates en het optimaliseren van de conversieratio van je paywall: de twee hefbomen die bepalen hoeveel omzet je affiliatekanaal oplevert.