概要

Datahubを利用することで、サイト上で商品の比較検討を行うことが可能です。複数の商品をモーダル内で横並びに比較することでエンドユーザーの体験向上が見込めます。

はじめに

本施策はDatahubを利用します。Datahubが利用可能な状態かご確認ください。また、こちらのシナリオを実施するためには以下の設定が完了している必要がございます。

• 商品のマスタ情報がDatahubにインポートされている必要があります。インポートがまだの場合は、以下を参考に商品マスタのインポートをお願いします。
  • 参考：商品マスタをDatahubにインポートする
• 商品詳細ページのURLに商品IDが含まれている必要があります。
  • 例：https://sample.com/item/A00001
  • 例：https://sample.com/detail?item_id=A0001

ご利用の手順

• 1.アクションテーブルに商品マスタをエクスポートする
• 2.接客テンプレートを編集する

1.アクションテーブルに商品マスタをエクスポートする

• 以下の記事を参考に、商品のマスタ情報をアクションテーブルにエクスポートします。
  • 商品マスタをアクションテーブルにエクスポートする

サイズ情報を含めたい場合は、サイズのデータを以下のようなフォーマットで用意してください。

2.接客テンプレートを編集する

• グローバルメニュー→「接客シナリオ」→「複数の商品をサイト上で比較検討できるようにする」を選択し、接客テンプレートをインストールします。
• 接客サービスの編集画面にて以下を設定します。

設定項目

• アクションテーブル名
  • 設定したアクションテーブル名を入力してください。
• アイテム比較ボタンの挿入位置
  • ボタンを埋め込む位置のCSSセレクタ名を入力してください。
• 商品IDの設定
  • 商品詳細ページのURL構造によって以下のように変更ください。
    • URLのパスに商品IDが含まれる場合（例：https://sample.com/details/A0001）
      • 「商品ID設定：URLの末尾が商品IDの場合」にチェック
      • 商品IDの文字数を入力（A0001であれば5）
    • クエリパラメータに商品IDが含まれる場合（例：https://sample.com/details?item_id=A0001）
      • 「商品ID設定：URLにクエリパラメータが含まれる場合」にチェック
      • クエリパラメータの名称を入力（例：item_id）

その他設定項目

• ボタンスタイル
  • 比較追加/解除ボタンのスタイルの設定になります。任意で設定ください。
• モーダルスタイル
  • ボタン追加後のモーダルのスタイル設定になります。任意で設定ください。