Pasar datos a flows en el SDK de Capacitor

Un custom tag es una variable personalizada con un valor proveniente 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 verán “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 createFlowView, como un objeto:

Cada clave es el nombre completo de una etiqueta personalizada, como user.streak.
Cada valor es el texto que los usuarios verán en lugar de la etiqueta.
Cada valor debe ser legible para las personas, como “1,250” y 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.


const customTags = {
  'username': 'DragonSlayer42',
  'coins': '1,250',
};

try {
  const view = await createFlowView(flow, { customTags });
  await view.present();
} catch (error) {
  // handle the error
}

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 define valores de etiquetas personalizadas para paywalls del antiguo Paywall Builder, revisa cómo difieren 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 el 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.

Configura 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.

Pasa el IMC al paywall

Recopila el peso y la altura de los eventos flow_user_input del flow de onboarding, como se describe en Procesar datos de flows. Para saber que el usuario llegó a la última pantalla, observa el evento flow_screen_showed con is_last_screen establecido en true, como se describe en Rastrear vistas de pantalla del flow. Cuando el usuario cierre el flow de onboarding después de esa pantalla, calcula el IMC. Luego crea la vista del paywall y pasa el IMC para la etiqueta personalizada bmi.

Registra los siguientes handlers en onboardingView, la vista que creas para el flow de onboarding:


const bodyAnswers: Record<string, string> = {};
let reachedLastScreen = false;

await onboardingView.setEventHandlers({
  onAnalytics(name, params) {
    if (name === 'flow_screen_showed' && params.is_last_screen) {
      reachedLastScreen = true;
    }
    if (name === 'flow_user_input' && typeof params.value === 'string') {
      bodyAnswers[params.element_id as string] = params.value;
    }
    return false;
  },
  onDisappeared() {
    // Number inputs send their values as strings.
    const weight = Number(bodyAnswers.weight);
    const height = Number(bodyAnswers.height);
    const finished = reachedLastScreen;
    delete bodyAnswers.weight;
    delete bodyAnswers.height;
    reachedLastScreen = false;

    if (finished && weight > 0 && height > 0) {
      const heightInMeters = height / 100;
      const bmi = weight / (heightInMeters * heightInMeters);
      showBmiPaywall(bmi.toLocaleString(undefined, { maximumFractionDigits: 1 }));
    }
    return false;
  },
});

async function showBmiPaywall(bmi: string) {
  try {
    const flow = await adapty.getFlow({ placementId: 'bmi_paywall' });
    const view = await createFlowView(flow, { customTags: { 'bmi': bmi } });
    await view.present();
  } catch (error) {
    // handle the error
  }
}

toLocaleString usa el separador decimal de la configuración regional del usuario: “22.7” en inglés, “22,7” en alemán.

Guardar el IMC en el perfil del usuario

Para mostrar flows diferentes según el IMC del usuario, guárdalo como un atributo personalizado de su perfil. En el Adapty Dashboard, crea un atributo personalizado de tipo Number con la clave bmi. Luego muestra cada flow a una audiencia creada a partir de ese atributo.

Llama al método updateProfile en onDisappeared, justo después de la línea que calcula el bmi. Pasa ese número, no la cadena formateada, para que un segmento pueda comparar el BMI con un umbral. onDisappeared no puede ser async, así que gestiona el resultado con .catch en lugar de await:

adapty
  .updateProfile({ codableCustomAttributes: { bmi } })
  .catch((error) => {
    // handle the error
  });