Obtener flows y paywalls - iOS

Tras diseñar tu flow o tu paywall con el Paywall Builder, puedes mostrarlo en tu aplicación móvil. El primer paso es obtener el flow o el paywall asociado al placement y su configuración de vista, tal como se describe a continuación.

Obtener el flow/paywall

Si has diseñado un flow o paywall con el Flow Builder o el Paywall Builder, no tienes que preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese flow o paywall ya incluye tanto lo que se debe mostrar como la forma en que debe mostrarse. Aun así, necesitas obtener su ID a través del placement, su configuración de vista y luego presentarlo en tu app. Para garantizar un rendimiento óptimo, es fundamental obtener el flow o paywall y su configuración de vista lo antes posible, dando tiempo suficiente para que las imágenes se descarguen antes de mostrárselas al usuario.

Para obtener un flow o paywall, usa el método getFlow:

do {
    let flow = try await Adapty.getFlow(placementId: "YOUR_PLACEMENT_ID")
    // el flow/paywall solicitado
} catch {
    // gestiona el error
}

Adapty.getFlow(placementId: "YOUR_PLACEMENT_ID") { result in
    switch result {
        case let .success(flow):
            // el flow/paywall solicitado
        case let .failure(error):
            // gestiona el error
    }
}

Parámetros:

Obtener la configuración de vista

Después de obtener el flow o el paywall, comprueba si incluye una configuración de vista mediante flow.hasViewConfiguration. Este flag distingue cómo se diseñó el placement en el Adapty Dashboard:

• true — el placement fue diseñado en el Flow Builder (un flow) o en el Paywall Builder (un paywall). Adapty renderiza la interfaz por ti. Continúa con los pasos a continuación para obtener la configuración de vista y mostrar el flow o el paywall.
• false — el placement es un paywall personalizado sin interfaz del Builder. Usa el método getFlowConfiguration para cargar la configuración de la vista.

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

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

Parámetros:

Obtén un flow o paywall para la audiencia predeterminada y cárgalo más rápido

Por lo general, los flows y paywalls se obtienen casi al instante, por lo que no es necesario preocuparse por acelerar este proceso. Sin embargo, si tienes muchas audiencias y placements, y tus usuarios tienen una conexión a internet lenta, obtener un flow o paywall puede tardar más de lo que desearías. En esos casos, puede que quieras mostrar un flow o paywall predeterminado para garantizar una experiencia de usuario fluida en lugar de no mostrar nada. Para solucionar esto, puedes usar el método getFlowForDefaultAudience, que obtiene el flow o paywall del placement especificado para la audiencia All Users. Sin embargo, es fundamental entender que el enfoque recomendado es obtener el flow o paywall con el método getFlow, tal como se detalla en la sección Obtener información del paywall anterior.

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

Personalizar recursos

Para personalizar imágenes y vídeos en tu paywall/flow, implementa los recursos personalizados.

Las imágenes y vídeos destacados tienen IDs predefinidos: hero_image y hero_video. En un bundle de recursos personalizados, apuntas a estos elementos por sus IDs y personalizas su comportamiento.

Para otras imágenes y vídeos, necesitas establecer un ID personalizado en el Adapty Dashboard.

Por ejemplo, puedes:

• Muestra una imagen o vídeo diferente a algunos usuarios.
• Muestra una imagen de vista previa local mientras se carga la imagen principal remota.
• Muestra una imagen de vista previa antes de reproducir un vídeo.
• Indica la resolución en píxeles del vídeo para que el reproductor reserve espacio en el layout (relación de aspecto = width / height) antes de que cargue el vídeo. Pasa nil para omitirlo.

A continuación se muestra un ejemplo de cómo puedes proporcionar assets personalizados mediante un diccionario sencillo:

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
)

Configurar temporizadores definidos por el desarrollador

Para usar temporizadores personalizados en tu app, crea un objeto que implemente el protocolo AdaptyTimerResolver. Este objeto define cómo debe renderizarse cada temporizador personalizado. Si lo prefieres, puedes usar directamente un diccionario [String: Date], ya que ya cumple con este protocolo. Aquí tienes un ejemplo:

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

En este ejemplo, CUSTOM_TIMER_NY y CUSTOM_TIMER_6H son los Timer ID de los temporizadores definidos por el desarrollador que configuraste en el Adapty Dashboard. El timerResolver garantiza que tu app actualice dinámicamente cada temporizador con el valor correcto. Por ejemplo:

• CUSTOM_TIMER_NY: El tiempo restante hasta que finalice el temporizador, como el Año Nuevo.
• CUSTOM_TIMER_6H: El tiempo restante en un período de 6 horas que comenzó cuando el usuario abrió el paywall.

Después de diseñar la parte visual de tu paywall con el Paywall Builder en el Adapty Dashboard, puedes mostrarlo en tu app móvil. El primer paso es obtener el paywall asociado al placement y su configuración de vista, tal como se describe a continuación.

Ten en cuenta que este tema hace referencia a paywalls personalizados con el Paywall Builder. Si implementas tus paywalls manualmente, consulta Obtener paywalls y productos para paywalls con Remote Config.

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

Después de obtener el paywall, comprueba si incluye una configuración de vista, lo que indica que fue creado con Paywall Builder. Esto te indicará cómo mostrar el paywall. Si la configuración de vista está presente, trátalo como un paywall de Paywall Builder; si no, trátalo como un paywall de Remote Config. Usa el método getPaywallConfiguration para cargar la configuración de la vista.

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
}

Parámetros:

Una vez cargado, muestra el paywall.

Obtén un paywall para la audiencia predeterminada y acelera la carga

Normalmente, los paywalls se obtienen casi de forma instantánea, así que no necesitas preocuparte por optimizar este proceso. Sin embargo, cuando tienes muchas audiencias y paywalls, y tus usuarios tienen una conexión a internet débil, la carga de un paywall puede tardar más de lo deseable. En esos casos, puede que quieras mostrar un paywall predeterminado para garantizar una experiencia fluida en lugar de no mostrar ninguno. Para solucionar esto, puedes usar el método getPaywallForDefaultAudience, que obtiene el paywall del placement indicado para la audiencia All Users. Sin embargo, es importante entender que el enfoque recomendado es obtener el paywall con el método getPaywall, tal como se detalla en la sección Obtener información del paywall anterior.

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

Personalizar recursos

Para personalizar imágenes y vídeos en tu paywall, implementa recursos personalizados.

Las imágenes y vídeos hero tienen IDs predefinidos: hero_image y hero_video. En un bundle de recursos personalizados, seleccionas estos elementos por sus IDs y personalizas su comportamiento.

Para otras imágenes y vídeos, necesitas establecer un ID personalizado en el Adapty Dashboard.

Por ejemplo, puedes:

• Mostrar una imagen o vídeo diferente a algunos usuarios.
• Mostrar una imagen de vista previa local mientras se carga la imagen principal remota.
• Mostrar una imagen de vista previa antes de reproducir un vídeo.

Aquí tienes un ejemplo de cómo puedes proporcionar assets personalizados mediante un diccionario sencillo:

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
)

Configurar temporizadores definidos por el desarrollador

Para usar temporizadores personalizados en tu app, crea un objeto que implemente el protocolo AdaptyTimerResolver. Este objeto define cómo se debe renderizar cada temporizador personalizado. Si lo prefieres, puedes usar directamente un diccionario [String: Date], ya que ya es compatible con este protocolo. Aquí tienes un ejemplo:

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

En este ejemplo, CUSTOM_TIMER_NY y CUSTOM_TIMER_6H son los Timer IDs de los temporizadores definidos por el desarrollador que configuraste en el Adapty Dashboard. El timerResolver garantiza que tu app actualice dinámicamente cada temporizador con el valor correcto. Por ejemplo:

• CUSTOM_TIMER_NY: El tiempo restante hasta el fin del temporizador, como el día de Año Nuevo.
• CUSTOM_TIMER_6H: El tiempo que queda en un período de 6 horas que empezó cuando el usuario abrió el paywall.