Obtener flows y paywalls - Capacitor

Después de diseñar tu flow o paywall en el 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 el 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 expandir)

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 un flow/paywall

Si has diseñado un flow o paywall usando el Flow Builder o el Paywall Builder, no tienes que preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese flow o paywall contiene tanto lo que se debe mostrar como la forma en que se debe mostrar. Aun así, necesitas obtener su ID a través del placement, su configuración de vista y luego presentarlo en tu app. Obtén el flow o paywall y crea su vista lo antes posible, idealmente mucho antes de mostrarlo. El método createFlowView carga la configuración de la vista y comienza a descargar y almacenar en caché 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 en caché y listas para mostrarse.

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

try {
  const flow = await adapty.getFlow({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested flow/paywall
} catch (error) {
  // handle the error
}

Parámetros:

Parámetro	Presencia	Descripción
placementId	requerido	El identificador del Placement deseado. Es el valor que especificaste al crear un placement en el Adapty Dashboard.
fetchPolicy	por defecto: 'reload_revalidating_cache_data'	Se pasa dentro del objeto opcional params. 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 'return_cache_data_else_load' 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 lo inestable que sea 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é se mantiene 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 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	Se pasa dentro del objeto opcional params. 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 loadTimeoutMs, ya que la operación puede componerse de diferentes solicitudes internamente.
No codifiques los IDs de productos. El único ID que debes codificar es el del placement. Los flows y 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.

Parámetros de respuesta:

Parámetro	Descripción
Flow	Un objeto AdaptyFlow con los identificadores del flow (id, variationId), nombre, placement, sus variaciones de paywall (paywalls) y los Remote Configs (remoteConfigs).

Obtener la configuración de la vista

Si el placement se diseñó en el Flow Builder o en el Paywall Builder, Adapty renderiza la interfaz de usuario por ti. Crea la vista con createFlowView y luego 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 Capacitor, llama a createFlowView directamente; no es necesario 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	obligatorio	Un objeto AdaptyFlow para obtener un controlador para el 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 con cadenas específicas para personalizar el contenido dentro del flow/paywall. Consulta el tema Etiquetas personalizadas en Paywall Builder para más detalles.
prefetchProducts	opcional	Actívalo para optimizar el tiempo de visualización de los productos en pantalla. Cuando es true, AdaptyUI obtendrá automáticamente los productos necesarios. Valor por defecto: true.
android.enableSafeArea	opcional	Solo para Android (ignorado en iOS). Anidado bajo la clave android. Cuando es true, la vista del flow aplica los márgenes de área segura. Valor por defecto: true. El valor por defecto es adecuado para la mayoría de los casos.

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

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

En general, los flows y paywalls se obtienen casi de forma instantánea, así que no necesitas preocuparte por optimizar este proceso. Sin embargo, cuando 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 deseable. 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 describe en la sección Obtener flow/paywall anterior.

try {
  const flow = await adapty.getFlowForDefaultAudience({
    placementId: 'YOUR_PLACEMENT_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	predeterminado: 'reload_revalidating_cache_data'	Se pasa dentro del objeto opcional params. 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 'return_cache_data_else_load' para devolver los datos en caché si existen. En este caso, los usuarios podrían no obtener 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 regularmente, por lo que es seguro usarla durante la sesión para evitar solicitudes de red. Ten en cuenta que la caché se mantiene intacta al reiniciar la aplicación y solo se borra cuando se reinstala la app o mediante una limpieza manual.

Personalizar recursos

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

Las imágenes hero y los vídeos tienen IDs predefinidos: hero_image y hero_video. En un bundle de recursos personalizados, identificas 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. Aquí tienes un ejemplo de cómo 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' }
    }
  }
};

const 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. El primer paso es obtener el paywall asociado al placement y su configuración de vista, como se describe a continuación. Por favor, ten en cuenta que este tema hace referencia a paywalls personalizados con Paywall Builder. Para más información sobre cómo obtener paywalls de Remote Config, consulta el tema Obtener paywalls y productos para paywalls de Remote Config en tu app móvil.

Antes de empezar a mostrar paywalls en tu app móvil (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.

Obtén el paywall diseñado con Paywall Builder

Si has diseñado un paywall con el 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, después, 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, utiliza el método getPaywall:

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

Parámetros:

Parámetro	Presencia	Descripción
placementId	requerido	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.
params	opcional	Parámetros adicionales para obtener el paywall.
No escribas los IDs de producto en el código. El único ID que debes incluir directamente en el código es el 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.

Parámetros de respuesta:

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

Obtener la configuración de vista del 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 Capacitor, llama directamente al método createPaywallView sin necesidad de obtener primero la configuración de la vista manualmente.

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	obligatorio	Un objeto AdaptyPaywall para obtener un controlador del 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 y se reemplazan 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. Si es true, AdaptyUI obtendrá automáticamente los productos necesarios. Valor predeterminado: false.

Una vez que tengas la vista, muestra el paywall.

Obtén un paywall para la audiencia por defecto y acelera su carga

Normalmente, los paywalls se obtienen casi de inmediato, por lo que no es necesario preocuparse por acelerar este proceso. Sin embargo, cuando tienes numerosas audiencias y paywalls, y tus usuarios tienen una conexión a internet débil, obtener un paywall puede tardar más de lo deseable. En esas situaciones, puede que quieras mostrar un paywall por defecto para garantizar una experiencia de usuario fluida en lugar de no mostrar ningún paywall. 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 mediante el método getPaywall, tal como se detalla en la sección Obtener información del paywall anterior.

try {
  const paywall = await adapty.getPaywallForDefaultAudience({
    placementId: 'YOUR_PLACEMENT_ID',
    locale: 'en',
  });
  // the requested paywall
} 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.
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 indica 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.
params	opcional	Parámetros adicionales para obtener el paywall.

Personalizar recursos

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

Las imágenes de héroe y los vídeos 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. 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 createPaywallView(paywall, { customAssets });