Obtener paywalls del Paywall Builder y su configuración en el SDK de iOS

Después de diseñar la parte visual de tu paywall con el nuevo 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 los paywalls personalizados con Paywall Builder. Si estás implementando tus paywalls de forma manual, consulta el tema Obtener paywalls y productos para paywalls con Remote Config en tu app móvil.

Obtener un paywall diseñado con Paywall Builder

Si has diseñado un paywall con Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese tipo de paywall contiene tanto qué se debe mostrar dentro del paywall como cómo debe mostrarse. Aun así, necesitas obtener su ID a través del placement, su configuración de vista y luego presentarlo en tu app móvil.

Para garantizar un rendimiento óptimo, es fundamental obtener el paywall y su configuración de vista lo antes posible, dejando tiempo suficiente para que las imágenes se descarguen antes de mostrárselas al usuario.

Para obtener un paywall, usa el método 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
    }
}

Parámetros:

Parámetros de respuesta:

Obtener la configuración de vista de un paywall diseñado con Paywall Builder

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 guiará sobre 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 con Remote Config.

Usa el método getPaywallConfiguration para cargar la configuración de 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, presenta el paywall.

Obtener un paywall para la audiencia predeterminada para cargarlo más rápido

Normalmente, los paywalls se obtienen casi al instante, así que no necesitas preocuparte por acelerar este proceso. Sin embargo, si tienes muchas audiencias y paywalls y tus usuarios tienen una conexión a internet débil, obtener un paywall puede tardar más de lo deseable. En esos casos, puede que quieras mostrar un paywall predeterminado para garantizar una experiencia de usuario fluida en lugar de no mostrar ningún paywall.

Para solucionar esto, puedes usar el método getPaywallForDefaultAudience, que obtiene el paywall del placement especificado para la audiencia All Users. Sin embargo, es fundamental entender que el enfoque recomendado es obtener el paywall con el método getPaywall, 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 los recursos personalizados.

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

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

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 proporcionar recursos personalizados mediante un diccionario simple:

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 móvil, crea un objeto que siga 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 el final del temporizador, como el día de Año Nuevo.
• CUSTOM_TIMER_6H: El tiempo restante en un período de 6 horas que comenzó cuando el usuario abrió el paywall.