Récupérer les flows et paywalls - Kotlin Multiplatform

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

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 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 flow ou 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 afficher à l’utilisateur.

Pour obtenir un flow ou un paywall, utilisez la méthode getFlow :

Adapty.getFlow(
    placementId = "YOUR_PLACEMENT_ID",
    fetchPolicy = AdaptyPaywallFetchPolicy.Default,
    loadTimeout = 5.seconds
).onSuccess { flow ->
    // the requested flow/paywall
}.onError { error ->
    // handle the error
}

Paramètres :

Paramètres de réponse :

Récupérer la configuration de la vue

Après avoir récupéré le flow ou le paywall, chargez sa configuration de vue et créez la vue en une seule étape avec la méthode createFlowView. Il n’y a pas de flag distinct à vérifier : si le placement a été conçu dans le Flow Builder (un flow) ou le Paywall Builder (un paywall), createFlowView renvoie la vue prête à être affichée. Si le placement est un paywall personnalisé sans interface Builder, createFlowView renvoie une AdaptyResult.Error — traitez-le comme un paywall Remote Config.

AdaptyUI.createFlowView(
    flow = flow,
    loadTimeout = 5.seconds,
    preloadProducts = true
).onSuccess { view ->
    // use view
}.onError { error ->
    // the flow has no view configured, or view creation failed
}

Une fois chargé, présentez le flow ou le paywall.

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

En général, 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 ces situations, 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 toutefois essentiel de comprendre que l’approche recommandée consiste à 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.

Adapty.getFlowForDefaultAudience(
    placementId = "YOUR_PLACEMENT_ID",
    fetchPolicy = AdaptyPaywallFetchPolicy.Default,
).onSuccess { flow ->
    // the requested flow
}.onError { error ->
    // handle the error
}

Personnaliser les ressources

Pour personnaliser les images et vidéos de votre flow ou paywall, implémentez des ressources personnalisées.

Les images hero et les vidéos ont des IDs 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 l’Adapty Dashboard.

Par exemple, vous pouvez :

• Afficher une image ou vidéo différente à certains utilisateurs.
• Afficher une image d’aperçu locale pendant le chargement d’une image principale distante.
• Afficher une image d’aperçu avant de lancer une vidéo.

Voici un exemple de la façon dont vous pouvez fournir des ressources personnalisées via une map :

// Import generated Res class for accessing resources

viewModelScope.launch {
    // Get URIs for bundled resources using Res.getUri()
    val heroImagePath = Res.getUri("files/images/hero_image.png")
    val demoVideoPath = Res.getUri("files/videos/demo_video.mp4")

    // Or read image as byte data
    val imageByteData = Res.readBytes("files/images/avatar.png")

    // Create custom assets map
    val customAssets: Map<String, AdaptyCustomAsset> = mapOf(
        // Load image from app resources (bundled with the app)
        // Files should be placed in commonMain/composeResources/files/
        "hero_image" to AdaptyCustomAsset.localImageResource(
            path = heroImagePath
        ),

        // Or use image byte data
        "avatar" to AdaptyCustomAsset.localImageData(
            data = imageByteData
        ),

        // Load video from app resources
        "demo_video" to AdaptyCustomAsset.localVideoResource(
            path = demoVideoPath
        ),

        // Or use a video file from device storage
        "intro_video" to AdaptyCustomAsset.localVideoFile(
            path = "/path/to/local/video.mp4"
        ),

        // Apply custom brand colors
        "brand_primary" to AdaptyCustomAsset.color(
            colorHex = "#FF6B35"
        ),

        // Create gradient background
        "card_gradient" to AdaptyCustomAsset.linearGradient(
            colors = listOf("#1E3A8A", "#3B82F6", "#60A5FA"),
            stops = listOf(0.0f, 0.5f, 1.0f)
        )
    )

    // Use custom assets when creating the flow view
    AdaptyUI.createFlowView(
        flow = flow,
        customAssets = customAssets
    ).onSuccess { view ->
        // Present the flow with custom assets
        view.present()
    }.onError { error ->
        // Handle the error - the flow will fall back to default appearance
    }
}

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 ce sujet concerne les paywalls personnalisées 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 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 façon 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 crucial 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 :

Adapty.getPaywall(
    placementId = "YOUR_PLACEMENT_ID",
    locale = "en",
    fetchPolicy = AdaptyPaywallFetchPolicy.Default,
    loadTimeout = 5.seconds
).onSuccess { paywall ->
    // the requested paywall
}.onError { error ->
    // handle the error
}

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 une ViewConfiguration, ce qui indique qu’il a été créé avec le Paywall Builder. Cela vous permettra de savoir comment 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.

Utilisez la méthode createPaywallView pour charger la configuration de la vue.

if (paywall.hasViewConfiguration) {
    AdaptyUI.createPaywallView(
        paywall = paywall,
        loadTimeout = 5.seconds,
        preloadProducts = true
    ).onSuccess { paywallView ->
        // use paywallView
    }.onError { error ->
        // handle the error
    }
} else {
    // use your custom logic
}

Une fois chargé, affichez le paywall.

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

En règle générale, 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 y remédier, 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.

Adapty.getPaywallForDefaultAudience(
    placementId = "YOUR_PLACEMENT_ID",
    locale = "en",
    fetchPolicy = AdaptyPaywallFetchPolicy.Default,
).onSuccess { paywall ->
    // the requested paywall
}.onError { error ->
    // handle the error
}

Personnaliser les ressources

Pour personnaliser les images et vidéos de votre paywall, mettez en place 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é, 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 dashboard Adapty.

Par exemple, vous pouvez :

• Afficher une image ou une vidéo différente à certains utilisateurs.
• Afficher une image d’aperçu locale pendant le chargement d’une image principale distante.
• Afficher une image d’aperçu avant de lancer une vidéo.

Voici un exemple de la façon dont vous pouvez fournir des ressources personnalisées via une map :

// Import generated Res class for accessing resources

viewModelScope.launch {
    // Get URIs for bundled resources using Res.getUri()
    val heroImagePath = Res.getUri("files/images/hero_image.png")
    val demoVideoPath = Res.getUri("files/videos/demo_video.mp4")

    // Or read image as byte data
    val imageByteData = Res.readBytes("files/images/avatar.png")

    // Create custom assets map
    val customAssets: Map<String, AdaptyCustomAsset> = mapOf(
        // Load image from app resources (bundled with the app)
        // Files should be placed in commonMain/composeResources/files/
        "hero_image" to AdaptyCustomAsset.localImageResource(
            path = heroImagePath
        ),

        // Or use image byte data
        "avatar" to AdaptyCustomAsset.localImageData(
            data = imageByteData
        ),

        // Load video from app resources
        "demo_video" to AdaptyCustomAsset.localVideoResource(
            path = demoVideoPath
        ),

        // Or use a video file from device storage
        "intro_video" to AdaptyCustomAsset.localVideoFile(
            path = "/path/to/local/video.mp4"
        ),

        // Apply custom brand colors
        "brand_primary" to AdaptyCustomAsset.color(
            colorHex = "#FF6B35"
        ),

        // Create gradient background
        "card_gradient" to AdaptyCustomAsset.linearGradient(
            colors = listOf("#1E3A8A", "#3B82F6", "#60A5FA"),
            stops = listOf(0.0f, 0.5f, 1.0f)
        )
    )

    // Use custom assets when creating paywall view
    AdaptyUI.createPaywallView(
        paywall = paywall,
        customAssets = customAssets
    ).onSuccess { paywallView ->
        // Present the paywall with custom assets
        paywallView.present()
    }.onError { error ->
        // Handle the error - paywall will fall back to default appearance
    }
}