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

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

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

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

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

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

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

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

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

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

try {
  final flow = await Adapty().getFlow(placementId: 'YOUR_PLACEMENT_ID');
  // запрошенный флоу/пейвол
} on AdaptyError catch (adaptyError) {
  // обработка ошибки
} catch (e) {
  // обработка ошибки
}

Параметры:

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

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

Если плейсмент был создан в Flow & Paywall Builder или в старом Paywall Builder, Adapty самостоятельно отрисовывает UI — свойство hasViewConfiguration полученного флоу равно true. Создайте представление с помощью createFlowView, затем отобразите флоу или пейвол. Если плейсмент представляет собой кастомный пейвол без UI из Builder (hasViewConfiguration равно false), обработайте его как пейвол на основе Remote Config.

try {
  final view = await AdaptyUI().createFlowView(flow: flow);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Параметры:

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

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

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

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

try {
  final flow = await Adapty().getFlowForDefaultAudience(placementId: 'YOUR_PLACEMENT_ID');
  // the requested flow/paywall
} on AdaptyError catch (adaptyError) {
  // handle error
} catch (e) {
  // handle unknown error
}

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

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

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

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

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

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

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

final customAssets = {
    // Show a local image using a custom ID
    'custom_image': AdaptyCustomAsset.localImageAsset(
        assetId: 'assets/images/image_name.png',
    ),

    // Show a local video with a preview image
    'hero_video': AdaptyCustomAsset.localVideoAsset(
        assetId: 'assets/videos/custom_video.mp4',
    ),
};

try {
  final view = await AdaptyUI().createFlowView(
    flow: flow,
    customAssets: customAssets,
  );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Настройка таймеров, определяемых разработчиком

Чтобы использовать кастомные таймеры в мобильном приложении, передайте карту customTimers в метод createFlowView. Каждый ключ карты — это идентификатор таймера, а значение — объект DateTime, определяющий момент окончания таймера. Пример:

try {
  final view = await AdaptyUI().createFlowView(
    flow: flow,
    customTimers: {
      'CUSTOM_TIMER_6H': DateTime.now().add(const Duration(seconds: 3600 * 6)),
      'CUSTOM_TIMER_NY': DateTime(2027, 1, 1), // New Year 2027
    },
  );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

В этом примере CUSTOM_TIMER_NY и CUSTOM_TIMER_6H — это Timer ID таймеров, заданных разработчиком в дашборде Adapty. Словарь customTimers обеспечивает динамическое обновление каждого таймера с нужным значением. Например:

• CUSTOM_TIMER_NY: время, оставшееся до конца отсчёта таймера, например до Нового года.
• CUSTOM_TIMER_6H: время, оставшееся в 6-часовом периоде, который начался, когда пользователь открыл флоу.

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

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

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

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

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

Для получения пейвола используйте метод getPaywall:

try {
  final paywall = await Adapty().getPaywall(placementId: "YOUR_PLACEMENT_ID", locale: "en");
  // the requested paywall
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}

Параметры:

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

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

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

try {
  final view = await AdaptyUI().createPaywallView(
        paywall: paywall,
      );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

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

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

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

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

try {
    final paywall = await Adapty().getPaywallForDefaultAudience(placementId: 'YOUR_PLACEMENT_ID');
} on AdaptyError catch (adaptyError) {
    // handle error
} catch (e) {
    // handle unknown error
}

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

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

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

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

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

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

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

final customAssets = {
    // Show a local image using a custom ID
    'custom_image': AdaptyCustomAsset.localImageAsset(
        assetId: 'assets/images/image_name.png',
    ),

    // Show a local video with a preview image
    'hero_video': AdaptyCustomAsset.localVideoAsset(
        assetId: 'assets/videos/custom_video.mp4',
    ),
};

try {
  final view = await AdaptyUI().createPaywallView(
    paywall: paywall,
    customAssets: customAssets,
  );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Настройка таймеров, определяемых разработчиком

Чтобы использовать пользовательские таймеры в мобильном приложении, передайте словарь customTimers в метод createPaywallView. Каждый ключ словаря — это идентификатор таймера, а значение — объект DateTime, определяющий момент окончания таймера. Пример:

try {
  final view = await AdaptyUI().createPaywallView(
        paywall: paywall,
        customTimers: {
          'CUSTOM_TIMER_6H': DateTime.now().add(const Duration(seconds: 3600 * 6)),
          'CUSTOM_TIMER_NY': DateTime(2025, 1, 1), // New Year 2025
        },
      );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

В этом примере CUSTOM_TIMER_NY и CUSTOM_TIMER_6H — это Timer ID пользовательских таймеров, которые вы задали в дашборде Adapty. Словарь customTimers гарантирует, что приложение динамически обновит каждый таймер с нужным значением. Например:

• CUSTOM_TIMER_NY: время до окончания таймера, например до Нового года.
• CUSTOM_TIMER_6H: оставшееся время в 6-часовом периоде, который начался, когда пользователь открыл пейвол.