ウィジェットの編集

はじめに

図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

「Others You May Like」、「Frequently Bought Together」、または「Product Activity」モデルのいずれかを使用する場合、これらのモデルは現在表示されている商品に基づいているため、ウィジェットは商品ページでのみ表示されます。

商品アクティビティ

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

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

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

商品アクティビティの「商品ソース」設定には、「最小アクティビティ」の設定も定義されています。ランタイム時にアクティビティカウントで表示される値がこの設定を下回る場合、ウィジェットは表示されません。