10分で読めます

お客さまに合わせてボタンの文言を変える — 表示テキストの条件設定

この記事は 時点の管理画面(/trigger)を確認して書いています。 アプリの更新により画面が変わっている場合があります。

これまで、パネルを開くボタンには、1つの文言しか設定できませんでした。

たとえば「特典を見る」と設定すると、会員のお客さまにも、まだ会員登録していないお客さまにも、同じ「特典を見る」と表示されます。

今回のアップデートで、お客さまの状況に合わせて、ボタンの文言を変えられるようになりました。

設定は、管理画面の「外観設定 → ボタン」にある「ボタンの表示テキスト」から行えます。

ボタンの表示テキストの設定画面。会員登録をうながす、マイルの失効が近い、交換できる特典がある、次のステージが近い、キャンペーン中、基本テキストの6行が上から並び、各行に未ログイン・会員などの対象と、表示される文言、条件が書かれている。右側のプレビューには未ログインと会員サンプルの切り替えと、ショップ画面に重ねたボタンが表示されている。
行を上から順番に確認し、条件に当てはまった行の文言が表示されます。

まず覚えることは1つだけ

上から順番に見て、最初に当てはまった1つが表示されます。

これが、この機能のいちばん大事なルールです。

設定は「行」のリストになっています。

1つの行に、「誰に表示するか」などの条件と、「何と表示するか」の文言を設定します。

お客さまがショップを開くと、上の行から順番に条件を確認します。

最初に条件に当てはまった行の文言だけが表示されます。

たとえば、

  1. 会員登録をしていない → 「会員登録で300マイル」
  2. 失効するマイルがある → 「1,200マイルが9月28日に失効」
  3. 交換できる特典がある → 「交換できる特典が3件」
  4. 基本テキスト → 「特典を見る」

と設定した場合、1と2の両方に当てはまるお客さまには、1の「会員登録で300マイル」だけが表示されます。

つまり、行の順番がそのまま優先順位です。

「今いちばん伝えたいこと」を上に置いてください。行はドラッグして並び替えられます。

最後に「基本テキスト」があります

いちばん下には「基本テキスト」という行があります。

これは条件を設定しない、最後の受け皿です。

上のどの行にも当てはまらなかったお客さまには、この文言が表示されます。

基本テキストは削除したり、オフにしたりできません。

どのお客さまにも、必ず何か1つ表示するための行です。


まずはテンプレートから始められます

「テンプレートを追加」から、条件と文言があらかじめ設定された行を追加できます。

最初に用意されているテンプレートは5つです。

テンプレート 条件 文言
会員登録をうながす ログイン状態 = 未ログイン 会員登録で{登録マイル}マイル
マイルの失効が近い まもなく失効するマイル が 1 以上 {失効予定マイル}マイルが{失効日}に失効
交換できる特典がある 交換できる特典の件数 が 1 以上 交換できる特典が{交換できる特典数}件
次のステージが近い 次のステージまでのマイル が 500 以下 あと{次のステージまでのマイル}マイルで{次のステージ}に到達
キャンペーン中 キャンペーン = 開催中 今だけマイル{キャンペーン倍率}倍!

追加したあとは、条件も文言も自由に変更できます。

テンプレートはあくまで「最初のひな形」です。

追加した時点から、その行はあなたのショップ用の設定になります。

もちろん、「自分で条件を作る」から、何も設定されていない行を作ることもできます。


条件は3つ選ぶだけ

条件は、かんたんにいうと、

「何を見る?」+「どう比べる?」+「いくつ?」

の3つです。

たとえば、

マイル残高 が 1,000 以上

なら、

  • 何を見る? → マイル残高
  • どう比べる? → 以上
  • いくつ? → 1,000

となります。

選べる項目は次の10個です。

分類 項目
お客さまの状態 ログイン状態、会員ステージ、誕生日の登録
マイル マイル残高、次のステージまでのマイル、まもなく失効するマイル
できること 交換できる特典の件数、達成できるミッションの件数
ショップの状態 キャンペーン、紹介プログラム

数字で比べる項目には「以上」「以下」などが表示されます。

ログイン状態やキャンペーンなど、状態を見る項目では、選べる状態がそのまま表示されます。

条件は1つだけでなく、いくつでも追加できます

たとえば、

マイル残高が1,000以上
かつ
交換できる特典が1件以上

という設定もできます。

この場合、両方に当てはまるお客さまだけが対象になります。

条件を増やすほど、当てはまるお客さまは少なくなります。

なお、会員ステージは「シルバー以上」のように、ステージの高さで比べます。

まだ会員ステージがないお客さまは、「シルバー以上」などの条件には当てはまりません。


文言には、お客さまの情報を入れられます

文言の中に {マイル残高} のような文字を入れると、実際の画面では、お客さまの情報に置き換わります。

たとえば、

あなたのマイルは{マイル残高}マイルです

と設定すると、

あなたのマイルは1,200マイルです

のように表示されます。

使える変数は、入力欄の下にボタンで表示されています。

使いたいものをクリックするだけでコピーできるので、変数の名前を覚える必要はありません。

使える変数は、行によって違います

ここだけ少し注意が必要です。

その行で使える情報だけが、変数として表示されます。

たとえば「マイルの失効が近い」という行では、

  • {失効予定マイル}
  • {失効日}

など、失効に関する情報を使えます。

一方、その行を「マイル残高が1,000以上」という条件に変更すると、失効に関する情報は使えなくなります。

これは、ショップでマイルの有効期限を設定していない場合など、その情報が存在しないことがあるためです。

使えない情報を表示しようとして、お客さまに「0マイルが失効」のような表示が出ないようになっています。

会員向けの行では、{マイル残高} のように、会員のお客さまから取得できる情報を使えます。

基本テキストで使えるのは {プログラム名} だけです

基本テキストには条件がありません。

そのため、誰に表示されるか分からなくても使える {プログラム名} だけが利用できます。

行を開くと、その行で使える変数だけがボタンで表示されます。

クリックすると入力欄に貼り付けられるので、難しい入力は必要ありません。

「マイルの失効が近い」の行を開いた状態。行の名前、表示テキストの入力欄と34/60の文字数表示、使える変数のボタンが5つ、条件「まもなく失効するマイル が 1 以上」、条件を追加、この行を削除が縦に並び、右のプレビューには1,200マイルが9月28日に失効と書かれたボタンとボタンの幅248pxの表示がある。
行を開くと、その行の文言がプレビューに表示されます。会員だけに表示する行では、プレビューが自動的に「会員サンプル」になります。

条件に当てはまらないときは、次の行へ進みます

条件に当てはまらない行は、そのまま飛ばされます。

また、条件には当てはまっていても、その行で必要な情報が使えない場合は、その行は表示されません。

たとえば、

  • 「次のステージが近い」
    → すでにいちばん上のステージにいるお客さまには表示されません
  • 「マイルの失効が近い」
    → マイルの有効期限を設定していないショップでは表示されません
  • 「会員登録で{登録マイル}マイル」
    → 会員登録時のマイルを設定していない場合は表示されません

その場合は、次の行を確認します。

プレビューと実際のショップで表示が違うことがあります

設定画面のプレビューでは、確認しやすいようにサンプルの数字が入っています。

そのため、プレビューでは、

会員登録で300マイル

と表示されていても、実際のショップでは会員登録のマイルを設定していなければ、その行は表示されません。

「設定したのにショップで出てこない」という場合は、まずその条件や機能がショップ側で有効になっているかを確認してください。


文字数には上限があります

設定できる文字数には、次の上限があります。

項目 上限
行の名前 20文字
表示テキスト 60文字
実際に表示される文言 24文字

60文字と24文字は何が違う?

ここは少し分かりにくいところです。

入力欄では、{失効予定マイル} のような変数も、その名前の文字数で数えます。

たとえば、

{失効予定マイル}マイルが{失効日}に失効

のように入力すると、変数の名前も60文字の中に含まれます。

実際のショップで表示するときは、変数が「1,200」や「9月28日」のような実際の値に置き換わります。

そのため、入力欄では長く見えても、実際の表示はもっと短くなることがあります。

実際に表示できる文言は24文字までです。

24文字を超えた部分は切れて表示されます。

また、ボタンは文言に合わせて横に広がりますが、画面の端を超えて広がることはありません。

プレビューには「ボタンの幅」も表示されます。

ここを見ながら、実際の画面で読みやすい長さに調整してください。


スマホでは、初期設定だとアイコンだけです

ここは特に大事です。

スマホのボタンは、初期設定ではアイコンだけの丸いボタンになっています。

そのため、表示テキストをどれだけ細かく設定しても、初期設定のままではスマホには文言が表示されません。

スマホにも文言を表示したい場合は、同じ画面にある「スマホではアイコンのみ表示」をオフにしてください。

ただし、スマホは画面の幅が狭いため、長い文言は切れてしまうことがあります。

スマホでも文言を見せたい場合は、できるだけ短い言葉にするのがおすすめです。

アイコンだけのままでも問題ありません。

ボタンを押して開くパネルの中では、マイル残高や交換できる特典、次のステージまでのマイルなどの情報を確認できます。


最初は2〜3個から始めるのがおすすめです

最初からすべての条件を設定する必要はありません。

まずは、次の順番で設定してみてください。

  1. 基本テキストを決める
    どのお客さまにも表示する、最後の文言です。
  2. テンプレートを1〜2個追加する
    まずは「会員登録をうながす」「交換できる特典がある」など、分かりやすいものから始めます。
  3. 文言をショップに合わせて変更する
    お店で普段使っている言葉に合わせてください。
  4. 行の順番を決める
    「今いちばん伝えたいこと」を上に置きます。
  5. プレビューで確認する
    「未ログイン」「会員サンプル」、さらに「PC」「スマホ」を切り替えて確認します。
  6. スマホで文言を表示するか決める
    表示する場合は、短めの文言がおすすめです。

行を増やしすぎると、あとから「このお客さまには、なぜこの文言が出ているんだろう?」と分かりにくくなることがあります。

まずは2〜3個くらいから始めると、管理しやすくなります。


まとめ

この機能で覚えておきたいことは、3つだけです。

① 上から順番に見ます

最初に条件に当てはまった1行だけが表示されます。

そのため、行の順番が優先順位になります。

② 条件と文言をセットで考えます

「誰に」「何を伝えるか」を1つの行にまとめます。

テンプレートを使えば、難しい設定を最初から考える必要はありません。

③ 短く、分かりやすく

実際に表示される文言は24文字までです。

スマホで文言を表示する場合は、さらに短くすると読みやすくなります。

たとえば、

「会員登録で300マイル」
「あと200マイルでゴールド」
「交換できる特典が3件」

のように、お客さまが見た瞬間に「自分に何ができるか」が分かる文言にすると、この機能を活用しやすくなります。