> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ページとスタンドアロンウィジェットの違い

> Checkoutのページとスタンドアロンウィジェットを比較: トリガー、ブロック数の上限、ShopifyエディターでBlockIDを使って配置する方法。

Checkoutでは、Checkoutにウィジェットを追加する方法が2つあります: \*\*ページ(Pages)**と**スタンドアロンウィジェット(Standalone widgets)\*\*です。この記事では、それぞれの仕組み、使いどころ、Shopify Checkoutへの配置方法を説明します。

<div id="which-should-i-use">
  ### **どちらを使うべき?**
</div>

|            | **ページ**                  | **スタンドアロンウィジェット**   |
| :--------- | :----------------------- | :------------------ |
| **最適な用途**  | 複数のウィジェットをまとめて表示         | 単一のウィジェットを表示        |
| **トリガー**   | ページ内のすべてのウィジェットで共有       | バリアントごとに個別に設定       |
| **ブロック上限** | ウィジェットタイプごとに最大5ブロック      | ウィジェットタイプごとに最大3ブロック |
| **ブロック配置** | ページ内のウィジェットごとに1つのアプリブロック | ウィジェットごとに1つのアプリブロック |

***

<div id="pages">
  ## **ページ**
</div>

ページとは、単一のトリガーグループを共有するウィジェットのグループです。トリガー条件が満たされると、ページ内のすべてのウィジェットが一緒に表示されます。同じオーディエンスに同じタイミングで複数のウィジェットを表示したい場合は、ページが最適です。

<div id="creating-a-page">
  ### ページの作成
</div>

ページを作成する際は、\*\*Guided setup(ガイド付きセットアップ)\*\*と **Start from scratch(ゼロから作成)** の2つのオプションがあります。

**Guided setup**

Guided setupでは、選択した目標に基づく推奨構成に沿って設定を進められます。セットアップは、**Goal、Triggers、Widgets、Placement** の4つのステップで構成されます。

**ステップ1: Goal**

達成したいことに最も近い目標を選択します。各目標には、あらかじめ構成された推奨ウィジェットのセットが用意されています。

| **目標**                    | **推奨ウィジェット**                         |
| :------------------------ | :----------------------------------- |
| 平均注文額(AOV)とコンバージョン率を向上させる | Upsells、Trust Badges、Testimonials    |
| 顧客の信頼を築き、離脱を減らす           | Trust Badges、Cart Controls、Text      |
| アドオンやアクセサリーを促進する          | Checkbox Upsells、Images、Testimonials |
| 送料無料の基準額への到達を促す           | Upsells(Rewards付き)、Text              |
| カスタム構成                    | なし — ゼロから作成して独自のウィジェットの組み合わせを構築      |

**重要:** 目標は保存後に変更できません。別の目標が必要な場合は、ページを削除して新しく作成する必要があります。ただし、ウィジェットはいつでもページに追加・削除できます。先に進む前に、戦略に最も合った目標を選ぶよう少し時間をかけて検討してください。

目標を選択したら、**Save and next** をクリックして続行します。

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/standalone-widgets-guided-setup-goal-step.gif?s=78da82a883425b9129df6cdfcb2009bf" alt="選択可能な推奨目標が一覧表示されたCheckoutガイド付きセットアップのGoalステップ" width="1524" height="1080" data-path="images/aftersell/standalone-widgets-guided-setup-goal-step.gif" />

**ステップ2: Triggers**

ページを表示する条件を設定するか、条件なしですべての顧客にページを表示するよう選択します。利用可能なトリガーの一覧については、[<u>チェックアウトトリガー</u>](/ja/aftersell/checkout_triggers)を参照してください。

**ステップ3: Widgets**

目標に対して推奨されたウィジェットを確認します。この段階でウィジェットの追加・削除ができ、各ウィジェットの詳細設定にもアクセスできます。利用可能なウィジェットタイプとその設定の一覧については、[<u>チェックアウトウィジェットの種類</u>](/ja/aftersell/checkout_widget_types)を参照してください。

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/standalone-widgets-guided-setup-widgets-step.gif?s=b98a4e134d7764babe866dafc395ae98" alt="ライブプレビュー付きで推奨チェックアウトウィジェットを確認するガイド付きセットアップのWidgetsステップ" width="1524" height="1080" data-path="images/aftersell/standalone-widgets-guided-setup-widgets-step.gif" />

**ステップ4: Placement**

ページ内の各ウィジェットは、Shopify Checkoutエディターで個別に配置する必要があります。各ウィジェットには **BlockID**(例: page-upsell-001、page-upsell-002)が割り当てられており、Shopifyでアプリブロックを追加する際の識別に使用されます。

各ウィジェットをCheckoutページのどこに配置するかを決める際の参考として、配置場所の推奨が提供されます。ウィジェットを配置するには:

1. Aftersellダッシュボードでウィジェットに割り当てられた **BlockID** を確認します。
2. **Shopify Checkoutエディター**を開きます。
3. **Aftersellアプリブロック**を追加します。
4. ドロップダウンから、ウィジェットに対応するBlockID(例: page-upsell-003)を選択します。

**注:** ページ内の各ウィジェットは**それぞれ固有のBlockIDを持ち、Shopify Checkoutエディターで別々のアプリブロックとして追加する必要があります。** 配置されるまで、ウィジェットは表示されません。

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/standalone-widgets-checkout-editor-add-app-block.gif?s=5a9b1a8e9d9874dd4f7873d1893d10ee" alt="Aftersellアプリブロックを追加してBlockIDの配置を選択するShopify Checkoutエディター" width="1052" height="1080" data-path="images/aftersell/standalone-widgets-checkout-editor-add-app-block.gif" />

***

**Start from scratch**

Start from scratchはGuided setupと同じプロセスに従いますが、Goalステップをスキップします。トリガーを設定し、ウィジェットを手動で追加してから、BlockIDを使ってShopify Checkoutエディターに配置します。

**ページの編集**

作成後、ウィジェットの追加・削除やトリガーの更新など、ページはいつでも編集できます。変更できない唯一の項目は目標です。目標を変更する必要がある場合は、ページを削除して新しく作成してください。

**ページの複製**

既存のページのコピーを作成するには、ダッシュボードのページ行にある\*\*複製(Duplicate)\*\*アイコンをクリックします。複製されたページは非アクティブ状態で作成され、名前に「(Duplicated)」というプレフィックスが付き、元のページと同じウィジェットとトリガー構成をすべて含みます。準備ができたら名前を変更して有効化できます。

***

<div id="standalone-widgets">
  ## **スタンドアロンウィジェット**
</div>

スタンドアロンウィジェットは、それぞれ独自のトリガーと優先度を持つ個別のウィジェットで、単一のウィジェットを常時、または特定の顧客グループに表示したいだけの場合に最適です。

<div id="creating-a-standalone-widget">
  ### スタンドアロンウィジェットの作成
</div>

ダッシュボードから **Create widget** をクリックします。次の2つを選択するよう求められます:

* **ウィジェットタイプ**: 作成したいウィジェットの種類(Upsells、Rewards、Trust Badges、Testimonials、Cart Controls、Notes、Text、Images)。各ウィジェットタイプとその設定の詳細については、[チェックアウトウィジェットの種類](/ja/aftersell/checkout_widget_types)を参照してください。
* **ブロック**: ウィジェットを追加するブロック。利用可能なブロックは3つあり、名前は選択したウィジェットタイプに従います。例:
  * Upsells: Default upsell、Additional upsell 1、Additional upsell 2
  * Trust Badges: Default trust badge、Additional trust badge 1、Additional trust badge 2
  * 他のウィジェットタイプも同様

各ブロックは複数のバリアントを保持できます。セレクター右上のブロックカウンターには、利用可能な3ブロックのうちいくつ作成済みかが表示されます(例: 2/3は2ブロック作成済み、残り1つの意味)。

<div id="block-limit">
  ### ブロック上限
</div>

スタンドアロンウィジェットに使用できるのは最大 **3ブロック** です。3ブロックすべてが使用中になると、**Add new block** オプションは利用できなくなり、既存のブロックを削除するまで同じタイプのウィジェットを追加作成できません。

<div id="placement">
  ### 配置
</div>

各スタンドアロンウィジェットは、それぞれ独立したアプリブロックとしてShopify Checkoutエディターに配置する必要があります。Shopifyでアプリブロックを追加すると、スタンドアロンウィジェットのBlockIDオプションが次のように表示されます:

* Default placement
* Additional placement 1
* Additional placement 2

配置(placement)の値はルーティングキーであり、位置ではありません。どの保存済みウィジェット構成を読み込むかをアプリブロックに指示するものです。ウィジェットが実際にチェックアウトのどこに表示されるかは、Shopify Checkoutエディターでアプリブロックを追加した場所によって決まります — ただし1つ例外があります。**Cart controls** は自由に配置できず、カートが表示される場所で各カートラインアイテムの後にレンダリングされます。それ以外のすべてのウィジェットタイプは、Checkoutエディターが提供する任意の場所にブロックとして追加できます。

ウィジェットを配置するには:

1. **Shopify Checkoutエディター**を開きます。
2. 希望する場所に **Aftersellアプリブロック** を追加します。
3. ドロップダウンから、ウィジェットに対応するBlockIDを選択します。

***

<div id="analytics">
  ## **アナリティクス**
</div>

アナリティクスは、ページとスタンドアロンウィジェットの両方で利用できます。個々のページやウィジェットのパフォーマンスデータは、ダッシュボードでその横にある**棒グラフアイコン**をクリックするか、エディター内から、またはサイドナビゲーションのAnalyticsタブから確認できます
