概要

ユーザーが検索窓にキーワードを数文字入力した際に、自動的に検索キーワード候補を表示し、ユーザーの入力をサポートします。お客様のサイトに合った自由かつ柔軟なサジェスト機能を提供します。

主な利用箇所

💡

じゃと入力した時に赤枠のサジェストが表示されています。

前提設定

どのようなサジェストを描画したいか決めたうえ、管理画面より返却する項目等を指定します。

前提情報

サジェストは、以下の機能をまとめたものとなります。

それぞれ紹介します。

アイテム検索（単一）

通常のフリーワード検索で、単一項目のみ返却可能な機能となります。

アイテムのタイトルをサジェストに出したい時などに利用されます。

アイテム検索（複数フィールド）

通常のフリーワード検索で、複数項目返却可能な機能となります。

サジェストにアイテム画像や価格を数件描画したい時などに利用されます。

自由キーワード

管理画面よりCSVで登録したキーワードをサジェストで表示することができます。

複合キーワード

複合キーワードを前方一致で検索し、サジェストに表示することができます。

カテゴリ絞込み

絞込み可能な値を表示し、フリーワード＋絞込みを促します。

フリーワード検索だけだとヒット数が多すぎるときなどに利用されます。

💡

サジェストではなく自動で検索結果を絞り込みたい場合は自動絞り込み機能が利用できます。

履歴

フリーワード検索した履歴を前方一致で検索し、サジェストに表示することができます。

オートリレーション

ユーザの行動履歴をもとに、検索キーワードと候補となるアイテムの紐づけを自動で行い、サジェストに表示することができます。

ユーザは目的のアイテムを探す手間が削減され、直接遷移できるようになります。

具体的な用途として、正式名称が分からない略称で検索を行うがヒットしないという状況をユーザの行動履歴から、該当の略称で検索して最終的に購入したアイテムを記録し、略称で検索されたときに購入すると思われるアイテム情報を表示することができます。

⚠️

オートリレーションはオプション機能となります。

⚠️

オートリレーションは分析用APIを実行することで精度が高くなります。 JavaScriptにる組み込み方法はこちら。

ポイント

サジェストで返却できる機能は多数ありますが、表示できる範囲には限りがあります。

特にSPは画面が小さいため１～２種類ほどの表示が現実的です。

サジェストでなにを行いたいのか決めたうえで利用する機能を選択してください。

ユーザの入力負荷を軽減させたい

履歴を利用することで、再訪問時にキーワードの再検索をしやすくする

人気キーワードを入力フォームフォーカス時に表示することで、そもそも入力をしないで人気のワードで検索が可能

入力中にアイテムのタイトルを表示することで、アイテム名を全て入力する必要をなくす

すぐに商品詳細へ探したい

入力されたキーワードの検索結果を数件表示することで、検索結果に遷移することなく商品詳細やカート投入が可能

略称で検索されてアイテムがヒットしないが、目的の商品は存在しているためヒットさせたい

オートリレーションを利用

💡

同義語を登録することで、略称で検索されてもアイテムをヒットさせることができますが、手動登録となるため、運用負荷軽減などにも利用されます。

実装方法

リクエストパラメータ：自動補完API

javascript
https://xxx/xx.xml?q=じゃ

レスポンス

タグ	内容
suggestions > suggestion	アイテム検索（単一）＋人気キーワード＋自由キーワードの内容どの機能を最大何件出すかなどは管理画面から設定可能 qに値を入れて検索します。
histories > history	履歴検索情報取得APIでcを指定して検索を行い、リクエストパラメータに同じ値のcを付与していることが前提 ※検索後履歴の登録までには時間がかかります。 qに値を入れて検索します。
by_any_chance_items > by_any_chance_item	オートリレーション各項目を利用してアイテムを表示し詳細等への遷移を促します。
facet_fields > facet_field	カテゴリ絞込み入力ワードとvalueの値でサジェストを表示し、入力ワード＋valueの値で絞り込んで検索します。
items > item	アイテム検索（複数フィールド）各項目を利用してアイテムを表示し詳細等への遷移を促します。
relation_words > relation_word	関連キーワード qにvalueの値を入れて検索します。
compounds > compound	複合キーワード入力ワードとvalueの値でサジェストを表示し、入力ワードとvalueの値をqに入れて検索します。
relation_contents > relation_content	関連コンテンツ各項目を利用してバナー等を表示し遷移を促します。

javascript
<response>
  <status>0</status>
  <suggestions>
    <suggestion>じゃがいも</suggestion>
    <suggestion>ブルーマウンテン産珈琲/コーヒー 100g</suggestion>
    <suggestion>男爵薯/だんしゃくいも＜ジャガイモ 30個</suggestion>
  </suggestions>
  <histories>
    <history>ジャーマンポテト</history>
  </histories>
  <by_any_chance_items>
    <by_any_chance_item>
      <by_any_chance_item_id nil="true"/>
      <item_id>1108010059502</item_id>
      <title>title</title>
      <url>http://xxx</url>
      <img_url>http://xxx/xxx.jpg</img_url>
      <price>100</price>
    </by_any_chance_item>
  </by_any_chance_items>
  <facet_fields>
    <facet_field field="ctg1">
      <option value="食品" count="27"/>
      <option value="飲料" count="18"/>
      <option value="日用品" count="9"/>
    </facet_field>
  </facet_fields>
  <items>
    <item>
      <title>男爵薯/だんしゃくいも＜ジャガイモ 30個</title>
      <url>
        <value>http://xxx</value>
      </url>
      <img_url>
        <value>
          http://xxx/xxx.jpg
        </value>
      </img_url>
    </item>
  </items>
  <relation_words>
    <relation_word source="じゃがいも" value="カレー"/>
    <relation_word source="じゃがいも" value="シチュー"/>
  </relation_words>
  <compounds>
    <compound source="じゃがいも" value="男爵"/>
    <compound source="じゃがいも" value="メークイーン"/>
  </compounds>
  <relation_contents type="サジェスト">
    <relation_content>
      <title>バナー1</title>
      <url>https://xxx</url>
      <text/>
      <image_url>https://xxx/xxx.jpg</image_url>
    </relation_content>
  </relation_contents>
</response>

サジェスト（自動補完）出したい

概要