基本ショッパーチュートリアル

このチュートリアルに従って、パーソナルショッパーの作成方法を学びましょう。

前提条件については、パーソナルショッパーの作成ドキュメントを確認してください。有効な製品カタログと、そのカタログに対して少なくとも1つの有効なレコメンデーションモデルが必要です。さらに、このチュートリアルでは、サイトに有効な埋め込みURLと対応する埋め込みセレクターが必要です。

1. ショッパーリストから作成

図1：ショッパーリスト

「Create shopper for Default Catalog」をクリックして、最初のパーソナルショッパーの作成プロセスを開始します。

2. ウィジェットレベル設定の定義

図2：ウィジェットレベル設定

左側の「General Settings」をクリックし、右サイドバーの「Widget Level Config」設定グループに埋め込みURLと埋め込みセレクターを入力します。_図2_に入力された値は次のとおりです。

• Embed URL: https://fp-dev-1.myshopify.com/pages/personal-shopper
• Embed Selector: #fp_personal_shopper - これはid="fp_personal_shopper"のHTML要素をターゲットにします。

3. 製品ソースの選択

図3：製品ソース設定

次のステップは、製品ソース設定を構成することです。レコメンデーションコンポーネントをクリックし、右サイドバーの「Product Source」設定の下にある「Change」をクリックします。

ポップアップで、「Model」設定を「Recommended For You (Fanplayr AI)」に設定します。これにより、システムはFanplayrの内部「Recommended for you」アルゴリズムを使用して、このレコメンデーションセクションに表示する製品を決定します。

この例ではパーソナルショッパーをシンプルにするため、「Product Limit」設定を5に設定します。これは、このレコメンデーションコンポーネントに最大5つの製品が表示されることを意味します。

「Update」をクリックして変更を確定します。

4. 製品タイルをカスタマイズ

図4：製品タイル

コンポーネント設定の「Product Tile」セクションまでスクロールします。ここでは、製品タイルの外観を改善するためにいくつかの小さな変更を加えます。

1. 「Image Background Color」をライトグレーのようなニュートラルな色に設定します。この設定により、透明な領域を含む製品画像に背景色が追加されます。
2. 画像の形状を「Square」に設定します。
3. 「Image Corner Radius」を16pxに設定して、製品画像にきれいな丸いエッジを追加します。
4. 「Product Price」の下にある「Edit style」をクリックします。これにより、サイドバーが「Product Price」設定に特化した設定エディターに置き換わります。「Italic」チェックボックスを見つけて、有効になっていることを確認します。これにより、製品価格がわずかに洗練された見た目になります。エディター上部にある戻るボタンをクリックして、残りのコンポーネント設定に戻るようにしてください。

5. ショッパーの公開

製品は_図5_に示されているように見えるはずです。製品が不足している場合、それは「Recommended for you」製品を表示するために必要なトレーニングデータが不足しているためである可能性があります。この現象が発生した場合は、「Ranking by Views」のような別のアルゴリズムにモデルを変更してみてください。

図5：製品タイルが更新されたショッパー

パーソナルショッパーでさらに設定をカスタマイズしてください。満足したら、「Publish」をクリックし、確認を求められたら確定します。パーソナルショッパーは確定後すぐに公開されます。

6. サイトでショッパーを表示

「Embed URL」設定で定義したURLに移動し、サイトでパーソナルショッパーがライブ表示されているのを確認してください！

図6：サイトでライブ表示されたパーソナルショッパー

トラブルシューティング

サイトでパーソナルショッパーが表示されない

• Fanplayrのスクリプトがサイトで実行されていることを確認してください。
• 埋め込みURLを再確認し、そのページに埋め込みセレクターが存在することを確認してください。

見出しは表示されるが製品が表示されない

• これの最も一般的な原因は、選択されたモデルが製品を返さないことです。これは、トレーニングデータの不足またはカタログ内の製品の不足が原因である可能性があります。サポートが必要な場合は、Fanplayrの担当者にお問い合わせください。

ショッパーがエディターとは少し異なるライブ表示になる

• パーソナルショッパーは、ページのCSSの一部を継承します。特にテキストの外観を制御するfont-familyが該当します。公開する前に、ライブプレビュー機能を使用して、サイト上でパーソナルショッパーがどのように表示されるかを確認することを検討してください。