ウィジェットの編集

はじめに

図1：ウィジェットエディター

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

• 上部ナビゲーションバー — エディター全体に関する基本的な操作
• セクションサイドバー — ウィジェットの全セクションのリストで、簡単なナビゲーションが可能
• プレビューエリア — ウィジェットの現在の状態の表示
• 設定サイドバー — ウィジェットのすべての設定とカスタマイズオプションを収録

INFO

ウィジェットエディターは、パーソナルショッパーエディターの拡張機能です。ショッパーエディターに慣れている方なら、ウィジェットエディターも簡単に習得できます。

上部ナビゲーションバー

図2：上部ナビゲーション

上部ナビゲーションバーには、パーソナルショッパーエディター全体に関するすべての操作が含まれています（図2）：

1. 戻るボタン エディターを閉じます。
2. 名前 特定のウィジェットの識別子です。編集ボタンをクリックして名前をカスタマイズします。名前の変更は、ウィジェットが保存/公開されるまで確定されません。
3. ステータスバッジ 編集中のウィジェットが「公開済み」、「下書き」、または「無効」のいずれの状態であるかを示します。以下の注記を参照してください。
4. プレビュートグル 「プレビュー」モードと「選択」モードを切り替えます。プレビューモードでは、サイト上と同じようにウィジェットを操作できます。選択モードでは、ウィジェットプレビューをクリックするとコンポーネントが選択されます。
5. ブレークポイントトグル プレビューエリアをデスクトップ、モバイル、フルスクリーンの3つの異なるサイズで切り替えます。
6. 元に戻すボタンとやり直すボタン
7. エディターの主要なアクション。「プレビュー」はライブプレビュー機能を起動します。「公開」はウィジェットの現在の作業バージョンを保存し、サイトに公開します。「保存」はウィジェットの現在の作業バージョンを保存しますが、サイトのライブバージョンは更新しません。

INFO

重要: ランタイムシステムは常に各ウィジェットの最新の公開済みバージョンを使用します。ただし、公開済みのウィジェットでも更新でき、ステータスを「下書き」に変更できます。この場合、現在は「下書き」状態のウィジェットは、以前に公開されたバージョンを使用してサイトで引き続き使用されます。リスト内のウィジェットを無効にすると、使用されなくなります。

ライブプレビュー

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

図3：ライブプレビュー

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

ウィジェットが埋め込みとしてマークされている場合、このポップアップで埋め込みセレクターを指定する必要があります。それ以外の場合、ウィジェットをテストするためにURLを提供するだけで済みます。そのURLは、Fanplayrターゲティングスクリプトが実行されているドメイン上にある必要があります。このURLは、ウィジェット構成で定義されているURLと一致する必要はありません。つまり、必要であれば、最終的にウィジェットが表示される場所とは異なるURLでウィジェットをプレビューできます。

ウィジェットをプレビューすると、すべてのユーザーに公開する前に、サイト上でどのように表示されるかを確認できます。これにより、公開前にウィジェットの外観と操作感を微調整できます。

セクションサイドバー

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

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

サイドバーの上部には、「一般設定」へのリンクがあります。これをクリックすると、ウィジェットの一般的な設定を編集できます。設定サイドバーで詳細を確認してください。

セクションの追加

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

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

このリストからコンポーネントを選択し、「追加」をクリックすると、ウィジェットの末尾に新しいセクションが追加されます。

エラー/問題の表示

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

プレビューエリア

図6：プレビューエリア

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

設定サイドバー

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

一般設定

左サイドバーで「一般設定」が選択されている場合、右側の設定サイドバーにはウィジェットの一般的な構成が表示されます。

図7：一般設定

ウィジェットの一般設定には、ウィジェットの一般的な動作を制御するさまざまなコントロールが含まれています。以下にいくつかの主要な設定を説明します。

• 表示タイプ — ウィジェットがサイトに「埋め込み」されるか、「オーバーレイ」として表示されるかを制御します。
• 表示URL — これは、システムが公開後にウィジェットをレンダリングしようとする、お客様のドメイン上のURLです。この文字列にはワイルドカード（*）を含めることができるため、複数のURLで使用できます。
• 埋め込みセレクター — これは、ウィジェットが追加される要素を見つけるために使用されるCSS要素セレクターです（埋め込みの場合）。
• 高さ + 幅 — これはウィジェットの最大高さと幅です（オーバーレイの場合）。
• 離脱意図時にトリガー — 有効にすると、ユーザーがマウスを画面の端に移動させて「離脱意図」を示した場合にのみ、システムはウィジェットを表示します（オーバーレイの場合）。
• 遅延後にトリガー — 設定されている場合、ウィジェットは定義された秒数に一致する遅延の後でのみ表示されます（オーバーレイの場合）。

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

コンポーネント設定

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

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

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

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

商品ソース

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

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

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

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

INFO

「おすすめの商品」、「よく一緒に購入されている商品」、または「商品アクティビティ」モデルを使用する場合、これらのモデルは現在表示されている商品に基づいているため、ウィジェットは商品ページにのみ表示されます。

商品アクティビティ

図10：商品アクティビティコンポーネント

ウィジェットが「商品アクティビティ」タイプの場合（ウィジェットの作成を参照）、商品レコメンデーションコンポーネントの代わりに「商品アクティビティ」コンポーネントにアクセスできます。このコンポーネントの設定は図10で確認できます。

これらの設定の主要な要素は、「コンテンツ」テキスト設定で使用される変数{{count}}に関係しています。商品アクティビティは、現在の商品の閲覧数/カート追加数/最近の購入回数（商品ソースで定義）のリアルタイム値を提供します。ウィジェットでこの値にアクセスするには、「コンテンツ」テキスト内のどこかで{{count}}変数を使用する必要があります。