Después de diseñar la parte visual de tu paywall con el nuevo Paywall Builder en el Adapty Dashboard, puedes mostrarlo en tu aplicación móvil. El primer paso es obtener el 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 paywalls personalizados con Paywall Builder. Para obtener información sobre cómo recuperar paywalls con Remote Config, consulta el tema Obtener paywalls y productos para paywalls con Remote Config en tu aplicación móvil.

Antes de empezar a mostrar paywalls en tu aplicación 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 el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese paywall contiene tanto qué se muestra como cómo se muestra. 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, usa 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	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 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.
No escribas a fuego los IDs de producto. El único ID que debes escribir a fuego 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 tocar 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, Remote Config y varias otras propiedades.

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 guiará sobre 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 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 por cadenas específicas para personalizar el contenido. 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. Si es true, AdaptyUI obtendrá automáticamente los productos necesarios. Por defecto: false.

Una vez que tengas la vista, muestra el paywall.

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

Normalmente, los paywalls se cargan casi al instante, por lo que no tienes que preocuparte por acelerar este proceso. Sin embargo, cuando tienes muchas audiencias y paywalls, y tus usuarios tienen una conexión a internet lenta, la carga puede tardar más de lo deseado. En esas situaciones, puede que quieras mostrar un paywall predeterminado para garantizar una experiencia fluida en lugar de no mostrar ningún paywall. 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, 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 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 representa el inglés y pt-br 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.
params	opcional	Parámetros adicionales para obtener el paywall.

Personalizar assets

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

Las imágenes hero y los vídeos hero tienen IDs predefinidos: hero_image y hero_video. En un bundle de assets personalizado, apuntas a 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 una imagen principal remota.
• Mostrar una imagen de vista previa antes de reproducir un vídeo.

Aquí tienes 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 });