Отображение пейвола на основе Remote Config в Capacitor SDK

Если вы настроили флоу с помощью Remote Config, вам нужно реализовать рендеринг в коде мобильного приложения, чтобы отображать его пользователям. Поскольку Remote Config предоставляет гибкость под ваши нужды, вы сами определяете, что в него включить и как будет выглядеть ваш флоу. Мы предоставляем метод для получения Remote Config — так что вы полностью управляете тем, как отображать настроенный через Remote Config флоу.

Получение Remote Config флоу и его отображение

В v4 флоу содержит по одному элементу AdaptyRemoteConfig на каждый настроенный язык в массиве remoteConfigs. Выберите язык, соответствующий предпочтениям пользователя, и считайте нужные значения из его поля 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);
}

На этом этапе, получив все необходимые значения, можно переходить к рендерингу и сборке визуально привлекательной страницы. Убедитесь, что дизайн адаптирован под различные экраны мобильных телефонов и ориентации, обеспечивая удобный и понятный пользовательский опыт на всех устройствах.

Обязательно зафиксируйте событие просмотра пейвола, как описано ниже, чтобы аналитика Adapty могла собирать данные для воронок и A/B-тестов.

После отображения флоу переходите к настройке процесса покупки. Когда пользователь совершает покупку, просто вызовите .makePurchase() с продуктом из вашего флоу. Подробнее о методе .makePurchase() читайте в разделе Совершение покупок.

Рекомендуем создать резервный пейвол. Он будет отображаться пользователю при отсутствии интернет-соединения или кэша, обеспечивая бесперебойную работу даже в таких ситуациях.

Отслеживание событий просмотра пейвола

Adapty помогает измерять эффективность ваших флоу. Данные о покупках собираются автоматически, однако логирование просмотров флоу требует вашего участия — только вы знаете, когда пользователь видит флоу.

Чтобы залогировать событие просмотра флоу, вызовите .logShowFlow({ flow }) — это отразится в метриках вашего пейвола в воронках и A/B-тестах.

Вызывать .logShowFlow({ flow }) не нужно, если вы отображаете флоу или пейволы, отрисованные с помощью Flow Builder или Paywall Builder. В этих случаях Adapty отслеживает просмотры автоматически.


await adapty.logShowFlow({ flow });

Параметры запроса:

Параметр	Наличие	Описание
flow	обязательный	Объект `AdaptyFlow`, полученный через `adapty.getFlow({ placementId })`.

Если вы настроили пейвол с помощью Remote Config, вам нужно реализовать рендеринг в коде мобильного приложения, чтобы показывать его пользователям. Поскольку Remote Config гибко подстраивается под ваши потребности, вы сами определяете, что включить и как будет выглядеть пейвол. Мы предоставляем метод для получения Remote Config — всё остальное в ваших руках.

Получение Remote Config пейвола и его отображение

Чтобы получить Remote Config пейвола, обратитесь к свойству remoteConfig и извлеките нужные значения.


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);
}

На этом этапе, получив все необходимые значения, можно приступать к отрисовке и сборке привлекательной страницы. Убедитесь, что дизайн адаптируется под различные экраны и ориентации мобильных устройств, обеспечивая удобный пользовательский опыт на разных девайсах.

Не забудьте зафиксировать событие просмотра пейвола, как описано ниже — это позволяет аналитике Adapty собирать данные для воронок и A/B-тестов.

После того как пейвол отображён, переходите к настройке процесса покупки. Когда пользователь совершает покупку, просто вызовите .makePurchase() с продуктом из вашего пейвола. Подробнее о методе .makePurchase() читайте в разделе Совершение покупок.

Рекомендуем создать резервный пейвол. Он будет показан пользователю при отсутствии интернета или кэша, что обеспечит бесперебойную работу приложения в таких ситуациях.

Отслеживание событий просмотра пейвола

Adapty помогает измерять эффективность ваших пейволов. Данные о покупках мы собираем автоматически, но логирование просмотров пейвола требует вашего участия — только вы знаете, когда пользователь видит пейвол.

Чтобы зафиксировать событие просмотра пейвола, вызовите .logShowPaywall(paywall) — это отразится в метриках пейвола в воронках и A/B-тестах.

Вызывать .logShowPaywall(paywall) не нужно, если вы показываете пейволы, созданные в Paywall Builder.


try {
  await adapty.logShowPaywall({ paywall });
} catch (error) {
  console.error('Failed to log paywall view:', error);
}

Параметры запроса:

Параметр	Обязательность	Описание
paywall	обязательный	Объект `AdaptyPaywall`.