変数

変数を使うと、フロー内に動的なコンテンツ(プロダクトの価格、オファーの詳細、各ユーザーのコンテキストに基づいて更新されるデータなど)を表示できます。要素の表示・非表示の制御や、画面コンテンツのパーソナライズに活用してください。

変数の管理ビューを開くには、左パネルの をクリックします。このビューには3つのタブがあります:

  • カスタム: フロー内変数とカスタムタグ — アプリから設定できる変数です。
  • プロダクト: ストアからローカライズされたプロダクトおよびオファーデータを取得する組み込み変数です。
  • エレメント: キャンバス上のエレメントの状態にバインドされた変数です。

カスタム変数

カスタム変数を作成する

  1. フロービルダーで Variables パネルを開きます。
  2. 新しい変数を追加します — をクリックしてください。
  3. 変数の Name を設定します。
  4. (任意)変数を区別しやすくするために、Description フィールドに説明を入力します。ビルダーで変数名にホバーすると、説明が表示されます。
  5. Value Type を選択します: String、Number、または Boolean。変数をテキスト要素に挿入できるのは、タイプが String または Number の場合のみです。
  6. Initial value フィールドに、フロー開始時に変数が保持する値を入力します。
  7. (任意、String 変数のみ)アプリのコードから変数の値を設定するには、Value comes from outside the app チェックボックスを選択します。この操作は元に戻せず、Value Type が固定されます。この変数はカスタムタグになり、フローを読み込む際にアプリ側で値を設定する必要があります。値が渡されなかった場合、ユーザーにはフォールバックとして初期値が表示されます。
  8. Create variable をクリックします。

変数はフロー固有のものです。別のフローで変数を使用するには、そのフローでも作成してください。

Tip

名前にドットを使って関連する変数をグループ化できます — 例えば、user.score や user.goal など。

Creating a custom variable

インタラクションで変数を更新する

任意の要素に Set variable アクションを追加することで、変数の値を実行時に更新できます。

  1. キャンバス上の要素を選択します。
  2. Interactions タブで Add trigger をクリックします。
  3. On tap を選択し、Add action をクリックします。Action type ドロップダウンから Set variable を選択します。
  4. Add variable をクリックし、変数を選択して新しい値を設定します。
Tip

例えば、ユーザーがクイズで選んだ回答に応じて user.goal に異なる値を設定し、その変数を使って別の画面へ誘導することができます。

インタラクションによる変数の更新

プロダクト変数

プロダクト変数は、アプリストアからローカライズされたデータを直接取得します。テキストフィールドで使用すると、ローカライズされた価格・タイトル・オファーの詳細を表示できます。また、条件として使用すると、オファーの利用資格に基づいてコンテンツの表示・非表示を切り替えることも可能です。特定のプロダクトの変数を挿入すると、ビルダーはそのプロダクトをProducts パネルの画面リストに自動的に追加します。

変数説明例
prod_titleプロダクトのローカライズされたタイトルPremium Subscription
prod_price1請求期間あたりのローカライズされた価格$9.99
prod_price_per_day1日あたりに換算したサブスクリプション価格。サブスクリプション以外は空。$0.33
prod_price_per_week1週間あたりに換算したサブスクリプション価格。サブスクリプション以外は空。$2.33
prod_price_per_month1ヶ月あたりに換算したサブスクリプション価格。サブスクリプション以外は空。$9.99
prod_price_per_year1年あたりに換算したサブスクリプション価格。サブスクリプション以外は空。$119.88
offer_price初回オファーまたはプロモーションオファーのローカライズされた価格。ユーザーがいずれのオファーにも対象外の場合は空。$0.99
offer_billing_periodオファーのローカライズされた請求期間。トライアルおよび前払いオファーの場合は offer_full_duration と同じ。対象外の場合は空。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 を表示用に丸めた値です。1ヶ月は 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)に3種類のオファーがある場合を見てみましょう。

  • Pay As You Go: 最初の3週間は3ドル(週ごとに請求)、その後は週5ドル。
  • Pay Up Front: 最初の3週間は8ドル(即時請求)、その後は週5ドル。
  • Free Trial: 最初の1週間無料、その後は週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 の場合、請求期間は1週間ですが全体の期間は3週間となるため、両者の値は異なります。

offer_price、offer_billing_period、offer_full_duration を使用するには、オファーが設定されたプロダクトが必要です。オファーがない場合、フローは公開できません。

これらの値はすべてストアから取得されるため、ビルダーのプレビューで解決できるのは一部のみです。オファーの値はキャンバス上では未解決のまま表示され、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. 変数を選択します。Product タブでは、Products パネルにすでに表示されているプロダクトが最初に表示されます。それ以外のカタログは Other products の下に続きます。
Tip

変数は他の要素でも使用できます:

  • リンクやアラートで変数を使用して、それらをダイナミックにする
  • 変数に基づいたダイナミックな条件を作成する。例えば、条件として if experience.current > experience.target, navigate to... のように設定できます
テキスト要素に変数を挿入する

スタイル変数

変数単体にリッチテキスト書式を適用することはできません。Content フィールドで変数を選択して太字、斜体、下線、取り消し線、色の変更を適用しても、効果はありません。

リッチテキストの設定はテキストブロック全体にのみ適用されます。テキストにスタイルを設定するには、Design タブの Typography セクションを使用するか、保存済みのテキストスタイルを適用してください。

フロー内でコンテンツを再利用する

ボタンのラベル「Continue」、繰り返し使うコール・トゥ・アクション、複数の画面に表示する免責事項など、フロー内で同じコンテンツが何度も登場することがあります。機能説明のような長めのテキストを複数の画面で使い回す場合も同様です。各要素にいちいち入力する代わりに、カスタム変数に保存しておきましょう。ユーザーによって異なる画面に誘導する場合でも、表示される文言を統一できます。

  1. カスタム変数を作成して、タイプを String に設定し、初期値に再利用したいテキストを入力します。たとえば、変数名を button.navigation、値を Continue にします。
    再利用するテキストを初期値として設定したカスタム変数の作成
  2. テキストを表示したい各要素の Content フィールドにこの変数を挿入します。

テキストをすべての箇所で変更するには、変数の初期値を一度更新するだけです。その変数を使用しているすべての要素が自動的に更新されるため、各画面を手作業で編集する必要はありません。

複数の要素のコンテンツフィールドに挿入された同じカスタム変数

カスタム変数の値はローカライズできません。変数はすべてのロケールで同じ値を表示します。再利用するテキストを翻訳するには、Localizations パネルで、変数を含む各行にそれぞれの翻訳を入力してください。