Получение флоу и пейволов — Capacitor

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

Обратите внимание, что этот раздел касается флоу и пейволов, созданных в билдерах Adapty. Если вы реализуете пейволы вручную, обратитесь к разделу Получение пейволов и продуктов для пейволов с Remote Config в мобильном приложении.

Прежде чем начать

Вам понадобится:

• Продукты в дашборде Adapty: Создайте продукты.
• Флоу с продуктами: Создайте его в Flow & Paywall Builder и назначьте продукты.
• Плейсмент: Создайте плейсмент и назначьте ему флоу.
• Установленный SDK: Следуйте руководству по установке SDK для Capacitor.

Получение флоу/пейвола

Если вы создали флоу или пейвол в билдере, вам не нужно заботиться о его отображении в коде мобильного приложения — такой флоу или пейвол уже содержит всё необходимое: что показывать и как показывать. Тем не менее, вам нужно получить его ID через плейсмент, конфигурацию представления, а затем отобразить его в мобильном приложении.

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

Чтобы получить флоу или пейвол, используйте метод getFlow:

try {
  const flow = await adapty.getFlow({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // запрошенный флоу/пейвол
} catch (error) {
  // обработка ошибки
}

Параметры:

Не хардкодьте идентификаторы продуктов. Единственный ID, который стоит хардкодить, — это ID плейсмента. Флоу и пейволы настраиваются удалённо, поэтому количество продуктов и доступных офферов может меняться в любой момент. Ваше приложение должно обрабатывать эти изменения динамически: если сегодня пейвол возвращает два продукта, а завтра три — отображайте все без изменений в коде.

Параметры ответа:

Получение конфигурации представления

Если плейсмент был создан в Flow & Paywall Builder или old Paywall Builder, Adapty отрисовывает UI за вас. Создайте представление с помощью createFlowView, затем покажите флоу или пейвол. Если плейсмент — это кастомный пейвол без Builder UI, обработайте его как пейвол с Remote Config.

Флаг hasViewConfiguration на флоу позволяет различить эти два случая до создания представления:

if (flow.hasViewConfiguration) {
  const view = await createFlowView(flow);
  await view.present();
} else {
  // Render your own screen from flow.remoteConfigs and flow.paywalls
}

В Capacitor SDK вызывайте createFlowView напрямую — предварительно получать конфигурацию представления не нужно.

try {
  const view = await createFlowView(flow);
} catch (error) {
  // handle the error
}

Параметры:

Когда вью готово, отобразите флоу/пейвол.

Получите флоу или пейвол для дефолтной аудитории, чтобы загрузить его быстрее

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

Чтобы решить эту проблему, можно воспользоваться методом getFlowForDefaultAudience, который получает флоу или пейвол указанного плейсмента для аудитории All Users. Однако важно понимать, что рекомендуемый подход — получать флоу или пейвол с помощью метода getFlow, как описано в разделе Получение флоу/пейвола выше.

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

Настройка ресурсов

Чтобы настроить изображения и видео в вашем флоу/пейволе, реализуйте пользовательские ресурсы.

Hero-изображения и видео имеют предопределённые идентификаторы: hero_image и hero_video. В бандле пользовательских ресурсов вы обращаетесь к этим элементам по их идентификаторам и настраиваете их поведение.

Для остальных изображений и видео необходимо задать пользовательский идентификатор в дашборде Adapty.

Например, вы можете:

• Показывать разные изображения или видео разным пользователям.
• Показывать локальное превью-изображение, пока загружается основное удалённое.
• Показывать превью-изображение перед воспроизведением видео.

Вот пример того, как можно передать пользовательские ресурсы через простой словарь:

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

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

Обратите внимание, что эта тема посвящена пейволам, настроенным через Paywall Builder. Подробнее о получении пейволов с Remote Config см. в разделе Получение пейволов и продуктов для пейволов с Remote Config в вашем мобильном приложении.

Получение пейвола, созданного в Paywall Builder

Если вы создали пейвол в Paywall Builder, вам не нужно самостоятельно реализовывать его отображение в коде мобильного приложения. Такой пейвол содержит как описание того, что нужно показать, так и то, как именно это отображается. Тем не менее, вам нужно получить его ID через плейсмент, конфигурацию отображения, а затем показать пейвол в приложении.

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

Чтобы получить пейвол, используйте метод getPaywall:

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

Параметры:

Не хардкодьте идентификаторы продуктов. Единственный ID, который стоит хардкодить — это ID плейсмента. Пейволы настраиваются удалённо, поэтому количество продуктов и доступных офферов может меняться в любой момент. Ваше приложение должно обрабатывать эти изменения динамически: если сегодня пейвол возвращает два продукта, а завтра три — отображайте все без изменений в коде.

Параметры ответа:

Получение конфигурации представления пейвола, созданного в Paywall Builder

После получения пейвола проверьте, содержит ли он ViewConfiguration — это означает, что пейвол был создан с помощью Paywall Builder. Это поможет вам определить, как отображать пейвол. Если ViewConfiguration присутствует, обрабатывайте его как пейвол Paywall Builder; если нет — обработайте его как пейвол с Remote Config.

В Capacitor SDK вызывайте метод createPaywallView напрямую, без предварительного получения конфигурации представления вручную.

if (paywall.hasViewConfiguration) {
  try {
    const view = await createPaywallView(paywall);
  } catch (error) {
    // handle the error
  }
} else {
  // use your custom logic
}

Параметры:

Когда у вас есть представление, покажите пейвол.

Получите пейвол для аудитории по умолчанию, чтобы ускорить загрузку

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

Чтобы решить эту задачу, используйте метод getPaywallForDefaultAudience, который получает пейвол указанного плейсмента для аудитории All Users. Однако важно понимать, что рекомендуемый подход — получать пейвол через метод getPaywall, как описано в разделе Получение информации о пейволе выше.

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

Настройка ассетов

Чтобы кастомизировать изображения и видео в пейволе, используйте пользовательские ассеты.

У hero-изображений и видео есть предопределённые идентификаторы: hero_image и hero_video. В бандле пользовательских ассетов вы обращаетесь к этим элементам по их идентификаторам и настраиваете их поведение.

Для остальных изображений и видео нужно задать пользовательский идентификатор в дашборде Adapty.

Например, вы можете:

• Показывать разные изображения или видео разным пользователям.
• Показывать локальное превью, пока загружается основное удалённое изображение.
• Показывать изображение-превью перед воспроизведением видео.

Вот пример того, как можно передать пользовательские ресурсы через простой словарь:

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