コンテンツにスキップ

実装

ユーザーは検索ボックスの埋め込まれたページに次の手順で実装を進めます。

検索ボックスの埋め込み

ユーザーは検索ボックスを埋め込みます。
次の値に設定してください。

  • form 要素の method 属性: get
  • input 要素の name 属性: q

例:

<body>
  <div id="header">
  ここはヘッダー
    <form class="" method="get">
      <input type="text" name="q" id="q" value="" placeholder="検索キーワード">
      <input type="submit" name="" value="検索">
    </form>
  </div>
  <div id="contents">
    <div id="main">
    </div>
  </div>
  <div id="footer">
  ここはフッター
  </div>
</body>

設定タグとタグマネージャーの埋め込み

ユーザーは body 要素の最後にサジェスト設定タグとタグマネージャーを埋め込みます。
サジェスト設定タグ、タグマネージャーの順で記述してください。

前提

UID は、画像付きサジェストの契約後に弊社からご連絡いたします。

補足

タグマネージャーはページに 1 つだけ埋め込みます。すでに埋め込まれていれば追加は不要です。

例:

<body>
  <div id="header">
  ここはヘッダー
    <form class="" method="get">
      <input type="text" name="q" id="q" value="" placeholder="検索キーワード">
      <input type="submit" name="" value="検索">
    </form>
  </div>
  <div id="contents">
    <div id="main">
    </div>
  </div>
  <div id="footer">
  ここはフッター
  </div>
    <script type="text/javascript">
      // サジェスト設定タグ
      var poplink3 = {
          uid: "[UID]",
          target: "#q",
          deviceType: "pcia"
          // その他の設定パラメータ
      };
      // タグマネージャー
      (function() {
        var script = document.createElement("script");
        script.setAttribute("src", "https://js.poplink.jp/[タグマネージャーの ID]/poptagmanager.js?ts=" + Date.now());
        script.setAttribute("defer", true);
        document.head.appendChild(script);
      })();
    </script>
</body>

注意

タグマネージャーは上記の通りに利用してください。
JavaScript ファイルとして保存して利用するなどした場合、サポート対象外となります。

サジェスト設定タグのパラメータ

サジェスト設定タグは、表示や動作を制御するためのパラメータ (設定値) を設定することで動作をカスタマイズすることができます。

2 つのパラメータは必ず指定しなければなりません。

  • target パラメータ: 検索ボックスを指定する
  • uid パラメータ: UID を指定する

主なパラメータを次の通りです。
全パラメータの詳しい説明は、「パラメータリファレンス」 を参照してください。

パラメータ名 概要
target 検索ボックス (input 要素) の指定
uid UID
deviceType デバイスタイプ
suggestCount 候補語の最大表示数
searchCount 商品検索結果の最大表示数
searchAutoDisplay 候補語を表示と同時に商品検索結果を表示する
displaySearchHeader 商品検索結果の見出しを表示する
searchHeaderText 商品検索結果の見出し
searchAnchorFilter 商品ページの URL を編集するフィルタ
searchClickHook 商品検索結果をクリックしたときのフックスクリプト
  • target パラメータはサジェストを設定する検索ボックスを CSS のセレクターで指定します。
    • 例: 検索ボックスの id 属性が q の場合、#q
  • deviceType パラメータはデバイスタイプを指定します。
  • 検索ボックスの直後にはサジェストを表示する div 要素が挿入されます。

    挿入位置を変更したい場合、displayTarget パラメータで位置を指定します。

例: suggest という id を持つ要素の直後に挿入する

// サジェスト設定タグ
var poplink3 = {
  /* 中略 */
  displayTarget: "#suggest"
};

PC 向けのページでは、多くの場合、displayTarget の指定がなくても問題なく表示されますが、レイアウト上の制約の多いスマートフォン向けのページでは、挿入位置を指定することを推奨します。