Récupérer les flows et paywalls - iOS

Après avoir conçu votre flow ou votre paywall avec le Paywall Builder, vous pouvez l’afficher dans votre app mobile. La première étape consiste à récupérer le flow ou le paywall associé au placement ainsi que sa configuration de vue, 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 app mobile. 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 app mobile.

Récupérez le flow ou le paywall et sa configuration de vue le plus tôt possible — idéalement bien avant de l’afficher. Dès que vous récupérez la configuration de vue, le SDK commence à télécharger et mettre en cache ses images en arrière-plan. Plus vous la récupérez tôt, plus ces téléchargements ont le temps de 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’emploi.

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

do {
    let flow = try await Adapty.getFlow(placementId: "YOUR_PLACEMENT_ID")
    // the requested flow/paywall
} catch {
    // handle the error
}

Adapty.getFlow(placementId: "YOUR_PLACEMENT_ID") { result in
    switch result {
        case let .success(flow):
            // the requested flow/paywall
        case let .failure(error):
            // handle the error
    }
}

Paramètres :

Paramètres de réponse :

Récupérer la configuration de vue

Après avoir récupéré le flow ou le paywall, vérifiez s’il inclut une configuration de vue via flow.hasViewConfiguration. Cet indicateur distingue la façon dont le placement a été conçu dans l’Adapty Dashboard :

• true — le placement a été conçu dans le Flow Builder (un flow) ou le Paywall Builder (un paywall). Adapty génère l’interface pour vous. Continuez avec les étapes ci-dessous pour récupérer la configuration de vue et présenter le flow ou le paywall.
• false — le placement est un paywall personnalisé sans interface Builder.

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

guard flow.hasViewConfiguration else {
    // handle as remote config paywall
    return
}

let flowConfiguration = try await AdaptyUI.getFlowConfiguration(forFlow: flow)

Paramètres :

Une fois chargé, présentez 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 général, les flows et 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 ont une connexion lente, 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 fluide plutôt que de ne rien afficher du tout.

Pour 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 reste de récupérer le flow ou le paywall avec la méthode getFlow, comme indiqué dans la section Récupérer un flow/paywall ci-dessus.

Adapty.getFlowForDefaultAudience(placementId: "YOUR_PLACEMENT_ID") { result in
    switch result {
        case let .success(flow):
            // the requested flow
        case let .failure(error):
            // handle the error
    }
}

Personnaliser les assets

Pour personnaliser les images et vidéos dans votre paywall/flow, implémentez les 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és, 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 le tableau de bord Adapty.

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.
• Fournir la résolution en pixels d’une vidéo afin que le lecteur réserve l’espace de mise en page (ratio = width / height) avant le chargement de la vidéo. Passez nil pour ignorer cela.

Voici un exemple de fourniture d’assets personnalisés via un simple dictionnaire :

let customAssets: [String: AdaptyCustomAsset] = [
    // Show a local image using a custom ID
    "custom_image": .image(
        .uiImage(value: UIImage(named: "image_name")!)
    ),

    // Show a local preview image while a remote main image is loading
    "hero_image": .image(
        .remote(
            url: URL(string: "https://example.com/image.jpg")!,
            preview: UIImage(named: "preview_image")
        )
    ),

    // Show a local video with a preview image and a known resolution
    "hero_video": .video(
        .file(
            url: Bundle.main.url(forResource: "custom_video", withExtension: "mp4")!,
            preview: .uiImage(value: UIImage(named: "video_preview")!),
            resolution: CGSize(width: 1080, height: 1920)
        )
    ),
]

let flowConfig = try await AdaptyUI.getFlowConfiguration(
    forFlow: flow,
    assetsResolver: customAssets
)

Configurer les timers définis par le développeur

Pour utiliser des timers personnalisés dans votre app mobile, créez un objet conforme au protocole AdaptyTimerResolver. Cet objet définit comment chaque timer personnalisé doit être rendu. Si vous préférez, vous pouvez utiliser directement un dictionnaire [String: Date], car il est déjà conforme à ce protocole. Voici un exemple :

@MainActor
struct AdaptyTimerResolverImpl: AdaptyTimerResolver {
    func timerEndAtDate(for timerId: String) -> Date {
        switch timerId {
        case "CUSTOM_TIMER_6H":
            Date(timeIntervalSinceNow: 3600.0 * 6.0) // 6 hours
        case "CUSTOM_TIMER_NY":
            Calendar.current.date(from: DateComponents(year: 2025, month: 1, day: 1)) ?? Date(timeIntervalSinceNow: 3600.0)
        default:
            Date(timeIntervalSinceNow: 3600.0) // 1 hour
        }
    }
}

Dans cet exemple, CUSTOM_TIMER_NY et CUSTOM_TIMER_6H sont les Timer ID des timers définis par le développeur que vous avez configurés dans l’Adapty Dashboard. Le timerResolver garantit que votre app met à jour dynamiquement chaque timer avec la valeur correcte. Par exemple :

• CUSTOM_TIMER_NY : le temps restant jusqu’à la fin du timer, comme le 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 paywall.

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

Notez que ce sujet concerne les paywalls personnalisés avec le Paywall Builder. Si vous implémentez vos paywalls manuellement, consultez Récupérer les paywalls et produits pour les paywalls Remote Config.

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 app mobile. Un tel 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 app mobile.

Pour 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 pour se télécharger avant de les présenter à l’utilisateur.

Pour récupérer un paywall, utilisez la méthode getPaywall :

do {
    let paywall = try await Adapty.getPaywall("YOUR_PLACEMENT_ID")
    // the requested paywall
} catch {
    // handle the error
}

Adapty.getPaywall(placementId: "YOUR_PLACEMENT_ID", locale: "en") { result in
    switch result {
        case let .success(paywall):
            // the requested paywall
        case let .failure(error):
            // handle the error
    }
}

Paramètres :

Paramètres de réponse :

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 configuration de vue, 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 configuration de vue est présente, traitez-le comme un paywall Paywall Builder ; sinon, gérez-le comme un paywall Remote Config.

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

guard paywall.hasViewConfiguration else {
    //  use your custom logic
    return
}

do {
    let paywallConfiguration = try await AdaptyUI.getPaywallConfiguration(
            forPaywall: paywall,
            products: products
    )
    // use loaded configuration
} catch {
    // handle the error
}

Paramètres :

Une fois chargé, présentez le paywall.

Récupérer un paywall pour l’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, vous n’avez donc pas à vous soucier d’accélérer ce processus. Cependant, si vous avez de nombreuses audiences et paywalls et que vos utilisateurs ont une connexion lente, 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 fluide plutôt que de ne rien afficher du tout.

Pour 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 reste de récupérer le paywall avec la méthode getPaywall, comme indiqué dans la section Récupérer un paywall ci-dessus.

Adapty.getPaywallForDefaultAudience(placementId: "YOUR_PLACEMENT_ID", locale: "en") { result in
    switch result {
        case let .success(paywall):
            // the requested paywall
        case let .failure(error):
            // handle the error
    }
}

Personnaliser les assets

Pour personnaliser les images et vidéos dans votre paywall, implémentez les 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és, 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 le tableau de bord Adapty.

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 fourniture d’assets personnalisés via un simple dictionnaire :

let customAssets: [String: AdaptyCustomAsset] = [
    // Show a local image using a custom ID
    "custom_image": .image(
        .uiImage(value: UIImage(named: "image_name")!)
    ),

    // Show a local preview image while a remote main image is loading
    "hero_image": .image(
        .remote(
            url: URL(string: "https://example.com/image.jpg")!,
            preview: UIImage(named: "preview_image")
        )
    ),

    // Show a local video with a preview image
    "hero_video": .video(
        .file(
            url: Bundle.main.url(forResource: "custom_video", withExtension: "mp4")!,
            preview: .uiImage(value: UIImage(named: "video_preview")!)
        )
    ),
]

let paywallConfig = try await AdaptyUI.getPaywallConfiguration(
    forPaywall: paywall,
    assetsResolver: customAssets
)

Configurer les timers définis par le développeur

Pour utiliser des timers personnalisés dans votre app mobile, créez un objet conforme au protocole AdaptyTimerResolver. Cet objet définit comment chaque timer personnalisé doit être rendu. Si vous préférez, vous pouvez utiliser directement un dictionnaire [String: Date], car il est déjà conforme à ce protocole. Voici un exemple :

@MainActor
struct AdaptyTimerResolverImpl: AdaptyTimerResolver {
    func timerEndAtDate(for timerId: String) -> Date {
        switch timerId {
        case "CUSTOM_TIMER_6H":
            Date(timeIntervalSinceNow: 3600.0 * 6.0) // 6 hours
        case "CUSTOM_TIMER_NY":
            Calendar.current.date(from: DateComponents(year: 2025, month: 1, day: 1)) ?? Date(timeIntervalSinceNow: 3600.0)
        default:
            Date(timeIntervalSinceNow: 3600.0) // 1 hour
        }
    }
}

Dans cet exemple, CUSTOM_TIMER_NY et CUSTOM_TIMER_6H sont les Timer ID des timers définis par le développeur que vous avez configurés dans l’Adapty Dashboard. Le timerResolver garantit que votre app met à jour dynamiquement chaque timer avec la valeur correcte. Par exemple :

• CUSTOM_TIMER_NY : le temps restant jusqu’à la fin du timer, comme le 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 paywall.