変数
変数を使うと、フロー内に動的なコンテンツ(プロダクトの価格、オファーの詳細、各ユーザーのコンテキストに応じて更新されるデータなど)を表示できます。要素の表示制御や画面コンテンツのパーソナライズにも活用できます。
変数パネルを開くには、左パネルの { } アイコンをクリックします。パネルには3つのタブがあります:
- カスタム: 自分で作成・管理する変数です。
- プロダクト: ストアからローカライズされたプロダクトおよびオファーのデータを取得する組み込み変数です。
- エレメント: キャンバス上のエレメントの状態に紐付けられた変数です。
カスタム変数
カスタム変数を作成する
- 変数パネルで + をクリックします。
- 変数の名前を入力します。
- タイプを選択します:String、Number、または Boolean。
- 初期値を設定します。これはフローが開始したときに変数が保持する値です。
- Create variable をクリックします。
ドット付きの名前を使うと関連する変数をグループ化できます。例:user.score や user.goal。
インタラクションを通じて変数を更新する
詳しくはアクションの記事をご覧ください。
任意の要素に Set up variables アクションを追加することで、実行時に変数の値を更新できます。
- キャンバス上の要素を選択します。
- Interactions タブで Add trigger をクリックします。
- On tap を選択し、Add action をクリックします。Action type ドロップダウンから Set up variables を選択します。
- Add variable をクリックします。変数を選択し、新しい値を設定します。
例えば、ユーザーがクイズで選んだ回答に応じて user.goal に異なる値を設定し、その変数を使って別の画面へ誘導することができます。
プロダクト変数
プロダクト変数は、アプリストアからローカライズされたデータを直接取得します。テキストフィールドで使用すると、ローカライズされた価格、タイトル、オファーの詳細を表示できます。また、条件に使用すると、オファーの対象資格に基づいてコンテンツを表示または非表示にできます。
| 変数 | 説明 | 例 |
|---|---|---|
prod_title | プロダクトのローカライズされたタイトル | Premium Subscription |
prod_price | 1請求期間あたりのローカライズされた価格 | $9.99 |
prod_price_per_day | サブスクリプション価格を請求期間の日数で割った値。サブスクリプション以外は空。 | $0.33 |
prod_price_per_week | サブスクリプション価格を請求期間の週数で割った値。サブスクリプション以外は空。 | $2.33 |
prod_price_per_month | サブスクリプション価格を1か月に換算した値。サブスクリプション以外は空。 | $9.99 |
prod_price_per_year | サブスクリプション価格を1年に換算した値。サブスクリプション以外は空。 | $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 |
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 Go | Pay Upfront | Free Trial |
|---|---|---|---|
offer_price | $3 | $8 | $0 |
offer_billing_period | 1週間 | 3週間 | 1週間 |
offer_full_duration | 3週間 | 3週間 | 1週間 |
Pay Upfront および Free Trial オファーの場合、offer_billing_period と offer_full_duration は同じ値を返します。Pay As You Go の場合、請求期間は1週間ですが全期間は3週間となるため、両者の値は異なります。 |
オファーの詳細や設定方法については、オファーをご覧ください。
要素変数
要素変数は、ユーザーの選択内容(クイズでの選択、現在のタブ、トライアルトグルのオン/オフなど)を記録します。
要素変数のタイプはグループによって異なります:
- 単一選択(Single choice): 単一選択クイズとタブ:
selected_id: 条件で使用する要素IDselected_title: 動的テキストで使用する要素タイトル
- 複数選択(Multi-choice): 複数選択クイズ:
selected_ids: 条件で使用する要素IDのリストselected_titles: 動的テキストで使用する要素タイトルのリスト
- トグル(Toggle): トライアルトグル:
is_selected: Boolean値 よくあるユースケースとしては、以下のようなものがあります:
- トライアルトグルが有効かどうかに応じて異なるコンテンツを表示する。
- クイズの回答に基づいてユーザーを異なる画面に誘導する
テキストに変数を使用する
テキスト要素に変数を挿入するには:
- キャンバス上のテキスト要素を選択します。
- Design タブで Content フィールドを見つけ、テキストを入力します。
- フィールド内の { } アイコンをクリックします。
- リストから変数を選択します。
変数は他の要素でも使用できます:
- リンクやアラートに変数を使って動的にする
- 変数に基づいた動的な条件を作成する。例えば、
if experience.current > experience.target, navigate to...のような条件が作れます
スタイル変数
変数単体にリッチテキスト書式を適用することはできません。Content フィールドで変数を選択して太字、斜体、下線、取り消し線、色の変更を適用しても、効果はありません。
リッチテキストの設定はテキストブロック全体にのみ適用されます。テキストにスタイルを設定するには、Design タブの Typography セクションを使用するか、保存済みのテキストスタイルを適用してください。
フロー内でコンテンツを再利用する
ボタンのラベル「Continue」、繰り返し使うコール・トゥ・アクション、複数の画面に表示する免責事項など、フロー内で同じコンテンツが何度も登場することがあります。機能説明のような長めのテキストを複数の画面で使い回す場合も同様です。各要素にいちいち入力する代わりに、カスタム変数に保存しておきましょう。ユーザーによって異なる画面に誘導する場合でも、表示される文言を統一できます。
- カスタム変数を作成して、タイプを String に設定し、初期値に再利用したいテキストを入力します。たとえば、変数名を
button.navigation、値をContinueにします。
- テキストを表示したい各要素の Content フィールドにこの変数を挿入します。 テキストをすべての箇所で変更するには、変数の初期値を一度更新するだけです。その変数を使用しているすべての要素が自動的に更新されるため、各画面を手作業で編集する必要はありません。