Получение пейволов и продуктов для пейволов с Remote Config в React Native SDK

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

Хотите увидеть реальный пример интеграции Adapty SDK в мобильное приложение? Посмотрите наши примеры приложений — они демонстрируют полную настройку: отображение пейволов, совершение покупок и другие базовые функции.

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

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

Получение информации о флоу

В Adapty продукт представляет собой комбинацию продуктов из App Store и Google Play. Эти кросс-платформенные продукты интегрируются во флоу и пейволы, позволяя показывать их в определённых плейсментах мобильного приложения.

Чтобы отобразить продукты, нужно получить AdaptyFlow из одного из ваших плейсментов с помощью метода getFlow.

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

try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlow(id);
    // the requested flow
} catch (error) {
    // handle the error
}

Параметр Наличие Описание

placementId обязательный Идентификатор плейсмента. Это значение вы указывали при создании плейсмента в дашборде Adapty.

Параметр	Наличие	Описание
placementId	обязательный	Идентификатор плейсмента. Это значение вы указывали при создании плейсмента в дашборде Adapty.
fetchPolicy	по умолчанию: `.reloadRevalidatingCacheData`	По умолчанию SDK пытается загрузить данные с сервера и возвращает кешированные данные в случае сбоя. Мы рекомендуем этот вариант, так как он гарантирует, что пользователи всегда получают актуальные данные. Однако если вы считаете, что у ваших пользователей нестабильный интернет, рассмотрите использование `.returnCacheDataElseLoad`: оно возвращает кешированные данные, если они есть. В этом случае пользователи могут не получать самые свежие данные, зато загрузка будет быстрее независимо от качества соединения. Кеш регулярно обновляется, поэтому его безопасно использовать в течение сессии, чтобы избежать лишних сетевых запросов. Обратите внимание: кеш сохраняется при перезапуске приложения и очищается только при его переустановке или принудительной очистке. Adapty SDK хранит флоу и пейволы в двух слоях: регулярно обновляемый кеш, описанный выше, и резервные пейволы. Также используется CDN для более быстрой загрузки флоу и пейволов, а также отдельный резервный сервер на случай недоступности CDN. Эта система обеспечивает получение последней версии флоу и надёжность работы даже при плохом интернет-соединении.
loadTimeoutMs	по умолчанию: 5 сек	Это значение ограничивает таймаут для данного метода. По истечении таймаута будут возвращены кешированные данные или локальный резервный вариант. Обратите внимание: в редких случаях метод может завершиться с небольшой задержкой относительно значения, указанного в `loadTimeout`, так как операция может включать несколько запросов под капотом.

fetchPolicy

по умолчанию: .reloadRevalidatingCacheData

По умолчанию SDK пытается загрузить данные с сервера и возвращает кешированные данные в случае сбоя. Мы рекомендуем этот вариант, так как он гарантирует, что пользователи всегда получают актуальные данные.

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

Обратите внимание: кеш сохраняется при перезапуске приложения и очищается только при его переустановке или принудительной очистке.

Adapty SDK хранит флоу и пейволы в двух слоях: регулярно обновляемый кеш, описанный выше, и резервные пейволы. Также используется CDN для более быстрой загрузки флоу и пейволов, а также отдельный резервный сервер на случай недоступности CDN. Эта система обеспечивает получение последней версии флоу и надёжность работы даже при плохом интернет-соединении.

loadTimeoutMs

по умолчанию: 5 сек

Это значение ограничивает таймаут для данного метода. По истечении таймаута будут возвращены кешированные данные или локальный резервный вариант.

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

В v4 метод getFlow больше не принимает параметр locale. Для кастомных пейволов все доступные локали возвращаются в Remote Config флоу (flow.remoteConfigs) — выберите ту, которая соответствует настройкам устройства или приложения пользователя.

Не указывайте ID продуктов жёстко в коде! Поскольку флоу настраиваются удалённо, доступные продукты, их количество и специальные предложения (например, бесплатные пробные периоды) могут меняться со временем. Убедитесь, что ваш код обрабатывает подобные сценарии. Например, если изначально вы получаете 2 продукта, приложение должно отображать именно 2 продукта. Но если позднее вы получите 3 продукта, приложение должно отобразить все 3 без каких-либо изменений в коде. Единственное, что нужно указать жёстко, — это ID плейсмента.

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

Параметр	Описание
Flow	Объект `AdaptyFlow`, содержащий плейсмент, идентификаторы (`id`, `variationId`), название, варианты пейвола (`paywalls`) и массив `remoteConfigs` (по одной записи на каждую настроенную локаль). Чтобы получить продукты для флоу, вызовите `getPaywallProducts(flow)`.

Получение продуктов

Получив флоу, вы можете запросить массив продуктов, соответствующих ему:

try {
    // ...flow
    const products = await adapty.getPaywallProducts(flow);
  // the requested products list
} catch (error) {
    // handle the error
}

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

Parameter	Description
Products	Список объектов `AdaptyPaywallProduct` с: идентификатором продукта, названием продукта, ценой, валютой, длительностью подписки и рядом других свойств.
При реализации собственного дизайна пейвола вам, скорее всего, потребуется доступ к свойствам объекта `AdaptyPaywallProduct`. Ниже показаны наиболее часто используемые свойства, но полный список всех доступных свойств см. в документации по ссылке.
Свойство	Описание
-------------------------	---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Title	Чтобы отобразить название продукта, используйте `product.localizedTitle`. Обратите внимание, что локализация основана на стране стора, выбранной пользователем, а не на языке устройства.
Price	Чтобы отобразить локализованную цену, используйте `product.price?.localizedString`. Локализация основана на настройках языка устройства. Цену в виде числа можно получить через `product.price?.amount` — значение будет указано в местной валюте. Символ валюты доступен через `product.price?.currencySymbol`.
Subscription Period	Чтобы отобразить период подписки (например, неделя, месяц, год и т. д.), используйте `product.subscription?.localizedSubscriptionPeriod`. Локализация основана на настройках языка устройства. Для программного получения периода подписки используйте `product.subscription?.subscriptionPeriod`. Через свойство `unit` можно узнать единицу периода: `'day'`, `'week'`, `'month'`, `'year'` или `'unknown'`. Свойство `numberOfUnits` возвращает количество единиц периода. Например, для квартальной подписки в `unit` будет `'month'`, а в `numberOfUnits` — `3`.
Introductory Offer	Чтобы показать бейдж или другой индикатор наличия introductory offer, проверьте свойство `product.subscription?.offer?.phases`. Это список, который может содержать до двух фаз скидки: фазу бесплатного пробного периода и фазу вводной цены. В каждом объекте фазы доступны следующие полезные свойства: • `paymentMode` — строка со значениями `'free_trial'`, `'pay_as_you_go'`, `'pay_up_front'` и `'unknown'`. Бесплатные пробные периоды имеют тип `'free_trial'`. • `price` — сниженная цена в виде числа. Для бесплатных пробных периодов ожидайте значение `0`. • `localizedNumberOfPeriods` — локализованная строка, описывающая продолжительность предложения. Например, для трёхдневного пробного периода здесь будет `'3 days'`. • `subscriptionPeriod` — позволяет получить отдельные параметры периода предложения. Работает так же, как описано в предыдущем разделе. • `localizedSubscriptionPeriod` — форматированный период подписки для скидки в соответствии с языковыми настройками устройства.

Ускорьте загрузку флоу с помощью флоу аудитории по умолчанию

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

Почему мы рекомендуем использовать getFlow

Метод getFlowForDefaultAudience имеет ряд существенных недостатков:

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

try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlowForDefaultAudience(id);
  // the requested flow
} catch (error) {
    // handle the error
}

Параметр Наличие Описание

placementId обязательный Идентификатор плейсмента. Это значение вы указали при создании плейсмента в дашборде Adapty.

fetchPolicy

по умолчанию: .reloadRevalidatingCacheData

По умолчанию SDK пытается загрузить данные с сервера и возвращает кэшированные данные в случае сбоя. Мы рекомендуем этот вариант, так как он гарантирует, что пользователи всегда получают самые актуальные данные.

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

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

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

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

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

Получение информации о пейволе

В Adapty продукт объединяет товары из App Store и Google Play. Эти кроссплатформенные продукты интегрируются в пейволы, позволяя показывать их в нужных плейсментах мобильного приложения.

Чтобы отобразить продукты, нужно получить пейвол из одного из ваших плейсментов с помощью метода getPaywall.

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

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(id, locale);
    // the requested paywall
} catch (error) {
    // handle the error
}

Параметр	Наличие	Описание
placementId	обязательный	Идентификатор плейсмента. Это значение вы указали при создании плейсмента в дашборде Adapty.
locale	необязательный по умолчанию: `en`	Идентификатор локализации пейвола. Ожидается языковой код, состоящий из одного или нескольких подтегов, разделённых символом минус (-). Первый подтег обозначает язык, второй — регион. Например: `en` — английский, `pt-br` — бразильский португальский. Подробнее о кодах локалей и рекомендациях по их использованию см. в разделе Локализации и коды локалей.
fetchPolicy	по умолчанию: `.reloadRevalidatingCacheData`	По умолчанию SDK пытается загрузить данные с сервера и возвращает кешированные данные в случае ошибки. Мы рекомендуем этот вариант, поскольку он гарантирует, что пользователи всегда получают актуальные данные. Если вы считаете, что у ваших пользователей нестабильное интернет-соединение, рассмотрите использование `.returnCacheDataElseLoad` — оно возвращает кешированные данные, если они есть. В этом случае пользователи могут не получить самые свежие данные, зато загрузка будет быстрее вне зависимости от качества соединения. Кеш регулярно обновляется, поэтому его безопасно использовать в течение сессии, чтобы избежать лишних сетевых запросов. Обратите внимание: кеш сохраняется после перезапуска приложения и очищается только при его переустановке или вручную. Adapty SDK хранит пейволы на двух уровнях: регулярно обновляемый кеш, описанный выше, и резервные пейволы. Для более быстрой загрузки пейволов используется CDN, а на случай его недоступности — отдельный резервный сервер. Эта система обеспечивает получение актуальных версий пейволов и надёжную работу даже при нестабильном интернет-соединении.
loadTimeoutMs	по умолчанию: 5 сек	Это значение ограничивает тайм-аут метода. По истечении тайм-аута возвращаются кешированные данные или локальный резервный вариант. Обратите внимание: в редких случаях тайм-аут метода может наступить чуть позже указанного в `loadTimeout`, поскольку операция может включать несколько запросов под капотом.
Не задавайте идентификаторы продуктов жёстко в коде! Поскольку пейволы настраиваются удалённо, доступные продукты, их количество и специальные предложения (например, бесплатные пробные периоды) могут меняться со временем. Убедитесь, что ваш код учитывает эти сценарии.

Например, если изначально вы получаете 2 продукта, приложение должно отображать эти 2 продукта. Но если позже вы получите 3 продукта, приложение должно показать все 3 без каких-либо изменений в коде. Единственное, что нужно задать жёстко, — это идентификатор плейсмента.

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

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

Получение продуктов

Получив пейвол, вы можете запросить массив продуктов, соответствующих ему:

try {
    // ...paywall
    const products = await adapty.getPaywallProducts(paywall);
  // the requested products list
} catch (error) {
    // handle the error
}

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

Параметр	Описание
Products	Список объектов `AdaptyPaywallProduct` с идентификатором продукта, названием продукта, ценой, валютой, длительностью подписки и рядом других свойств.
При реализации собственного дизайна пейвола вам, скорее всего, понадобятся свойства объекта `AdaptyPaywallProduct`. Ниже приведены наиболее часто используемые свойства; полный список доступных свойств смотрите в документации по ссылке.
Свойство	Описание
-------------------------	-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Title	Чтобы отобразить название продукта, используйте `product.localizedTitle`. Локализация основана на стране стора, выбранной пользователем, а не на локали устройства.
Price	Чтобы отобразить цену в локализованном формате, используйте `product.price?.localizedString`. Локализация основана на локали устройства. Также можно получить цену как число через `product.price?.amount` — значение будет в местной валюте. Чтобы получить символ валюты, используйте `product.price?.currencySymbol`.
Subscription Period	Чтобы отобразить период (например, неделя, месяц, год и т. д.), используйте `product.subscription?.localizedSubscriptionPeriod`. Локализация основана на локали устройства. Для программного получения периода подписки используйте `product.subscription?.subscriptionPeriod`. Через свойство `unit` можно узнать единицу периода: `'day'`, `'week'`, `'month'`, `'year'` или `'unknown'`. Свойство `numberOfUnits` возвращает количество единиц периода. Например, для квартальной подписки в `unit` будет `'month'`, а в `numberOfUnits` — `3`.
Introductory Offer	Чтобы показать бейдж или другой индикатор наличия introductory offer, проверьте свойство `product.subscription?.offer?.phases`. Это список, который может содержать до двух фаз скидки: фаза бесплатного пробного периода и фаза вводной цены. Каждый объект фазы содержит следующие полезные свойства: • `paymentMode`: строка со значениями `'free_trial'`, `'pay_as_you_go'`, `'pay_up_front'` и `'unknown'`. Бесплатные пробные периоды имеют тип `'free_trial'`. • `price`: сниженная цена в виде числа. Для бесплатных пробных периодов здесь будет `0`. • `localizedNumberOfPeriods`: строка, локализованная в соответствии с локалью устройства, описывающая длительность предложения. Например, для трёхдневного пробного периода в этом поле будет `'3 days'`. • `subscriptionPeriod`: альтернативный способ получить детали периода предложения — работает так же, как описано в предыдущем разделе. • `localizedSubscriptionPeriod`: отформатированный период подписки скидки в соответствии с локалью пользователя.

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

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

Почему мы рекомендуем использовать getPaywall

Метод getPaywallForDefaultAudience имеет ряд существенных недостатков:

Потенциальные проблемы с обратной совместимостью: если вам нужно показывать разные пейволы для разных версий приложения (текущей и будущих), могут возникнуть сложности. Придётся либо проектировать пейволы с поддержкой текущей (устаревшей) версии, либо мириться с тем, что пользователи на текущей (устаревшей) версии могут столкнуться с проблемами при отображении пейволов.
Потеря таргетинга: все пользователи будут видеть один и тот же пейвол, настроенный для аудитории All Users, — это означает отказ от персонализированного таргетинга (в том числе по странам, маркетинговой атрибуции или собственным пользовательским атрибутам). Если вы готовы принять эти ограничения ради более быстрого получения пейвола, используйте метод getPaywallForDefaultAudience следующим образом. В противном случае используйте getPaywall, описанный выше.

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}

Метод getPaywallForDefaultAudience доступен начиная с React Native SDK версии 2.11.2.

Параметр Наличие Описание

locale

опциональный

по умолчанию: en

Идентификатор локализации пейвола. Ожидается, что этот параметр будет языковым кодом, состоящим из одного или нескольких подтегов, разделённых символом «минус» (-). Первый подтег обозначает язык, второй — регион.

Пример: en означает английский, pt-br — бразильский португальский.

Подробнее о кодах локалей и рекомендуемом подходе к их использованию см. в разделе Локализации и коды локалей.

fetchPolicy

по умолчанию: .reloadRevalidatingCacheData

По умолчанию SDK пытается загрузить данные с сервера и возвращает кешированные данные в случае ошибки. Мы рекомендуем этот вариант, так как он гарантирует, что пользователи всегда получают актуальные данные.

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

Обратите внимание: кеш сохраняется при перезапуске приложения и очищается только при его переустановке или вручную.