Traiter les données des onboardings dans le SDK Kotlin Multiplatform

Warning

Les onboardings sont dépréciés à partir du SDK Adapty v4. Créez des flows à la place : contrairement aux onboardings, qui s’exécutent dans une WebView, les flows s’affichent nativement sur l’appareil — animations plus fluides, aspect natif cohérent, temps de chargement réduits et aucune dépendance à l’environnement WebView.

Lorsque vos utilisateurs répondent à une question d’un quiz ou saisissent des données dans un champ de saisie, la méthode onboardingViewOnStateUpdatedAction est appelée. Vous pouvez enregistrer ou traiter le type de champ dans votre code.

Par exemple :


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())
Exemples de données sauvegardées (le format peut varier selon votre implémentation)
    // 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": "text",
        "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
    }
    }
    }

Cas d’utilisation

Enrichir les profils utilisateurs avec des données

Si vous souhaitez lier immédiatement les données saisies au profil utilisateur et éviter de leur demander deux fois les mêmes informations, vous devez mettre à jour le profil utilisateur avec ces données lors du traitement de l’action.

Par exemple, vous demandez aux utilisateurs de saisir leur nom dans le champ texte avec l’ID name, et vous souhaitez définir la valeur de ce champ comme prénom de l’utilisateur. Vous leur demandez également de saisir leur e-mail dans le champ email. Dans le code de votre application, cela peut ressembler à ceci :


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())

Personnaliser les paywalls en fonction des réponses

Grâce aux quiz dans les onboardings, vous pouvez également personnaliser les paywalls que vous affichez aux utilisateurs après qu’ils ont terminé l’onboarding.

Par exemple, vous pouvez interroger les utilisateurs sur leur expérience sportive et afficher différents CTA et produits à différents groupes d’utilisateurs.

  1. Ajoutez un quiz dans le builder d’onboarding et attribuez des IDs pertinents à ses options.
experience.webp
  1. Traitez les réponses au quiz en fonction de leurs IDs et définissez des attributs personnalisés pour les utilisateurs.

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. Créez des segments pour chaque valeur d’attribut personnalisé.
  2. Créez un placement et ajoutez des audiences pour chaque segment que vous avez créé.
  3. Affichez un paywall pour le placement dans le code de votre application. Si votre onboarding comporte un bouton qui ouvre un paywall, implémentez le code du paywall en tant que réponse à l’action de ce bouton.