Optimizar la obtención de flows y paywalls en el SDK de React Native

Una obtención fiable de un flow o paywall en React Native hace tres cosas: renderiza rápido, devuelve la variación dirigida a la audiencia y recurre al respaldo de forma elegante cuando la red es lenta. Las reglas que se describen a continuación cubren los patrones de temporización, caché y respaldo para conseguirlo.

Tip

Las reglas asumen que adapty.activate() y adapty.identify() ya se han resuelto. Consulta Orden de llamadas en React Native SDK.

Reglas y errores comunes

Haz estoNo hagas estoPor qué
Obtén el placement que vas a mostrar, o precarga la caché con preloadFlows (SDK 4.3.0+).Lanza tus propias llamadas concurrentes a getFlow al iniciar.Una ráfaga de precarga manual bloquea el hilo JS y produce una pantalla en negro. preloadFlows está diseñado para esto y envía el lote al SDK nativo en una sola llamada.
Llama a getFlow después de que la atribución haya tenido tiempo de resolverse — por ejemplo, 1–2 segundos después de activate o tras que se dispare onLatestProfileLoad.Llama a getFlow en el montaje del componente raíz.La atribución aún no ha llegado. El flow se resuelve con la audiencia predeterminada y omite silenciosamente los segmentos y la personalización de ASA.
Establece un loadTimeoutMs y configura un paywall de respaldo para cada placement.Esperes indefinidamente a que getFlow responda.Sin un timeout, los usuarios con mala conectividad ven una pantalla en blanco hasta que la red responda, o cierran la app.

Consulta Obtener paywalls y productos personalizados para la referencia de los parámetros fetchPolicy y loadTimeoutMs, y Placements para elegir el placement adecuado.

Precargar placements

Info

preloadFlows y preloadFlowsForDefaultAudience están disponibles a partir de la versión 4.3.0 del SDK.

preloadFlows almacena en caché el JSON del flow de antemano — una solicitud por placement. Luego lo usas de la forma habitual: getFlow para el flow y createFlowView para su vista.

fetchPolicy decide desde qué capa lee primero un getFlow posterior, no si puede acceder a la caché:

  • 'return_cache_data_else_load' lee primero la copia precargada y va a la red solo cuando no hay nada en caché. 'return_cache_data_if_not_expired_else_load' hace lo mismo mientras la copia es más reciente que maxAgeSeconds.
  • El valor por defecto, 'reload_revalidating_cache_data', va primero a la red y recurre a la copia precargada cuando la solicitud falla o se agota el tiempo de espera.

La precarga resulta útil en ambos casos, pero de forma diferente: una política de caché primero elimina la solicitud, mientras que el valor por defecto la mantiene y obtiene una copia en caliente a la que recurrir.

Úsalo cuando sepas qué placements necesitará la sesión pero no quieras mostrarlos todavía — por ejemplo, justo después de que activate e identify resuelvan, para el flow detrás de un botón que el usuario aún no ha pulsado.

try {
  await adapty.preloadFlows(['onboarding', 'main_paywall'], {
    loadTimeoutMs: 5000,
  });
} catch (error) {
  // at least one placement failed to preload
}

// Later, when the user reaches the paywall:
const flow = await adapty.getFlow('main_paywall', {
  fetchPolicy: 'return_cache_data_else_load',
});

Parámetros:

  • placementIds (requerido): los placements que se van a precargar.
  • loadTimeoutMs (opcional): el tiempo de espera en milisegundos. Por defecto es 5000, y los valores por debajo de 1000 se elevan a 1000. En iOS, el tiempo de espera se aplica a todo el lote; en Android, a cada placement.

Comportamiento importante:

  • La promesa solo se rechaza después de que se hayan intentado todos los placements, y el error agrega los fallos por placement. El fallo de un placement no detiene los demás, y los placements que se cargaron correctamente permanecen en la caché.
  • Si un placement supera el tiempo de espera o falla con un error de red, el SDK usa la variación de la audiencia predeterminada para ese placement. Los demás fallos se reportan tal cual.
  • La precarga solo calienta la caché. No devuelve contenido — para mostrarlo, sigue llamando a getFlow.

Qué cubre una precarga

Un flow llega a la pantalla en capas. Una precarga cubre la primera, exactamente igual que getFlow:

CapaRecuperado porPrecalentado por una precarga
JSON del flow — la variación seleccionada, sus IDs de producto y el Remote ConfiggetFlowSí
Diseño de la UI — la estructura, el estilo y el texto de la pantallacreateFlowViewNo
Imágenes, incluido el fotograma estático que sustituye a un elemento de vídeocreateFlowView, en segundo planoNo
Archivos de vídeoEl reproductor del sistema, mientras se renderiza la pantallaNo almacenado en caché por el SDK

Así que el primer createFlowView para un layout determinado sigue requiriendo un viaje de ida y vuelta aunque se haya hecho una precarga. El SDK nativo guarda ese layout en su caché de disco, que persiste entre reinicios de la app, de modo que el coste recae en la primera solicitud y no en todas.

Omitir la segmentación de audiencia

Para calentar la caché sin esperar la segmentación de audiencia, usa la variante de audiencia predeterminada. No requiere ningún timeout:

await adapty.preloadFlowsForDefaultAudience(['main_paywall']);

Mostrar el contenido multimedia de la primera pantalla desde el bundle de la app

Un flow descarga sus imágenes y vídeos desde Adapty. Para mostrar el contenido multimedia de la primera pantalla de forma instantánea, sírvelo desde el bundle de la app. Es una buena manera de reutilizar los recursos que ya tienes, como los elementos visuales de un onboarding nativo existente.

  1. En el Flow & Paywall Builder, establece un ID de medio personalizado en la imagen o el vídeo. El archivo que subas allí se usará como respaldo.
  2. Añade el archivo a los proyectos nativos: el bundle de la app iOS y la carpeta assets de Android.
  3. Al crear la vista del flow, pasa el archivo incluido en el bundle para ese ID en customAssets:
// "welcome_video" is the custom media ID set in the Flow & Paywall Builder
const bundledAssets: Record<string, AdaptyCustomAsset> = {
  'welcome_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'welcome.mp4' },
      android: { relativeAssetPath: 'videos/welcome.mp4' },
    },
  },
};

const view = await createFlowView(flow, { customAssets: bundledAssets });

Los archivos incluidos aumentan el tamaño de descarga de tu app, así que incluye solo los recursos multimedia que los usuarios ven primero.

Los archivos multimedia que no incluyas en el bundle se muestran de inmediato de todas formas: el layout del flow incluye una copia pequeña de baja resolución de cada imagen, incluido el fotograma estático de un vídeo, y la muestra hasta que se cargue el archivo completo.

Para la referencia completa de customAssets, consulta Personalizar assets.

Ajustes para conectividad deficiente

Para mercados con conectividad habitualmente deficiente (zonas rurales, transporte, regiones con problemas de enrutamiento):

  • Establece fetchPolicy: 'return_cache_data_else_load' en todas las llamadas excepto la primera.
  • Configura un paywall de respaldo para cada placement en el Adapty Dashboard.
  • Establece loadTimeoutMs entre 3 y 5 segundos y acepta el paywall de respaldo cuando se agote el tiempo.
  • No condicionales la visualización del flow a getProfile(). Llama a getFlow de forma independiente para que un perfil lento no bloquee la UI.