Obtenir des flows et des paywalls - Capacitor
getFlow Après avoir conçu votre flow ou votre paywall dans 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 et à sa configuration de vue, 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 agrandir)
- 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 comment l’afficher. Vous devez néanmoins récupérer son ID via le placement, sa configuration de vue, 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 le téléchargement et la mise en cache de ses images en arrière-plan. Plus tôt vous l’appelez, plus ces téléchargements ont de temps pour se terminer. Au moment où vous affichez le flow ou le paywall, sa configuration et ses images peuvent déjà être en cache et prêtes à être affichées.
Pour obtenir un flow ou un paywall, utilisez la méthode getFlow :
try {
const flow = await adapty.getFlow({
placementId: 'YOUR_PLACEMENT_ID',
});
// the requested flow/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 indiquée lors de la création d’un placement dans l’Adapty Dashboard. |
| fetchPolicy | par défaut : 'reload_revalidating_cache_data' | Passé dans l’objet optionnel Cependant, si vous pensez que vos utilisateurs ont 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é qu’à 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 | par défaut : 5 sec | Passé dans l’objet optionnel Notez que dans de rares cas, cette méthode peut expirer légèrement après le délai indiqué dans |
N’inscrivez pas les IDs de produits en dur dans le code. Le seul ID à coder en dur est l’ID de placement. Les flows et les paywalls étant configurés à distance, le nombre de produits et les offres disponibles peuvent changer à tout moment. Votre application doit gérer ces changements de manière dynamique — si un paywall retourne deux produits aujourd’hui et trois demain, tous doivent s’afficher sans modification du code.
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), ainsi que les Remote Configs éventuels (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 à la récupération.
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 affichez le flow ou le paywall. Si le placement est un paywall personnalisé sans interface Builder, gérez-le comme un paywall Remote Config à la place.
Dans le SDK Capacitor, appelez directement createFlowView — il n’est pas nécessaire 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 en avez besoin à nouveau, appelez de nouveau la méthode createFlowView. L’appeler deux fois sans recréer la vue peut entraîner une erreur.
try {
const view = await createFlowView(flow);
} catch (error) {
// handle the error
}Paramètres :
| Paramètre | Présence | Description |
|---|---|---|
| flow | obligatoire | Un objet AdaptyFlow permettant d’obtenir un contrôleur pour le flow/paywall souhaité. |
| locale | optionnel | L’identifiant de la localisation du flow à utiliser pour 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 version en. Voir Localisations et codes de langue. |
| customTags | optionnel | Définit un dictionnaire de balises personnalisées et leurs valeurs résolues. Les balises personnalisées servent de placeholders dans le contenu, remplacées dynamiquement par des chaînes spécifiques pour personnaliser le contenu du flow/paywall. Consultez la rubrique sur les balises personnalisées dans le Paywall Builder pour plus de détails. |
| prefetchProducts | optionnel | Activez cette option 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 : true. |
| android.enableSafeArea | optionnel | Android uniquement (ignoré sur iOS). Imbriqué sous la clé android. Lorsque la valeur est true, la vue du flow applique les marges de zone sécurisée. Par défaut : true. 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 le chargement
En général, les flows et les paywalls sont récupérés presque instantanément, donc vous n’avez pas à vous inquiéter 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 pourriez vouloir 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 y remédier, 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 toutefois essentiel de comprendre que l’approche recommandée est de récupérer le flow ou le paywall via la méthode getFlow, comme décrit 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 rétrocompatibilité : si vous devez afficher des paywalls différents selon les versions de l’application (version actuelle et futures versions), vous risquez de rencontrer des difficultés. Vous devrez soit concevoir des paywalls compatibles avec la version actuelle (legacy), soit accepter que les utilisateurs de cette version puissent rencontrer des problèmes avec des paywalls qui ne s’affichent pas.
- 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’une récupération de flow ou de paywall plus rapide, utilisez la méthode getFlowForDefaultAudience comme suit. Sinon, restez sur getFlow décrit ci-dessus.
try {
const flow = await adapty.getFlowForDefaultAudience({
placementId: 'YOUR_PLACEMENT_ID',
});
// the requested flow/paywall
} catch (error) {
// handle the error
}| Paramètre | Présence | Description |
|---|---|---|
| placementId | requis | 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 | défaut : 'reload_revalidating_cache_data' | Passé dans l’objet optionnel Cependant, si vous pensez que vos utilisateurs ont une connexion internet instable, envisagez d’utiliser Notez que le cache reste intact après un redémarrage de l’application et n’est effacé que lors d’une réinstallation ou par un nettoyage manuel. |
Personnaliser les assets
Pour personnaliser les images et vidéos de votre flow/paywall, implémentez des assets personnalisés.
Les images et vidéos hero ont des IDs prédéfinis : hero_image et hero_video. Dans un bundle d’assets personnalisé, vous ciblez ces éléments par leurs IDs et personnalisez leur comportement.
Pour les autres images et vidéos, vous devez définir un ID 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 d’une image principale distante.
- Afficher une image de prévisualisation avant de lancer une vidéo.
Voici un exemple de la façon dont vous pouvez fournir des ressources personnalisées via un dictionnaire simple :
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' }
}
}
};
const view = await createFlowView(flow, { customAssets });Si un asset 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.
Veuillez noter que cette rubrique concerne les paywalls personnalisées avec Paywall Builder. Pour savoir comment récupérer les paywalls avec Remote Config, consultez la rubrique Récupérer les paywalls et produits pour les paywalls Remote Config dans votre application mobile.
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 comment 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 de vue 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 obtenir un paywall, utilisez la méthode getPaywall :
try {
const paywall = await adapty.getPaywall({
placementId: 'YOUR_PLACEMENT_ID',
locale: 'en',
});
// 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 indiquée lors de la création d’un placement dans l’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 deux sous-tags séparés par le caractère moins (-). Le premier sous-tag désigne la langue, le second la région. Exemple : Consultez Localisations et codes de langue pour plus d’informations sur les codes de langue et leur utilisation recommandée. |
| params | optionnel | Paramètres supplémentaires pour récupérer le paywall. |
Ne codez pas en dur les ID de produits. Le seul ID à coder en dur est l’ID de placement. Les paywalls étant configurés à distance, le nombre de produits et les offres disponibles peuvent changer à tout moment. Votre application doit gérer ces changements de façon dynamique — si un paywall renvoie deux produits aujourd’hui et trois demain, affichez-les tous sans modifier le code.
Paramètres de réponse :
| Paramètre | Description |
|---|---|
| Paywall | Un objet AdaptyPaywall contenant une liste d’identifiants de produits, l’identifiant du paywall, le Remote Config et plusieurs autres propriétés. |
Récupérer la configuration d’affichage 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 d’affichage ne pourra pas être récupérée.
Après avoir récupéré le paywall, vérifiez s’il inclut une ViewConfiguration, ce qui indique qu’il a été créé avec 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 Capacitor, appelez directement la méthode createPaywallView sans récupérer manuellement la configuration de vue au préalable.
Le résultat de la méthode createPaywallView ne peut être utilisé qu’une seule fois. Si vous avez besoin de l’utiliser à nouveau, appelez à nouveau la méthode createPaywallView.
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 | required | Un objet AdaptyPaywall pour obtenir un contrôleur pour le paywall souhaité. |
| customTags | optional | Définit un dictionnaire de tags personnalisés et leurs valeurs résolues. Les tags personnalisés servent de placeholders dans le contenu du paywall, remplacés dynamiquement par des chaînes spécifiques pour un contenu personnalisé. Consultez la rubrique Custom tags in paywall builder pour plus de détails. |
| prefetchProducts | optional | Activez cette option 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 locale ici.
Une fois la vue disponible, affichez le paywall.
Obtenir un paywall pour l’audience par défaut afin de l’afficher plus rapidement
En général, les paywalls se chargent 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, le chargement 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 fluide plutôt que de ne rien afficher du tout.
Pour remédier à cela, vous pouvez utiliser la méthode getPaywallForDefaultAudience, qui récupère le paywall du placement spécifié pour l’audience All Users. Il est toutefois 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 majeurs :
- Problèmes potentiels de compatibilité descendante : si vous devez afficher des paywalls différents selon les versions de l’application (version actuelle et versions futures), vous devrez soit concevoir des paywalls compatibles avec la version actuelle (legacy), 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é (y compris par pays, attribution marketing ou attributs personnalisés).
Si vous acceptez ces inconvénients pour bénéficier d’une récupération plus rapide des paywalls, utilisez la méthode getPaywallForDefaultAudience comme suit. Sinon, utilisez getPaywall décrit ci-dessus.
try {
const paywall = await adapty.getPaywallForDefaultAudience({
placementId: 'YOUR_PLACEMENT_ID',
locale: 'en',
});
// the requested paywall
} catch (error) {
// handle the error
}| 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 langue pour en savoir plus sur les codes de langue et nos recommandations d’utilisation. |
| params | optionnel | Paramètres supplémentaires pour récupérer le paywall. |
Personnaliser les ressources
Pour personnaliser les images et vidéos de votre paywall, utilisez 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ées, vous ciblez ces éléments par leur identifiant pour personnaliser 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 une 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.
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 createPaywallView(paywall, { customAssets });Si une ressource est introuvable, le paywall affichera son apparence par défaut.