Переменные

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

Чтобы открыть панель переменных, нажмите значок { } на левой панели. Панель содержит три вкладки:

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

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

Создание кастомной переменной

  1. На панели переменных нажмите +.
  2. Введите имя переменной.
  3. Выберите тип: String, Number или Boolean.
  4. Задайте начальное значение — это значение, которое переменная принимает при запуске флоу.
  5. Нажмите Create variable.
Tip

Используйте точки в именах, чтобы группировать связанные переменные — например, user.score или user.goal.

Создание кастомной переменной

Обновление переменной через взаимодействие

Вы можете обновить значение переменной во время выполнения, добавив действие Set variable к любому элементу.

  1. Выберите элемент на холсте.
  2. На вкладке Interactions нажмите Add trigger.
  3. Выберите On tap и нажмите Add action. В выпадающем списке Action type выберите Set variable.
  4. Нажмите Add variable. Выберите переменную и задайте новое значение.
Tip

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

Обновление переменной через взаимодействие

Переменные продукта

Переменные продукта берут локализованные данные напрямую из сторов. Используйте их в текстовых полях для отображения локализованных цен, названий и деталей офферов, а также в условиях для показа или скрытия контента в зависимости от доступности оффера.

ПеременнаяОписаниеПример
prod_titleЛокализованное название продуктаPremium Subscription
prod_priceЛокализованная цена за один расчётный период$9.99
prod_price_per_dayЦена подписки в пересчёте на один день. Пусто для разовых покупок.$0.33
prod_price_per_weekЦена подписки в пересчёте на одну неделю. Пусто для разовых покупок.$2.33
prod_price_per_monthЦена подписки в пересчёте на один месяц. Пусто для разовых покупок.$9.99
prod_price_per_yearЦена подписки в пересчёте на один год. Пусто для разовых покупок.$119.88
offer_priceЛокализованная цена introductory offer или promotional offer. Пусто, если пользователь не имеет права ни на одно предложение.$0.99
offer_billing_periodЛокализованный расчётный период предложения. Совпадает с offer_full_duration для trial и pay-upfront предложений. Пусто, если пользователь не имеет права.1 week
offer_full_durationЛокализованная полная длительность предложения. Пусто, если пользователь не имеет права.1 month
is_free_trialВозвращает true, если пользователь имеет право на предложение с бесплатным пробным периодом.true
is_pay_up_frontВозвращает true, если пользователь имеет право на предложение с единовременной оплатой.true
is_pay_as_you_goВозвращает true, если пользователь имеет право на предложение с поэтапной оплатой.true

Переменные prod_price_per_* конвертируют цену из расчётного периода продукта в тот период, который вы указываете. При конвертации используются фиксированные длины периодов, а не календарные даты:

  • 1 неделя = 7 дней
  • 1 месяц = 30 дней
  • 1 год = 12 месяцев, или 365 дней

Для ежемесячной подписки за $59.99 переменная prod_price_per_week вернёт $14.00: $59.99 × 7 ÷ 30 = $13.9977 — округлено для отображения. Поскольку в месяце 30 ÷ 7 ≈ 4.2857 недели, умножение недельного значения на 4 не вернёт исходную цену.

Tip

Используйте is_free_trial, is_pay_up_front и is_pay_as_you_go с условной видимостью, чтобы показывать или скрывать элементы в зависимости от того, какой оффер доступен пользователю. Например, показывайте таймлайн бесплатного пробного периода только когда is_free_trial равно true.

Значения переменных оффера зависят от типа оффера, на который имеет право пользователь. Для примера рассмотрим недельную подписку «Premium Subscription» за $5 с тремя возможными офферами:

  • Pay As You Go: Первые 3 недели за $3 (списывается еженедельно), затем $5/неделю.
  • Pay Up Front: Первые 3 недели за $8 (списывается сразу), затем $5/неделю.
  • Free Trial: Первая неделя бесплатно, затем $5/неделю.

В этом примере prod_title возвращает «Premium Subscription», а prod_price возвращает $5. Значения переменных оффера зависят от того, на какой оффер имеет право пользователь:

ПеременнаяPay As You GoPay UpfrontFree Trial
offer_price$3$8$0
offer_billing_period1 неделя3 недели1 неделя
offer_full_duration3 недели3 недели1 неделя
Для предложений Pay Upfront и Free Trial offer_billing_period и offer_full_duration возвращают одинаковое значение. Для Pay As You Go они различаются, поскольку расчётный период составляет одну неделю, а полная длительность — три недели.

Все эти значения поступают из стора, поэтому предпросмотр в билдере разрешает только часть из них: значения offer остаются неразрешёнными на канвасе, а is_free_trial, is_pay_up_front и is_pay_as_you_go соответствуют офферу, выбранному на карточке продукта. Чтобы просматривать каждый тип оффера в процессе сборки, см. Предпросмотр продуктов и офферов.

Note

Подробнее об офферах и их настройке — в разделе Офферы.

Переменные элемента

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

Типы переменных элементов зависят от группы:

  • Single choice: одиночный выбор в викторинах, вкладках и переключателях пробного периода:
    • selectedOptionId: ID элемента для использования в условиях
    • selectedOptionTitle: заголовок элемента для использования в динамическом тексте
  • Multi-choice: множественный выбор в викторинах:
    • selectedOptionIds: ID элементов для использования в условиях
    • selectedOptionTitles: заголовки элементов для использования в динамическом тексте
  • Toggle: элементы, переключающиеся между включённым и выключенным состоянием:
    • isActive: булево значение
  • Product: карточки продуктов:
    • selectedProduct: выбранный продукт для использования в условиях

Распространённые сценарии использования:

Использование переменных в тексте

Чтобы вставить переменную в текстовый элемент:

  1. Выберите текстовый элемент на холсте.
  2. На вкладке Design найдите поле Content и введите текст.
  3. Нажмите на иконку { } в поле.
  4. Выберите переменную из списка.
Tip

Переменные можно также использовать в других элементах:

  • Используйте переменные в ссылках и алертах, чтобы сделать их динамическими
  • Создавайте динамические условия на основе переменных. Например, условие может выглядеть так: if experience.current > experience.target, navigate to...
Вставка переменной в текстовый элемент

Переменные стилей

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

Форматирование применяется только ко всему текстовому блоку целиком. Чтобы стилизовать текст, используйте раздел Typography на вкладке Design или выберите сохранённый стиль текста.

Повторное использование контента на разных экранах

Некоторый контент повторяется на нескольких экранах флоу — например, подпись кнопки «Продолжить», призыв к действию или дисклеймер, который показывается на нескольких экранах. То же касается более длинных текстов — например, описания функции, которое используется на нескольких экранах. Вместо того чтобы вводить этот контент в каждый элемент вручную, сохраните его в кастомной переменной. Это удобно, когда вы направляете разных пользователей на разные экраны, но хотите, чтобы формулировки везде были одинаковыми.

  1. Создайте пользовательскую переменную типа String и задайте её начальное значение как текст, который хотите переиспользовать. Например, назовите её button.navigation и установите значение Continue.
    Creating a custom variable with its initial value set to the reusable text
  2. Вставьте эту переменную в поле Content каждого элемента, где должен появляться этот текст. Чтобы изменить текст везде сразу, достаточно один раз обновить начальное значение переменной. Все элементы, использующие её, обновятся автоматически — редактировать каждый экран вручную не нужно.
Одна и та же пользовательская переменная, вставленная в поле Content сразу в нескольких элементах