Pasar datos a flows en Kotlin Multiplatform SDK

Un custom tag es una variable personalizada con un valor procedente de tu app. Después de seleccionar Value comes from outside the app en la configuración de una variable, tu app puede establecer su valor a través del SDK de Adapty. Por ejemplo, un elemento de texto contiene “Coins:” y un custom tag. Si tu app pasa “120” para el tag, los usuarios ven “Coins: 120”.

Antes de empezar

Necesitas el SDK de Adapty v4 o posterior. Las versiones anteriores a v4 no muestran flows.

Añadir etiquetas personalizadas al flow

Para mostrar los valores de tu app en un flow, configura etiquetas personalizadas en el builder:

Crea una etiqueta personalizada para cada valor que tu app envíe.
Inserta cada etiqueta en un elemento de texto.
Anota el nombre completo de cada etiqueta, incluido su grupo. El código de tu app pasa cada valor con ese nombre. Por ejemplo, si el grupo user contiene una etiqueta streak, el nombre completo de la etiqueta es user.streak.

Pasar valores de etiquetas personalizadas

Pasa los valores de tu app al parámetro customTags de AdaptyUI.createFlowView o createNativeFlowView, como un Map<String, String>:

Cada clave es el nombre completo de una etiqueta personalizada, como user.streak.
Cada valor es la cadena que verán los usuarios en lugar de la etiqueta.
Cada valor debe ser legible por humanos, como “1,250”, no “1250.0”. Adapty no lo formatea ni traduce.

El SDK lee los valores una sola vez, cuando crea la vista, por lo que no cambian mientras el flow está abierto.


viewModelScope.launch {
    val customTags = mapOf(
        "username" to "DragonSlayer42",
        "coins" to "1,250",
    )

    AdaptyUI.createFlowView(
        flow = flow,
        customTags = customTags,
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}

Para incrustar el flow en un layout de Compose, pasa el mismo parámetro customTags al composable AdaptyUIFlowPlatformView. Si pasas un mapa customTags diferente, el composable crea una nueva vista y los usuarios vuelven a la primera pantalla del flow.


val customTags = mapOf(
    "username" to "DragonSlayer42",
    "coins" to "1,250",
)

val nativeView = AdaptyUI.createNativeFlowView(
    context = context,
    viewModelStoreOwner = activity,
    flow = flow,
    observer = myFlowObserver,
    customTags = customTags,
)


val customTags = mapOf(
    "username" to "DragonSlayer42",
    "coins" to "1,250",
)

val nativeView = AdaptyUI.createNativeFlowView(
    flow = flow,
    observer = myFlowObserver,
    customTags = customTags,
)

Para probar tus etiquetas personalizadas, abre el flow en tu app después de añadir el código que establece sus valores. El canvas del builder y la vista previa en dispositivos solo muestran los valores iniciales: la app móvil de Adapty no establece los valores de las etiquetas personalizadas.

Si tu app ya establece valores de etiquetas personalizadas para paywalls del antiguo Paywall Builder, revisa en qué se diferencian las etiquetas personalizadas en los flows.

Lo que los usuarios ven sin un valor

Los usuarios ven el Valor inicial de una etiqueta personalizada como valor de respaldo en los siguientes casos:

Tu app no pasa ningún valor para la etiqueta.
El usuario no ha actualizado tu app a una versión que envíe el valor.
El nombre en el código de tu app no coincide con el nombre completo de la etiqueta, incluidas las mayúsculas y minúsculas.
Otra etiqueta personalizada en el mismo elemento de texto no tiene valor. En ese caso, todas las etiquetas personalizadas de ese elemento de texto muestran su valor inicial.

Para no mostrar nada en lugar de una etiqueta, pasa una cadena vacía. Adapty trata una cadena vacía como un valor, por lo que el valor de respaldo no aparece.

Ejemplo: mostrar un IMC a partir de las respuestas del onboarding

Un flow puede recoger respuestas de los usuarios, y una etiqueta personalizada puede mostrar un valor de tu app. Combina ambas cosas para mostrar a los usuarios un resultado que tu app calcula a partir de sus respuestas, como una puntuación, un plan recomendado o una métrica de salud:

Un flow recoge las respuestas y las envía a tu app.
Tu app calcula el resultado.
Tu app pasa el resultado al siguiente flow como valor de etiqueta personalizada.

En este ejemplo, un flow de onboarding recoge el peso y la altura del usuario. Cuando el usuario cierra el flow de onboarding tras su última pantalla, tu app calcula su índice de masa corporal (IMC). Luego abre un flow de paywall que muestra el IMC.

Configurar los flows

Crea dos flows: un flow de onboarding que recoja el peso y la altura del usuario, y un flow de paywall que muestre su IMC.
Añade dos campos de tipo Number al flow de onboarding:
- Uno para el peso en kilogramos, con el Element ID weight.
- Uno para la altura en centímetros, con el Element ID height.
En ambos campos, establece el Format como Integer. Un campo envía su valor como texto, exactamente tal como lo escribe el usuario, y el código de ejemplo no interpreta “70.5” y “70,5” de la misma manera. Los números enteros no tienen separador decimal, por lo que el código los lee igual en cualquier idioma.
Para asegurarte de que tu app recibe ambos valores, termina el flow de onboarding con una pantalla que no tenga campos. En esa pantalla, añade un botón con la acción Close flow. Los campos envían sus valores cuando pierden el foco o cuando el usuario pasa a otra pantalla. La acción Close flow no los envía. El código de ejemplo solo abre el paywall si el usuario llegó a la última pantalla.
En el flow de paywall, crea una etiqueta personalizada llamada bmi. En el campo Initial value, introduce un guion (—). Los usuarios verán el guion si tu app no pasa ningún IMC.
Añade un elemento de texto con las palabras “Your BMI:” al flow de paywall. Después de esas palabras, inserta la etiqueta personalizada bmi.
Añade el flow de onboarding a un placement, por ejemplo onboarding. Añade el flow de paywall a un placement con el ID bmi_paywall. El código de Pass the BMI to the paywall obtiene el paywall usando este ID.

Pasar el IMC al paywall

Recoge el peso y la altura de los eventos flow_user_input del flow de onboarding, como se explica en Procesar datos de flows. Para saber que el usuario llegó a la última pantalla, observa un evento flow_screen_showed con is_last_screen en true, como se explica en Rastrear vistas de pantalla del flow. Cuando el usuario cierre el flow de onboarding tras esa pantalla, calcula el IMC. Luego crea la vista del paywall y pasa el IMC para el tag personalizado bmi.

El método flowViewDidReceiveAnalyticEvent analiza los parámetros del evento con la biblioteca kotlinx.serialization.json. Si tu proyecto aún no tiene esta biblioteca, añade org.jetbrains.kotlinx:kotlinx-serialization-json a las dependencias de tu app. A continuación, implementa los siguientes métodos en el observer que registres con AdaptyUI.setFlowsEventsObserver:


class MyFlowsEventsObserver(
    private val scope: CoroutineScope,
) : AdaptyUIFlowsEventsObserver {

    private val bodyAnswers = mutableMapOf<String, String>()
    private var reachedLastScreen = false

    override fun flowViewDidReceiveAnalyticEvent(
        view: AdaptyUIFlowView,
        name: String,
        paramsJsonString: String,
    ) {
        if (name != "flow_user_input" && name != "flow_screen_showed") return

        val params = Json.parseToJsonElement(paramsJsonString).jsonObject
        if (name == "flow_screen_showed") {
            if (params["is_last_screen"]?.jsonPrimitive?.booleanOrNull == true) {
                reachedLastScreen = true
            }
            return
        }
        val elementId = params["element_id"]?.jsonPrimitive?.content ?: return
        val value = params["value"]?.jsonPrimitive?.contentOrNull ?: return

        bodyAnswers[elementId] = value
    }

    override fun flowViewDidDisappear(view: AdaptyUIFlowView) {
        // The observer receives events from every flow. Reset `bodyAnswers` and
        // `reachedLastScreen` whenever a flow disappears, so that the paywall
        // doesn't open again when the user closes it.
        val answers = bodyAnswers.toMap()
        val finished = reachedLastScreen
        bodyAnswers.clear()
        reachedLastScreen = false

        // Number inputs send their values as strings.
        if (!finished) return
        val weight = answers["weight"]?.toDoubleOrNull() ?: return
        val height = answers["height"]?.toDoubleOrNull()?.takeIf { it > 0 } ?: return

        val heightInMeters = height / 100
        val bmi = weight / (heightInMeters * heightInMeters)
        val bmiText = ((bmi * 10).roundToInt() / 10.0).toString()

        scope.launch { showBmiPaywall(bmiText) }
    }
}

suspend fun showBmiPaywall(bmi: String) {
    Adapty.getFlow(placementId = "bmi_paywall").onSuccess { flow ->
        AdaptyUI.createFlowView(
            flow = flow,
            customTags = mapOf("bmi" to bmi),
        ).onSuccess { view ->
            view.present()
        }.onError { error ->
            // handle the error
        }
    }.onError { error ->
        // handle the error
    }
}

toString siempre usa un punto como separador decimal: “22.7”. Para usar el separador de la configuración regional del usuario, formatea el IMC con un formateador adaptado a la configuración regional en cada plataforma, como java.text.NumberFormat en Android y NSNumberFormatter en iOS.

Guardar el IMC en el perfil del usuario

Para mostrar distintos flows a los usuarios según su IMC, guárdalo como un atributo personalizado de su perfil. En el Adapty Dashboard, crea un atributo personalizado de tipo Number con la clave bmi. Después, muestra cada flow a una audiencia definida a partir de ese atributo.

Llama al método updateProfile dentro de flowViewDidDisappear, justo después de la línea que calcula el bmi. Pasa ese Double, no el string formateado, para que un segmento pueda comparar el IMC con un umbral:


val params = AdaptyProfileParameters.Builder()
    .withCustomAttribute("bmi", bmi)
    .build()

scope.launch {
    Adapty.updateProfile(params).onError { error ->
        // handle the error
    }
}