Afficher un paywall conçu avec Remote Config dans le SDK Capacitor
Si vous avez personnalisé un flow avec un Remote Config, vous devrez implémenter le rendu dans le code de votre application mobile pour l’afficher aux utilisateurs. Comme le Remote Config offre une flexibilité adaptée à vos besoins, c’est vous qui décidez de son contenu et de l’apparence de votre flow. Nous fournissons une méthode pour récupérer la configuration distante, vous laissant ainsi toute latitude pour afficher votre flow personnalisé configuré via Remote Config.
Obtenir la 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. Choisissez la langue qui correspond aux préférences de l’utilisateur, puis lisez les valeurs dont vous avez besoin depuis son data.
try {
const flow = await adapty.getFlow({ placementId: 'YOUR_PLACEMENT_ID' });
const config = flow.remoteConfigs?.find((c) => c.lang === 'en')
?? flow.remoteConfigs?.[0];
const headerText = config?.data?.['header_text'];
} catch (error) {
console.error('Failed to fetch flow:', 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 la conception s’adapte aux différentes tailles d’écran et orientations des téléphones mobiles, pour une expérience fluide et agréable sur tous les appareils.
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 entonnoirs et aux tests A/B.
Une fois le flow affiché, poursuivez avec la mise en place du flux d’achat. Lorsque l’utilisateur effectue un achat, appelez simplement .makePurchase() avec le produit issu de votre flow. Pour plus de détails 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 même dans ces situations.
Suivre les événements d’affichage de paywall
Adapty vous aide à mesurer les performances de vos flows. Nous collectons automatiquement les données d’achat, mais l’enregistrement des affichages de flow nécessite votre intervention, car vous seul savez quand un utilisateur voit un flow.
Pour enregistrer un événement d’affichage de flow, appelez simplement .logShowFlow({ flow }) — cela sera reflété dans vos métriques de paywall dans les entonnoirs 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 les vues automatiquement dans ces cas.
await adapty.logShowFlow({ flow });Paramètres de la requête :
| Paramètre | Présence | Description |
|---|---|---|
| flow | required | Un objet AdaptyFlow obtenu via adapty.getFlow({ placementId }). |
Si vous avez personnalisé un paywall à l’aide d’un Remote Config, vous devrez implémenter le rendu dans le code de votre application mobile pour l’afficher aux utilisateurs. Comme le Remote Config offre une flexibilité adaptée à vos besoins, vous contrôlez entièrement ce qui est inclus et la façon dont votre paywall s’affiche. Nous fournissons une méthode pour récupérer la configuration distante, vous donnant toute latitude pour présenter 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 nécessaires.
try {
const paywall = await adapty.getPaywall({
placementId: 'YOUR_PLACEMENT_ID',
params: {
fetchPolicy: 'reload_revalidating_cache_data', // Load from server, fallback to cache
loadTimeoutMs: 5000 // 5 second timeout
}
});
const headerText = paywall.remoteConfig?.data?.['header_text'];
} catch (error) {
console.error('Failed to fetch paywall:', error);
}À ce stade, une fois que vous avez reçu 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, pour une expérience fluide et conviviale sur tous les appareils.
Veillez à enregistrer l’événement d’affichage du paywall comme décrit ci-dessous, afin que l’analytique Adapty puisse collecter les données pour les funnels et les tests A/B.
Une fois la paywall affichée, passez à la configuration du flow 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 une paywall de secours appelée fallback paywall. Cette paywall de secours s’affiche à l’utilisateur en l’absence de connexion internet ou de cache disponible, garantissant une expérience fluide même dans ces situations.
Suivre les événements d’affichage de paywall
Adapty vous aide à mesurer les performances de vos paywalls. Bien que nous collections automatiquement les données d’achats, l’enregistrement des affichages de paywall nécessite votre intervention, car vous seul savez quand un client 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 funnels et les tests A/B.
L’appel à .logShowPaywall(paywall) n’est pas nécessaire si vous affichez des paywalls créés dans le Paywall Builder.
try {
await adapty.logShowPaywall({ paywall });
} catch (error) {
console.error('Failed to log paywall view:', error);
}Paramètres de la requête :
| Paramètre | Présence | Description |
|---|---|---|
| paywall | requis | Un objet AdaptyPaywall. |