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

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

Перед тем как начать показывать пейволы в мобильном приложении (нажмите, чтобы раскрыть)

1. Создайте продукты в дашборде Adapty.
2. Создайте пейвол и добавьте в него продукты в дашборде Adapty.
3. Создайте плейсменты и добавьте в них пейвол в дашборде Adapty.
4. Установите Adapty SDK в мобильное приложение.

Получение пейвола, созданного с помощью 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
}

Параметры:

Параметр	Наличие	Описание
placementId	обязательный	Идентификатор нужного плейсмента. Это значение вы указали при создании плейсмента в дашборде Adapty.
locale	необязательный по умолчанию: en	Идентификатор локализации пейвола. Ожидается языковой код, состоящий из одного или двух подтегов, разделённых символом минус (-). Первый подтег — язык, второй — регион. Пример: en — английский, pt-br — бразильский португальский. Подробнее о кодах локалей и рекомендациях по их использованию см. в разделе Локализации и коды локалей.
params	необязательный	Дополнительные параметры для получения пейвола.

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

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

Параметр	Описание
Paywall	Объект AdaptyPaywall со списком ID продуктов, идентификатором пейвола, Remote Config и рядом других свойств.

Получение конфигурации отображения пейвола, созданного с помощью 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
}

Параметры:

Параметр	Наличие	Описание
paywall	обязательный	Объект AdaptyPaywall для получения контроллера нужного пейвола.
customTags	необязательный	Словарь кастомных тегов и их значений. Кастомные теги служат заполнителями в контенте пейвола и динамически заменяются конкретными строками для персонализации. Подробнее см. в разделе Кастомные теги в Paywall Builder.
prefetchProducts	необязательный	Включите для оптимизации времени отображения продуктов на экране. При значении true AdaptyUI автоматически загрузит необходимые продукты. По умолчанию: false.

Получив представление, отобразите пейвол.

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

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

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

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

Параметр	Наличие	Описание
placementId	обязательный	Идентификатор плейсмента. Это значение вы указали при создании плейсмента в дашборде Adapty.
locale	необязательный по умолчанию: en	Идентификатор локализации пейвола. Ожидается языковой код, состоящий из одного или нескольких подтегов, разделённых символом минус (-). Первый подтег — язык, второй — регион. Пример: en — английский, pt-br — бразильский португальский. Подробнее о кодах локалей и рекомендациях по их использованию см. в разделе Локализации и коды локалей.
params	необязательный	Дополнительные параметры для получения пейвола.

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

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

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

Для остальных изображений и видео необходимо задать кастомный ID в дашборде 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 });