コンテンツにスキップ

実装

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

検索ボックスの埋め込み

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

  • 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 候補語の最大表示数
  • target パラメータはサジェストを設定する検索ボックスを CSS のセレクターで指定します。
    • 例: 検索ボックスの id 属性が q の場合、#q
  • deviceType パラメータはデバイスタイプを指定します。
  • 検索ボックスの直後にはサジェストを表示する div 要素が挿入されます。

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

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

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

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