Renderizar paywall diseñado con Remote Config en Flutter SDK

Si has personalizado un paywall usando Remote Config, tendrás que implementar el renderizado en el código de tu app para mostrárselo a los usuarios. Dado que Remote Config ofrece flexibilidad adaptada a tus necesidades, tú decides qué incluir y cómo se ve tu paywall. Te proporcionamos un método para obtener la configuración remota, dándote la autonomía de mostrar tu paywall personalizado configurado mediante Remote Config.

Obtener el Remote Config del paywall y mostrarlo

En la v4, el flow incluye una lista remoteConfigs — un Remote Config por cada localización configurada. Elige la entrada que coincida con el idioma del usuario y extrae los valores necesarios. Consulta Localizaciones y códigos de idioma para seleccionar la localización correcta.


try {
  final flow = await Adapty().getFlow(placementId: 'YOUR_PLACEMENT_ID');

  // one entry per configured localization; fall back to the first one
  final config = flow.remoteConfigs.firstWhereOrNull((c) => c.locale == 'en') ??
      flow.remoteConfig;

  final String? headerText = config?.dictionary?['header_text'] as String?;
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
  // handle the error
}

En este punto, una vez que hayas recibido todos los valores necesarios, es momento de renderizarlos y ensamblarlos en una página visualmente atractiva. Asegúrate de que el diseño se adapte a diferentes pantallas y orientaciones de dispositivos móviles, ofreciendo una experiencia fluida y fácil de usar en distintos dispositivos.

Asegúrate de registrar el evento de visualización del paywall como se describe a continuación, para que las analíticas de Adapty puedan capturar información para embudos y pruebas A/B.

Cuando hayas terminado de mostrar el paywall, continúa con la configuración del flujo de compra. Cuando el usuario realice una compra, simplemente llama a .makePurchase() con el producto de tu paywall. Para más detalles sobre el método .makePurchase(), consulta Realizar compras.

Te recomendamos crear un paywall de respaldo llamado paywall de respaldo. Este paywall se mostrará al usuario cuando no haya conexión a internet ni caché disponible, garantizando una experiencia fluida incluso en esas situaciones.

Registrar eventos de visualización de paywall

Adapty te ayuda a medir el rendimiento de tus paywalls. Aunque recopilamos los datos de compras automáticamente, registrar las visualizaciones de paywall requiere tu intervención, ya que solo tú sabes cuándo un usuario ve un paywall.

Para registrar un evento de visualización de paywall, simplemente llama a .logShowFlow(flow: flow), y se reflejará en las métricas de tu paywall en los embudos y las pruebas A/B.

No es necesario llamar a .logShowFlow(flow: flow) si estás mostrando flows o paywalls creados en el builder.

try {
  await Adapty().logShowFlow(flow: flow);
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
  // handle the error
}

Parámetros de la solicitud:

Parámetro	Presencia	Descripción
flow	requerido	Un objeto `AdaptyFlow`.

Si has personalizado un paywall con Remote Config, necesitas implementar el renderizado en el código de tu app para mostrárselo a los usuarios. Como Remote Config ofrece flexibilidad adaptada a tus necesidades, tú decides qué se incluye y cómo se ve tu paywall. Te proporcionamos un método para obtener la configuración remota, dándote autonomía total para mostrar tu paywall personalizado configurado mediante Remote Config.

Obtener el Remote Config del paywall y mostrarlo

Para obtener el Remote Config de un paywall, accede a la propiedad remoteConfig y extrae los valores que necesites.

try {
  final paywall = await Adapty().getPaywall(placementId: "YOUR_PLACEMENT_ID");
  final String? headerText = paywall.remoteConfig?.dictionary?['header_text'] as String?;
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}

En este punto, una vez que hayas recibido todos los valores necesarios, es momento de renderizarlos y ensamblarlos en una página visualmente atractiva. Asegúrate de que el diseño se adapte a distintos tamaños de pantalla y orientaciones de móvil, ofreciendo una experiencia fluida y fácil de usar en diferentes dispositivos.

Asegúrate de registrar el evento de visualización del paywall como se describe a continuación, para que los análisis de Adapty puedan recopilar información para los funnels y las pruebas A/B.

Cuando termines de mostrar el paywall, continúa con la configuración del flujo de compra. Cuando el usuario realice una compra, simplemente llama a .makePurchase() con el producto de tu paywall. Para más detalles sobre el método .makePurchase(), consulta Realizar compras.

Te recomendamos crear un paywall de respaldo llamado fallback paywall. Este paywall de respaldo se mostrará al usuario cuando no haya conexión a internet ni caché disponible, garantizando una experiencia fluida incluso en esas situaciones.

Registrar eventos de visualización de paywall

Adapty te ayuda a medir el rendimiento de tus paywalls. Aunque los datos de compras se recopilan automáticamente, registrar las visualizaciones de paywall requiere tu intervención, ya que solo tú sabes cuándo un usuario ve un paywall.

Para registrar un evento de visualización de paywall, simplemente llama a .logShowPaywall(paywall), y quedará reflejado en las métricas de tu paywall en los embudos y las pruebas A/B.

No es necesario llamar a .logShowPaywall(paywall) si estás mostrando paywalls creados con el Paywall Builder.

try {
  final result = await Adapty().logShowPaywall(paywall: paywall);
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}

Parámetros de la solicitud:

Parámetro	Presencia	Descripción
paywall	obligatorio	Un objeto `AdaptyPaywall`.