Obtener flows y paywalls - React Native

Después de diseñar tu flow o paywall con Paywall Builder, puedes mostrarlo en tu aplicación móvil. El primer paso es obtener el flow o paywall asociado al placement y su configuración de vista, tal como se describe a continuación.

Ten en cuenta que este tema hace referencia a flows y paywalls personalizados con Paywall Builder. Si estás implementando tus paywalls de forma manual, consulta el tema Obtener paywalls y productos para paywalls con Remote Config en tu aplicación móvil.

Antes de empezar a mostrar flows y paywalls en tu app móvil (haz clic para ampliar)

1. Crea tus productos en el Adapty Dashboard.
2. Crea un flow/paywall e incorpora los productos en él en el Adapty Dashboard.
3. Crea placements e incorpora tu flow/paywall en ellos en el Adapty Dashboard.
4. Instala el SDK de Adapty en tu app móvil.

Obtener flow/paywall

Si has diseñado un flow o paywall con el Flow Builder o el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese flow o paywall ya contiene tanto lo que debe mostrarse como la forma en que debe presentarse. Aun así, necesitas obtener su ID a través del placement, su configuración de vista y, después, presentarlo en tu app. Obtén el flow o paywall y crea su vista con la mayor antelación posible, idealmente mucho antes de mostrarlo. El método createFlowView carga la configuración de la vista y comienza a descargar y cachear sus imágenes en segundo plano. Cuanto antes lo llames, más tiempo tendrán esas descargas para completarse. Para cuando presentes el flow o paywall, su configuración e imágenes ya pueden estar cacheadas y listas para mostrarse.

Para obtener un flow o paywall, usa el método getFlow:

try {
    const placementId = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlow(placementId);
  // el flow/paywall solicitado
} catch (error) {
    // manejar el error
}

Parámetros:

Parámetro	Presencia	Descripción
placementId	obligatorio	El identificador del Placement deseado. Es el valor que especificaste al crear un placement en el Adapty Dashboard.
fetchPolicy	por defecto: .reloadRevalidatingCacheData	Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de fallo. Recomendamos esta opción porque garantiza que tus usuarios siempre reciban los datos más actualizados. Sin embargo, si crees que tus usuarios tienen una conexión a internet inestable, considera usar .returnCacheDataElseLoad para devolver los datos en caché cuando existan. En este caso, los usuarios puede que no obtengan los datos más recientes, pero experimentarán tiempos de carga más rápidos, independientemente de lo inestable que sea su conexión. La caché se actualiza con regularidad, por lo que es seguro usarla durante la sesión para evitar solicitudes de red. Ten en cuenta que la caché permanece intacta al reiniciar la app y solo se borra cuando se reinstala la app o mediante una limpieza manual. El SDK de Adapty almacena los paywalls localmente en dos capas: la caché de actualización periódica descrita anteriormente y los paywalls de respaldo. También usamos CDN para obtener los paywalls más rápido y un servidor de respaldo independiente en caso de que el CDN sea inaccesible. Este sistema está diseñado para garantizar que siempre obtengas la versión más reciente de tus paywalls, asegurando la fiabilidad incluso cuando la conexión a internet es limitada.
loadTimeoutMs	por defecto: 5 seg	Este valor limita el tiempo de espera de este método. Si se alcanza el límite, se devolverán los datos en caché o el fallback local. Ten en cuenta que en casos excepcionales este método puede superar ligeramente el tiempo indicado en loadTimeout, ya que la operación puede implicar distintas solicitudes internamente. Para Android: puedes crear un TimeInterval con funciones de extensión (como 5.seconds, donde .seconds proviene de import com.adapty.utils.seconds), o con TimeInterval.seconds(5). Para no establecer ningún límite, usa TimeInterval.INFINITE.
Parámetros de respuesta:
Parámetro	Descripción
:--------	:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Flow	Un objeto AdaptyFlow con los identificadores del flow (id, variationId), el nombre, el placement, sus variantes de paywall (paywalls) y los Remote Configs (remoteConfigs).

Obtener la configuración de la vista

Si el placement fue diseñado en el Flow Builder o en el Paywall Builder, Adapty renderiza la interfaz por ti. Crea la vista con createFlowView y, a continuación, presenta el flow o el paywall. Si el placement es un paywall personalizado sin interfaz del Builder, trátalo como un paywall de Remote Config. En el SDK de React Native, llama a createFlowView directamente — no necesitas obtener primero la configuración de la vista.

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

Parámetros:

Parámetro	Presencia	Descripción
flow	requerido	Un objeto AdaptyFlow para obtener un controlador del flow/paywall deseado.
customTags	opcional	Define un diccionario de etiquetas personalizadas y sus valores resueltos. Las etiquetas personalizadas actúan como marcadores de posición en el contenido, reemplazados dinámicamente por cadenas específicas para personalizar el contenido dentro del flow/paywall. Consulta el tema Etiquetas personalizadas en el Paywall Builder para más detalles.
prefetchProducts	opcional	Actívalo para optimizar el momento en que se muestran los productos en pantalla. Cuando es true, AdaptyUI obtendrá automáticamente los productos necesarios. Valor predeterminado: false.
enableSafeArea	opcional	Solo para Android (se ignora en iOS). Cuando es true, la vista del flow aplica rellenos de área segura. El valor predeterminado es true para la presentación modal (createFlowView + present()) y false para el componente integrado AdaptyFlowView. El valor predeterminado es adecuado para la mayoría de los casos.

Una vez que tengas la vista, muestra el flow/paywall.

Obtén un flow o paywall para la audiencia predeterminada y cárgalo más rápido

Por lo general, los flows y paywalls se cargan casi al instante, así que no tendrás que preocuparte por optimizar este proceso. Sin embargo, si tienes muchas audiencias y placements, y tus usuarios tienen una conexión a internet lenta, la carga de un flow o paywall puede tardar más de lo deseado. En esos casos, puede que quieras mostrar un flow o paywall predeterminado para garantizar una experiencia fluida, en lugar de no mostrar nada. Para solucionar esto, puedes usar el método getFlowForDefaultAudience, que obtiene el flow o paywall del placement especificado para la audiencia All Users. Sin embargo, es importante entender que el enfoque recomendado es obtener el flow o paywall con el método getFlow, tal como se explica en la sección Obtener flow/paywall anterior.

try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlowForDefaultAudience(id);
  // the requested flow/paywall
} catch (error) {
    // handle the error
}

Parámetro	Presencia	Descripción
placementId	obligatorio	El identificador del Placement. Es el valor que especificaste al crear un placement en tu Adapty Dashboard.
fetchPolicy	por defecto: .reloadRevalidatingCacheData	Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de fallo. Recomendamos esta opción porque garantiza que tus usuarios siempre reciban los datos más actualizados. Sin embargo, si crees que tus usuarios tienen conexiones a internet inestables, considera usar .returnCacheDataElseLoad para devolver los datos en caché si existen. En ese caso, es posible que los usuarios no obtengan los datos más recientes, pero experimentarán tiempos de carga más rápidos independientemente de lo intermitente que sea su conexión. La caché se actualiza regularmente, por lo que es seguro usarla durante la sesión para evitar peticiones de red. Ten en cuenta que la caché permanece intacta al reiniciar la app y solo se borra cuando se reinstala la app o mediante una limpieza manual.

Personalizar assets

Para personalizar imágenes y vídeos en tu flow/paywall, implementa los assets personalizados.

Las imágenes y vídeos hero tienen IDs predefinidos: hero_image y hero_video. En un bundle de assets personalizados, seleccionas estos elementos por sus IDs y personalizas su comportamiento.

Para otras imágenes y vídeos, necesitas establecer un ID personalizado en el Adapty Dashboard.

Por ejemplo, puedes:

• Mostrar una imagen o vídeo diferente a algunos usuarios.
• Mostrar una imagen de vista previa local mientras se carga la imagen principal remota.
• Mostrar una imagen de vista previa antes de reproducir un vídeo.

A continuación se muestra un ejemplo de cómo puedes proporcionar recursos personalizados mediante un diccionario simple:

const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

view = await createFlowView(flow, { customAssets })

Después de diseñar la parte visual de tu paywall con el nuevo Paywall Builder en el Adapty Dashboard, puedes mostrarlo en tu app móvil. El primer paso en este proceso es obtener el paywall asociado al placement y su configuración de vista, tal como se describe a continuación.

Por favor, ten en cuenta que este tema hace referencia a paywalls personalizados con Paywall Builder. Si estás implementando tus paywalls manualmente, consulta el tema Obtener paywalls y productos para paywalls con Remote Config en tu app móvil.

Antes de empezar a mostrar paywalls en tu app móvil (haz clic para expandir)

1. Crea tus productos en el Adapty Dashboard.
2. Crea un paywall e incorpora los productos en él en el Adapty Dashboard.
3. Crea placements e incorpora tu paywall en ellos en el Adapty Dashboard.
4. Instala el SDK de Adapty en tu aplicación móvil.

Obtener un paywall diseñado con Paywall Builder

Si has diseñado un paywall con Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Este tipo de paywall contiene tanto lo que se debe mostrar como la forma en que debe mostrarse. Aun así, necesitas obtener su ID a través del placement, su configuración de vista y luego presentarlo en tu app. Para garantizar un rendimiento óptimo, es fundamental obtener el paywall y su configuración de vista lo antes posible, dejando tiempo suficiente para que las imágenes se descarguen antes de mostrárselas al usuario.

Para obtener un paywall, usa el método getPaywall:

try {
    const placementId = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(placementId, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}

Parámetros:

Parámetro	Presencia	Descripción
placementId	obligatorio	El identificador del Placement deseado. Es el valor que especificaste al crear un placement en el Adapty Dashboard.
locale	opcional por defecto: en	El identificador de la localización del paywall. Se espera que este parámetro sea un código de idioma compuesto por uno o dos subetiquetas separadas por el carácter menos (-). La primera subetiqueta corresponde al idioma y la segunda a la región. Ejemplo: en significa inglés, pt-br representa el portugués de Brasil. Consulta Localizaciones y códigos de idioma para más información sobre los códigos de idioma y cómo recomendamos usarlos.
fetchPolicy	por defecto: .reloadRevalidatingCacheData	Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de error. Recomendamos esta opción porque garantiza que tus usuarios siempre reciban los datos más actualizados. Sin embargo, si crees que tus usuarios tienen una conexión a internet inestable, considera usar .returnCacheDataElseLoad para devolver los datos en caché si existen. En este caso, es posible que los usuarios no obtengan los datos más recientes, pero experimentarán tiempos de carga más rápidos, independientemente de la calidad de su conexión. La caché se actualiza regularmente, por lo que es seguro usarla durante la sesión para evitar solicitudes de red. Ten en cuenta que la caché permanece intacta al reiniciar la app y solo se borra cuando se reinstala la app o mediante una limpieza manual. El SDK de Adapty almacena los paywalls localmente en dos capas: la caché de actualización periódica descrita anteriormente y los paywalls de respaldo. También usamos CDN para obtener los paywalls más rápido y un servidor de respaldo independiente en caso de que el CDN no esté disponible. Este sistema está diseñado para garantizar que siempre obtengas la versión más reciente de tus paywalls, asegurando la fiabilidad incluso cuando la conexión a internet es limitada.
loadTimeoutMs	por defecto: 5 seg	Este valor limita el tiempo de espera de este método. Si se alcanza el tiempo límite, se devolverán los datos en caché o el fallback local. Ten en cuenta que en casos poco frecuentes este método puede superar ligeramente el tiempo de espera especificado en loadTimeout, ya que la operación puede estar compuesta de distintas solicitudes internamente. Para Android: puedes crear un TimeInterval con funciones de extensión (como 5.seconds, donde .seconds proviene de import com.adapty.utils.seconds), o con TimeInterval.seconds(5). Para no establecer ningún límite, usa TimeInterval.INFINITE.
Parámetros de respuesta:
Parámetro	Descripción
:--------	:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Paywall	Un objeto AdaptyPaywall con una lista de IDs de productos, el identificador del paywall, Remote Config y otras propiedades.

Obtener la configuración de vista de un paywall diseñado con Paywall Builder

Después de obtener el paywall, comprueba si incluye un ViewConfiguration, lo que indica que fue creado con Paywall Builder. Esto te indicará cómo mostrar el paywall. Si el ViewConfiguration está presente, trátalo como un paywall de Paywall Builder; si no, trátalo como un paywall de Remote Config.

En el SDK de React Native, llama directamente al método createPaywallView sin necesidad de obtener primero la configuración de vista manualmente.

// for the Adapty SDK < 3.14 – import {createPaywallView} from 'react-native-adapty/dist/ui';

if (paywall.hasViewConfiguration) {
  try {
    const view = await createPaywallView(paywall);
  } catch (error) {
    // handle the error
  }
} else {
    //use your custom logic
}

Parámetros:

Parámetro	Presencia	Descripción
paywall	requerido	Un objeto AdaptyPaywall para obtener un controlador para el paywall deseado.
customTags	opcional	Define un diccionario de etiquetas personalizadas y sus valores resueltos. Las etiquetas personalizadas actúan como marcadores de posición en el contenido del paywall, reemplazándose dinámicamente con cadenas específicas para personalizar el contenido. Consulta el tema Custom tags in paywall builder para más detalles.
prefetchProducts	opcional	Actívalo para optimizar el momento en que se muestran los productos en pantalla. Cuando es true, AdaptyUI obtiene automáticamente los productos necesarios. Valor predeterminado: false.

Una vez que tengas la vista, muestra el paywall.

Obtén un paywall para la audiencia predeterminada y acelera la carga

Por lo general, los paywalls se cargan casi al instante, así que no tendrás que preocuparte por optimizar este proceso. Sin embargo, si tienes muchas audiencias y paywalls, y tus usuarios tienen una conexión a internet débil, la carga puede tardar más de lo deseable. En esas situaciones, puede que quieras mostrar un paywall predeterminado para garantizar una buena experiencia de usuario en lugar de no mostrar ninguno. Para abordar esto, puedes usar el método getPaywallForDefaultAudience, que obtiene el paywall del placement especificado para la audiencia All Users. Sin embargo, es fundamental entender que el enfoque recomendado es obtener el paywall con el método getPaywall, tal como se detalla en la sección Obtener información del paywall más arriba.

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}

Parámetro	Presencia	Descripción
placementId	obligatorio	El identificador del Placement. Es el valor que especificaste al crear un placement en tu Adapty Dashboard.
locale	opcional por defecto: en	El identificador de la localización del paywall. Se espera que este parámetro sea un código de idioma compuesto por una o más subetiquetas separadas por el carácter menos (-). La primera subetiqueta corresponde al idioma y la segunda a la región. Ejemplo: en significa inglés, pt-br representa el portugués brasileño. Consulta Localizaciones y códigos de idioma para más información sobre los códigos de idioma y cómo recomendamos usarlos.
fetchPolicy	por defecto: .reloadRevalidatingCacheData	Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de fallo. Recomendamos esta opción porque garantiza que tus usuarios siempre obtengan los datos más actualizados. Sin embargo, si crees que tus usuarios tienen una conexión a internet inestable, considera usar .returnCacheDataElseLoad para devolver los datos en caché si existen. En este caso, puede que los usuarios no obtengan los datos más recientes, pero experimentarán tiempos de carga más rápidos independientemente de la calidad de su conexión. La caché se actualiza regularmente, por lo que es seguro usarla durante la sesión para evitar peticiones de red. Ten en cuenta que la caché permanece intacta al reiniciar la aplicación y solo se borra cuando se desinstala la app o mediante una limpieza manual.

Personalizar recursos

Para personalizar imágenes y vídeos en tu paywall, implementa recursos personalizados.

Las imágenes y vídeos hero tienen IDs predefinidos: hero_image y hero_video. En un bundle de recursos personalizado, seleccionas estos elementos por sus IDs y personalizas su comportamiento.

Para otras imágenes y vídeos, necesitas establecer un ID personalizado en el Adapty Dashboard.

Por ejemplo, puedes:

• Mostrar una imagen o vídeo diferente a algunos usuarios.
• Mostrar una imagen de vista previa local mientras se carga la imagen principal remota.
• Mostrar una imagen de vista previa antes de reproducir un vídeo.

Este es un ejemplo de cómo puedes proporcionar recursos personalizados mediante un diccionario simple:

const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

view = await createPaywallView(paywall, { customAssets })