Afficher un paywall conçu via Remote Config dans le SDK Capacitor
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, vous contrôlez ce qui est inclus et la façon dont votre vue de flow apparaît. Nous fournissons une méthode pour récupérer la configuration distante, vous laissant toute liberté pour présenter votre flow personnalisé configuré via Remote Config.
Récupérer la Remote Config du 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 à la préférence 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 toutes les valeurs nécessaires reçues, il est temps 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 terminaux.
Veillez à enregistrer l’événement d’affichage du paywall comme décrit ci-dessous, afin qu’Adapty Analytics puisse capturer les informations pour les entonnoirs et les tests A/B.
Une fois l’affichage du flow terminé, poursuivez en configurant le flux 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 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 une expérience fluide même dans ces situations.
Suivre les événements d’affichage du paywall
Adapty vous aide à mesurer les performances de vos flows. Bien que nous collectons automatiquement les données sur les achats, l’enregistrement des affichages de flows nécessite votre intervention, car vous seul savez quand un client voit un flow.
Pour enregistrer un événement d’affichage de flow, appelez simplement .logShowFlow({ flow }) — il sera alors 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 affichages automatiquement 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, vous contrôlez ce qui est inclus et la façon dont votre vue de paywall apparaît. Nous fournissons une méthode pour récupérer la configuration distante, vous laissant toute liberté pour 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',
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 toutes les valeurs nécessaires reçues, il est temps 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 terminaux.
Veillez à enregistrer l’événement d’affichage du paywall comme décrit ci-dessous, afin qu’Adapty Analytics puisse capturer les informations pour les entonnoirs et les tests A/B.
Une fois l’affichage du paywall terminé, poursuivez en configurant le 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 appelé fallback paywall. Ce paywall de secours s’affichera à 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 du paywall
Adapty vous aide à mesurer les performances de vos paywalls. Bien que nous collectons automatiquement les données sur les achats, l’enregistrement des affichages de paywalls 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) — il sera alors reflété dans vos métriques de paywall dans les entonnoirs 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.
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. |