基本的なAIタグチュートリアル

このチュートリアルに従って、基本的なAIタグウィジェットを作成してください。始める前に、AIタグがアカウントに設定され、生成されていることをアカウントマネージャーに確認してください。

1. ストアのセットアップ

タグエクスプローラーを表示するためのURL（ページ）と、ページ内に埋め込む場所が必要になります。

タグエクスプローラーページ

通常のテンプレート（メニューなど）を含み、他のコンテンツを含まないページをサイトに追加することをお勧めします。

例として、https://mystore.com/tag-explorer.htmlに、以下のような埋め込み用のdivを持つページを定義します。

<div id="Product_Tag_Explorer"></div>

Product Tag Explorerを埋め込む場所は、通常のページのマージンとパディングを含める必要がありますが、通常のコンテンツと同様にサイズ変更できるようにしてください。Product Tag Explorerは必要なだけのスペースを占有します。

商品ページのタグリスト

また、商品ページにタグを埋め込む場所も必要になります。IDまたはclassを持つdivが良いでしょう。

例: <div id="Product_Tag_List"></div>

2. Product Tag Explorerの作成

まず、ポータルの「Merchandising」セクションに移動し、左側のサイドバーにある「Widgets」をクリックします。ウィジェットのリストが表示されます（空の場合もあります）。そこから、画面右上の「Add Widget」をクリックします。

Figure 1: Product Tag Explorerの作成

表示されるポップアップで、「Product Tag Explorer」オプションを選択し、「Next」をクリックします。

3. Product Tag Explorerの編集

Figure 2: 表示URLと埋め込みセレクターの設定

このチュートリアルでは、2つの設定のみを更新する必要があります。

• Display URL: https://mystore.com/tag-explorer.html

• Embed Selector: #Product_Tag_Explorer

これでウィジェットをPublishします。

4. Product Tag Listの作成

ポータルの「Merchandising」セクションに移動し、左側のサイドバーにある「Widgets」をクリックします。ウィジェットのリストが表示されます（ここにProduct Tag Explorerが表示されているはずです）。そこから、画面右上の「Add Widget」をクリックします。

表示されるポップアップで、「Product Tag List」オプションを選択し、「Next」をクリックします。

5. Product Tag Listの編集

Figure 3: 表示URLと埋め込みセレクターの設定

このチュートリアルでは、2つの設定のみを更新する必要があります。

• Display URL: https://mystore.com/product/*

表示URLに*を使用しているのは、すべての商品ページにタグリストを表示したいためです。

• Embed Selector: #Product_Tag_List

これは、以前作成したdivに追加したIDです。

これでウィジェットをPublishします。

6. テスト

サイトで任意の商品ページに移動してください。この例では、以下のようになります。

https://mystore.com/product/big-red-shoes.html

このページにProduct Tag Listが表示されるはずです。

いずれかのタグをクリックすると、Product Tag Explorerページに移動するはずです。

https://mystore.com/tag-explorer.html?tag=Red&product=big-red-shoes

ここでtagとproductもURLに追加されていることに注目してください。このページにProduct Tag Explorerが表示されるはずです。

トラブルシューティング

サイトにウィジェットが表示されません

• サイトでFanplayrのスクリプトが実行されていることを確認してください。
• Display URLを再確認してください。
• 選択したモデルが商品を返さなかった可能性があります。商品が返されない場合、ウィジェットは表示されません。同様に、選択したモデルが現在表示されている商品に依存する場合、ウィジェットは商品ページにのみ表示されます。

ライブ環境でのウィジェットがエディターでの表示と少し異なります

• ライブウィジェットは、最も顕著なfont-family（テキストの外観を制御します）を含む、ページから一部のCSSを継承します。ライブプレビュー機能を使用して、公開前にウィジェットがサイトでどのように表示されるかを確認してください。