パーソナルショッパーの編集

はじめに

図1：パーソナルショッパーエディタ

いずれかのパーソナルショッパーで「作成」または「編集」をクリックすると、全画面エディタ（図1）が表示されます。エディタは主に4つのセクションで構成されています。

• トップナビゲーションバー — エディタ全体の基本的なコントロール
• セクションサイドバー — ショッパーの全セクションのリスト（簡単なナビゲーション用）
• プレビューエリア — ショッパーの現在の状態を表示
• 設定サイドバー — ショッパーのすべての設定とカスタマイズオプションを含む

トップナビゲーションバー

図2：トップナビ

トップナビゲーションバーには、パーソナルショッパーエディタ全体を操作するためのコントロールがすべて含まれています（図2）。

1. 戻るボタンでエディタを閉じます。
2. ステータスバッジは、編集しているパーソナルショッパーのバージョンが「公開済み」か「下書き」状態かを示します。
3. プレビュートグルは、「プレビュー」モードと「選択」モードを切り替えます。「プレビュー」モードでは、サイト上と同じようにパーソナルショッパーを操作できます。「選択」モードでは、パーソナルショッパーをクリックするとコンポーネントが選択されます。
4. ブレークポイントトグルは、プレビューエリアのサイズをデスクトップ、モバイル、フルスクリーンの3種類に切り替えます。
5. 元に戻すボタンとやり直すボタン
6. エディタの主要な操作。「プレビュー」は、ライブプレビュー機能を起動します。「公開」は、パーソナルショッパーの現在の作業バージョンを保存し、サイトに公開します。「保存」は、パーソナルショッパーの現在の作業バージョンを保存しますが、サイト上のライブバージョンは更新しません。

ライブプレビュー

トップナビゲーションバーの「プレビュー」ボタンをクリックすると、パーソナルショッパーエディタの「ライブプレビュー」機能にアクセスできます。

図3：ライブプレビュー

ライブプレビューを使用すると、公開することなく、編集中のパーソナルショッパーのバージョンをサイト上でライブで確認できます。この機能を使用するには、パーソナルショッパーの作業バージョンが保存されている必要があります。

ライブプレビューを使用するには、URLと埋め込みセレクターを入力する必要があります。URLは、Fanplayrターゲティングスクリプトが実行されているドメインのものである必要があります。デフォルトでは、URLは「一般設定」で定義されている「埋め込みURL」と同じになります。

また、パーソナルショッパーを_追加_するページ上の要素をターゲットにするために、埋め込みセレクターを追加する必要があります。システムがURLを生成して表示します。クリックするとパーソナルショッパーがプレビューされます。

パーソナルショッパーをプレビューすることで、すべてのユーザーが利用できるようになる前に、サイト上でどのように表示されるかを確認できます。これにより、公開する前にパーソナルショッパーの見た目と操作感を微調整できます。

セクションサイドバー

図4：セクションサイドバー

エディタの左側にはセクションサイドバーがあります。これにより、エディタのセクション間を簡単に移動できます。各セクションをクリックすると、プレビューエリアが特定のセクションに自動的にスクロールし、コンポーネントの設定を編集できます。各セクションの左側をクリックして上下にドラッグすると、ショッパー内で移動させることができます。

サイドバーの上部には、「一般設定」へのリンクがあります。これをクリックすると、ショッパーのいくつかの一般的な設定を編集できます。詳細については、設定サイドバーを参照してください。

セクションの追加

サイドバーの「セクションを追加」ボタンをクリックして、ショッパーに追加する新しいコンポーネントを選択します。

図5：セクション追加ポップアップ

このリストからコンポーネントを選択し、「追加」をクリックすると、パーソナルショッパーの最後に新しいセクションが追加されます。

エラー／問題の表示

セクションサイドバーの下部には、公開を妨げる可能性のある問題がパーソナルショッパーにいくつ存在するかを示すインジケーターがあります。インジケーターをクリックすると、問題の詳細とその解決方法が表示されます。

プレビューエリア

図6：ショッパープレビューエリア

パーソナルショッパーエディタの主要な部分はプレビューエリアです。これは、パーソナルショッパーがサイト上でどのように表示されるかを示すレスポンシブビューです。デフォルトでは、プレビューは「選択」モード（ナビゲーションバーを参照）になっており、個々のセクションをハイライトして選択し、その設定を表示・編集できます。

設定サイドバー

設定サイドバーはエディタの右側にあり、パーソナルショッパーのカスタマイズの大部分が行われる場所です。サイドバーには、「一般設定」と「コンポーネント設定」の2つの編集可能な設定グループがあります。

一般設定

左サイドバーで「一般設定」が選択されている場合、設定サイドバーにはパーソナルショッパーの一般的な設定が表示されます。

図7：一般設定

「一般設定」における主要な設定グループは「ウィジェットレベル設定」です。これらの設定は、パーソナルショッパーをどこにレンダリングするかをシステムに伝えます。これを制御する設定は2つあります。

• 埋め込みURL — これは、公開時にシステムがパーソナルショッパーをレンダリングしようとするドメイン上のURLです。この文字列にはワイルドカード（*）を含めることができるため、ショッパーを複数のURLで使用できます。
• 埋め込みセレクター — これは、ショッパーが追加される要素を見つけるために使用されるCSS要素セレクターです。

残りの一般設定は、ベースフォントサイズと色、見出しフォントサイズ、全体的な背景色など、さまざまなショッパー全体のスタイリングで構成されています。また、「グローバルCSS」という設定があり、CSSの知識を持つ上級ユーザーがショッパー全体に適用されるCSSを記述できます。

コンポーネント設定

図8：コンポーネント設定

特定のコンポーネントが選択されている場合、右側のサイドバーには、選択されたコンポーネントのすべての設定が表示されます。例えば、図8では、製品レコメンデーションコンポーネントが選択されています。

各コンポーネントには、そのコンポーネントの見た目と操作感をカスタマイズするための独自の設定があります。各設定は、その特定のセクションにのみ適用されます。例えば、ある製品レコメンデーションコンポーネントの「デフォルトテキストアライン」設定を設定しても、他の製品レコメンデーションコンポーネントの同じ設定には影響しません。

「一般設定」と同様に、すべてのコンポーネントには「カスタムCSS」設定があり、上級ユーザーはこれを利用してコンポーネントをさらにカスタマイズできます。

商品ソース

製品レコメンデーションコンポーネントにとって最も重要な設定は、「商品ソース」です。この設定の値は、コンポーネントに表示する商品をシステムに伝えます。設定エディタで「変更」をクリックすると、図9のポップアップが表示されます。

図9：商品ソースエディタ

ここでの特定の設定は、選択されたモデルによって異なりますが、一般的には以下の4つの設定に集約されます。

• モデル — 商品リストを生成するために使用されるアルゴリズムを制御します。
• 商品リスト — これは、選択されたアルゴリズムが商品を調達できる商品リストです。例えば、推奨商品をセール中の商品のみに限定するために使用できます。
• 最小アイテム数 — 製品レコメンデーションコンポーネントをレンダリングするために必要な最小アイテム数。
• 商品上限 — コンポーネントに表示する商品の最大数。