【シンプルサンクスカスタム】スマホ・PC／顧客タグでブロックの表示を出し分ける方法

サンクスページのブロックは、「スマホだけ」「PCだけ」、あるいは「VIPのお客様だけ」のように、見せる相手を分けられます。この記事では、デバイスと顧客タグでの出し分けの設定方法をご説明します。

【言葉の説明】「ブロック」は、サンクスページに表示する内容のひとかたまりです（このアプリの「ブロック管理」で作ります）。「アプリブロック」は、Shopifyのチェックアウトエディタに置く「SAKU Thanks Custom」のことです。アプリブロックを置くと、作ったブロックがサンクスページに表示されます。

この記事でわかること

• 「表示するデバイス」でスマホ・PCを出し分ける方法
• 「表示条件」と「顧客タグ（カンマ区切り）」で顧客ごとに出し分ける方法
• 一覧のバッジとプレビューでの確認方法
• スマホ用とPC用を別々に作るときの複製のコツ

操作する場所：Shopify管理画面 → アプリ →「SAKU Thanks Custom」 →「ブロック管理」→ ブロックの「編集」→「表示条件」

1️⃣ 編集したいブロックを開く

左メニューの「ブロック管理」を開き、条件を付けたいブロックの「編集」を押します。新しく作るときは「新規ブロック作成」から種類を選びます。フォームの下のほうに、「表示条件」のセクションがあります。

赤枠の「表示するデバイス」「表示条件」「顧客タグ」が、出し分けの設定欄です。

2️⃣ 「表示するデバイス」を選ぶ

次の3つから選びます。購入者の画面の大きさで判定されます。

• 「すべてのデバイス」（最初の設定）
• 「スマホのみ」
• 「PCのみ」

ふつうの縦向きのスマホで見ると、「スマホ」として扱われます。タブレットや、パソコンの小さいウィンドウでは、「PC」として扱われることがあります（目安は、ブロックが表示される領域の幅が450px以下かどうかです）。スマホの表示を確認するときは、実際のスマホで、サンクスページを開いてください。

3️⃣ 「表示条件」を選ぶ

顧客のタグで出し分けます。次の3つから選びます。

• 「全員に表示」（最初の設定）
• 「指定した顧客タグがある場合だけ表示」
• 「指定した顧客タグがある場合は非表示」

4️⃣ 「顧客タグ（カンマ区切り）」を入力する

「表示条件」を「全員に表示」以外にしたときは、タグを入力します。入力欄の例は「VIP, LINE, wholesale」です。

• 区切りは、「,」（カンマ）、「、」（読点）、改行が使えます。
• 同じタグを2回書いても、1つとして扱われます。
• タグは50個まで入力できます。
• 大文字と小文字は区別されません。
• 複数のタグを入れたときは、顧客がどれか1つを持っていれば、条件に当てはまります。

「全員に表示」のときは、入力は不要です。「全員に表示」以外でタグが空のまま保存すると、「顧客タグを1つ以上入力してください」とエラーになります。

例：「VIP」と入力して「指定した顧客タグがある場合だけ表示」にすると、VIPのタグがある顧客にだけ表示されます。「wholesale」と入力して「指定した顧客タグがある場合は非表示」にすると、卸売のお客様には表示されません。

5️⃣ 顧客にタグを付ける

Shopify管理画面の左メニュー「顧客」を開き、タグを付けたいお客様の名前をクリックします。右側の「タグ」の欄に、手順4で入力したものと同じタグ（例：VIP）を入力して、Enter キーを押します。画面の上（または下）に「保存」が出たら、押します。保存しないと、タグは付きません。

アプリでタグを作る必要はありません。

ログインしていない購入者（ゲスト）は、「タグなし」として扱われます。そのため、「指定した顧客タグがある場合だけ表示」のブロックは、ゲストには表示されません。

6️⃣ 保存して、一覧で確認する

画面の下の「保存」を押します。「ブロック管理」の一覧に戻ります。条件は、一覧でも確認できます。

赤枠の部分で、ブロックごとのバッジと、右側のPC・スマホのプレビュー切り替えを確認できます。

• バッジ「スマホのみ」「PCのみ」：デバイスを限定したブロックに付きます。「すべてのデバイス」のときは付きません。
• 条件の行：クーポン以外のブロックは、「顧客タグ：全員に表示」または「顧客タグ：指定した顧客タグがある場合だけ表示 (VIP, LINE)」のように表示されます。
• クーポンブロックは、「配布する相手：全員」「注文金額の下限：なし」のように、配布する相手と注文金額の下限も表示されます。

7️⃣ プレビューで、デバイスごとの見た目を確認する

「ブロック管理」の右側にある「プレビュー」の「PC」「スマホ」を切り替えます。そのデバイスで表示されるブロックだけが、並び順どおりに表示されます。そのデバイスに表示するブロックがないときは、「このデバイスで表示されるブロックはありません」と出ます。

プレビューは簡易表示です。実際の表示は、サンクスページのデザインに合わせて調整されます。

8️⃣ スマホ用とPC用を別々に作る（複製）

同じ内容で、スマホ用とPC用を作り分けたいときは、一覧の「複製」が便利です。内容と表示条件を、そのままコピーしたブロックが、一覧の末尾に作られます。名前は「元の名前のコピー」になります。

1. 元のブロックの「表示するデバイス」を「PCのみ」にして保存します。
2. 「複製」を押します。コピーは、同じ内容が二重に表示されないよう、「非表示」の状態で作られます。
3. コピーの「編集」を開き、「表示するデバイス」を「スマホのみ」に変えて保存します。
4. コピーの「表示する」を押して、表示中にします。

複製したブロックにも、プランのブロック数の上限（無料プラン2件、Proプラン30件）が適用されます。

9️⃣ チェックアウトエディタでの確認のしかた

チェックアウトエディタのプレビューでは、顧客タグの条件は無視されます。「表示中」のブロックが、すべて表示されます。顧客タグの出し分けは、実際の注文（テスト注文）のサンクスページで確認してください。

設定後のストア表示

サンクスページでは、ブロックが次のように表示されます。

• デバイスの条件に合わないブロックは、表示されません。
• ログイン中の購入者のタグを、サーバーで確認します。条件に当てはまるブロックだけが表示されます。
• タグの取得に失敗したときは、タグ条件の付いたブロックは表示されません。
• 複数の条件（デバイス・顧客タグなど）を付けたブロックは、すべての条件に当てはまる購入者にだけ表示されます。

うまくいかないとき

• タグを付けたのに表示されない
  顧客にタグが付いているか、入力したタグと同じ名前か（大文字小文字は区別されません）を確認します。購入者がログインしているかも確認します。ゲストは「タグなし」として扱われます。
• エディタのプレビューでは見えるのに、実際には出ない
  エディタのプレビューは、顧客タグの条件を無視します。実際のサンクスページでは、条件が使われます。
• 「顧客タグを1つ以上入力してください」と出る
  「表示条件」が「全員に表示」以外のときは、タグが必要です。タグを入力するか、「全員に表示」に戻してください。
• スマホで見ているのに「PCのみ」のブロックが出る
  タブレットや、パソコンの小さいウィンドウは、「PC」として扱われることがあります。スマホの表示は、実際のスマホで、サンクスページを開いて確認してください。