- \n
- Es bietet eine serverbasierte Kaufvalidierung.<\/li>\n\n\n\n
- Es unterst\u00fctzt alle k\u00fcrzlich von den App Stores implementierten Funktionen, von Werbeangeboten<\/a> bis hin zu Vorauszahlungen<\/a>.<\/li>\n\n\n\n
- Der Code ist klarer und einfacher.<\/li>\n\n\n\n
- Sie k\u00f6nnen ganze ohne das Durchlaufen des ganzen Ver\u00f6ffentlichungskreislaufs Ihr Produktangebot \u00e4ndern und neue Angebote hinzuf\u00fcgen. Sie m\u00fcssen keine Betaversionen ver\u00f6ffentlichen und auf Genehmigungen warten.<\/li>\n<\/ul>\n\n\n\n
Adapty SDK bietet Ihnen aber noch viel mehr. Sie erhalten verschiedene Analysetools f\u00fcr alle wichtigen Kennzahlen, Kohortenanalysen, eine serverbasierte Kaufvalidierung, AB-Tests f\u00fcr Paywalls, Werbekampagnen mit flexibler Segmentierung, integrierte Analysetools von Drittanbietern und mehr.<\/p>\n\n\n\n
Worauf ich zu sprechen kommen werde<\/h2>\n\n\n\n
Zuerst m\u00f6chte ich \u00fcber das Einrichten von In-App-K\u00e4ufen in React Native-Apps sprechen. Dazu geh\u00f6rt Folgendes:<\/p>\n\n\n\n
- \n
- Warum Expo nicht f\u00fcr In-App-K\u00e4ufe in React Native-Apps funktioniert.<\/li>\n\n\n\n
- Die Erstellung eines Entwicklerkontos<\/li>\n\n\n\n
- Die Konfiguration von Adapty:
Konfiguration im App Store
Konfiguration im Play Store<\/li>\n\n\n\n - Das Hinzuf\u00fcgen von Abonnements.<\/li>\n\n\n\n
- Die Erstellung einer Paywall.<\/li>\n\n\n\n
- Die Installation von react-native-adapty.<\/li>\n\n\n\n
- Eine Sample App und das Ergebnis.<\/li>\n<\/ol>\n\n\n\n
In diesem Tutorial versuchen wir, eine App zu erstellen, in der Abonnenten Katzenbilder zu sehen bekomme. Alle anderen Nutzer sollen aufgefordert werden, ein Abonnement abzuschlie\u00dfen.<\/p>\n\n\n\n\n\n
Warum Expo nicht f\u00fcr In-App-K\u00e4ufe in React Native-Apps funktioniert<\/h3>\n\n\n\n
In wenigen Worten: <\/em>Expo unterst\u00fctzt nicht die nativen Methoden<\/em><\/a>, die der App Store f\u00fcr die Kaufabwicklung anbietet (auch bekannt als Store-Kits). Sie m\u00fcssen sich entweder an RN halten oder den Expo-Bare-Workflow verwenden.<\/em><\/p>\n\n\n\n
Ich muss Sie gleich zu Beginn leider entt\u00e4uschen, falls auch Sie Expo verwenden wollten. Denn das wird nicht funktionieren. Nat\u00fcrlich ist Expo ein React Native-Framework, das die App-Entwicklung erheblich vereinfacht. Ihr verwalteter Workflow ist jedoch nicht mit der Kauf-\/Abonnementverarbeitung kompatibel. Expo verwendet keinen nativen Code in seinen Methoden und Komponenten (beide sind JavaScript), was f\u00fcr Shop-Kits jedoch erforderlich ist. Es gibt keine M\u00f6glichkeit, In-App-K\u00e4ufe in Stores mit JavaScript zu implementieren. Sie m\u00fcssen diese Idee daher verwerfen und stattdessen einen \u201cEject“ wagen.<\/p>\n\n\n\n
Die Erstellung eines Entwicklerkontos<\/h2>\n\n\n\n
Erst einmal m\u00fcssen Sie App Store-Konten einrichten sowie K\u00e4ufe und Abonnements f\u00fcr iOS und Android erstellen und konfigurieren. Das sollte kaum l\u00e4nger als 20 Minuten dauern.<\/p>\n\n\n\n
Falls Sie Ihr Entwicklerkonto und Ihre Produkte noch nicht in App Store Connect und\/oder in der Google Play Console konfiguriert haben, folgen Sie bitte diesen Schritten:<\/p>\n\n\n\n
- \n
- F\u00fcr iOS<\/a>: Lesen Sie das Tutorial von Anfang an bis zur \u00dcberschrift \u201eDie Liste des SKProduct\u201c, wo wir \u00fcber die nativen Implementierungen sprechen.<\/li>\n\n\n\n
- F\u00fcr Android<\/a>: Lesen Sie das Tutorial von Anfang an bis zur \u00dcberschrift \u201eErstellen einer Produktliste in einer App\u201c.<\/li>\n<\/ul>\n\n\n\n
Die Konfiguration von Adapty<\/h2>\n\n\n\n
F\u00fcr React-native-adapty m\u00fcssen Sie zun\u00e4chst Ihr Adapty-Dashboard konfigurieren. Dies nimmt nicht viel Zeit in Anspruch. Gleichzeitig genie\u00dfen Sie alle oben genannten Vorteile von Adapty im Vergleich zur harten Codierung.<\/p>\n\n\n\n
Im dritten Schritt werden Sie aufgefordert, die Konfigurationen f\u00fcr den App Store und Google Play vorzunehmen.<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3df0eb779b1966c336_wwqbyclqbg22r4uxyue6f_wty_8kx1lgeepf9-ctrv5mcvrihoe1upbhw-0jth_wqwkhjc4az-wnkjavifb_eb9riv9vztvwn3rvqbfghyv0cjx8ytj7d5fc4of7zeu7ezdhvkxd.png\")
<\/figure>\n\n\n\nF\u00fcr iOS m\u00fcssen Sie:<\/p>\n\n\n\n
- \n
- Die Bundle ID angeben;<\/li>\n\n\n\n
- App Store Serverbenachrichtigungen einrichten;<\/li>\n\n\n\n
- Die gemeinsame Geheimnis f\u00fcr App Store Connect angeben.<\/li>\n<\/ul>\n\n\n\n
All diese Felder sind erforderlich, damit die K\u00e4ufe funktionieren. <\/p>\n\n\n\n
Jedes dieser Felder bietet weitere Informationen mit Schritt-f\u00fcr-Schritt-Anleitungen. Nutzen Sie diese, wenn Sie Fragen haben.<\/p>\n\n\n\n
Die Bundle-ID ist die eindeutige ID Ihrer App. Sie muss mit der ID \u00fcbereinstimmen, die Sie in Xcode angegeben haben: Targets > [App Name] > General<\/em>:<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3d0bcefe3f92ed87c6_ofteg-29-hasv9sywd5gpm4vxtbwppkdlkqkatwvl3jprjkq3ffp3xzdcuett5qf_uzavsew-j_9jeqswh_hx7tugan03hol7qmnukdbzhefyla6ctghd8mwdxfb9bo6ynbhqatt.png\")
<\/figure>\n\n\n\nIm Falle von Android sind die erforderlichen Felder der Package Name und die Service Account Key File. Auch diese Felder haben ihre eigenen Hinweise. Der Package Name macht in Android das, was die Bundle-ID in iOS macht. Er muss mit dem Namen \u00fcbereinstimmen, den Sie in Ihrem Code angegeben haben. Pr\u00fcfen Sie dies in der \/android\/app\/build.gradle Datei in android.defaultConfig.applicationId:<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3dad4d57621f800483_qbh6fhwgcmjiqsriilrm2ubc2xjswr8buchwntern5xn8fkxqxgep4hbrftvqyfu3rgx4dg_x3c6iyvemvxarmvemiu-awzpyhlntli64em6lnkwaqaxcsou4spkkyk2usia_jyq.png\")
<\/figure>\n\n\n\nIm vierten Schritt werden Sie dazu aufgefordert, Adapty SDK mit Ihrer App zu verbinden. \u00dcberspringen Sie diesen Schritt jedoch vorerst \u2013 wir werden etwas sp\u00e4ter darauf zur\u00fcckkommen.<\/p>\n\n\n\n
Nachdem Sie sich angemeldet haben, sehen Sie sich die Registerkarte \u201eEinstellungen\u201c an. Beachten Sie bitte, dass hier Ihr \u00f6ffentlicher SDK-Key zu finden ist. Diesen werden Sie sp\u00e4ter ben\u00f6tigen.<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3d3fce0994fd3f0c38_0_z1xu4tx6yoskp5gysva4jz-ksmpt59lwmlpt8mol5fmyuqn1gygyvmqf52rgz5drhlvtp2gekrd0pwygz8pydmejdeskwggxp5-_f6kevd_ftdziotbnzpcv6bsqgojjk9unzt.jpg\")
<\/figure>\n\n\n\nHinzuf\u00fcgen eines Abonnements<\/h3>\n\n\n\n
Adapty verwendet f\u00fcr die verschiedenen Abonnements Produkte. Ihr Abonnement f\u00fcr Katzenbilder kann w\u00f6chentlich, halbj\u00e4hrlich oder j\u00e4hrlich verl\u00e4ngert werden. Jede dieser Optionen ist ein separates Adapty-Produkt.<\/p>\n\n\n\n
Im Dashboard geben Sie an, dass Sie ein Produkt haben. Gehen Sie dazu zu Produkte & A\/B-Tests \u2192 Produkte<\/em> und klicken Sie auf Produkt erstellen<\/em>. <\/p>\n\n\n\n
Nun m\u00fcssen Sie den Produktnamen angeben. Dies bestimmt, wie das Abonnement in Ihrem Adapty-Dashboard aussehen wird.<\/p>\n\n\n\n
Zus\u00e4tzlich m\u00fcssen Sie die App Store Produkt-ID und die Play Store Produkt-ID angeben. Sie k\u00f6nnen auch den Zeitraum und den Namen f\u00fcr die Analyse angeben. Klicken Sie auf Speichern.<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3d3abe166794791c09_fukrvgjrhor1rtmrrmvq4mar_f3rdr2nqpbojb44aa5ipwcq-9bbq7ajpq085sroobeltpnw9rtdfah-a0pqoqthyqbj8ayaahikjioylj1gszmlfh_mhwlqowynrpaabjjkvoln.png\")
<\/figure>\n\n\n\nDie Erstellung einer Paywall<\/h2>\n\n\n\n
Nun m\u00fcssen Sie eine Paywall entwerfen. Dabei handelt es sich um einen Screen, der den Zugriff des Nutzers auf Premium-Funktionen einschr\u00e4nkt und ihn dazu auffordert, ein Abonnement abzuschlie\u00dfen. Sie m\u00fcssen das von Ihnen erstellte Produkt zu Ihrer Paywall hinzuf\u00fcgen. Klicken Sie dazu im selben Abschnitt auf Paywall erstellen (Produkte & A\/B-Tests \u2192 Paywalls).<\/p>\n\n\n\n
- \n
- W\u00e4hlen Sie einen Paywall-Namen aus, bei dem Sie und Ihr Team direkt erkennen, um welche Paywall es sich handelt.<\/li>\n\n\n\n
- Verwenden Sie die Paywall-ID, um sie in Ihrer App anzuzeigen. F\u00fcr unsere Beispiel-App verwenden wir \u201ecats_paywall\u201c.<\/li>\n\n\n\n
- W\u00e4hlen Sie in der Dropdown-Liste Produkt Ihr Abonnement aus.<\/li>\n<\/ul>\n\n\n\n
Klicken Sie auf Speichern und Ver\u00f6ffentlichen.<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3ddced150628dcbffb_uw2xexcu4rprox7_esl56chynz2mu1iqtae1xlweot55m7lqpugfjxtzp_kyg-vtawjwjhcpkmuno-ysa-i_el8xnv2v-6seczhpmdhy7xsswndb1_2kbuu9bfhqltew-h4yq5tj.png\")
<\/figure>\n\n\n\nDie Konfiguration ist nun abgeschlossen. Jetzt f\u00fcgen Sie die Abh\u00e4ngigkeiten hinzu und schreiben den Code.<\/p>\n\n\n\n
Installation von react-native-adapty<\/h2>\n\n\n\n
1. F\u00fcgen Sie als erstes die Abh\u00e4ngigkeit hinzu:<\/p>\n\n\n\n
- F\u00fcr Android<\/a>: Lesen Sie das Tutorial von Anfang an bis zur \u00dcberschrift \u201eErstellen einer Produktliste in einer App\u201c.<\/li>\n<\/ul>\n\n\n\n
- F\u00fcr iOS<\/a>: Lesen Sie das Tutorial von Anfang an bis zur \u00dcberschrift \u201eDie Liste des SKProduct\u201c, wo wir \u00fcber die nativen Implementierungen sprechen.<\/li>\n\n\n\n