サイト内検索（GSCP）で検索結果画面以外にサジェスト機能を追加する方法

変更日水, 23 7月で 10:38 午前

サジェスト機能のみの導入ステップ概要は次のとおりです。

①検索窓（FORMタグ）に id属性を追加、または確認

②サジェスト用設定タグを追加

③サジェスト用起動タグを追加

④スタイルシートで見た目を調整

⑤本番反映

【注意】

標準のサジェスト機能では日本語と英語が混ざってサジェストされます。英語画面に

導入された場合、日本語のサジェストが表示されますのでご留意ください。

サジェスト機能を日本語と英語に分ける場合(ディレクトリで分割)は有償対応となります。

■導入ステップ例 (お客様サイトに応じて読み替えてください)

①検索窓（FORMタグ）に id属性を追加、または確認

次のFORMタグへの導入を想定します。

<form method="get" action="/search.html">
  <input type="search" name="q" placeholder="キーワード検索" size="50">
  <input type="submit" name="" value="検索">
</form>

id属性を追加します。id属性値は当該ページ内で一意となります。

<form method="get" action="/search.html">
  <input type="search" id="q1" name="q" placeholder="キーワード検索" size="50">
  <input type="submit" name="" value="検索">
</form>

※機能を損なわない範囲でサイトに合わせて検索ボタンの画像化などをお願いします。

②サジェスト用設定タグを追加 (設定値についてはドキュメントを参照してください)

次のscriptタグを追加 (本番用のuid値を設定してください)

<script type="text/javascript">
var poplink3 = [{
  uid: "xxxxxxxxxx", // 日英混在 本番用uid値を設定してください。
  deviceType: { desktop: 'pcia', mobile: 'spia' },
  target: "#q1",
}];
</script>

※「target」に「①」の id属性値を設定してください。

サイト内検索用主要パラメータ

・PC用

https://docs.geniee-search.net/poplink/technical_reference/#pcia

・SP用

https://docs.geniee-search.net/poplink/technical_reference/#spia

③サジェスト用起動タグを追加

次のscriptタグを追加 (本番用URLを設定してください)

<!-- GENIEE SEARCH 起動 -->
<!-- poptag manager -->
<script type="text/javascript">
(function () {
  var script = document.createElement("script");
  script.setAttribute("src", "https://js.poplink.jp/xxxxxxxxxx/poptagmanager.js?ts=" + Date.now()); // 本番用URLを設定してください。
  script.setAttribute("defer", true);
  document.head.appendChild(script);
})();
</script>
<!-- end: poptag manager -->
<!-- GENIEE SEARCH 起動ここまで -->

④スタイルシートで見た目を調整

DOM構造を次のURLからご参照いただき、スタイルシートでご調整ください。

※他項目の参照は不要です。

・PC用

https://docs.geniee-search.net/poplink/technical_reference/#dom_structure-pcia

・SP用

https://docs.geniee-search.net/poplink/technical_reference/#dom_structure-spia

⑤本番反映

【備考】

検索窓が複数ある場合は「①」の id属性値追加・確認を各検索窓に実施し、

「②」の設定タグを次のようにしてください。

<script type="text/javascript">
var poplink3 = [{
  uid: "xxxxxxxxxx", // 日英混在 本番用uid値を設定してください。
  deviceType: { desktop: 'pcia', mobile: 'spia' },
  target: "#q1",
},{
  uid: "xxxxxxxxxx", // 日英混在 本番用uid値を設定してください。
  deviceType: { desktop: 'pcia', mobile: 'spia' },
  target: "#q2",
}];
</script>

※「target」にそれぞれの id属性値を設定してください。

　ページにより FORMタグが増減する場合は、pushメソッドを使用し、「poplink3」配列に pushする方法で

　ご対応いただけると考えられます。