Afficher un paywall conçu via Remote Config dans React Native SDK
Si vous avez personnalisé un flow via Remote Config, vous devrez implémenter le rendu dans le code de votre application mobile pour l’afficher aux utilisateurs. Comme Remote Config offre une flexibilité adaptée à vos besoins, c’est vous qui décidez de ce qui est inclus et de l’apparence de votre vue de flow. Nous fournissons une méthode pour récupérer la configuration distante, vous donnant la liberté de présenter votre flow personnalisé configuré via Remote Config.
Récupérer la Remote Config du flow et l’afficher
En v4, un flow contient une entrée AdaptyRemoteConfig par langue configurée dans le tableau remoteConfigs. Choisissez la langue correspondant à la préférence de l’utilisateur, puis lisez les valeurs dont vous avez besoin dans son champ data.
try {
const flow = await adapty.getFlow("YOUR_PLACEMENT_ID");
const config = flow.remoteConfigs?.find((c) => c.lang === "en")
?? flow.remoteConfigs?.[0];
const headerText = config?.data?.["header_text"];
} catch (error) {
// handle the error
}À ce stade, une fois que vous avez récupéré toutes les valeurs nécessaires, il est temps de les assembler pour composer une page visuellement attractive. Veillez à ce que le design s’adapte aux différentes tailles d’écran et orientations des téléphones mobiles, afin d’offrir une expérience fluide et conviviale sur tous les appareils.
Pensez à enregistrer l’événement d’affichage du paywall comme décrit ci-dessous, afin qu’Adapty Analytics puisse collecter les données pour les funnels et les tests A/B.
Une fois l’affichage du flow terminé, passez à la configuration du tunnel d’achat. Lorsque l’utilisateur effectue un achat, appelez simplement .makePurchase() avec le produit de votre flow. Pour en savoir plus sur la méthode .makePurchase(), consultez Effectuer des achats.
Nous recommandons de créer un paywall de secours appelé fallback paywall. Ce paywall de secours s’affichera à l’utilisateur en l’absence de connexion internet ou de cache disponible, garantissant ainsi une expérience fluide dans ces situations.
Suivre les événements d’affichage du paywall
Adapty vous aide à mesurer les performances de vos flows. Les données sur les achats sont collectées automatiquement, mais l’enregistrement des vues de flow nécessite votre intervention, car vous seul savez quand un utilisateur voit un flow.
Pour enregistrer un événement de vue de flow, appelez simplement .logShowFlow(flow) — il sera reflété dans vos métriques de paywall dans les funnels et les tests A/B.
Il n’est pas nécessaire d’appeler .logShowFlow(flow) si vous affichez des flows ou des paywalls rendus par le Flow Builder ou le Paywall Builder. Adapty suit automatiquement les vues dans ces cas.
await adapty.logShowFlow(flow);Paramètres de la requête :
| Paramètre | Présence | Description |
|---|---|---|
| flow | requis | Un objet AdaptyFlow obtenu via adapty.getFlow(placementId). |
Si vous avez personnalisé un paywall via Remote Config, vous devrez implémenter le rendu dans le code de votre application mobile pour l’afficher aux utilisateurs. Comme Remote Config offre une flexibilité adaptée à vos besoins, c’est vous qui décidez de ce qui est inclus et de l’apparence de votre vue de paywall. Nous fournissons une méthode pour récupérer la configuration distante, vous donnant la liberté de présenter votre paywall personnalisé configuré via Remote Config.
Récupérer la Remote Config du paywall et l’afficher
Pour obtenir la Remote Config d’un paywall, accédez à la propriété remoteConfig et extrayez les valeurs nécessaires.
try {
const paywall = await adapty.getPaywall({ placementId: "YOUR_PLACEMENT_ID" });
const headerText = paywall.remoteConfig?.data?.["header_text"];
} catch (error) {
// handle the error
}À ce stade, une fois que vous avez récupéré toutes les valeurs nécessaires, il est temps de les assembler pour composer une page visuellement attractive. Veillez à ce que le design s’adapte aux différentes tailles d’écran et orientations des téléphones mobiles, afin d’offrir une expérience fluide et conviviale sur tous les appareils.
Pensez à enregistrer l’événement d’affichage du paywall comme décrit ci-dessous, afin qu’Adapty Analytics puisse collecter les données pour les funnels et les tests A/B.
Une fois l’affichage du paywall terminé, passez à la configuration du tunnel d’achat. Lorsque l’utilisateur effectue un achat, appelez simplement .makePurchase() avec le produit de votre paywall. Pour en savoir plus sur la méthode .makePurchase(), consultez Effectuer des achats.
Nous recommandons de créer un paywall de secours appelé fallback paywall. Ce paywall de secours s’affichera à l’utilisateur en l’absence de connexion internet ou de cache disponible, garantissant ainsi une expérience fluide dans ces situations.
Suivre les événements d’affichage du paywall
Adapty vous aide à mesurer les performances de vos paywalls. Les données sur les achats sont collectées automatiquement, mais l’enregistrement des vues de paywall nécessite votre intervention, car vous seul savez quand un utilisateur voit un paywall.
Pour enregistrer un événement de vue de paywall, appelez simplement .logShowPaywall(paywall) — il sera reflété dans vos métriques de paywall dans les funnels et les tests A/B.
Il n’est pas nécessaire d’appeler .logShowPaywall(paywall) si vous affichez des paywalls créés dans le Paywall Builder.
await adapty.logShowPaywall(paywall);Paramètres de la requête :
| Paramètre | Présence | Description |
|---|---|---|
| paywall | requis | Un objet AdaptyPaywall. |