ÿÿ Onboardings | SDK de Kotlin Multiplatform | Documentación de Adapty

Procesar datos de onboardings en el SDK de Kotlin Multiplatform

Los onboardings están obsoletos en el SDK v4 y se eliminarán en una versión futura. Ya no reciben correcciones ni mejoras. Usa flows en su lugar: a diferencia de los onboardings, que se ejecutan dentro de un WebView, los flows se renderizan de forma nativa en el dispositivo, lo que ofrece animaciones más fluidas, una apariencia nativa consistente, tiempos de carga más rápidos y sin dependencia del entorno WebView. Consulta Obtener flows y paywalls y Mostrar flows y paywalls para empezar.

Cuando tus usuarios responden a una pregunta del quiz o introducen sus datos en un campo de entrada, se invocará el método onboardingViewOnStateUpdatedAction. Puedes guardar o procesar el tipo de campo en tu código.

Por ejemplo:


class MyAdaptyUIOnboardingsEventsObserver : AdaptyUIOnboardingsEventsObserver {
    override fun onboardingViewOnStateUpdatedAction(
        view: AdaptyUIOnboardingView,
        meta: AdaptyUIOnboardingMeta,
        elementId: String,
        params: AdaptyOnboardingsStateUpdatedParams
    ) {
        // Store user preferences or responses
        when (params) {
            is AdaptyOnboardingsSelectParams -> {
                // Handle single selection
                val id = params.id
                val value = params.value
                val label = params.label
                AppLogger.d("Selected option: $label (id: $id, value: $value)")
            }
            is AdaptyOnboardingsMultiSelectParams -> {
                // Handle multiple selections
            }
            is AdaptyOnboardingsInputParams -> {
                // Handle text input
            }
            is AdaptyOnboardingsDatePickerParams -> {
                // Handle date selection
            }
        }
    }
}

// Set up the observer
AdaptyUI.setOnboardingsEventsObserver(MyAdaptyUIOnboardingsEventsObserver())
Ejemplos de datos guardados (el formato puede diferir en tu implementación)
    // Example of a saved select action
    {
        "id": "onboarding_on_state_updated_action",
        "view": { /* AdaptyUI.OnboardingView object */ },
        "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "preferences_screen",
        "screen_index": 1,
        "total_screens": 3
    },
        "action": {
        "element_id": "preference_selector",
        "element_type": "select",
        "value": {
        "id": "option_1",
        "value": "premium",
        "label": "Premium Plan"
    }
    }
    }

    // Example of a saved multi-select action
    {
        "id": "onboarding_on_state_updated_action",
        "view": { /* AdaptyUI.OnboardingView object */ },
        "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "interests_screen",
        "screen_index": 2,
        "total_screens": 3
    },
        "action": {
        "element_id": "interests_selector",
        "element_type": "multi_select",
        "value": [
    {
        "id": "interest_1",
        "value": "sports",
        "label": "Sports"
    },
    {
        "id": "interest_2",
        "value": "music",
        "label": "Music"
    }
        ]
    }
    }

    // Example of a saved input action
    {
        "id": "onboarding_on_state_updated_action",
        "view": { /* AdaptyUI.OnboardingView object */ },
        "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "profile_screen",
        "screen_index": 0,
        "total_screens": 3
    },
        "action": {
        "element_id": "name_input",
        "element_type": "input",
        "value": {
        "type": "teÿÿxt",
        "value": "John Doe"
    }
    }
    }

    // Example of a saved date picker action
    {
        "id": "onboarding_on_state_updated_action",
        "view": { /* AdaptyUI.OnboardingView object */ },
        "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "profile_screen",
        "screen_index": 0,
        "total_screens": 3
    },
        "action": {
        "element_id": "birthday_picker",
        "element_type": "date_picker",
        "value": {
        "day": 15,
        "month": 6,
        "year": 1990
    }
    }
    }

Casos de uso

Enriquecer perfiles de usuario con datos

Si quieres vincular inmediatamente los datos de entrada con el perfil de usuario y evitar pedirles la misma información dos veces, necesitas actualizar el perfil de usuario con los datos de entrada al gestionar la acción.

Por ejemplo, pides a los usuarios que introduzcan su nombre en el campo de texto con el ID name, y quieres establecer el valor de ese campo como nombre de pila del usuario. También les pides que introduzcan su correo electrónico en el campo email. En el código de tu app, puede verse así:


class MyAdaptyUIOnboardingsEventsObserver : AdaptyUIOnboardingsEventsObserver {
    override fun onboardingViewOnStateUpdatedAction(
        view: AdaptyUIOnboardingView,
        meta: AdaptyUIOnboardingMeta,
        elementId: String,
        params: AdaptyOnboardingsStateUpdatedParams
    ) {
        // Store user preferences or responses
        when (params) {
            is AdaptyOnboardingsInputParams -> {
                // Handle text input
                val builder = AdaptyProfileParameters.Builder()

                // Map elementId to appropriate profile field
                when (elementId) {
                    "name" -> {
                        when (val input = params.input) {
                            is AdaptyOnboardingsTextInput -> {
                                builder.withFirstName(input.value)
                            }
                        }
                    }
                    "email" -> {
                        when (val input = params.input) {
                            is AdaptyOnboardingsEmailInput -> {
                                builder.withEmail(input.value)
                            }
                        }
                    }
                }

                // Update profile asynchronously
                mainUiScope.launch {
                    val profileParams = builder.build()
                    val result = Adapty.updateProfile(profileParams)
                    result.onSuccess { profile ->
                        // Profile updated successfully
                        AppLogger.d("Profile updated: ${profile.email}")
                    }.onError { error ->
                        // Handle the error
                        AppLogger.e("Failed to update profile: ${error.message}")
                    }
                }
            }
        }
    }
}

// Set up the observer
AdaptyUI.setOnboardingsEventsObserver(MyAdaptyUIOnboardingsEventsObserver())

Personalizar paywalls según las respuestas

Con los cuestionarios en los onboardings, también puedes personalizar los paywalls que muestras a los usuarios una vez que completan el onboarding.

Por ejemplo, puedes preguntarles sobre su experiencia con el deporte y mostrar distintas CTAs y productos a diferentes grupos de usuarios.

  1. Añade un cuestionario en el constructor de onboarding y asigna IDs significativos a sus opciones.
experience.webp
  1. Gestiona las respuestas del cuestionario en función de sus IDs y configura atributos personalizados para los usuarios.

class MyAdaptyUIOnboardingsEventsObserver : AdaptyUIOnboardingsEventsObserver {
    override fun onboardingViewOnStateUpdatedAction(
        view: AdaptyUIOnboardingView,
        meta: AdaptyUIOnboardingMeta,
        elementId: String,
        params: AdaptyOnboardingsStateUpdatedParams
    ) {
        // Handle quiz responses and set custom attributes
        when (params) {
            is AdaptyOnboardingsSelectParams -> {
                // Handle quiz selection
                val builder = AdaptyProfileParameters.Builder()

                // Map quiz responses to custom attributes
                when (elementId) {
                    "experience" -> {
                        // Set custom attribute 'experience' with the selected value (beginner, amateur, pro)
                        builder.withCustomAttribute("experience", params.value)
                    }
                }

                // Update profile asynchronously
                mainUiScope.launch {
                    val profileParams = builder.build()
                    val result = Adapty.updateProfile(profileParams)
                    result.onSuccess { profile ->
                        // Profile updated successfully
                        AppLogger.d("Custom attribute 'experience' set to: ${params.value}")
                    }.onError { error ->
                        // Handle the error
                        AppLogger.e("Failed to update profile: ${error.message}")
                    }
                }
            }
        }
    }
}

// Set up the observer
AdaptyUI.setOnboardingsEventsObserver(MyAdaptyUIOnboardingsEventsObserver())
  1. Crea segmentos para cada valor de atributo personalizado.
  2. Crea un placement y añade audiencias para cada segmento que hayas creado.
  3. Muestra un paywall para el placement en el código de tu app. Si tu onboarding tiene un botón que abre un paywall, implementa el código del paywall como respuesta a la acción de ese botón.
ÿÿÿÿ