商品レコメンデーションコンポーネント
商品レコメンデーションコンポーネントは、Fanplayrのクリエイティブエディター内にあります。
例
.Cq3T80KX.png)
レコメンデーションコンポーネントの例。
.Bc6qDc-r.png)
レコメンデーションコンポーネントのアイコン。
コンセプト
このコンポーネントに関連する高レベルのコンセプト：
- 商品をグリッドで一覧表示します
表示される商品の数は、利用可能なスペースの量と定義された商品テンプレートのサイズに基づきます。 - 商品テンプレート
リスト内のアイテムのスタイル設定は、商品テンプレートによって制御されます。これにより、ユーザーは商品の全体的なサイズ、画像、テキスト、および行動喚起をデザインできます。 - リストナビゲーション
さらに表示する商品がある場合、左右のナビゲーション矢印が表示されます。 - 商品をクリックする
ユーザーが商品をクリックすると、ブラウザは対応する商品ページに移動します。このアクションはInsightsでも追跡されます。 - ウィジェットの表示はこのコンポーネントに依存します
レコメンデーションコンポーネントがウィジェットで使用される場合、ウィジェットはサービスから商品レコメンデーションが返されるまで待機してからウィジェットを表示します。
コンポーネントの構造と商品テンプレートグリッドのレイアウト。
商品テンプレートの構造とレイアウト
一般的なプロパティ
これらのプロパティは、使用されるレコメンデーションAIモデルと、レコメンデーションサービスからリクエストされる商品の数を制御します。
レコメンデーションタイプ
- タイプ： レコメンデーションAIモデル
使用するレコメンデーションAIモデル：
一般モデル：
- よく一緒に購入される商品
- お客様へのおすすめ商品
- あなたへのおすすめ商品
- 最近閲覧した商品
商品ランキングモデル：
- 閲覧数でランク付け
- カート数でランク付け
- 購入数でランク付け
- 収益でランク付け
注：アカウントで有効化され、トレーニングが完了したモデルのみが選択可能です。
最小商品数
- タイプ： 整数
必要な最小商品数。これは、レコメンデーションAIモデルからレンダリングできる商品が少なくとも一定数確保されるようにするために使用できます。レコメンデーションサービスが十分な商品を返せない場合、ウィジェットはレンダリングされません。
INFO
最近閲覧した商品以外のAIモデルの場合、ユーザーが見て魅力的だと感じるコンテンツを十分に確保するために、最低5つ以上の商品を使用することをお勧めします。
最大商品数
- タイプ： 整数
サービスにリクエストする最大商品数。
この値はサービスがクエリする商品の推奨数であり、この最大数の商品が返される保証はありません。クエリ応答時間を短縮するために、最大数を30未満に保つことをお勧めします。
日数
- タイプ: 整数
- 適用対象： 商品ランキングレコメンデーションのみ
今日からさかのぼって、トップランクの商品をクエリする際に使用する履歴の日数。 有効な値は1から30の間で、「1」は過去24時間までのデータをクエリし、「2」は過去48時間までのデータをクエリします。
開始価格
- タイプ： 整数
- 適用対象： 商品ランキングレコメンデーションのみ
結果を、価格が開始価格以上である商品のみに限定します。制限なしの場合は空欄のままにします。
終了価格
- タイプ： 整数
- 適用対象： 商品ランキングレコメンデーションのみ
結果を、価格が終了価格以下である商品のみに限定します。制限なしの場合は空欄のままにします。
カテゴリ
- タイプ： テキスト
- 適用対象： 商品ランキングレコメンデーションのみ
結果を、指定されたカテゴリ名の商品のみに限定します。現在のページカテゴリを使用するように設定することも可能です。
商品プロパティ
これらのプロパティは、商品の全体的な寸法に関連します。
幅
- タイプ： 寸法（ピクセル）
単一商品の幅。
コンポーネントは、全体の幅と商品の幅を使用して、一度に表示できる商品の数を決定します。残りの商品は非表示になり、ユーザーにはリストをナビゲートするための矢印ボタンが表示されます。
例えば、コンポーネントの幅が800pxで、商品の幅が150pxの場合、一度に最大5つの商品が表示されます。
高さ
- タイプ： 寸法（ピクセル）
単一商品の高さ。
コンポーネントは、全体の高さと商品の高さを使用して、表示できる商品行の数を決定します。
例えば、コンポーネントの高さが500pxで、商品の高さが200pxの場合、必要に応じて最大2行の商品が表示されます。
ガター
- タイプ： 寸法（ピクセル）
各商品を囲む最小の間隔。これは、リスト内または行内の隣接する商品間に区切りを追加するために使用されます。
ボーダー
- タイプ： ボーダー
標準のボーダースタイル。
ボーダーラディウス
- タイプ： ボーダーラディウス
標準のボーダーラディウススタイル。
背景
- タイプ： カラー
商品の背景色。
X-パディング
- タイプ： 寸法（ピクセル）
コンポーネントの端に水平方向の間隔を追加し、商品グリッドを中央に寄せるために使用します。
画像プロパティ
高さ
- タイプ： 寸法（ピクセル）
画像の高さ。
画像は常に商品の全幅を占めますが、画像の高さは調整可能です。
背景
- タイプ： カラー
商品画像の透明な部分に使用する背景色。
背景サイズ
- タイプ： 背景サイズ
標準の背景サイズスタイル。画像が利用可能なすべてのスペースを占めるように拡大縮小されるか（画像の一部が切り取られる可能性あり）、または画像全体が表示されるように縮小されるかを制御します。
説明プロパティ
テキスト
- タイプ： リッチテキスト
リッチなカスタマイズオプションを可能にするテキスト要素。「変数挿入」アクションを使用して追加できる以下の変数をサポートします。
{{ productRec.name }}- 現在の商品名。{{ productRec.price }}- 現在の商品価格（通貨記号を含む）。{{ productRec.url }}- 現在の商品URL。{{ productRec.rank }}- 現在の商品ランキング。例: 1, 2, 3.
マージン
- タイプ： マージン
テキストエリアの外側に追加する間隔。これにより、画像とボタンの間にスペースが追加されます。
ボタンプロパティ
表示
- タイプ： 真偽値
行動喚起ボタンを表示するか非表示にするか。
マージン
- タイプ： マージン
ボタンの外側に追加する間隔。これにより、ボタンの上の商品テキストとの間に間隔が追加されます。
パディング
- タイプ： パディング
ボタンの内側に追加する間隔。
ボーダー
- タイプ： ボーダー
標準のボーダースタイル。
ボーダーラディウス
- タイプ： ボーダーラディウス
標準のボーダーラディウススタイル。
テキスト
- タイプ： リッチテキスト
ボタンテキスト。説明テキストと同じ変数をサポートします。
テキストカラー
- タイプ： カラー
ボタンのテキストカラー。
背景
- タイプ： カラー
ボタンの背景色。
ナビゲーションボタンのプロパティ
これらのボタンは、視覚的に表示できるよりも多くの商品がある場合に、コンポーネントの左右に表示されます。
ナビゲーションボタンの構造（右ボタンが表示されています）。
ボーダー
- タイプ： ボーダー
標準のボーダースタイル。
ボーダーラディウス
- タイプ： ボーダーラディウス
標準のボーダーラディウススタイル。(ヒント： 半径を50%に設定するとボタンが円形になります)
パディング
- タイプ： パディング
ボタンの内側に追加する間隔。
X-オフセット
- タイプ： 寸法（ピクセル）
ナビゲーションボタンとコンポーネントの端の間に追加する水平方向の間隔。
背景
- タイプ： カラー
ボタンの背景色。
矢印サイズ
- タイプ： 寸法（ピクセル）
矢印全体のサイズ。
矢印の幅
- タイプ： 寸法（ピクセル）
矢印の太さ。
矢印の色
- タイプ： カラー
矢印の色。