画像付きサジェスト機能（旧ポップリンク）の表示レイアウトを変更する

画像付きサジェスト機能の表示をカスタマイズ

今回は、「GENIEE SEARCH for EC」の画像付き検索サジェスト機能のカスタマイズについてご紹介します。
画像付きサジェスト機能は、Webページに埋め込むパラメータの設定によって、様々なカスタマイズができます。

画像付きサジェスト機能の基本構造

下記は、もっとも基本的な画像付きサジェスト機能のscriptタグです。ご利用開始時にお知らせしているものとほぼ同じものです。

  <script>
    var poplink3 = {
      uid: "f7ca52f2c20a75622a642cb4a5386917m",
      target: "#keyword",
      deviceType: "pc022"
    };
    (function() {
      // 中略
    })();
  </script>

この var poplink3 = { … } の部分を、画像付きサジェスト機能では「タグパラメータ」と呼びます。
このパラメータを書き換えたり、追加することとで、画像付きサジェスト機能の動作を変えることができます。

候補語と商品情報の表示位置を変更

デバイスタイプを変更してみる

デバイスタイプとは、表示される画像付きサジェスト機能のレイアウトの種類のことです。デスクトップ用、モバイル用に複数種類のデバイスタイプを提供しています。（各デバイスタイプについて詳しくは、ご契約時にご案内しているサービス仕様書のテクニカルリファレンスをご覧ください。）

上記の例では、デバイスタイプ”pc022″が指定されていますが、このデバイスタイプはデスクトップ用のもので、左側に候補語のリスト、右側に商品情報が表示されます。

これを、縦方向に表示する”pc011″に変更してみます。
タグパラメータを次のように変更してみましょう。

    var poplink3 = {
      uid: "f7ca52f2c20a75622a642cb4a5386917m",
      target: "#keyword",
      deviceType: "pc011"
    };

画像付きサジェスト機能を埋め込んだWebページを、ブラウザで表示してみてください。候補語リストと商品情報が縦方向に並んで表示されるようになるはずです。
※すでに表示済みであれば、リロードしてください。
※表示が変わらない場合はブラウザのキャッシュをクリアしてください。

このほかにも、画像付きサジェスト機能ではWebサイトのイメージや画面構成に応じた表示のカスタマイズが可能です。ぜひ、自社サイトに合ったカスタマイズを試してみてください。
（カスタマイズについて詳しくは、ご契約時にご案内しているサービス仕様書のテクニカルリファレンスをご覧ください。）

今回は、画像付きサジェスト機能のカスタマイズの基本についてご紹介しました。

検索サービス活用のオススメ記事

• サイト内検索時の画像表示機能でクリック率が約4倍になった事例
• Web掲載された複数のPDFファイルの文字を全文検索する方法とは？
• ランキング機能でECサイトのコンバージョン率を改善する方法
• 高機能サイト内検索「probo」導入のやり方・設置方法〜JavaScriptによるサービス提供編〜

GENIEE SEARCH編集部
（X：@BST_hoshiko）

ECサイトや企業サイトにおける快適なユーザ体験を実現するための導線改善方法から、ECマーケティングの手法まで幅広く情報を発信しています。