Obtener paywalls y productos para paywalls de Remote Config en el SDK de React Native

Antes de mostrar los Remote Config y los paywalls personalizados, debes obtener la información sobre ellos. Ten en cuenta que este tema hace referencia a Remote Config y paywalls personalizados. Para obtener orientación sobre cómo obtener flows o paywalls personalizados en el Flow Builder o el Paywall Builder, consulta Obtener flows de Flow Builder y paywalls de Paywall Builder y su configuración.

¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras apps de ejemplo, que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.

Antes de empezar a obtener flows y productos en tu app (haz clic para expandir)

Crea tus productos en el Adapty Dashboard.
Crea un flow o paywall e incorpora los productos en él en el Adapty Dashboard.
Crea placements e incorpora tu flow o paywall en el placement en el Adapty Dashboard.
Instala el SDK de Adapty en tu aplicación móvil.

Obtener información del flow

En Adapty, un producto es una combinación de productos de App Store y Google Play. Estos productos multiplataforma se integran en flows y paywalls, lo que te permite mostrarlos en placements concretos de tu app móvil.

Para mostrar los productos, necesitas obtener un AdaptyFlow desde uno de tus placements con el método getFlow.

No uses IDs de producto en el código. El único ID que debes incluir en el código es el del placement. Los flows se configuran de forma remota, por lo que el número de productos y las ofertas disponibles pueden cambiar en cualquier momento. Tu app debe gestionar estos cambios de forma dinámica: si un flow devuelve dos productos hoy y tres mañana, muéstralos todos sin modificar el código.

try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlow(id);
    // the requested flow
} 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 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é si existen. En este caso, los usuarios podrían no recibir los datos más recientes, pero experimentarán tiempos de carga más rápidos, independientemente de lo irregular 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.

El SDK de Adapty almacena los flows y paywalls en dos capas: la caché actualizada regularmente descrita anteriormente y los paywalls de respaldo. También usamos CDN para cargar flows y 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 asegurarse de que siempre obtengas la versión más reciente de tus flows, garantizando la fiabilidad incluso cuando la conexión a internet es escasa.

loadTimeoutMs

por defecto: 5 seg

Este valor limita el tiempo de espera de este método. Si se alcanza el tiempo de espera, se devolverán los datos en caché o el fallback local.

Ten en cuenta que en casos excepcionales este método puede agotar el tiempo de espera ligeramente después de lo especificado en loadTimeout, ya que la operación puede consistir en diferentes peticiones internamente.

En v4, getFlow ya no acepta un parámetro locale. En el caso de los paywalls personalizados, todos los idiomas disponibles se devuelven en el Remote Config del flow (flow.remoteConfigs); elige el que corresponda al idioma del dispositivo o la configuración de la app del usuario.

¡No escribas los IDs de productos en el código! Dado que los flows se configuran de forma remota, los productos disponibles, su cantidad y las ofertas especiales (como las pruebas gratuitas) pueden cambiar con el tiempo. Asegúrate de que tu código gestione estos escenarios.

Por ejemplo, si inicialmente obtienes 2 productos, la app debería mostrar esos 2 productos. Sin embargo, si más adelante obtienes 3 productos, la app debería mostrar los 3 sin necesidad de modificar el código. Lo único que debes escribir en el código es el ID del placement.

Parámetros de respuesta:

Parámetro	Descripción
Flow	Un objeto `AdaptyFlow` que contiene el placement, los identificadores (`id`, `variationId`), el nombre, sus variaciones de paywall (`paywalls`) y un array `remoteConfigs` (una entrada por cada locale configurado). Para obtener los productos del flow, llama a `getPaywallProducts(flow)`.

Obtener productos

Una vez que tienes el flow, puedes consultar el array de productos que le corresponde:

try {
    // ...flow
    const products = await adapty.getPaywallProducts(flow);
  // the requested products list
} catch (error) {
    // handle the error
}

Parámetros de respuesta:

Parámetro	Descripción
Products	Lista de objetos `AdaptyPaywallProduct` con: identificador del producto, nombre del producto, precio, moneda, duración de la suscripción y varias otras propiedades.
Al implementar tu propio diseño de paywall, probablemente necesitarás acceder a estas propiedades del objeto `AdaptyPaywallProduct`. A continuación se ilustran las propiedades más utilizadas, pero consulta el documento enlazado para obtener todos los detalles sobre las propiedades disponibles.
Propiedad	Descripción
-------------------------	----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Title	Para mostrar el título del producto, usa `product.localizedTitle`. Ten en cuenta que la localización se basa en el país de la store seleccionado por el usuario, no en el idioma del dispositivo.
Price	Para mostrar el precio en formato localizado, usa `product.price?.localizedString`. Esta localización se basa en la configuración de idioma del dispositivo. También puedes acceder al precio como número con `product.price?.amount`. El valor se proporcionará en la moneda local. Para obtener el símbolo de moneda correspondiente, usa `product.price?.currencySymbol`.
Subscription Period	Para mostrar el período (p. ej., semana, mes, año, etc.), usa `product.subscription?.localizedSubscriptionPeriod`. Esta localización se basa en el idioma del dispositivo. Para obtener el período de suscripción de forma programática, usa `product.subscription?.subscriptionPeriod`. Desde ahí puedes acceder a la propiedad `unit` para conocer la unidad de tiempo (‘day’, ‘week’, ‘month’, ‘year’ o ‘unknown’). El valor `numberOfUnits` te dará el número de unidades del período. Por ejemplo, para una suscripción trimestral verás `'month'` en la propiedad unit y `3` en la propiedad numberOfUnits.
Introductory Offer	Para mostrar un distintivo u otro indicador de que una suscripción incluye una oferta introductoria, consulta la propiedad `product.subscription?.offer?.phases`. Es una lista que puede contener hasta dos fases de descuento: la fase de prueba gratuita y la fase de precio introductorio. Dentro de cada objeto de fase encontrarás las siguientes propiedades útiles: • `paymentMode`: una cadena con los valores `'free_trial'`, `'pay_as_you_go'`, `'pay_up_front'` y `'unknown'`. Las pruebas gratuitas serán del tipo `'free_trial'`. • `price`: el precio con descuento como número. Para pruebas gratuitas, busca el valor `0`. • `localizedNumberOfPeriods`: una cadena localizada según el idioma del dispositivo que describe la duración de la oferta. Por ejemplo, una oferta de prueba de tres días mostrará `'3 days'` en este campo. • `subscriptionPeriod`: alternativamente, puedes obtener los detalles individuales del período de la oferta con esta propiedad. Funciona de la misma manera para las ofertas que se describe en la sección anterior. • `localizedSubscriptionPeriod`: un período de suscripción formateado del descuento para el idioma del usuario.

Acelera la carga del flow con un flow de audiencia predeterminada

Por lo general, los flows se cargan casi al instante, por lo que no tienes 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 puede tardar más de lo que desearías. En ese caso, puede que quieras mostrar un flow predeterminado para garantizar una buena experiencia de usuario en lugar de no mostrar nada. Para abordar esto, puedes usar el método getFlowForDefaultAudience, que obtiene el flow del placement especificado para la audiencia All Users. Sin embargo, es fundamental entender que el enfoque recomendado es obtener el flow mediante el método getFlow, tal como se detalla en la sección Obtener información del flow anterior.

Por qué recomendamos usar getFlow

El método getFlowForDefaultAudience tiene algunos inconvenientes importantes:

Posibles problemas de compatibilidad con versiones anteriores: Si necesitas mostrar flows distintos según la versión de la app (actual y futuras), puede que te encuentres con dificultades. Tendrás que diseñar flows compatibles con la versión actual (legacy) o asumir que los usuarios con esa versión podrían tener problemas al no renderizarse los flows correctamente.
Pérdida de targeting: Todos los usuarios verán el mismo flow diseñado para la audiencia All Users, lo que significa que pierdes la personalización del targeting (incluyendo segmentación por países, atribución de marketing o tus propios atributos personalizados). Si estás dispuesto a aceptar estas desventajas para beneficiarte de una obtención más rápida del flow, usa el método getFlowForDefaultAudience de la siguiente manera. De lo contrario, quédate con el método getFlow descrito anteriormente.

try {
    const id = 'YOUR_PLACEMENT_ID';

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

Parámetro Presencia Descripción

placementId requerido El identificador del Placement. Es el valor que especificaste al crear un placement en tu Adapty Dashboard.

Parámetro	Presencia	Descripción
placementId	requerido	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 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 lo intermitente que sea su conexión. La caché se actualiza con regularidad, 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 limpieza manual.

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é 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 lo intermitente que sea su conexión. La caché se actualiza con regularidad, 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 limpieza manual.

Antes de mostrar los Remote Config y los paywalls personalizados, necesitas obtener la información sobre ellos. Ten en cuenta que este tema hace referencia a los Remote Config y los paywalls personalizados. Para obtener orientación sobre cómo obtener paywalls personalizados con Paywall Builder, consulta Obtener paywalls del Paywall Builder y su configuración.

Antes de empezar a obtener paywalls y productos en tu app (haz clic para expandir)

Crea tus productos en el Adapty Dashboard.
Crea un paywall e incorpora los productos en tu paywall en el Adapty Dashboard.
Crea placements e incorpora tu paywall en el placement en el Adapty Dashboard.
Instala el SDK de Adapty en tu app para móvil.

Obtener información del paywall

En Adapty, un producto es una combinación de productos de App Store y Google Play. Estos productos multiplataforma se integran en paywalls, lo que te permite mostrarlos en placements concretos de tu app.

Para mostrar los productos, necesitas obtener un Paywall desde uno de tus placements con el método getPaywall.

No escribas los IDs de producto en el código. El único ID que debes incluir en el código es el ID del placement. Los paywalls se configuran de forma remota, por lo que el número de productos y las ofertas disponibles pueden cambiar en cualquier momento. Tu app debe gestionar estos cambios de forma dinámica: si un paywall devuelve dos productos hoy y tres mañana, muéstralos todos sin necesidad de modificar el código.

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

    const paywall = await adapty.getPaywall(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 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 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é si existen. En este caso, puede que los usuarios no reciban 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 con regularidad, 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 la app se reinstala o mediante una limpieza manual. El SDK de Adapty almacena los paywalls en dos capas: la caché de actualización regular 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 tiempo 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 especificado en `loadTimeout`, ya que la operación puede estar compuesta de diferentes peticiones internamente.
¡No escribas los IDs de productos en el código! Dado que los paywalls se configuran de forma remota, los productos disponibles, el número de productos y las ofertas especiales (como períodos de prueba gratuitos) pueden cambiar con el tiempo. Asegúrate de que tu código gestione estos escenarios.

Por ejemplo, si inicialmente obtienes 2 productos, tu app debería mostrar esos 2 productos. Sin embargo, si más adelante obtienes 3 productos, tu app debería mostrar los 3 sin necesidad de cambios en el código. Lo único que debes escribir directamente en el código es el ID del placement.

Parámetros de respuesta:

Parámetro	Descripción
Paywall	Un objeto `AdaptyPaywall` con: una lista de IDs de producto, el identificador del paywall, Remote Config y varias otras propiedades.

Obtener productos

Una vez que tienes el paywall, puedes consultar el array de productos que le corresponde:

try {
    // ...paywall
    const products = await adapty.getPaywallProducts(paywall);
  // the requested products list
} catch (error) {
    // handle the error
}

Parámetros de respuesta:

Parámetro	Descripción
Products	Lista de objetos `AdaptyPaywallProduct` con: identificador del producto, nombre del producto, precio, moneda, duración de la suscripción y otras propiedades.
Al implementar tu propio diseño de paywall, probablemente necesitarás acceder a estas propiedades del objeto `AdaptyPaywallProduct`. A continuación se muestran las propiedades más utilizadas, pero consulta el documento enlazado para obtener todos los detalles sobre las propiedades disponibles.
Propiedad	Descripción
-------------------------	----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Título	Para mostrar el título del producto, usa `product.localizedTitle`. Ten en cuenta que la localización se basa en el país del store seleccionado por el usuario, no en el idioma del dispositivo.
Precio	Para mostrar el precio localizado, usa `product.price?.localizedString`. La localización se basa en la configuración regional del dispositivo. También puedes acceder al precio como número con `product.price?.amount`. El valor se devolverá en la moneda local. Para obtener el símbolo de la moneda, usa `product.price?.currencySymbol`.
Período de suscripción	Para mostrar el período (p. ej., semana, mes, año, etc.), usa `product.subscription?.localizedSubscriptionPeriod`. La localización se basa en la configuración regional del dispositivo. Para obtener el período de suscripción mediante código, usa `product.subscription?.subscriptionPeriod`. Desde ahí puedes acceder a la propiedad `unit` para conocer la unidad de tiempo (es decir, `'day'`, `'week'`, `'month'`, `'year'` o `'unknown'`). El valor `numberOfUnits` te dará el número de unidades del período. Por ejemplo, en una suscripción trimestral verás `'month'` en la propiedad `unit` y `3` en la propiedad `numberOfUnits`.
Oferta introductoria	Para mostrar una etiqueta u otro indicador de que una suscripción incluye una oferta introductoria, consulta la propiedad `product.subscription?.offer?.phases`. Es una lista que puede contener hasta dos fases de descuento: la fase de prueba gratuita y la fase de precio introductorio. Dentro de cada objeto de fase encontrarás las siguientes propiedades útiles: • `paymentMode`: cadena de texto con los valores `'free_trial'`, `'pay_as_you_go'`, `'pay_up_front'` y `'unknown'`. Las pruebas gratuitas serán del tipo `'free_trial'`. • `price`: el precio con descuento como número. En las pruebas gratuitas, busca el valor `0`. • `localizedNumberOfPeriods`: cadena localizada según la configuración regional del dispositivo que describe la duración de la oferta. Por ejemplo, una oferta de prueba de tres días mostrará `'3 days'` en este campo. • `subscriptionPeriod`: alternativamente, puedes obtener los detalles individuales del período de la oferta con esta propiedad. Funciona igual que se describe en la sección anterior para las ofertas. • `localizedSubscriptionPeriod`: período de suscripción formateado del descuento según la configuración regional del usuario.

Acelera la carga de paywalls con el paywall de audiencia predeterminada

Normalmente, los paywalls se cargan casi al instante, por lo que no necesitas preocuparte por optimizar este proceso. Sin embargo, cuando tienes muchas audiencias y paywalls, y tus usuarios tienen una conexión a internet lenta, la carga de un paywall puede tardar más de lo deseable. En esos casos, puede que quieras mostrar un paywall predeterminado para garantizar una experiencia fluida en lugar de no mostrar nada. Para solucionar esto, puedes usar el método getPaywallForDefaultAudience, que obtiene el paywall del placement especificado para la audiencia All Users. Sin embargo, es importante 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 anterior.

Por qué recomendamos usar getPaywall

El método getPaywallForDefaultAudience tiene algunos inconvenientes importantes:

Posibles problemas de compatibilidad con versiones anteriores: Si necesitas mostrar distintos paywalls para diferentes versiones de la app (la actual y las futuras), puedes encontrarte con dificultades. Tendrás que diseñar paywalls compatibles con la versión actual (heredada) o asumir que los usuarios con esa versión podrían tener problemas con paywalls que no se renderizan correctamente.
Pérdida de targeting: Todos los usuarios verán el mismo paywall diseñado para la audiencia All Users, lo que significa que pierdes la personalización del targeting (incluida la segmentación por país, atribución de marketing o tus propios atributos personalizados). Si estás dispuesto a aceptar estas desventajas a cambio de una obtención más rápida del paywall, usa el método getPaywallForDefaultAudience tal como se muestra a continuación. De lo contrario, utiliza getPaywall descrito anteriormente.

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

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

El método getPaywallForDefaultAudience está disponible a partir de la versión 2.11.2 del SDK de React Native.

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

predeterminado: 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 de Brasil.

Consulta Localizaciones y códigos de idioma para obtener más información sobre los códigos de idioma y cómo recomendamos usarlos.

fetchPolicy

predeterminado: .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 consideras que tus usuarios tienen una conexión a internet inestable, puedes usar .returnCacheDataElseLoad para devolver los datos en caché cuando estén disponibles. En este caso, puede que los usuarios no reciban 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 con regularidad, 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.