クリエイティブでの使用
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オフセット
- タイプ: 寸法 (ピクセル)
ナビゲーションボタンとコンポーネントの端の間に追加する水平方向のスペース。
背景
- タイプ: 色
ボタンの背景色。
矢印サイズ
- タイプ: 寸法 (ピクセル)
矢印の全体のサイズ。
矢印幅
- タイプ: 寸法 (ピクセル)
矢印の太さ。
矢印色
- タイプ: 色
矢印の色。