Renderizar paywall diseñado con Remote Config en Capacitor SDK
Si has personalizado un flow con Remote Config, tendrás que implementar el renderizado en el código de tu app móvil para mostrárselo a los usuarios. Como Remote Config ofrece flexibilidad adaptada a tus necesidades, tú controlas qué se incluye y cómo se ve la vista del flow. Proporcionamos un método para obtener la configuración remota, dándote autonomía para mostrar tu flow personalizado configurado mediante Remote Config.
Obtener el Remote Config del flow y mostrarlo
En v4, un flow incluye una entrada AdaptyRemoteConfig por cada idioma configurado en el array remoteConfigs. Elige el idioma que coincida con las preferencias del usuario y lee los valores que necesites desde su data.
try {
const flow = await adapty.getFlow({ placementId: 'YOUR_PLACEMENT_ID' });
const config = flow.remoteConfigs?.find((c) => c.lang === 'en')
?? flow.remoteConfigs?.[0];
const headerText = config?.data?.['header_text'];
} catch (error) {
console.error('Failed to fetch flow:', 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 distintas pantallas 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 funnels y pruebas A/B.
Una vez que hayas mostrado el flow, 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 flow. 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 vista de flow
Adapty te ayuda a medir el rendimiento de tus flows. Aunque los datos de compras se recopilan automáticamente, registrar las vistas de los flows requiere tu intervención, ya que solo tú sabes cuándo un usuario ve un flow.
Para registrar un evento de vista de flow, simplemente llama a .logShowFlow({ flow }), y quedará reflejado en las métricas de tu paywall en los embudos y pruebas A/B.
No es necesario llamar a .logShowFlow({ flow }) si estás mostrando flows o paywalls renderizados por el Flow Builder o el Paywall Builder. En esos casos, Adapty registra las visualizaciones automáticamente.
await adapty.logShowFlow({ flow });Parámetros de la solicitud:
| Parámetro | Presencia | Descripción |
|---|---|---|
| flow | requerido | Un objeto AdaptyFlow obtenido mediante adapty.getFlow({ placementId }). |
Si has personalizado un paywall mediante Remote Config, tendrás que implementar el renderizado en el código de tu aplicación móvil para mostrárselo a los usuarios. Como Remote Config ofrece flexibilidad adaptada a tus necesidades, tú decides qué incluir y cómo se ve la vista del paywall. Proporcionamos un método para obtener la configuración remota, dándote la autonomía de mostrar tu paywall personalizado configurado a través de Remote Config.
Obtener el Remote Config de un paywall y mostrarlo
Para obtener el Remote Config de un paywall, accede a la propiedad remoteConfig y extrae los valores que necesitas.
try {
const paywall = await adapty.getPaywall({
placementId: 'YOUR_PLACEMENT_ID',
params: {
fetchPolicy: 'reload_revalidating_cache_data', // Load from server, fallback to cache
loadTimeoutMs: 5000 // 5 second timeout
}
});
const headerText = paywall.remoteConfig?.data?.['header_text'];
} catch (error) {
console.error('Failed to fetch paywall:', 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 distintos tamaños de pantalla y orientaciones de móvil, ofreciendo una experiencia fluida y fácil de usar en cualquier dispositivo.
Asegúrate de registrar el evento de visualización del paywall tal como se describe a continuación, para que los análisis de Adapty puedan capturar información para los embudos y las pruebas A/B.
Una vez que hayas terminado de mostrar el paywall, continúa configurando el 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 respaldo se mostrará al usuario cuando no haya conexión a internet ni caché disponible, garantizando una experiencia fluida incluso en esas situaciones.
Seguimiento de 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 paywalls 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 en el Paywall Builder.
try {
await adapty.logShowPaywall({ paywall });
} catch (error) {
console.error('Failed to log paywall view:', error);
}Parámetros de la solicitud:
| Parámetro | Presencia | Descripción |
|---|---|---|
| paywall | requerido | Un objeto AdaptyPaywall. |