Installation

データファイルの作成¶

データ作成者がデータファイルを作成します。商品データファイルのほかに、候補語登録ファイルと候補語除外ファイルを必要に応じて作成してください。

これらのデータファイルのフォーマットについては、「データフォーマット・リファレンス」を参照してください。

商品データファイル(必須)
候補語登録ファイル
候補語除外ファイル

データファイルの配置¶

前節で作成したデータファイルを、インターネットからHTTPプロトコル(HTTPSを含む)からアクセス可能な場所に配置してください。

セキュリティ上の理由によりアクセスを制限する必要がある場合、HTTPのBasic認証を設定可能です。
利用開始の通知時に、設定したユーザー名とパスワードをURLと併せてお知らせください。

注意

データファイルのURLは、変化しない静的なものを指定してください。
例えば、日時によって変化するようなURLを使用した場合、ポップリンクサーバーはデータファイルを取得することができません。

何らかの理由により、ポップリンクサーバーが、データ作成者が配置したデータファイルを取得できない場合、データ更新処理を中止します。
この場合は最後に取得したデータのまま運用されます。

利用開始の通知¶

データファイルを配置したURL等を弊社へお知らせいただきます。
利用開始の通知用フォームを弊社営業よりお届けしますので、URLやその他の項目をご記入の上ご返送ください。

Webページへの導入¶

ポップリンクタグ¶

ポップリンクの契約ごとに、HTMLで書かれたポップリンクタグが発行されます。
これをWebページに配置してください。
これにより、Webページにフロントエンドが組み込まれ、ポップリンクが使えるようになります。

下記にタグの例を示します。

<script>
  // ポップリンク設定タグ
  var poplink3 = {
    uid: "[UID]",
    target: "#q",
    deviceType: "pc011"
  };
  // タグマネージャー
  (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>

パラメータ¶

ポップリンクタグは、表示や動作を制御するためのパラメータ(設定値)を持ちます。
サイト管理者は、このパラメータの値によって、ポップリンクの動作をカスタマイズすることができます。

パラメータのうち、ポップリンクを導入する検索ボックスを指定するtargetパラメータと、ポップリンクのサービス識別コード(UID)を指定するuidパラメータは必ず指定しなければなりません。
そのほかパラメータには既定値が設定されています。

ポップリンクの主なパラメータを下記に示します。全パラメータの詳しい説明は、「ポップリンクタグパラメータリファレンス」を参照してください。

パラメータ名	概要
target	検索ボックス(input要素)の指定(必須) ※
uid	ポップリンクのサービス識別コード(UID)(必須)
deviceType	デバイスタイプ(レイアウト)の指定
suggestCount	候補語の最大表示数
searchCount	商品検索結果の最大表示数
searchAutoDisplay	候補語を表示と同時に商品検索結果を表示する
displaySearchHeader	商品検索結果の見出しを表示する
searchHeaderText	商品検索結果の見出し
searchAnchorFilter	商品ページのURLを編集するフィルタ
searchClickHook	商品検索結果をクリックしたときのフックスクリプト

導入先の指定¶

targetパラメータに、導入先の検索ボックスをCSSのセレクタと同じ方法で指定します。たとえば、
<input id="q" type="text"/> という検索ボックスにポップリンクを導入するには、targetパラメータに"#q"と指定します。
(先頭の#は、IDを指定することを示します)

CSSのセレクタについては、W3Cの仕様書や市販の解説書などを参考にしてください。

デバイスタイプの選択¶

deviceTypeパラメータに、導入するポップリンクのデバイスタイプ(レイアウト)を指定します。たとえば、縦型のレイアウトであるpc011を使用する場合には、 deviceType: "pc011" のように指定します。

ポップリンクで提供されているデバイスタイプとその名前の一覧は、「デバイスタイプ一覧」を参照してください。

Webページへの導入¶

HTMLファイルを編集して、ポップリンクタグを BODY 要素の末尾 ( </body> の直前) に配置してください。
下記に例を示します。

<!DOCTYPE html>
<html>
<head>
<!-- 中略 -->
</head>
<body>
<!-- 中略 -->
<script>
  // ポップリンク設定タグ
  var poplink3 = {
    uid: "[UID]",
    target: "#q",
    deviceType: "pc011",
    suggestCount: 10
  };
  // タグマネージャー
  (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>
</html>

多くの場合、ポップリンクタグを、HTML ファイル中の他の場所に配置してもポップリンクは動作しますが、特別な理由がなければ BODY 要素の末尾に配置してください。

表示位置の指定¶

ポップリンクは、特に指定しない限り、検索ボックス(INPUT要素)の直後に、ポップリンクの表示用のDIV要素が挿入されます。

しかし、実際のWebページのHTMLでは、表示用のDIV要素の挿入位置を指定する必要がある場合があります。
この場合には、displayTargetパラメータを用いて、表示用DIV要素を挿入する位置を指定します。

下記にポップリンクのパラメータの設定例を示します。
この例では、poplinkというidを持つ要素の末尾に、ポップリンクの表示用のDIV要素を挿入します。

var poplink3 = {
  /* 中略 */
  displayTarget: "#poplink"
};

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

複数のポップリンクの設置¶

同一ページに存在する複数の検索ボックスのそれぞれに、ポップリンクを導入することができます。
複数のポップリンクを設置するには、それぞれのポップリンクのパラメータを配列の形式で設置します。
それぞれのポップリンクの設定で、target の指定が異なる点に注意してください。
また、複数のポップリンクを契約している場合は、それぞれで異なる UID を指定することができます。

下記にタグの例を示します。

<script>
  // ポップリンク設定タグ
  var poplink3 = [{
    uid: "[1 つ目の契約の UID]",
    target: "#q1",
    deviceType: 'pc022'
  }, {
    uid: "[2 つ目の契約の UID]",
    target: "#q2",
    deviceType: 'pc033'
  }];
  // タグマネージャー
  (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>

レスポンシブウェブデザインを用いたページへの導入¶

PC向けとスマートフォン向けのWebページを1つのHTMLで記述したページで、ポップリンクのレイアウトを使い分けるには、ポップリンクタグのデバイスタイプに、PC向けとスマートフォン向けを記述します。

deviceType: { desktop: 'pc011', mobile: 'sphs' }

上記の例では、PC向け(desktop)にpc011を指定し、スマートフォン向け(mobile)にsphsを指定しています。

注意

デバイスタイプはポップリンクのロード時に決定します。動的には変更されません。

注意

デフォルトの設定では、デバイスの種類(PCまたはスマートフォン)の判別は、HTTPヘッダのUser-Agentを元に行われます。

デバイスの種類の判別が、ポップリンクとwebページとの間で異なる場合は、webページで使っている判断ロジックをdeviceNameHookに指定します。
このフックスクリプトは戻り値に、PCの場合には"desktop"、スマートフォンの場合は"mobile"を返す必要があります。

下記の例は、画面の横幅が1200ピクセル未満の場合にスマートフォンとして扱う場合のフックスクリプトの指定方法です。

deviceNameHook: function() {
  return (window.parent.screen.width) < 1200 ? 'mobile' : 'desktop';
}

タグマネージャーを用いた導入¶

Googleタグマネージャーなどのタグマネージャーを用いて、ポップリンクタグをWebページに導入することができます。

Googleタグマネージャーを用いた導入¶

Googleタグマネージャーにポップリンクタグを登録する際に留意する点は下記のとおりです。

「カスタムHTMLタグ」として、ポップリンクタグを登録する
「document.writeをサポートする」にはチェックを入れない

Googleタグマネージャーの操作方法や、Webページへのタグの設置方法については、Googleタグマネージャーヘルプセンターや市販の書籍などを参考にしてください。