基本AIタグチュートリアル
このチュートリアルに従って、基本的なAIタグウィジェットを作成します。始める前に、アカウントマネージャーに、AIタグがアカウントに設定され、生成されていることを確認してください。
1. ストアのセットアップ
タグエクスプローラーを表示するためのURL（ページ）と、ページに埋め込む場所が必要になります。
タグエクスプローラーページ
通常のテンプレート（メニューなど）を含み、他のコンテンツを含まないページをサイトに追加することをお勧めします。
例として、次のような埋め込み用のdivを持つページをhttps://mystore.com/tag-explorer.htmlに定義します。
<div id="Product_Tag_Explorer"></div>
Product Tag Explorerを埋め込む場所には、通常のページのマージンとパディングを含める必要がありますが、通常のコンテンツと同様にサイズ変更できるようにしてください。Product Tag Explorerは、必要なだけスペースを占めます。
商品ページのタグリスト
商品ページにタグを埋め込む場所も必要になります。IDまたはクラスを持つdivが良いでしょう。
例: <div id="Product_Tag_List"></div>
2. Product Tag Explorerを作成する
まず、ポータルの「マーチャンダイジング」セクションに移動し、左側のサイドバーにある「ウィジェット」をクリックします。ウィジェットのリスト（空の場合もあります）が表示されます。ここから、画面右上の「ウィジェットを追加」をクリックします。
図1: Product Tag Explorerの作成
続くポップアップで、「Product Tag Explorer」オプションを選択し、「次へ」をクリックします。
3. Product Tag Explorerを編集する
図2: 表示URLと埋め込みセレクターを設定する
このチュートリアルでは、2つの設定のみを更新する必要があります。
表示URL:
https://mystore.com/tag-explorer.html埋め込みセレクター:
#Product_Tag_Explorer
これでウィジェットを公開します。
4. Product Tag Listを作成する
ポータルの「マーチャンダイジング」セクションに移動し、左側のサイドバーにある「ウィジェット」をクリックします。ウィジェットのリストが表示されます（ここにProduct Tag Explorerが表示されるはずです）。ここから、画面右上の「ウィジェットを追加」をクリックします。
続くポップアップで、「Product Tag List」オプションを選択し、「次へ」をクリックします。
5. Product Tag Listを編集する
図3: 表示URLと埋め込みセレクターを設定する
このチュートリアルでは、2つの設定のみを更新する必要があります。
- 表示URL:
https://mystore.com/product/*
表示URLで*を使用するのは、タグリストをすべての商品ページに表示したいからです。
- 埋め込みセレクター:
#Product_Tag_List
これは、以前作成したdivに追加したIDです。
これでウィジェットを公開します。
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
ここでURLにtagとproductも追加されていることに注意してください。このページにProduct Tag Explorerが表示されるはずです。
トラブルシューティング
サイトにウィジェットが表示されない
- Fanplayrのスクリプトがサイトで実行されていることを確認してください
- 表示URLを再確認してください
- タグが返されなかった可能性があります。表示している特定の商品に、Fanplayrポータルで少なくとも1つのタグが関連付けられていることを確認してください。
ライブでのウィジェットがエディターとは少し異なる
- ライブウィジェットは、ページから一部のCSSを継承します。特にテキストの外観を制御する
font-familyがそうです。公開する前に、ライブプレビュー機能を使用して、ウィジェットがサイトでどのように表示されるかを確認してください。