Obtenir les flows et paywalls - Flutter

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

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

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 s’achever. Au moment d’afficher le flow ou le paywall, sa configuration et ses images peuvent déjà être en cache, prêtes à l’affichage.

Pour récupérer un flow ou un paywall, utilisez la méthode getFlow :

try {
  final flow = await Adapty().getFlow(placementId: 'YOUR_PLACEMENT_ID');
  // le flow/paywall demandé
} on AdaptyError catch (adaptyError) {
  // gérer l'erreur
} catch (e) {
  // gérer l'erreur
}

Paramètres :

Paramètres de réponse

Récupérer la configuration de la vue

Si le placement a été conçu dans le Flow Builder ou le Paywall Builder, Adapty génère l’interface pour vous — la propriété hasViewConfiguration du flow récupéré est true. Créez la vue avec createFlowView, puis présentez le flow ou le paywall. Si le placement est un paywall personnalisé sans interface Builder (hasViewConfiguration vaut false), gérez-le comme un paywall Remote Config à la place.

try {
  final view = await AdaptyUI().createFlowView(flow: flow);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Paramètres :

Une fois que vous avez la vue, présentez 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, et 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 ont 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. Cependant, il est important 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.

try {
  final flow = await Adapty().getFlowForDefaultAudience(placementId: 'YOUR_PLACEMENT_ID');
  // the requested flow/paywall
} on AdaptyError catch (adaptyError) {
  // handle error
} catch (e) {
  // handle unknown error
}

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 IDs prédéfinis : hero_image et hero_video. Dans un bundle de ressources personnalisées, 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 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 :

final customAssets = {
    // Show a local image using a custom ID
    'custom_image': AdaptyCustomAsset.localImageAsset(
        assetId: 'assets/images/image_name.png',
    ),

    // Show a local video with a preview image
    'hero_video': AdaptyCustomAsset.localVideoAsset(
        assetId: 'assets/videos/custom_video.mp4',
    ),
};

try {
  final view = await AdaptyUI().createFlowView(
    flow: flow,
    customAssets: customAssets,
  );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Configurer les minuteries définies par le développeur

Pour utiliser des minuteries personnalisées dans votre application mobile, transmettez une map customTimers à la méthode createFlowView. Chaque clé de la map correspond à un identifiant de minuterie, et sa valeur est un objet DateTime qui définit quand la minuterie se termine. Voici un exemple :

try {
  final view = await AdaptyUI().createFlowView(
    flow: flow,
    customTimers: {
      'CUSTOM_TIMER_6H': DateTime.now().add(const Duration(seconds: 3600 * 6)),
      'CUSTOM_TIMER_NY': DateTime(2027, 1, 1), // New Year 2027
    },
  );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Dans cet exemple, CUSTOM_TIMER_NY et CUSTOM_TIMER_6H sont les Timer IDs des minuteries définies par le développeur dans l’Adapty Dashboard. La map customTimers permet à votre application de mettre à jour dynamiquement chaque minuterie avec la valeur correcte. Par exemple :

• CUSTOM_TIMER_NY : le temps restant jusqu’à la fin du minuteur, comme le jour du Nouvel An.
• CUSTOM_TIMER_6H : le temps restant dans une période de 6 heures qui a démarré lorsque l’utilisateur a ouvert le flow.

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 consiste à récupérer le paywall associé au placement ainsi que 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 les produits pour les paywalls Remote Config 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 {
  final paywall = await Adapty().getPaywall(placementId: "YOUR_PLACEMENT_ID", locale: "en");
  // the requested paywall
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}

Paramètres :

Paramètres de réponse

Récupérer la configuration d’affichage d’un paywall conçu avec le Paywall Builder

Après avoir récupéré le paywall, vérifiez s’il contient un 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 le ViewConfiguration est présent, traitez-le comme un paywall Paywall Builder ; sinon, traitez-le comme un paywall Remote Config.

try {
  final view = await AdaptyUI().createPaywallView(
        paywall: paywall,
      );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Une fois que vous avez la vue, affichez le paywall.

Obtenir un paywall pour une audience par défaut afin d’accélérer la récupération

En général, les paywalls sont récupérés presque instantanément, il n’est donc pas nécessaire de chercher à 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étaillé dans la section Récupérer les informations du paywall ci-dessus.

try {
    final paywall = await Adapty().getPaywallForDefaultAudience(placementId: 'YOUR_PLACEMENT_ID');
} on AdaptyError catch (adaptyError) {
    // handle error
} catch (e) {
    // handle unknown error
}

Personnaliser les assets

Pour personnaliser les images et vidéos de votre paywall, implémentez des assets personnalisés.

Les images et vidéos hero ont des identifiants prédéfinis : hero_image et hero_video. Dans un bundle d’assets personnalisés, vous ciblez ces éléments par leurs identifiants 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 montrant comment fournir des ressources personnalisées via un simple dictionnaire :

final customAssets = {
    // Show a local image using a custom ID
    'custom_image': AdaptyCustomAsset.localImageAsset(
        assetId: 'assets/images/image_name.png',
    ),

    // Show a local video with a preview image
    'hero_video': AdaptyCustomAsset.localVideoAsset(
        assetId: 'assets/videos/custom_video.mp4',
    ),
};

try {
  final view = await AdaptyUI().createPaywallView(
    paywall: paywall,
    customAssets: customAssets,
  );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Configurer les minuteries définies par le développeur

Pour utiliser des minuteries personnalisées dans votre application mobile, passez une map customTimers à la méthode createPaywallView. Chaque clé de la map est un identifiant de minuterie, et sa valeur est un objet DateTime qui définit quand la minuterie se termine. Voici un exemple :

try {
  final view = await AdaptyUI().createPaywallView(
        paywall: paywall,
        customTimers: {
          'CUSTOM_TIMER_6H': DateTime.now().add(const Duration(seconds: 3600 * 6)),
          'CUSTOM_TIMER_NY': DateTime(2025, 1, 1), // New Year 2025
        },
      );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Dans cet exemple, CUSTOM_TIMER_NY et CUSTOM_TIMER_6H sont les Timer IDs des minuteurs définis par le développeur dans l’Adapty Dashboard. La map customTimers permet à votre application de mettre à jour dynamiquement chaque minuteur avec la valeur correcte. Par exemple :

• CUSTOM_TIMER_NY : le temps restant jusqu’à la fin du minuteur, par exemple le Jour de l’An.
• CUSTOM_TIMER_6H : le temps restant dans une période de 6 heures démarrée lorsque l’utilisateur a ouvert le paywall.