Afficher un paywall conçu avec Remote Config dans le SDK React Native

Si vous avez personnalisé un flow avec Remote Config, vous devez 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, vous maîtrisez entièrement ce qui est inclus et la façon dont votre vue de flow s’affiche. Nous fournissons une méthode pour récupérer la configuration distante, vous laissant ainsi toute liberté pour présenter votre flow personnalisé configuré via Remote Config.

Récupérer le Remote Config d’un flow et l’afficher

Dans la v4, un flow contient une entrée AdaptyRemoteConfig par langue configurée dans le tableau remoteConfigs. Sélectionnez la langue correspondant à la préférence de l’utilisateur, puis lisez les valeurs dont vous avez besoin depuis son 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 afficher et de les assembler en une page visuellement attrayante. Assurez-vous que le design s’adapte aux différents écrans de téléphones mobiles et aux différentes orientations, offrant une expérience fluide et conviviale sur tous les appareils.

Warning

Veillez à enregistrer l’événement d’affichage du paywall comme décrit ci-dessous, afin qu’Adapty Analytics puisse collecter les informations pour les entonnoirs et les tests A/B.

Une fois le flow affiché, passez à la configuration du processus d’achat. Lorsque l’utilisateur effectue un achat, appelez simplement .makePurchase() avec le produit de votre flow. Pour plus de détails sur la méthode .makePurchase(), consultez Effectuer des achats.

Nous vous recommandons de créer un paywall de secours. 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 de vue de paywall

Adapty vous aide à mesurer les performances de vos flows. Nous collectons automatiquement les données sur les achats, 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) — cela sera reflété dans vos métriques de paywall dans les entonnoirs et les tests A/B.

Important

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 les vues automatiquement dans ces cas.

await adapty.logShowFlow(flow);

Paramètres de la requête :

Paramètre	Présence	Description
flow	obligatoire	Un objet `AdaptyFlow` obtenu via `adapty.getFlow(placementId)`.

Si vous avez personnalisé un paywall à l’aide de Remote Config, vous devrez implémenter le rendu dans le code de votre application mobile pour l’afficher aux utilisateurs. Remote Config offrant une flexibilité adaptée à vos besoins, c’est vous qui décidez de ce qui est inclus et de l’apparence de votre vue paywall. Nous fournissons une méthode pour récupérer la configuration distante, vous laissant toute liberté pour afficher votre paywall personnalisé configuré via Remote Config.

Obtenir le Remote Config d’un paywall et l’afficher

Pour obtenir le Remote Config d’un paywall, accédez à la propriété remoteConfig et extrayez les valeurs dont vous avez besoin.

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 afficher et de les assembler en une page visuellement attrayante. Assurez-vous que le design s’adapte aux différentes tailles d’écran et orientations des appareils mobiles, afin d’offrir une expérience fluide et conviviale sur tous les appareils.

Warning

Veillez à enregistrer l’événement d’affichage du paywall comme décrit ci-dessous, afin qu’Adapty Analytics puisse collecter les données nécessaires aux tunnels de conversion et aux tests A/B.

Après avoir affiché le paywall, passez à la configuration du flux d’achat. Lorsque l’utilisateur effectue un achat, appelez simplement .makePurchase() avec le produit de votre paywall. Pour plus de détails sur la méthode .makePurchase(), consultez Effectuer des achats.

Nous recommandons de créer un paywall de secours. 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 de paywall

Adapty vous aide à mesurer les performances de vos paywalls. Les achats sont enregistrés automatiquement, mais la journalisation des affichages de paywall nécessite votre intervention, car vous seul savez quand un utilisateur voit un paywall.

Pour enregistrer un événement d’affichage de paywall, appelez simplement .logShowPaywall(paywall) — cela sera reflété dans vos métriques de paywall dans les entonnoirs et les tests A/B.

Important

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`.