Récupérer les flows et paywalls - React Native

Après avoir conçu votre flow, 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 d’affichage, comme décrit ci-dessous.

Notez que cette rubrique concerne les flows et paywalls conçus dans les builders d’Adapty. Si vous implémentez vos paywalls manuellement, consultez la rubrique Récupérer les paywalls et produits pour les paywalls en Remote Config dans votre application mobile.

Avant de commencer

Vous avez besoin de :

• Des produits dans l’Adapty Dashboard : Créez vos produits.
• Un flow avec des produits : Créez-le dans le Flow & Paywall Builder et assignez-lui des produits.
• Un placement : Créez un placement et assignez-lui votre flow.
• Le SDK installé : Consultez le guide d’installation du SDK React Native.

Récupérer un flow/paywall

Si vous avez conçu un flow ou un paywall dans le 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. Il vous faut 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 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é. C’est la valeur que vous avez spécifiée lors de la création d’un placement dans l’Adapty Dashboard.
fetchPolicy	par défaut : 'reload_revalidating_cache_data'	fetchPolicy définit quelle couche le SDK lit en premier, et non s’il peut utiliser le cache. Par défaut, le SDK interroge d’abord le serveur et renvoie les données en cache si la requête échoue. Nous recommandons cette option, car elle garantit que vos utilisateurs obtiennent toujours les données les plus récentes. Cependant, si vous pensez que vos utilisateurs sont confrontés à une connexion internet instable, envisagez 'return_cache_data_else_load', qui inverse cet ordre — il lit d’abord le cache et interroge le serveur uniquement lorsqu’il n’y a rien en cache. Les utilisateurs pourraient ne pas obtenir les données les plus récentes, mais ils bénéficieront de temps de chargement plus rapides, quelle que soit la qualité de leur connexion. Le cache est mis à jour régulièrement, il est donc sûr de l’utiliser pendant la session pour éviter des requêtes réseau. Une troisième politique, 'return_cache_data_if_not_expired_else_load', se situe entre les deux : elle lit d’abord le cache tant que la copie en cache est plus récente que la valeur maxAgeSeconds que vous lui transmettez, et interroge le serveur une fois qu’elle est plus ancienne. 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 dans 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 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	Cette valeur limite le délai d’attente pour 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 loadTimeout, car l’opération peut comprendre différentes requêtes en arrière-plan. Pour Android : Vous pouvez créer un TimeInterval avec des fonctions d’extension (comme 5.seconds, où .seconds provient de import com.adapty.utils.seconds), ou TimeInterval.seconds(5). Pour ne définir aucune limite, utilisez TimeInterval.INFINITE.

Paramètres de réponse

Paramètre	Description
Flow	Un objet AdaptyFlow contenant les identifiants du flow (id, variationId), le nom de la variante (variationName, optionnel, SDK 4.2+), le nom, le placement, ses variantes de paywall (paywalls), les éventuels Remote Configs (remoteConfigs), et — à partir du SDK 4.1 — un flag hasViewConfiguration.

Récupérer la configuration de la vue

Si le placement a été conçu dans le Flow & Paywall Builder ou dans l’ancien Paywall Builder, Adapty génère l’interface à votre place. Créez la vue avec createFlowView, puis affichez le flow ou le paywall. Si le placement est un paywall personnalisé sans interface Builder, traitez-le comme un paywall Remote Config à la place.

À partir du SDK 4.1, le flag hasViewConfiguration sur le flow permet de les distinguer avant de créer la vue :

if (flow.hasViewConfiguration) {
  const view = await createFlowView(flow);
  await view.present();
} else {
  // Render your own screen from flow.remoteConfigs and flow.paywalls
}

Sur la version 4.0, le flag est absent et createFlowView lève une AdaptyError pour un flow sans configuration de vue.

Dans le SDK React Native, appelez createFlowView directement — inutile de récupérer la configuration de vue au préalable.

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 possède pas de version en. Nécessite le SDK 4.0.2 ou ultérieur. Voir Localisations et codes de langue.
customLayoutId	optionnel par défaut : undefined SDK 4.1+	Réservé à une fonctionnalité du Flow & Paywall Builder qui n’est pas encore disponible. Tant que le builder ne peut pas définir des identifiants de mise en page, toute valeur transmise ne correspondra à aucune mise en page et createFlowView lèvera une AdaptyError. Laissez ce paramètre non défini.
customTags	optionnel	Les valeurs de votre application pour les tags personnalisés du flow, dans un objet dont les clés correspondent au nom complet de chaque tag. Pour plus de détails, consultez Transmettre des données aux flows.
prefetchProducts	optionnel	Activez cette option pour optimiser le temps d’affichage des produits à l’écran. Lorsque la valeur est true, AdaptyUI récupère automatiquement les produits nécessaires. Par défaut : false.
android.enableSafeArea	optionnel	Android uniquement (ignoré sur iOS). Transmettez-le en tant qu’objet imbriqué : android: { enableSafeArea: true }. Lorsque la valeur est true, la vue du flow applique des marges de zone sécurisée. La valeur par défaut est true pour la présentation modale (createFlowView + present()) et false pour le composant embarqué AdaptyFlowView. La valeur par défaut convient à la plupart des cas.

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.

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	required	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.
fetchPolicy	default: 'reload_revalidating_cache_data'	fetchPolicy définit quelle couche le SDK lit en premier, pas s’il peut utiliser le cache. Par défaut, le SDK interroge d’abord le serveur et renvoie les données en cache si cette requête échoue. Nous recommandons cette option car elle garantit que vos utilisateurs reçoivent toujours les données les plus récentes. Toutefois, si vous pensez que vos utilisateurs ont une connexion internet instable, envisagez 'return_cache_data_else_load', qui inverse cet ordre — il lit d’abord le cache et ne contacte le serveur que si rien n’est en cache. Les utilisateurs n’auront peut-être pas les toutes dernières données, mais le chargement sera plus rapide, quelle que soit la qualité de leur connexion. Le cache est mis à jour régulièrement, il est donc sûr de l’utiliser pendant la session pour éviter les requêtes réseau. Une troisième politique, 'return_cache_data_if_not_expired_else_load', se situe entre les deux : elle lit d’abord le cache tant que la copie en cache est plus récente que le maxAgeSeconds que vous lui transmettez, et contacte le serveur au-delà de cette durée. Notez que le cache est conservé 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.

Personnaliser les ressources

Pour personnaliser les images et vidéos dans votre flow/paywall, implémentez les ressources personnalisées.

Les images hero et les 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 leurs identifiants 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 une 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.
• Afficher des médias intégrés à l’application pour que le premier écran s’affiche sans téléchargement. Voir Afficher les médias du premier écran depuis le bundle de l’application.

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' }
    }
  }
};

view = await createFlowView(flow, { customAssets })

Après avoir conçu la partie visuelle de votre paywall avec l’ancien Paywall Builder dans l’Adapty Dashboard, vous pouvez l’afficher dans votre application mobile. La première étape consiste à récupérer le paywall associé au placement et sa configuration d’affichage, comme décrit ci-dessous.

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.

Avant de commencer à afficher des paywalls dans votre application mobile (cliquez pour développer)

1. Créez vos produits dans l’Adapty Dashboard.
2. Créez un paywall et intégrez-y les produits dans l’Adapty Dashboard.
3. Créez des placements et intégrez-y votre paywall dans l’Adapty Dashboard.
4. 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	obligatoire	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 par défaut : en	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 : en désigne l’anglais, pt-br représente le portugais brésilien. Consultez Localisations et codes de langue pour en savoir plus sur les codes de langue et la façon dont nous recommandons de les utiliser.
fetchPolicy	par défaut : 'reload_revalidating_cache_data'	fetchPolicy définit quelle couche le SDK lit en premier, et non s’il peut utiliser le cache. Par défaut, le SDK interroge d’abord le serveur et renvoie les données en cache si cette requête échoue. Nous recommandons cette option, car elle garantit que vos utilisateurs reçoivent toujours les données les plus récentes. Toutefois, si vous pensez que vos utilisateurs ont une connexion internet instable, envisagez 'return_cache_data_else_load', qui inverse cet ordre — il lit d’abord le cache et n’interroge le serveur que si rien n’est mis en cache. Les utilisateurs ne recevront peut-être pas les toutes dernières données, mais les temps de chargement seront plus rapides, quelle que soit la qualité de leur connexion. Le cache est mis à jour régulièrement, il est donc fiable de l’utiliser pendant la session pour éviter des requêtes réseau. Une troisième politique, 'return_cache_data_if_not_expired_else_load', se situe entre les deux : elle lit d’abord le cache tant que la copie en cache est plus récente que la valeur maxAgeSeconds que vous lui transmettez, et interroge le serveur une fois qu’elle est plus ancienne. 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 et un serveur de secours autonome au cas où le CDN serait inaccessible. Ce système est conçu pour garantir que vous obtenez 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	Cette valeur limite le délai d’attente de cette méthode. Si le délai est atteint, 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 loadTimeout, car l’opération peut comprendre différentes requêtes en coulisses. Pour Android : Vous pouvez créer un TimeInterval avec des fonctions d’extension (comme 5.seconds, où .seconds provient de import com.adapty.utils.seconds), ou TimeInterval.seconds(5). Pour ne pas fixer de limite, utilisez TimeInterval.INFINITE.

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 de vue d’un paywall conçu avec le Paywall Builder

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.

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

Une fois la vue obtenue, 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.

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // 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 défaut : en	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 : en désigne l’anglais, pt-br représente le portugais brésilien. Consultez Localisations et codes de langue pour plus d’informations sur les codes de langue et notre recommandation d’utilisation.
fetchPolicy	défaut : 'reload_revalidating_cache_data'	fetchPolicy définit quelle couche le SDK lit en premier, et non s’il peut utiliser le cache. Par défaut, le SDK interroge d’abord le serveur et retourne les données en cache si la requête échoue. Nous recommandons cette option, car elle garantit que vos utilisateurs disposent toujours des données les plus récentes. Toutefois, si vos utilisateurs ont une connexion instable, envisagez 'return_cache_data_else_load', qui inverse l’ordre — il lit d’abord le cache et ne contacte le serveur que si rien n’est en cache. Les utilisateurs ne récupèreront peut-être pas les toutes dernières données, mais le chargement sera plus rapide, quelle que soit la qualité de leur connexion. Le cache est mis à jour régulièrement, il est donc sans risque de l’utiliser en cours de session pour éviter des requêtes réseau. Une troisième politique, 'return_cache_data_if_not_expired_else_load', se situe entre les deux : elle lit d’abord le cache tant que celui-ci est plus récent que la valeur maxAgeSeconds que vous lui transmettez, et interroge le serveur dès qu’il est plus ancien. Notez que le cache est conservé après le 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.

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 })