Récupérer les flows et paywalls - React Native
getFlow Après avoir conçu votre flow ou votre paywall avec le Paywall Builder, vous pouvez l’afficher dans votre application mobile. La première étape consiste à récupérer le flow ou le paywall associé au placement ainsi que sa configuration d’affichage, comme décrit ci-dessous.
Notez que cette rubrique concerne les flows et les paywalls personnalisés avec le Paywall Builder. Si vous implémentez vos paywalls manuellement, consultez la rubrique Récupérer les paywalls et les produits pour les paywalls Remote Config dans votre application mobile.
Vous souhaitez voir un exemple concret d’intégration du SDK Adapty dans une application mobile ? Consultez nos exemples d’applications, qui illustrent la configuration complète, notamment l’affichage des paywalls, les achats et d’autres fonctionnalités de base.
Avant de commencer à afficher des flows et des paywalls dans votre application mobile (cliquez pour développer)
- Créez vos produits dans l’Adapty Dashboard.
- Créez un flow/paywall et intégrez-y les produits dans l’Adapty Dashboard.
- Créez des placements et intégrez-y votre flow/paywall dans l’Adapty Dashboard.
- Installez le SDK Adapty dans votre application mobile.
Récupérer un flow/paywall
Si vous avez conçu un flow ou un paywall avec le Flow Builder ou le Paywall Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel flow ou paywall contient à la fois ce qui doit être affiché et la façon dont cela doit l’être. Vous devez néanmoins récupérer son ID via le placement, sa configuration d’affichage, puis le présenter dans votre application mobile.
Récupérez le flow ou le paywall et créez sa vue le plus tôt possible — idéalement bien avant de l’afficher. La méthode createFlowView charge la configuration de la vue et lance en arrière-plan le téléchargement et la mise en cache des images. Plus vous l’appelez tôt, plus ces téléchargements ont de temps pour se terminer. Au moment d’afficher le flow ou le paywall, sa configuration et ses images peuvent déjà être en cache et prêtes à l’affichage.
Pour obtenir un flow ou un paywall, utilisez la méthode getFlow :
try {
const placementId = 'YOUR_PLACEMENT_ID';
const flow = await adapty.getFlow(placementId);
// the requested flow/paywall
} catch (error) {
// handle the error
}Paramètres :
| Paramètre | Présence | Description |
|---|---|---|
| placementId | requis | L’identifiant du Placement souhaité. Il s’agit de la valeur que vous avez spécifiée lors de la création d’un placement dans l’Adapty Dashboard. |
| fetchPolicy | par défaut : .reloadRevalidatingCacheData | Par défaut, le SDK tente de charger les données depuis le serveur et renvoie les données en cache en cas d’échec. Nous recommandons cette option car elle garantit que vos utilisateurs reçoivent toujours les données les plus récentes. Cependant, si vous pensez que vos utilisateurs ont une connexion internet instable, envisagez d’utiliser Notez que le cache reste intact lors du redémarrage de l’application et n’est effacé que lors de la réinstallation de l’application ou via un nettoyage manuel. Le SDK Adapty stocke les paywalls localement en deux couches : le cache mis à jour régulièrement décrit ci-dessus et les paywalls de secours. Nous utilisons également un CDN pour récupérer les paywalls plus rapidement, ainsi qu’un serveur de secours indépendant en cas d’inaccessibilité du CDN. Ce système est conçu pour vous garantir de toujours obtenir la dernière version de vos paywalls tout en assurant la fiabilité même lorsque la connexion internet est limitée. |
| loadTimeoutMs | par défaut : 5 sec | Cette valeur limite le délai d’attente de cette méthode. Si le délai est dépassé, les données en cache ou le fallback local seront renvoyés. Notez que dans de rares cas, cette méthode peut expirer légèrement après le délai spécifié dans Pour Android : Vous pouvez créer un |
Paramètres de réponse
| Paramètre | Description |
|---|---|
| Flow | Un objet AdaptyFlow contenant les identifiants du flow (id, variationId), son nom, son placement, ses variantes de paywall (paywalls) et les éventuels Remote Configs (remoteConfigs). |
Récupérer la configuration de la vue
Assurez-vous d’activer le bouton Show on device dans le builder. Si cette option n’est pas activée, la configuration de la vue ne sera pas disponible.
Si le placement a été conçu dans le Flow Builder ou le Paywall Builder, Adapty génère l’interface utilisateur pour vous. Créez la vue avec createFlowView, puis présentez le flow ou le paywall. Si le placement est un paywall personnalisé sans interface dans le Builder, gérez-le comme un paywall Remote Config à la place.
Dans le SDK React Native, appelez createFlowView directement — inutile de récupérer d’abord la configuration de la vue.
Le résultat de la méthode createFlowView ne peut être utilisé qu’une seule fois. Si vous devez l’utiliser à nouveau, appelez de nouveau la méthode createFlowView. L’appeler deux fois sans recréer la vue peut entraîner l’erreur AdaptyUIError.viewAlreadyPresented.
try {
const view = await createFlowView(flow);
} catch (error) {
// handle the error
}Paramètres :
| Paramètre | Présence | Description |
|---|---|---|
| flow | requis | Un objet AdaptyFlow permettant d’obtenir un contrôleur pour le flow/paywall souhaité. |
| locale | optionnel | L’identifiant de la localisation du flow avec laquelle afficher la vue — par exemple, en ou pt-br. Si omis, la vue s’affiche en en, ou dans la localisation par défaut du flow si celui-ci ne dispose pas de en. Nécessite le SDK 4.0.2 ou version ultérieure. Voir Localisations et codes de langue. |
| customTags | optionnel | Définit un dictionnaire de tags personnalisés et leurs valeurs résolues. Les tags personnalisés servent de placeholders dans le contenu, remplacés dynamiquement par des chaînes spécifiques pour personnaliser le contenu du flow/paywall. Consultez la rubrique Tags personnalisés dans le Paywall Builder pour plus de détails. |
| prefetchProducts | optionnel | À activer pour optimiser le moment d’affichage des produits à l’écran. Lorsque true, AdaptyUI récupère automatiquement les produits nécessaires. Par défaut : false. |
| android.enableSafeArea | optionnel | Android uniquement (ignoré sur iOS). À passer en tant qu’objet imbriqué : android: { enableSafeArea: true }. Lorsque true, la vue du flow applique les marges de zone sécurisée. Par défaut true pour la présentation modale (createFlowView + present()) et false pour le composant AdaptyFlowView intégré. La valeur par défaut convient à la plupart des cas. |
Si vous utilisez plusieurs langues, découvrez comment ajouter une localisation de flow et comment utiliser correctement les codes de langue ici.
Une fois que vous avez la vue, affichez le flow/paywall.
Récupérer un flow ou un paywall pour l’audience par défaut afin d’accélérer la récupération
En règle générale, les flows et les paywalls sont récupérés presque instantanément, vous n’avez donc pas à vous soucier d’accélérer ce processus. Cependant, si vous avez de nombreuses audiences et placements et que vos utilisateurs disposent d’une connexion internet faible, la récupération d’un flow ou d’un paywall peut prendre plus de temps que souhaité. Dans ce cas, vous pouvez afficher un flow ou un paywall par défaut pour garantir une expérience utilisateur fluide plutôt que de ne rien afficher du tout.
Pour remédier à cela, vous pouvez utiliser la méthode getFlowForDefaultAudience, qui récupère le flow ou le paywall du placement spécifié pour l’audience All Users. Il est cependant essentiel de comprendre que l’approche recommandée est de récupérer le flow ou le paywall via la méthode getFlow, comme indiqué dans la section Récupérer le flow/paywall ci-dessus.
Pourquoi nous recommandons d’utiliser getFlow
La méthode getFlowForDefaultAudience présente quelques inconvénients majeurs :
- Problèmes potentiels de compatibilité ascendante : Si vous devez afficher des paywalls différents selon les versions de l’application (actuelle et futures), vous pourrez rencontrer des difficultés. Vous devrez soit concevoir des paywalls compatibles avec la version actuelle (héritée), soit accepter que les utilisateurs de cette version puissent rencontrer des problèmes avec des paywalls non affichés.
- Perte de ciblage : Tous les utilisateurs verront le même paywall conçu pour l’audience All Users, ce qui signifie que vous perdez le ciblage personnalisé (notamment par pays, attribution marketing ou attributs personnalisés).
Si vous acceptez ces inconvénients pour bénéficier d’un chargement plus rapide des flows ou des paywalls, utilisez la méthode getFlowForDefaultAudience comme suit. Sinon, restez sur getFlow décrit ci-dessus.
try {
const id = 'YOUR_PLACEMENT_ID';
const flow = await adapty.getFlowForDefaultAudience(id);
// the requested flow/paywall
} catch (error) {
// handle the error
}
| Paramètre | Présence | Description |
|---|---|---|
| placementId | obligatoire | L’identifiant du Placement. Il s’agit de la valeur que vous avez spécifiée lors de la création d’un placement dans votre Adapty Dashboard. |
| fetchPolicy | par défaut : .reloadRevalidatingCacheData | Par défaut, le SDK tente de charger les données depuis le serveur et renvoie les données en cache en cas d’échec. Nous recommandons cette option car elle garantit que vos utilisateurs disposent toujours des données les plus récentes. Cependant, si vous pensez que vos utilisateurs ont une connexion internet instable, envisagez d’utiliser Notez que le cache reste intact lors du redémarrage de l’application et n’est effacé que lors de la désinstallation ou par un nettoyage manuel. |
Personnaliser les ressources
Pour personnaliser les images et vidéos dans votre flow/paywall, implémentez des ressources personnalisées.
Les images et vidéos hero ont des identifiants prédéfinis : hero_image et hero_video. Dans un bundle de ressources personnalisé, vous ciblez ces éléments par leur identifiant et personnalisez leur comportement.
Pour les autres images et vidéos, vous devez définir un identifiant personnalisé dans l’Adapty Dashboard.
Par exemple, vous pouvez :
- Afficher une image ou vidéo différente à certains utilisateurs.
- Afficher une image de prévisualisation locale pendant le chargement de l’image principale distante.
- Afficher une image de prévisualisation avant de lancer une vidéo.
Pour utiliser cette fonctionnalité, mettez à jour le SDK React Native Adapty vers la version 3.8.0 ou supérieure.
Voici un exemple de la façon dont vous pouvez fournir des ressources personnalisées via un simple dictionnaire :
const customAssets: Record<string, AdaptyCustomAsset> = {
'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
'hero_video': {
type: 'video',
fileLocation: {
ios: { fileName: 'custom_video.mp4' },
android: { relativeAssetPath: 'videos/custom_video.mp4' }
}
}
};
view = await createFlowView(flow, { customAssets })
Si une ressource est introuvable, le flow/paywall reviendra à son apparence par défaut.
Après avoir conçu la partie visuelle de votre paywall avec le nouveau Paywall Builder dans l’Adapty Dashboard, vous pouvez l’afficher dans votre application mobile. La première étape de ce processus consiste à récupérer le paywall associé au placement et sa configuration d’affichage, comme décrit ci-dessous.
Le nouveau Paywall Builder fonctionne avec React Native SDK version 3.0 ou supérieure.
Veuillez noter que ce sujet concerne les paywalls personnalisés avec le Paywall Builder. Si vous implémentez vos paywalls manuellement, consultez le sujet Récupérer les paywalls et produits pour les paywalls Remote Config dans votre application mobile.
Vous souhaitez voir un exemple concret d’intégration du SDK Adapty dans une application mobile ? Consultez nos exemples d’applications, qui illustrent la configuration complète, notamment l’affichage des paywalls, les achats et d’autres fonctionnalités de base.
Avant de commencer à afficher des paywalls dans votre application mobile (cliquez pour développer)
- Créez vos produits dans l’Adapty Dashboard.
- Créez un paywall et intégrez-y les produits dans l’Adapty Dashboard.
- Créez des placements et intégrez-y votre paywall dans l’Adapty Dashboard.
- Installez le SDK Adapty dans votre application mobile.
Récupérer un paywall conçu avec le Paywall Builder
Si vous avez conçu un paywall avec le Paywall Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel paywall contient à la fois ce qui doit être affiché et la manière dont cela doit l’être. Vous devez néanmoins récupérer son identifiant via le placement, sa configuration d’affichage, puis le présenter dans votre application mobile.
Pour garantir des performances optimales, il est essentiel de récupérer le paywall et sa configuration d’affichage le plus tôt possible, afin de laisser suffisamment de temps aux images de se télécharger avant de les présenter à l’utilisateur.
Pour récupérer un paywall, utilisez la méthode getPaywall :
try {
const placementId = 'YOUR_PLACEMENT_ID';
const locale = 'en';
const paywall = await adapty.getPaywall(placementId, locale);
// the requested paywall
} catch (error) {
// handle the error
}Paramètres :
| Paramètre | Présence | Description |
|---|---|---|
| placementId | requis | L’identifiant du Placement souhaité. C’est la valeur que vous avez spécifiée lors de la création d’un placement dans l’Adapty Dashboard. |
| locale | optionnel défaut : | L’identifiant de la localisation du paywall. Ce paramètre doit être un code de langue composé d’un ou deux sous-tags séparés par le caractère moins (-). Le premier sous-tag correspond à la langue, le second à la région. Exemple : Consultez Localisations et codes de langue pour plus d’informations sur les codes de langue et nos recommandations d’utilisation. |
| fetchPolicy | défaut : .reloadRevalidatingCacheData | Par défaut, le SDK tente de charger les données depuis le serveur et renvoie les données en cache en cas d’échec. Nous recommandons cette option car elle garantit que vos utilisateurs disposent toujours des données les plus récentes. Cependant, si vous pensez que vos utilisateurs sont confrontés à une connexion internet instable, envisagez d’utiliser Notez que le cache reste intact après le redémarrage de l’application et n’est effacé que lors de la réinstallation de l’application ou via un nettoyage manuel. Le SDK Adapty stocke les paywalls localement sur deux couches : le cache mis à jour régulièrement décrit ci-dessus et les paywalls de secours. Nous utilisons également un CDN pour récupérer les paywalls plus rapidement, ainsi qu’un serveur de secours indépendant en cas d’indisponibilité du CDN. Ce système est conçu pour vous garantir toujours la dernière version de vos paywalls, tout en assurant la fiabilité même lorsque la connexion internet est limitée. |
| loadTimeoutMs | défaut : 5 sec | Cette valeur limite le délai d’expiration de cette méthode. Si le délai est atteint, les données en cache ou le fallback local sont renvoyés. Notez que dans de rares cas, cette méthode peut expirer légèrement après le délai spécifié dans Pour Android : vous pouvez créer un |
Paramètres de réponse
| Paramètre | Description |
|---|---|
| Paywall | Un objet AdaptyPaywall contenant une liste d’identifiants de produits, l’identifiant du paywall, la Remote Config, ainsi que plusieurs autres propriétés. |
Récupérer la configuration de vue d’un paywall conçu avec le Paywall Builder
Assurez-vous d’activer le bouton Show on device dans le Paywall Builder. Si cette option n’est pas activée, la configuration de vue ne sera pas disponible à la récupération.
Après avoir récupéré le paywall, vérifiez s’il inclut une ViewConfiguration, ce qui indique qu’il a été créé avec le Paywall Builder. Cela vous guidera sur la façon d’afficher le paywall. Si la ViewConfiguration est présente, traitez-le comme un paywall Paywall Builder ; sinon, gérez-le comme un paywall Remote Config.
Dans le SDK React Native, appelez directement la méthode createPaywallView sans récupérer manuellement la configuration de la vue au préalable.
Le résultat de la méthode createPaywallView ne peut être utilisé qu’une seule fois. Si vous devez l’utiliser à nouveau, appelez à nouveau la méthode createPaywallView. L’appeler deux fois sans recréer peut entraîner l’erreur AdaptyUIError.viewAlreadyPresented.
// for the Adapty SDK < 3.14 – import {createPaywallView} from 'react-native-adapty/dist/ui';
if (paywall.hasViewConfiguration) {
try {
const view = await createPaywallView(paywall);
} catch (error) {
// handle the error
}
} else {
//use your custom logic
}Paramètres :
| Paramètre | Présence | Description |
|---|---|---|
| paywall | obligatoire | Un objet AdaptyPaywall permettant d’obtenir un contrôleur pour le paywall souhaité. |
| customTags | optionnel | Définit un dictionnaire de tags personnalisés et leurs valeurs résolues. Les tags personnalisés servent de marqueurs de substitution dans le contenu du paywall, remplacés dynamiquement par des chaînes spécifiques pour personnaliser le contenu du paywall. Consultez la rubrique Custom tags in paywall builder pour plus de détails. |
| prefetchProducts | optionnel | À activer pour optimiser le moment d’affichage des produits à l’écran. Lorsque la valeur est true, AdaptyUI récupère automatiquement les produits nécessaires. Par défaut : false. |
Si vous utilisez plusieurs langues, découvrez comment ajouter une localisation dans le Paywall Builder et comment utiliser correctement les codes de langue ici.
Une fois que vous avez la vue, affichez le paywall.
Récupérer un paywall pour l’audience par défaut afin d’accélérer le chargement
En général, les paywalls sont récupérés presque instantanément, vous n’avez donc pas à vous soucier d’optimiser ce processus. Cependant, si vous avez de nombreuses audiences et paywalls, et que vos utilisateurs disposent d’une connexion internet faible, la récupération d’un paywall peut prendre plus de temps que souhaité. Dans ce cas, vous pouvez afficher un paywall par défaut pour garantir une expérience utilisateur fluide plutôt que de ne rien afficher du tout.
Pour résoudre ce problème, vous pouvez utiliser la méthode getPaywallForDefaultAudience, qui récupère le paywall du placement spécifié pour l’audience All Users. Cependant, il est essentiel de comprendre que l’approche recommandée est de récupérer le paywall via la méthode getPaywall, comme décrit dans la section Récupérer les informations du paywall ci-dessus.
Pourquoi nous recommandons d’utiliser getPaywall
La méthode getPaywallForDefaultAudience présente quelques inconvénients importants :
- Problèmes potentiels de compatibilité descendante : si vous devez afficher des paywalls différents selon les versions de l’application (actuelle et futures), vous risquez de rencontrer des difficultés. Il vous faudra soit concevoir des paywalls compatibles avec la version actuelle (legacy), soit accepter que les utilisateurs de cette version puissent avoir des problèmes d’affichage.
- Perte de ciblage : tous les utilisateurs verront le même paywall conçu pour l’audience All Users, ce qui signifie que vous perdez le ciblage personnalisé (notamment par pays, attribution marketing ou attributs personnalisés).
Si vous êtes prêt à accepter ces inconvénients pour bénéficier d’une récupération plus rapide des paywalls, utilisez la méthode getPaywallForDefaultAudience comme suit. Sinon, restez sur getPaywall décrit ci-dessus.
try {
const id = 'YOUR_PLACEMENT_ID';
const locale = 'en';
const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
// the requested paywall
} catch (error) {
// handle the error
}La méthode getPaywallForDefaultAudience est disponible à partir de la version 2.11.2 du SDK React Native.
| Paramètre | Présence | Description |
|---|---|---|
| placementId | requis | L’identifiant du Placement. C’est la valeur que vous avez spécifiée lors de la création d’un placement dans votre Adapty Dashboard. |
| locale | optionnel par défaut : | L’identifiant de la localisation du paywall. Ce paramètre doit être un code de langue composé d’un ou plusieurs sous-tags séparés par le caractère moins (-). Le premier sous-tag correspond à la langue, le second à la région. Exemple : Consultez Localisations et codes de locale pour plus d’informations sur les codes de locale et notre recommandation d’utilisation. |
| fetchPolicy | par défaut : .reloadRevalidatingCacheData | Par défaut, le SDK tente de charger les données depuis le serveur et renvoie les données en cache en cas d’échec. Nous recommandons cette option, car elle garantit que vos utilisateurs reçoivent toujours les données les plus récentes. Cependant, si vous pensez que vos utilisateurs ont une connexion instable, envisagez d’utiliser Notez que le cache est conservé après un redémarrage de l’application et n’est effacé que lors d’une réinstallation ou d’un nettoyage manuel. |
Personnaliser les ressources
Pour personnaliser les images et vidéos de votre paywall, implémentez des ressources personnalisées.
Les images et vidéos hero ont des ID prédéfinis : hero_image et hero_video. Dans un bundle de ressources personnalisées, vous ciblez ces éléments par leur ID et personnalisez leur comportement.
Pour les autres images et vidéos, vous devez définir un ID personnalisé dans le tableau de bord Adapty.
Par exemple, vous pouvez :
- Afficher une image ou vidéo différente à certains utilisateurs.
- Afficher une image de prévisualisation locale pendant le chargement d’une image principale distante.
- Afficher une image de prévisualisation avant de lancer une vidéo.
Pour utiliser cette fonctionnalité, mettez à jour le SDK React Native d’Adapty vers la version 3.8.0 ou supérieure.
Voici un exemple illustrant comment fournir des ressources personnalisées via un simple dictionnaire :
const customAssets: Record<string, AdaptyCustomAsset> = {
'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
'hero_video': {
type: 'video',
fileLocation: {
ios: { fileName: 'custom_video.mp4' },
android: { relativeAssetPath: 'videos/custom_video.mp4' }
}
}
};
view = await createPaywallView(paywall, { customAssets })
Si une ressource est introuvable, le paywall reviendra à son apparence par défaut.