ポップリンク テクニカル・リファレンス

本書の著作権は、株式会社ジーニーが保有しており、本書中の解説および図、表は、株式会社ジーニーの文書による許可なしに、その全体または一部をいかなる場合にも再販あるいは複製することを禁じます。

また、本書に記載されている事項は、予告なく変更されることがありますので、あらかじめご承知おきください。万一、本書の記述に誤りがあった場合でも、弊社は一切その責任を負いかねます。

本書で解説するソフトウエアは、所定のライセンス契約が締結された場合に限り、その使用あるいは複製が許可されます。

このドキュメントに記載されている会社名および製品名は、各社の商標または登録商標です。

はじめに

本書の内容

本書は、ポップリンクについて、その機能や導入方法について主に説明しています。

1. ポップリンクの概要について説明します。
2. 入力アシスト機能について説明します。
3. 商品検索機能について説明します。
4. ポップリンクの導入手順について、データの準備・配置と、Webページへの導入に分けて説明します。
5. ユーザーインターフェースのカスタマイズ方法について説明します。
6. サイト管理者が設定できる各種パラメータについて説明します。
7. ポップリンクの動作をカスタマイズする各フィルタの機能と使い方について説明します。
8. ポップリンクの動作をカスタマイズする各フックの機能と使い方について説明します。
9. データ作成者が用意するデータファイルのフォーマットについて説明します。
10. フロントエンドが持つデバイスタイプについて説明します。
11. 各デバイスタイプのDOM構造について説明します。
12. Googleアナリティクスを用いてエンドユーザーの行動を計測する方法について説明します。

対象読者

本書は主に、次の方を対象に書かれています。

• Webサイト管理者
• データ作成者

前提知識

本書では、読者に次の知識があることを前提としています。

• HTMLに関する知識
• CSSに関する知識
• JavaScriptプログラミングに関する知識

主な用語

本書で使用している主な用語を下記に説明します。

対象者	説明
エンドユーザー	PCやスマートフォン等のブラウザを操作してWebサイトを訪れる人を指します
データ作成者	ポップリンクに入力するデータ(ファイル)を作成する人を指します
サイト管理者	Webサイトを作成・保守する人を指します
フロントエンド	ポップリンクのうち、ユーザーインターフェース部分を指します。 実体は、ブラウザ上で動作するソフトウエアです
ユーザー定義データ	データ項目のうち、ポップリンクが使用方法を定義しておらず、データ作成者とサイト管理者の間で使用方法を決めることができるものを指します。最大で3つ使用できます
サービス識別コード(UID)	ポップリンク契約ごとに発行されるサービス識別コード
候補語	入力アシスト機能において、入力された文字に応じて表示される単語を指します
デバイスタイプ	フロントエンドが表示する画面レイアウトの種類を指します。デバイスタイプは文字列で表します

本サービスのサポートについて

ポップリンクは、弊社が推奨する方法で設置、利用する場合に限り、弊社からのサポートが提供されます。
弊社が推奨しない方法や、リバースエンジニアリングの結果に基づいた方法で利用した場合にはサポートが提供されません。

ポップリンク概要

ポップリンクは、Webページに、入力アシスト機能、商品検索機能、商品レコメンド機能を提供するWebサービスです。
ポップリンクを導入したWebページでは、検索ボックスに入力された文字を元に、少ない操作で商品ページへ到達することができます。

図.ポップリンクの画面例

ポップリンクの構成

ポップリンクは、Webブラウザで動作するユーザーインターフェース部(フロントエンド といいます)と、インターネット上にあるポップリンクサーバーから作られています。

フロントエンドは、検索するキーワードの入力を補助する入力アシスト機能、入力されたキーワードに基づいて商品を検索・表示する商品検索機能、検索された商品に関連する商品を更に表示する商品レコメンド機能を、エンドユーザーに提供します。
フロントエンドには、PC向けとスマートフォン向けがあります。

ポップリンクサーバーは、フロントエンド向けの検索機能と、データ構成機能を持ちます。
検索機能は、フロントエンドからの要求に応じて、候補語や商品データを返します。
データ構成機能は、データ作成者が作ったデータファイルを定期的・自動的に取得して、検索データベースを構成します。

図.全体構成

入力アシスト機能

入力アシスト機能は、エンドユーザーの検索語の入力を補助します。
テキストボックスに入力した文字から推測されるキーワード(候補語 といいます)を画面に表示し、少ないキー操作で検索語を入力できるよう補助します。

この機能で用いられる候補語は、データ作成者から提供される、商品データと候補語登録ファイルから自動的に作られます。

商品検索機能

商品検索機能は、入力アシスト機能で選択されたキーワードに基づいて、適切な商品データを、商品検索データベースより検索し、表示します。
商品検索機能では、次の情報を表示します。

• 商品名
• 商品画像
• 商品説明
• データ作成者が定義した情報(最大3つ)

また、検索結果は、商品ページへのリンクとして表示されます。
(この領域をクリックした場合、当該の商品ページへ遷移します)

商品レコメンド機能

商品検索機能で表示商品と関係性の高い商品を検索・表示します。
商品レコメンド機能では、次の情報を表示します。

• 商品名
• 商品画像
• 商品説明
• データ作成者が定義した情報(最大3つ)

また、レコメンド結果は、商品ページへのリンクとして表示されます。
(この領域をクリックした場合、当該の商品ページへ遷移します)

注意

商品レコメンド機能の利用には、別途、レコメンドサービス提供者との契約が必要です。
ポップリンクで利用可能なレコメンドサービスについては、弊社営業までお問い合わせください。
本書では、商品レコメンド機能についての解説を省略しています。

入力履歴表示機能

入力履歴表示機能は、過去に候補語選択によって入力したキーワードを表示します。
本機能を利用することで、過去に検索したキーワードを再度検索することができます。
機能はデフォルトでは無効になっていますが、パラメータの設定を変更することで有効にすることができます。

その他の機能

ユーザーインターフェースのカスタマイズ

ポップリンクのフロントエンドは、ユーザーインターフェースを一定の範囲でカスタマイズすることができます。
このカスタマイズはパラメータの設定を変更することで行います。

スタイルシートを利用することで、ユーザーインターフェースのデザインをカスタマイズすることができます。
また、フックを利用して、サイト管理者が作成したJavaScriptプログラムを呼び出して動作をカスタマイズすることもできます。

スタイルシートやフックを用いたカスタマイズは、サイト管理者の責任において行ってください。
この方法でカスタマイズをした場合には、弊社からの技術サポートが提供されない場合があります。
詳しくは「フロントエンドのカスタマイズ」を参照してください

SSL接続のサポート

ポップリンクはSSLによる接続をサポートします。

URLがhttps:で始まるページに設定されたポップリンクは、ポップリンクサーバーとの間でSSL(Secure Socket Layer)による暗号化通信を行います。

サードパーティ製アクセス解析ツールの利用

ポップリンクを使うエンドユーザーの行動データを、Googleアナリティクスをはじめとするサードパーティ製アクセス解析ツールへ送信することができます。
行動データは、ポップリンクの入力アシスト機能を用いて入力したキーワードや、商品検索機能による検索結果や、商品レコメンド機能の結果からユーザーが決定した情報が対象です。
ポップリンクは、アクセス解析ツールとしてGoogleアナリティクスを標準でサポートします。

その他のアクセス解析ツールを利用する場合、ポップリンクのフロントエンドのフック機能を介してデータを送信することができます。
(フックスクリプトを作成する必要があります)

なお、アクセス解析ツールの利用には、あらかじめ、利用するアクセス解析ツールの申し込みや設定が必要です。

タグマネージャーのサポート

Googleタグマネージャーなど、一般的なタグマネージャーを利用してポップリンクを設置することができます。
弊社から発行されるポップリンクのタグをタグマネージャーに登録し、Webページへ設置します。

入力履歴表示機能

入力履歴表示機能では、候補語選択によって入力されたキーワードの履歴を表示することができます。
この機能を利用することで、過去に検索したキーワードを再利用することができます。

入力履歴はcookieに保存され、一定期間後に自動的に削除されます。
各キーワードごとに削除ボタンが表示され、削除ボタンを押すことで当該のキーワードのみを削除することができます。

ポップリンクの動作の概要

PC向けフロントエンドとスマートフォン向けフロントエンドでは、そのデバイスの特性のため動作が異なります。

PC向けフロントエンド

PC向けのフロントエンドは次のように動作します。

1. エンドユーザーが、検索ボックスに文字列を入力します
2. 検索ボックスに入力された文字列を元に、候補語リストが出力されます
3. エンドユーザーが、マウスポインタを候補語の上にのせて候補語を選択します
4. 選択された候補語をキーワードとして検索した商品が表示されます
   (マウスや矢印キーを使って選択する候補語を変えるたびに商品が検索されます)
5. 選択された候補語をクリックすることで検索キーワードを決定します。
   その結果、検索ボックスに選択した候補語が入力されます
6. 検索結果をクリックすると、商品ページへ遷移します

図.PC向けフロントエンドの表示例

スマートフォン向けフロントエンドの動作

スマートフォン向けのフロントエンドは次のように動作します。

1. エンドユーザーが、検索ボックスに文字列を入力します
2. 検索ボックスに入力された文字列を元に、候補語リストが出力されます。1番目の候補語を検索キーワードとして検索した商品を、商品検索結果エリアに表示します
3. 未選択状態の候補語をタップすると、そのタップした候補語をキーワードとして検索した商品が、検索結果表示エリアに表示され、選択した候補語が選択状態になります
4. 選択中の候補語を再度タップすると、その候補語が検索ボックスに入力されます
5. 候補語リスト・商品検索結果を左右にスワイプすることで、表示されていない候補語や商品を見ることができます
6. 商品検索結果をタップすると、その商品ページへ遷移します
7. 右上に表示されている×マークをタップすると、ポップリンクの表示が消えます

図.スマートフォン向けフロントエンドの表示例

入力アシスト機能

入力アシスト機能とは

入力アシスト機能は、エンドユーザーがキーワードを入力するのを補助します。
検索ボックスに入力した文字列から読みが合致するキーワード(候補語 といいます)を画面に表示し、少ない操作でキーワードを入力できます。
また、文字列を入力する前にキーワードを表示する、デフォルトキーワード表示機能を利用することができます。

候補語とは別軸のアシスト情報を表示したい場合は、カスタムサジェストをご利用ください。

候補語の生成

あらかじめ、ポップリンクの候補語データベースに、候補語が登録されている必要があります。

入力アシスト機能で表示される候補語は、データ作成者が作成する商品データから自動的に抽出・生成される候補語と、データ作成者が提供する候補語登録ファイルから生成したものの２種類があります。

抽出による自動生成

データ作成者が作成した商品データの中の商品名や商品説明から単語を抽出して、候補語を自動的に生成します。ポップリンクでは、形態素解析と呼ばれる手法を用いて単語の抽出を行います。

抽出条件の詳細については、「文字に関する制限」を参照してください。

また、固有名詞や、一般的ではない読みを持つ単語などは自動抽出できないため、後述の候補語登録ファイルを用いて明示的に登録する必要があります。

候補語除外ファイル

意図せず自動生成されてしまった単語や、不要、または表示させたくない単語を候補語から除外する事ができます。
このような単語を候補語除外ファイルに記載して、管理画面からアップロードします。
候補語除外ファイルのフォーマットについては、「候補語除外ファイル」を参照してください。
候補語除外ファイルを使った単語の除外方法は、「ポップリンクの導入」を参照してください。

候補語登録ファイル

自動生成できない単語を候補語として利用するために、候補語登録ファイルを作成して登録します。
候補語登録ファイルを用いることで、自動抽出では生成することが難しい次のような単語も候補語として利用することができます。

• 地名、人名、商品名などの固有名詞
• 一般的ではない読みを持つ単語
• 複数のキーワードを並べる場合

候補語として利用したい単語を候補語登録ファイルに記載して、管理画面からアップロードします。
候補語登録ファイルのフォーマットについては、「候補語登録ファイル」を参照してください。
候補語登録ファイルを使った候補語の登録方法は、「ポップリンクの導入」を参照してください。

デフォルトキーワードの表示

エンドユーザーが検索ボックスに文字を入力する前に、キーワードを画面に表示することができます。
この機能で用いられるキーワードは、過去の入力アシスト機能の利用実績やデータ作成者から提供されるデフォルト表示キーワード登録ファイルから自動生成されます。
自動生成されたキーワードを非表示にする場合は、候補語除外ファイルを使用します。

デフォルト表示キーワード登録ファイル

デフォルトキーワードの表示内容を変更するために、デフォルト表示キーワード登録ファイルを作成して登録します。
デフォルト表示キーワード登録ファイルを用いることで、次のような用途で利用することができます。

• 自動生成されていないキーワードの表示
• 特定のキーワードの表示順位の変更

登録・変更したいキーワードをデフォルトキーワード表示登録ファイルに記載して、管理画面からアップロードします。
デフォルト表示キーワード登録ファイルのフォーマットについては、「デフォルト表示キーワード登録ファイル」を参照してください。

カスタムサジェストの表示

※本機能の利用には別途ご契約が必要です。詳しくはお問い合わせください

入力アシスト機能とは別軸のサジェスト情報を表示することができます。
この機能で用いられる情報は、カスタムサジェスト用データファイルから生成されます。

カスタムサジェスト用データファイル

カスタムサジェストの表示内容を変更するために、カスタムサジェスト用データファイルを作成して登録します。
カスタムサジェスト用データファイルを用いることで、次のような用途で利用することができます。

• カテゴリ等、入力アシスト機能とは別軸のサジェスト情報の表示

カスタムサジェスト用データファイルは、ポップリンクサーバがインターネット経由で定期的に収集します。 インターネットからHTTPプロトコル（HTTPSを含む）でアクセスできる場所に配置する必要があります。
カスタムサジェスト用データファイルのフォーマットについては、「カスタムサジェスト用データファイル」を参照してください。

候補語の表示

エンドユーザーが文字列を入力するに従って、表示される候補語は変化します。
ポップリンクが表示する候補語とその表示順は下記の方法によって決められます。

表示する候補語の決定

ポップリンクの候補語データベースから、読みが前方一致で合致するものを表示する候補語として取り出します。
読みの比較をする際には次の条件で行います。

• 片仮名と平仮名を区別しない
• 全角と半角を区別しない
• アルファベットの大文字と小文字を区別しない

候補語の表示順

候補語は次の条件で並べて表示されます。

• 候補語登録ファイルに記載されているもの(優先度の数値が大きいものが優先)
• 候補語登録ファイルに記載されているもの(上方に記載されているものが優先)
• 最近クリックされたキーワード(V2.xのフロントエンドを使用している場合のみ)
• 商品データのキーワードのカラムに記載されているもの
• 商品名カラムから抽出された単語
• 商品説明カラムから抽出された単語

商品検索機能

商品検索機能とは

商品検索機能は、選択された候補語を元に商品データを検索し、その結果を表示します。
商品検索結果は商品ページへのリンクとして表示されるため、商品検索結果をクリックすることで、商品ページへ遷移することができます。

商品データ

商品データは、商品ごとの検索や表示に必要なデータをまとめたものです。
商品データはデータ作成者が作成します。
1つ以上の商品データを、商品データファイルにまとめて格納します。

商品データは下記の情報を含みます。

• 商品ID(商品を特定するユニークなID)
• 商品ページURL
• 商品名
• 商品説明
• 商品画像URL
• ユーザー定義データ1～3
• ソート用文字列1～3
• キーワード
• 商品コード(商品IDとは異なります。商品レコメンド機能で使用します)
• 検索用追加テキスト

商品データの項目の詳細な説明は、「商品データ」を参照してください。

商品データファイル

商品データファイルは、1つ以上の商品データを格納したファイルです。

1つの商品データを1行に格納します。

商品データファイルは、ポップリンクサーバーが、インターネット経由で定期的に収集します。
インターネットからHTTPプロトコル（HTTPSを含む）でアクセスできる場所に配置する必要があります。

商品データファイルのフォーマットについては、商品データファイルを参照してください。

類語登録ファイル

選択された候補語を元に商品データを検索する際に、キーワードの言い換えや表記の揺れを解決するため、類語登録ファイルを作成して登録します。

登録したいキーワードと類語の組み合わせを類語登録ファイルに記載して、管理画面からアップロードします。
類語登録ファイルのフォーマットについては、類語登録ファイルを参照してください。

商品データと表示との対比

PC向けフロントエンドの表示

商品データの項目のうち、次の項目が、商品検索の結果の表示に用いられます

• 商品名
• 商品説明
• 商品画像のURLに配置されている画像
• ユーザー定義データ1～3

図.PC向けフロントエンドのレイアウト

各項目は、表示するデータがない場合や、ポップリンクタグの設定パラメータにより非表示に設定されている場合には表示されません。
これらの表示部分はスペースが空くのではなく、続く項目を繰り上げて、詰めて表示されます。

文字列が長いために表示幅に収まらない部分は表示されません。
ただしその場合には、文字列の末尾に「...」を表示して、表示されない部分があることを示します。

表示例を下記に示します。

図.PC向けフロントエンドの表示例

スマートフォン向けフロントエンドの表示

デバイスタイプ「sphs」での表示例を以下に示します。

図.スマートフォン向けフロントエンドのレイアウト

表示例を下記に示します。(この例では、商品画像と商品名のみを表示しています)

図.スマートフォン向けフロントエンドの表示例

商品検索結果の表示順

商品検索結果に表示される商品は、検索したキーワードと、商品データの内容によって表示順が決定されます。

デフォルトの設定では、検索したキーワードが商品データの「キーワード」項目にヒットした場合に最も上位に表示されます。
次いで、「商品名」の項目にヒットした場合、その次に「商品説明」にヒットした場合です。
(これを検索語の重みといいます)

あるキーワードで検索したときに特定の商品を上位に表示したい場合は、その商品データの「キーワード」の項目に、そのキーワードを記入しておくと、上位に表示される可能性が高まります。

表示順を決める要素は、下記の8つがあります。(昇順/降順のバリエーションを含めると13個)

• ソート用データ1の値(UTF-8文字コードによる昇順および降順)
• ソート用データ2の値(UTF-8文字コードによる昇順および降順)
• ソート用データ3の値(UTF-8文字コードによる昇順および降順)
• 商品名(UTF-8文字コードによる昇順および降順)
• 商品ID(UTF-8文字コードによる昇順および降順)
• 検索語の重み
• ユーザーの行動とキーワード解析を加味した検索語の重み
• 外部サービスと連携することで得られる各商品の値

このうちから5つまでを使うことができます。デフォルトでは、事前に設定されている表示順制御ファイルによる制御に加え、次の5つが設定されています。

(最優先: 表示順制御ファイルで定義した順位)

1. 検索語の重み: 降順
2. ソート用データ1: 降順
3. クリック順: 降順
4. ソート用データ2: 降順
5. ソート用データ3: 降順

これらの基準は、上位にあるものほど優先度が高く、下にあるものほど低くなっています。
これとは異なる基準で表示順の決定に使う場合には、申し込み時にご指定ください。

また、ソート用データ1～3は全て文字列データとして比較され、表示順が決められます。
このため、数値データを使用する場合には、商品データを作る際に、足りない桁の数だけ左側に0を埋めて、桁の数を揃える必要があります。

表示順制御ファイル

指定したキーワードにおける商品検索結果の表示順を変更するために、表示順制御ファイルを作成して登録します。

変更したいキーワードと商品URLの組み合わせを表示順制御ファイルに記載して、管理画面からアップロードします。
表示順制御ファイルのフォーマットについては、表示順制御ファイルを参照してください。

並び順を指定する例

検索語の重みを第1優先にし、更新日付を第2優先にして新しいもの順に並べるには次のように指定します。

1. 検索語の重み
2. ソート用データ2降順

この場合、ソート用データ2には、更新日付を「20151203」の形式で格納しておきます。

ポップリンクの導入

データファイルの作成

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

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

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

データファイルの配置

前節で作成したデータファイルを、インターネットから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タグマネージャーヘルプセンターや市販の書籍などを参考にしてください。

フロントエンドのカスタマイズ

注意

スタイルシート、フィルタ、フックを使ってフロントエンドをカスタマイズした場合には、弊社からの技術サポートが提供されない場合があります。

表示スタイルの変更

レイアウトをはじめとする表示スタイルは、変更用のスタイルシート(CSS)を追加で用いることでカスタマイズできます。
スタイルシートによるカスタマイズには、おもに次の3つの方法があります。
いずれの場合も、既に存在するスタイルシートとの干渉が起こった場合に、スタイルに !important の追加が必要になる場合があります。

1. サイト管理者が管理するサーバーに設置したCSSファイルを、ポップリンクタグのuserStyleSheetパラメータで指定する(推奨)
2. サイト管理者が管理するサーバーに配置したCSSファイルをlinkタグで読み込む
3. Webページにstyle要素を追加して、ポップリンクのスタイルシートを上書きする

DOMの構造

スタイルシートを使ったカスタマイズに必要な、ポップリンクが作るDOMの構造の詳細は、「DOM構造リファレンス」を参照してください。

スタイルシート

変更用のスタイルシートは、ポップリンクで提供される標準のスタイルシートに追加する形で読み込まれます。
変更用スタイルシートには、変更のための差分のみを記述します。

ポップリンクで提供される標準のスタイルシートは、デバイスタイプごとに用意されています。
カスタマイズに際して参照する場合には、下記のURLからダウンロードしてください。

• http://poplink-f.probo.biz/pl3/stylesheets/デバイスタイプ名.css

ただし、デバイスタイプpc011rの場合は、pc011.cssを使用します。

注意

カスタマイズに使うスタイルシートには、変更するためのスタイルのみを記述することを強く推奨します。
上記の標準スタイルシートをコピーして改変する方法でのカスタマイズを行わないでください。

動作の変更

サイト管理者が作成したフィルタおよびフックスクリプトを登録することで、フロントエンドの動作を変更することができます。
たとえば、標準にない次のような動作を実現することができます。

• エンドユーザーの行動のトラッキング
• 遷移先の商品ページを動的に決定する

フィルタおよびフックスクリプトは、サイト管理者がJavaScriptで作成し、設置します。
詳しい説明は、「フィルタリファレンス」、「フックリファレンス」を参照してください。

ポップリンクタグ パラメータリファレンス

パラメータとは

パラメータは、ポップリンクのフロントエンドに与える設定値です。ポップリンクタグの中に記述することで値を設定します。

ポップリンクのタグをWebページに設置する際にはパラメータを指定する必要があります。
必ず指定しなければならないパラメータのほかに、検索結果の表示数などを、デフォルトの値から変更することができるパラメータがあります。

パラメータの指定方法

パラメータは次の形式で指定します。

var poplink3 = {
  パラメータ名1: パラメータ値1,
  パラメータ名2: パラメータ値2,
  :
  パラメータ名n: パラメータ値n
};

パラメータの指定は、var poplink3 = { ... }; の中に配置してください。
パラメータ指定とパラメータ指定の間にはカンマを置いてください。
下記に例を示します。

// ポップリンク設定タグ
var poplink3 = {
  uid: "[UID]",
  target: "#q",
  deviceType: "pc011"
};

パラメータ名

パラメータの名前を指定します。指定可能な全てのパラメータは、「パラメータ一覧」を参照してください。

パラメータ値

パラメータに与える値の種類は次のいずれかです。

値の種類	説明	値の例
数値	数値を表します。半角の数字、正負の符号、小数点で表します。引用符や二重引用符で囲まないでください	1234
真偽値	真または偽を表す値です。英小文字でtrueまたはfalseと指定してください。引用符や二重引用符で囲まないでください	true false
文字列	引用符または二重引用符で囲んだ文字列。HTMLタグなどを含めないでください	"abc" 'abc'
関数	JavaScriptの関数オブジェクトを指定します	(省略)

パラメータ一覧

activateHook

データ型	関数オブジェクト
デフォルト	なし
説明	検索ボックスがフォーカスを得て、アクティブ状態にされたときに任意のプログラムを実行することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フックリファレンス」を参照してください。
用途	たとえば、スマートフォンでキーボードに隠れないようにするために、ポップリンクの起動時に、検索ボックスを画面上部にスクロールさせる等の用途が考えられます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

closeImage

データ型	文字列
デフォルト	"//poplink-f.probo.biz/pl3/images/close.png"
説明	sphs,spia など、スマートフォン用のデバイスタイプで使われる、ポップリンクを閉じるボタンの画像を URL で指定します。
用途	閉じるボタンの画像を、ポップリンク標準のものではなく、ユーザー側で用意した画像を使用する場合に指定します。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

deviceNameHook

データ型	関数オブジェクト
デフォルト	なし
説明	デバイスの種類を決定します。deviceTypeパラメータに(文字列ではなく)オブジェクトを指定した場合にこのフックが呼び出されます。このパラメータの詳細は、「フックリファレンス」を参照してください。
用途	レスポンシブウェブデザインを採用したページにおいて、デバイスの判別ロジックがポップリンクのものと異なるときに、このフックを使ってデバイスの種類を判別します。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

deviceType

データ型	文字列(またはオブジェクト)
デフォルト	"pc011"
説明	表示するレイアウト(デバイスタイプ)を文字列で指定します。指定しない場合には、入力アシストと商品検索結果が縦に並ぶ、pc011というレイアウトで表示されます。レスポンシブウェブデザインに基づいたページに設置する場合にはオブジェクトで指定します。詳しくは、「レスポンシブウェブデザインを用いたページへの導入」を参照してください。

displayItemAny1

データ型	真偽値
デフォルト	true(注意:デバイスタイプによっては、これ以外の値を持つものがあります)
説明	商品検索結果にユーザー定義データ1に設定されたデータを表示します。falseを指定した場合、ユーザー定義1のデータは表示されません。

displayItemAny2

データ型	真偽値
デフォルト	true(注意:デバイスタイプによっては、これ以外の値を持つものがあります)
説明	商品検索結果にユーザー定義データ2に設定されたデータを表示します。falseを指定した場合、ユーザー定義データ2のデータは表示されません。

displayItemAny3

データ型	真偽値
デフォルト	true(注意:デバイスタイプによっては、これ以外の値を持つものがあります)
説明	商品検索結果にユーザー定義データ3に設定されたデータを表示します。falseを指定した場合、ユーザー定義データ3のデータは表示されません。

displayItemImage

データ型	真偽値
デフォルト	true(注意:デバイスタイプによっては、これ以外の値を持つものがあります)
説明	商品検索結果に商品画像を表示します。falseを指定した場合、画像を表示しません。
用途	商品検索結果の商品画像を表示させない場合に使用します。

displayItemSummary

データ型	真偽値
デフォルト	true(注意:デバイスタイプによっては、これ以外の値を持つものがあります)
説明	商品検索結果に商品説明を表示します。falseを指定した場合、商品説明を表示しません。
用途	商品検索結果の商品説明を表示させない場合に使用します。

displayItemTitle

データ型	真偽値
デフォルト	true(注意:デバイスタイプによっては、これ以外の値を持つものがあります)
説明	商品検索結果に商品名を表示します。falseを指定した場合、商品名を表示しません。
用途	商品検索結果の商品名を表示させない場合に使用します。

displaySearchHeader

データ型	真偽値
デフォルト	true(注意:デバイスタイプによっては、これ以外の値を持つものがあります)
説明	商品検索結果に、商品表示の見出しを表示します。見出しは、SearchHeaderTextパラメータで指定されている文字列が使用されます。falseを指定した場合、商品表示の見出しを表示しません。
用途	商品表示の見出しを表示させない場合に使用します。

displayTarget

データ型	文字列
デフォルト	なし
説明	ポップリンクの要素の親となる要素を、CSSセレクタで指定します。指定しなかった場合には、targetパラメータで指定した検索ボックスの直後に挿入されます。
用途	デザイン上の都合で、検索ボックスとは離れた場所にポップリンクを表示したい場合に使用します。

gaType

データ型	文字列
デフォルト	なし
説明	Googleアナリティクスの種類を指定します。 "ga4", "ga4_gtm", "gtag" (グローバルサイトタグ), "universal" (ユニバーサルアナリティクス) のいずれかを指定します。 詳しくは 「Googleアナリティクスを用いた計測」 を参照してください。
用途	Googleアナリティクスを用いてアクセス解析を行うときに使用します。
注意事項	GA4, ユニバーサルアナリティクス、グローバルサイトタグ以外の機能には対応していません。

id

データ型	文字列
デフォルト	なし
説明	ポップリンクの最上位のDOM要素(class="poplink"を持つDIV要素)に指定された文字列を値に持つid属性を設定します。
用途	複数のポップリンクを1つのページに設置する場合に(必要に応じて)使用します。このid属性をCSSセレクタとして利用し、個々のポップリンクに個別のスタイルを設定するのに利用できます。

inactivateHook

データ型	関数オブジェクト
デフォルト	なし
説明	ポップリンクが非表示にされたときに任意のプログラムを実行することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フックリファレンス」を参照してください。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります

loadCompleteHook

データ型	関数オブジェクト
デフォルト	なし
説明	ポップリンクがロードされ、利用可能状態になったときに任意のプログラムを実行することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フックリファレンス」を参照してください。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります

searchAnchorFilter

データ型	関数オブジェクト
デフォルト	なし
説明	商品ページのURLの文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
用途	遷移先のURLを変更する場合に使用します。たとえば、遷移先URLにパラメータを付加してアクセス解析に用いたり、遷移先を動的に変更したりする場合などに使用できます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchAny1Filter

データ型	関数オブジェクト
デフォルト	なし
説明	商品検索結果のユーザー定義データ1の文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
用途	ユーザー定義データ1の文字列を、データベースに格納されているものとは異なる表現で表示する場合に使用します。たとえば、数字のみで書かれた価格情報に、通貨等の情報を加えることができます。たとえば、「1250」という文字列を、「1,250円(税別)」のように変更して表示することができます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchAny1HTMLFilter

データ型	関数オブジェクト
デフォルト	なし
説明	商品検索結果のユーザー定義データ1の文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。searchAny1Filterが文字列として編集するのに対して、searchAny1HTMLFilterは、HTMLとして編集します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
用途	ユーザー定義データ1の文字列を、HTMLを使って装飾・表現する場合に使用します。たとえば、「1250」という文字列を、「定価:<em>1,250</em>円」のようにHTMLを用いて強調することができます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchAny2Filter

データ型	関数オブジェクト
デフォルト	なし
説明	商品検索結果のユーザー定義データ2の文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
用途	ユーザー定義データ2の文字列を、データベースに格納されているものとは異なる表現で表示する場合に使用します。たとえば、数字のみで書かれた価格情報に、通貨等の情報を加えることができます。たとえば、「1250」という文字列を、「1,250円(税別)」のように変更して表示することができます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchAny2HTMLFilter

データ型	関数オブジェクト
デフォルト	なし
説明	商品検索結果のユーザー定義データ2の文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。searchAny2Filterが文字列として編集するのに対して、searchAny2HTMLFilterは、HTMLとして編集します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
用途	ユーザー定義データ2の文字列を、HTMLを使って装飾・表現する場合に使用します。たとえば、「1250」という文字列を、「定価:<em>1,250</em>円」のようにHTMLを用いて強調することができます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchAny3Filter

データ型	関数オブジェクト
デフォルト	なし
説明	商品検索結果のユーザー定義データ3の文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
用途	ユーザー定義データ3の文字列を、データベースに格納されているものとは異なる表現で表示する場合に使用します。たとえば、数字のみで書かれた価格情報に、通貨等の情報を加えることができます。たとえば、「1250」という文字列を、「1,250円(税別)」のように変更して表示することができます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchAny3HTMLFilter

データ型	関数オブジェクト
デフォルト	なし
説明	商品検索結果のユーザー定義データ3の文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。searchAny3Filterが文字列として編集するのに対して、searchAny3HTMLFilterは、HTMLとして編集します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
用途	ユーザー定義データ3の文字列を、HTMLを使って装飾・表現する場合に使用します。たとえば、「1250」という文字列を、「定価:<em>1,250</em>円」のようにHTMLを用いて強調することができます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchAutoDisplay

データ型	真偽値
デフォルト	true(注意:デバイスタイプによっては、これ以外の値を持つものがあります)
説明	表示された1番目(最上段)の候補語を元に商品データを検索し、その結果を自動的に表示します。falseを指定した場合は、エンドユーザーが候補語にフォーカスするまで商品検索結果を表示しません。
用途	商品検索結果が自動的に表示されるのを防ぐのに使用します。

searchClickHook

データ型	関数オブジェクト
デフォルト	なし
説明	商品検索結果がクリックされたときに任意のプログラムを実行することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フックリファレンス」を参照してください。
用途	たとえば、クリックされた商品のデータをアクセス解析ツールへ送信するような用途が考えられます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchCount

データ型	数値
デフォルト	3(注意:デバイスタイプによっては、これ以外の値を持つものがあります)
説明	商品検索結果を表示する最大数を指定します。数値は1から10までの値を指定できます。
用途	表示する商品検索結果の数を変更するときに使用します。

searchHeaderText

データ型	文字列
デフォルト	"商品検索"
説明	商品表示の見出しに表示される文字列を指定します。文字列が1行に収まらない場合、改行して表示されます。SearchHeaderにfalseが指定されている場合は、商品表示の見出しを表示しません。
用途	商品表示の見出しを「商品検索」以外にする場合に使用します。

searchImageFilter

データ型	関数オブジェクト
デフォルト	なし
説明	商品画像のURLの文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
用途	商品画像のURLを編集する場合に使用します。たとえば、商品画像URLのスキームを変更・補完したり、アクセス解析のための識別子を付加したりする場合などに使用します。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchSummaryFilter

データ型	関数オブジェクト
デフォルト	なし
説明	商品説明の文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchSummaryHTMLFilter

データ型	関数オブジェクト
デフォルト	なし
説明	商品説明の文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。searchSummaryFilterが文字列として編集するのに対して、searchSummaryHTMLFilterは、HTMLとして編集します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchTitleFilter

データ型	関数オブジェクト
デフォルト	なし
説明	商品名の文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
用途	商品名の表示を変更する場合に使用します。たとえば、商品名の前に語句や記号を追加する場合などに使用できます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchTitleHTMLFilter

データ型	関数オブジェクト
デフォルト	なし
説明	商品名の文字列を任意のフィルタプログラムで編集することができます。パラメータに関数オブジェクトを指定します。searchTitleFilterが文字列として編集するのに対して、searchTitleHTMLFilterは、HTMLとして編集します。このパラメータの詳細は、「フィルタリファレンス」を参照してください。
用途	商品名の表示にHTMLを用いて変更する場合に使用します。たとえば、商品名の前にHTMLタグを含む語句や記号を追加する場合などに使用できます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

searchUpdateHook

データ型	関数オブジェクト
デフォルト	なし
説明	商品検索結果が更新されたときに任意のプログラムを実行することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フックリファレンス」を参照してください。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

suggestAutoDisplay

データ型	真偽値
デフォルト	false
説明	trueを指定した場合、エンドユーザーが検索ボックスにフォーカスした際にデフォルトキーワードを表示します。このキーワードは、過去の利用統計やデータ作成者による表示キーワード登録ファイルから自動生成されます
用途	デフォルトキーワード表示機能を利用する際に使用します。

suggestAutoSubmit

データ型	真偽値
デフォルト	false
説明	trueを指定した場合、候補語をクリックした場合、候補語を検索ボックスに転送したのち、検索ボックスが属するフォームをsubmitします。検索ボックスがFORM要素に属していない場合には何も起こりません。ページの構造によっては、suggestAutoSubmitではsubmitできない場合があります。その場合には、ページに合った方法でsubmitするフックスクリプトを作成し、suggestClickHookに設定してください。
用途	候補語をクリックすると同時に検索を実行する検索窓を作る際に使用します。この機能を用いると、Enterキーや「検索」ボタンを押す手間を省くことができます。この機能は主に、入力アシストのみを利用するデバイスタイプ(pciaおよびspia)とともに用いられます。

suggestClickHook

データ型	関数オブジェクト
デフォルト	なし
説明	候補語がクリックされたときに任意のプログラムを実行することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フックリファレンス」を参照してください。
用途	たとえば、クリックされた候補語のデータをアクセス解析ツールへ送信するような用途が考えられます。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

suggestCount

データ型	数値
デフォルト	5(注意:デバイスタイプによっては、これ以外の値を持つものがあります)
説明	候補語を表示する最大数を指定します。数値は1から20までの範囲で指定できます。
用途	表示される候補語の数を変えるときに使用します。

suggestUpdateHook

データ型	関数オブジェクト
デフォルト	なし
説明	候補語リストが更新されたときに任意のプログラムを実行することができます。パラメータに関数オブジェクトを指定します。このパラメータの詳細は、「フックリファレンス」を参照してください。
注意事項	このパラメータを使用した場合は、弊社からのサポートが提供されない場合があります。

target

データ型	文字列
デフォルト	なし
説明	検索ボックスの要素を CSS セレクタの書式で指定します。 たとえば、<inputid="q" type="text"/> という要素を指定するには、target パラメータに #q と指定します。(先頭の # は、ID を指定することを示します。)
注意事項	このパラメータは、必ず指定しなければなりません。

uid

データ型	文字列
デフォルト	なし
説明	ポップリンクのサービスの識別コード(UID)を指定します。UIDは弊社よりお知らせいたします。
用途	このパラメータは、必ず指定しなければなりません。

useGATracking

非推奨

データ型	真偽値
デフォルト	false
説明	Googleアナリティクスにポップリンクのイベントを送信します。詳しくは、「Googleアナリティクスを用いた計測」を参照してください。
用途	Googleアナリティクスを用いてアクセス解析を行うときに使用します。
注意事項	このパラメータは、gaTypeによって置き換えられました。引き続き利用可能ですが、今後はgaTypeを利用することを推奨します。ユニバーサルアナリティクス以外の機能には対応していません。

userStyleSheet

データ型	文字列
デフォルト	なし
説明	追加で読み込むスタイルシートのURLを指定します。ポップリンクの標準のスタイルシートを置き換えるのではなく、追加で読み込むことに注意してください。
用途	ポップリンクのスタイルを変更するときに使用します。

useSearch

データ型	真偽値
デフォルト	true(注意:デバイスタイプによっては、これ以外の値を持つものがあります)
説明	商品検索結果を表示します。falseを指定した場合、商品検索結果を表示しません。
用途	商品検索結果を表示させないときに使用します。

displayHistoryTrigger

データ型	文字列 ('' または 'empty' または 'always')
デフォルト	''
説明	入力履歴表示機能の表示モードを制御できます。 '': 入力履歴を表示しません。 'empty': 検索窓が空の時のみ表示します。 'always': 常に表示します。
用途	入力履歴の表示タイミングを変更したい場合に使用します。

inputHistoryCount

データ型	数値
デフォルト	5
説明	入力履歴表示機能で表示する入力履歴の個数を制御できます。
用途	入力履歴の表示個数を変更したい場合に使用します。

inputHistoryCookieName

データ型	文字列
デフォルト	'bst.ih.0'
説明	入力履歴を保存するcookieの名前を指定できます。
用途	入力履歴を保存するcookieの名前を変更したい場合に使用します。

inputHistoryLifetime

データ型	数値
デフォルト	2592000
説明	入力履歴を保存するcookieの有効期限を指定できます。デフォルトは30日です。
用途	入力履歴を保存するcookieの有効期限を変更したい場合に使用します。

deleteHistoryImage

データ型	文字列
デフォルト	'close.png'
説明	入力履歴の削除ボタンに使用する画像を指定できます。publicなurlも指定可能です。
用途	入力履歴の削除ボタンに使用する画像を変更したい場合に使用します。

inputHistoryHeaderText

データ型	文字列
デフォルト	null
説明	入力履歴のヘッダーに表示するテキストを指定できます。nullの場合、表示されません。
用途	入力履歴のヘッダーに表示するテキストを変更したい場合に使用します。

useCustomSuggestN

データ型	真偽値
デフォルト	false
説明	カスタムサジェスト機能を有効にします。
用途	カスタムサジェスト機能を有効にしたい場合に使用します。

customSuggestNCount

データ型	数値
デフォルト	5
説明	カスタムサジェスト機能で表示するサジェストの個数を指定できます。Nには1~3を指定できます。
用途	カスタムサジェスト機能で表示するサジェストの個数を変更したい場合に使用します。

customSuggestNHeaderText

データ型	文字列
デフォルト	null
説明	カスタムサジェスト機能で表示するヘッダーのテキストを指定できます。nullの場合、表示されません。Nには1~3を指定できます。
用途	カスタムサジェスト機能で表示するヘッダーのテキストを変更したい場合に使用します。

suggestSkipSelect

データ型	真偽値
デフォルト	false
説明	trueの場合、候補語が1度目のクリックで検索窓に反映されるようになります。このパラメータはsp系デバイスタイプで使用できます。
用途	候補語が1度目のクリックで検索窓に反映されるようにしたい場合に使用します。

フィルタリファレンス

フィルタとは

フィルタは、フロントエンドが扱うデータを加工するためのJavaScriptプログラムです。
フィルタはサイト管理者が作成します。
(ポップリンクに付属するものではありません)

フィルタを使うことでフロントエンドの動作をある程度変更することができます。

フィルタは、フロントエンドからイベントに応じて呼び出されます。
引数として渡された文字列を加工して、戻り値としてフロントエンドへ返します。
戻り値は必ず返す必要があります。

フィルタの使い方

フィルタは、JavaScriptの関数として実装します。
パラメータの値として関数オブジェクトを設定すると、イベントに応じて呼び出されます。
パラメータにフィルタを設定する例を示します。

searchAnchorFilter: function(url, item) { return url + '?foo=' + item.id; }

フィルタ一覧

searchAnchorFilter

説明	商品ページのURLを編集します。遷移先にパラメータを渡したり、遷移先を変更したりするのに使用します。
呼び出し	商品検索結果の表示時
引数	url:商品ページのURL(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後の商品ページのURL(String)

searchAny1Filter

説明	ユーザー定義データ1を編集します。
呼び出し	商品検索結果の表示時
引数	any1:ユーザー定義データ1(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後のユーザー定義データ1(String)

searchAny1HTMLFilter

説明	ユーザー定義データ1を編集します。戻り値を、ユーザー定義データ1を表示する要素のinnerHTMLに設定します。不正なHTMLを返すと表示が崩れる場合があります。
呼び出し	商品検索結果の表示時
引数	any1:ユーザー定義データ1(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後のユーザー定義データ1のHTML(String)。 undefinedまたはnullを返した場合には、ユーザー定義データ1は変更されません。(表示されなくなるのではなく、変更されない点に注意してください)

searchAny2Filter

説明	ユーザー定義データ2を編集します。
呼び出し	商品検索結果の表示時
引数	any2:ユーザー定義データ2(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後のユーザー定義データ2(String)

searchAny2HTMLFilter

説明	innerHTMLに設定します。不正なHTMLを返すと表示が崩れる場合があります。
呼び出し	商品検索結果の表示時
引数	any2:ユーザー定義データ2(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後のユーザー定義データ2のHTML(String) undefinedまたはnullを返した場合には、ユーザー定義データ2は変更されません。(表示されなくなるのではなく、変更されない点に注意してください)

searchAny3Filter

説明	ユーザー定義データ3を編集します。
呼び出し	商品検索結果の表示時
引数	any3:ユーザー定義データ3(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後のユーザー定義データ3(String)

searchAny3HTMLFilter

説明	ユーザー定義データ3を編集します。戻り値を、ユーザー定義データ3を表示する要素のinnerHTMLに設定します。不正なHTMLを返すと表示が崩れる場合があります。
呼び出し	商品検索結果の表示時
引数	any3:ユーザー定義データ3(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後のユーザー定義データ3のHTML(String) undefinedまたはnullを返した場合には、ユーザー定義データ3は変更されません。(表示されなくなるのではなく、変更されない点に注意してください)

searchImageFilter

説明	商品画像のURLを編集します。異なるURLを生成や、スキームを変更・補完するのに使用します。
呼び出し	商品検索結果の表示時
引数	image_url:商品画像のURL(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後の商品画像のURL(String)

searchSummaryFilter

説明	商品説明を編集します。
呼び出し	商品検索結果の表示時
引数	summary:商品説明(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後の商品説明(String)

searchSummaryHTMLFilter

説明	商品説明を編集します。戻り値を、商品説明を表示する要素のinnerHTMLに設定します。不正なHTMLを返すと表示が崩れる場合があります。
呼び出し	商品検索結果の表示時
引数	summary:商品説明(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後の商品説明のHTML(String)。 undefinedまたはnullを返した場合には、商品説明は変更されません。(表示されなくなるのではなく、変更されない点に注意してください)

searchTitleFilter

説明	商品名の文字列を編集します。
呼び出し	商品検索結果の表示時
引数	title:商品名(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後の商品名(String)

searchTitleHTMLFilter

説明	商品名の文字列を編集します。 戻り値を、商品名を表示する要素のinnerHTMLに設定します。不正なHTMLを返すと表示が崩れる場合があります。
呼び出し	商品検索結果の表示時
引数	title:商品名(String) item:表示する商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	編集後の商品名のHTML(String)。 undefinedまたはnullを返した場合には、商品名は変更されません。(表示されなくなるのではなく、変更されない点に注意してください)

customSuggestNNameFilter

説明	カスタムサジェスト候補の表示名を編集します。
呼び出し	カスタムサジェスト候補の表示時
引数	name:カスタムサジェスト候補の表示名(String)

customSuggestNLinkFilter

説明	カスタムサジェスト候補のリンクを編集します。
呼び出し	カスタムサジェスト候補の表示時
引数	link:カスタムサジェスト候補のリンク(String)

customSuggestNIconUriFilter

説明	カスタムサジェスト候補のアイコン画像のURLを編集します。
呼び出し	カスタムサジェスト候補の表示時
引数	icon:カスタムサジェスト候補のアイコン画像のURL(String)

引数の詳細

item

フックやフィルタで利用可能な第2引数のitem(商品情報)は次のプロパティを持ちます。(全てString)
ただし、データが含まれていない項目については、そのプロパティは存在しません。(取り出した場合、undefinedが返される)

• id(商品ID)
• title(商品名)
• url(商品ページのURL)
• image(商品画像URL)
• item_code(商品ID)
• summary(商品説明)
• any1(ユーザー定義データ1)
• any2(ユーザー定義データ2)
• any3(ユーザー定義データ3)

フィルタの利用例

下記の例では、商品検索結果がクリックされたときに遷移する先のページのURLを編集しています。
URL文字列中の「http://www.bsearchtech.com」を「http://sitesearch.jp」に置換しています。
これにより、クリックしたときの遷移先を任意のものに変えることができます。

// ポップリンク設定タグ
var poplink3 = {
  uid: "[UID]",
  target: "#q",
  deviceType: "pc011",
  searchAnchorFilter: function(url) {
    return url.replace(/^http:\/\/bsearchtech.com/, "http://sitesearch.jp")
  }
};

フックリファレンス

フックとは

フックは、フロントエンドの動作を変更するJavaScriptプログラム(フックスクリプトといいます)を呼び出すメカニズムです。
フックスクリプトはサイト管理者が作成します。(ポップリンクに付属するものではありません)

フックスクリプトは、フロントエンドからイベントに応じて、フックを通じて呼び出されます。フックを使うことでフロントエンドの動作をある程度変更することができます。

フックの使い方

フックを利用するには、ポップリンクタグのパラメータの値としてフックスクリプトを設定します。フックスクリプトは、JavaScript の関数として実装します。

注意

フックの中には、戻り値を必要するものがあります。
本章に書かれたリファレンスで、戻り値が「なし」以外になっているフックでは必ず戻り値を返してください。
戻り値を返さない場合や、指定された以外の戻り値を返した場合の動作は保証されません。

フック一覧

activateHook(element)

説明	ポップリンクが起動されたときに呼び出されます。
引数	element:対象となる検索ボックスのINPUT要素(Object)
戻り値	なし

deviceNameHook()

説明	deviceTypeパラメータに、PC用とスマートフォン用の双方のデバイスタイプを指定したときに呼び出されます。デバイスの種類を決定します。詳しくは、「レスポンシブウェブデザインを用いたページへの導入」を参照してください。
引数	なし
戻り値	デバイスの種類を表す文字列。"desktop"または"mobile"のいずれかの文字列でなければなりません。

inactivateHook(element)

説明	ポップリンクが終了されたときに呼び出されます。
引数	element:対象となる検索ボックスのINPUT要素(Object)
戻り値	なし

loadCompleteHook()

説明	ポップリンクがブラウザにロードされ、利用可能な状態になったときに呼び出されます。
引数	なし
戻り値	なし

searchClickHook(keyword,item)

説明	商品検索結果が選択されたときに呼び出されます。
引数	keyword:商品検索に用いた文字列(String) item:クリックした商品の情報、このパラメータの詳細は、「引数の詳細」を参照してください。
戻り値	真偽値。falseを返した場合には商品ページへ遷移しません。

searchUpdateHook(items)

説明	商品検索結果が更新されたときに呼び出されます。
引数	items:商品検索結果(Array)
戻り値	なし

suggestClickHook(keyword,string)

説明	候補語が選択されたときに呼び出されます。
引数	keyword:選択された候補語(String) string:候補語が選択された時点での検索ボックスの値(String)
戻り値	なし

suggestUpdateHook(keywords)

説明	候補語リストが更新されたときに呼び出されます。
引数	keywords:候補語リスト(Array)
戻り値	なし

inputHistoryClickHook(keyword)

説明	入力履歴がクリックされたときに呼び出されます。
引数	keyword: 選択された入力履歴(String)
戻り値	なし

inputHistoryUpdateHook(keywords)

説明	入力履歴が更新されたときに呼び出されます。
引数	keywords: 入力履歴リスト(Array)
戻り値	なし

inputUpdateHook(keyword)

説明	検索窓の文字列が変化したタイミングで呼び出されます。
引数	keyword: 検索窓の文字列(String)
戻り値	なし

deviceReadyHook(device)

説明	poplinkによって生成されたDOMが利用可能になったタイミングで呼び出されます。 loadCompleteHookよりも遅いタイミングで呼ばれ、DOMの生成とCSSの読み込みが保証されます。
引数	device: デバイス情報(Object) └ userArea: ユーザ領域に関する情報(Object)   └register: ユーザ領域を登録する関数(function) 引数にユーザが作成したdomを渡すことで、domをpoplinkの制御下に置くことができます。
戻り値	なし

customSuggestNClickHook(name, link, icon)

説明	カスタム候補語が選択されたときに呼び出されます。
引数	name: 候補語 link: 遷移先URL icon: iconのURL
戻り値	真偽値。falseを返した場合には商品ページへ遷移しません。

customSuggestNUpdateHook(customN)

説明	カスタム候補語リストが更新されたときに呼び出されます。
引数	customN: カスタム候補語リスト(Array) 各要素は以下の型を持つオブジェクトです。 name: 候補語 link: 遷移先URL icon: iconのURL
戻り値	なし

フックの利用例

下記の例では、ポップリンクが利用可能になったときに、ブラウザのコンソールに「poplink is here」という文字列を表示します。

var poplink3 = {
  uid: "[UID]",
  target: "#q",
  deviceType: "pc011",
  loadCompleteHook: function() { console.log('poplink is here') },
};

データフォーマット・リファレンス

本章では、ポップリンクが収集する商品データ、候補語登録ファイル、候補語除外ファイルのファイルフォーマットについて解説します。
ポップリンクへ入力するデータは、この形式で格納しておく必要があります。

商品データ

商品データは次の形式、書式でファイルに格納してください。

• RFC4180に準拠した形式のCSVでデータを格納する
• 文字コードにはUTF-8を用いる。BOM(バイトオーダーマーク)は使用しない
• 1行目に各列の定義を示すフィールド名を持つヘッダ行を記述する
• タブや改行を含む制御文字はデータに使用しない

Info

上記形式に加え、ヘッダなしタブ区切りテキスト(いわゆるTSV)形式にも対応しています。
列番号を保持したまま、ヘッダを付けずにタブ区切りでデータを記述してください。
各項目をダブルクオートで囲むことはできません。

各列に格納するデータは下表のとおりです。

列	フィールド名	項目	必須	表示	候補語	検索
1(A)	id	商品ID	○
2(B)	link	商品ページURL	○
3(C)	title	商品名	○	○	○	○
4(D)	summary	商品説明		○	○	○
5(E)	image	商品画像URL	○	○
6(F)	any1	ユーザー定義データ1		○
7(G)	any2	ユーザー定義データ2		○
8(H)	any3	ユーザー定義データ3		○
9(I)	sort1	ソート用データ1
10(J)	sort2	ソート用データ2
11(K)	sort3	ソート用データ3
12(L)	keywords	キーワード			○	○
13(M)	itemcode	商品コード
14(N)	searchtext	検索用追加テキスト				○

必須：必ず指定すべき項目

表示：商品検索結果での表示に利用される項目

候補語：候補語の抽出の対象となる項目

検索：検索の対象となる項目

商品ID(id)

商品を一意に識別できる文字列を格納します。

商品ページURL(link)

商品検索結果をクリックした際に遷移するページのURLを格納します。
スキーム(https:やhttp:)を含まない、//(連続するスラッシュ2つ)から始まる文字列を格納してください。

商品名(title)

商品検索結果に表示される商品名を格納します。この商品名は、候補語の抽出や、商品検索でも用いられます。

商品説明(summary)

商品検索結果に表示される商品の説明文を格納します。この商品説明は、候補語の抽出や、商品検索でも用いられます。

商品画像URL(image)

商品検索結果に表示される画像のURLを格納します。
スキーム(https:やhttp:)を含まない、//(連続するスラッシュ2つ)から始まる文字列を格納してください。
表示速度や画質の観点から、90ピクセル×90ピクセルの大きさの画像を推奨します。
(それより大きめの画像を選ぶ場合でも、できるだけこの大きさに近いものを推奨します)

ユーザー定義データ1~3(any1~any3)

ユーザー定義データ1~3は、ポップリンクとして特に用途が決められていません。
たとえば、価格やお薦め度など、データ作成者が用途を決めます。
このデータは商品検索結果に表示することができます。

ソート用データ1~3(sort1~sort3)

商品検索結果のソートに使用するデータを指定します。
数値の場合は桁数を揃えてください。
桁が足りないデータは左側を0で埋めて、全商品で桁数を揃えてください。
桁数がそろっていない数値データは正しくソートできません。

ソート用データ1~3のいずれをソートに使うか、また優先度、さらにソートの方向を、弊社へのお申し込み時にお知らせください。

キーワード(keywords)

この商品に関する特徴的なキーワードを記入します。ここに記入したキーワードは、候補語としてポップリンクに登録されます。
また、商品検索用の単語としても登録されるため、このキーワードを入力すると、この商品が商品検索結果の候補になります。

キーワードが複数ある場合にはカンマで区切ります。
(このため、カンマを含む候補語を登録することはできません。)

他の商品に同じキーワードが存在しても問題ありません。

商品コード(itemcode)

商品レコメンド機能で、レコメンドサービスと連携させる場合に使用します。
レコメンドサービス側で認識される商品識別コードを格納します。
レコメンドサービスとの連携につきましては、弊社営業までお問い合わせください。

検索用追加テキスト(searchtext)

商品検索でヒットさせたい文字列を記入します。
キーワードのカラムや商品説明のデータとは異なり、検索用追加テキストは、候補語や表示の対象にはなりません。

候補語登録ファイル

候補語のデータは次の形式、書式でファイルに格納してください。

• RFC4180に準拠した形式のCSVでデータを格納する
• 文字コードにはUTF-8を用いる。BOM(バイトオーダーマーク)は使用しない
• 1行目に各列の定義を示すフィールド名を持つヘッダ行を記述する
• タブや改行を含む制御文字はデータに使用しない
• 1つの候補語のデータを1行に格納する

候補語登録ファイルのカラム構成は次のとおりです。

フィールド名	項目	必須
keyword	候補語(表示される文字列)	○
yomi	読み(ひらがな)
weight	優先度(1から100の数値。大きいほうが優先的に表示される)
remarks	備考(登録内容は動作に影響しない)

優先度の指定を省略した場合には、20が適用されます。
また、読みを省略した場合には、読みが自動的に付与されます。

複数の読みを持つ候補語を登録するには、同じ候補語を、読みを変えて複数登録します。
下記の例では、「ビール」という候補語に「びいる」、「びあ」、「beer」の3つの読みを割り当てています。

keyword,yomi,weight
ビール,びいる,20
ビール,びあ,20
ビール,beer,20

候補語除外ファイル

候補語除外ファイルのデータは次の形式、書式でファイルに格納してください。

• RFC4180に準拠した形式のCSVでデータを格納する
• 文字コードにはUTF-8を用いる。BOM(バイトオーダーマーク)は使用しない
• 1行目に各列の定義を示すフィールド名を持つヘッダ行を記述する
• タブや改行を含む制御文字はデータに使用しない
• 1つの候補語除外のデータを1行に格納する
• 行の区切りはLF(line feed)で区切る

フィールド名	項目	必須
keyword	除外する単語	○
remarks	備考(登録内容は動作に影響しない)

デフォルト表示キーワード登録ファイル

デフォルト表示キーワード登録ファイルのデータは次の形式、書式でファイルに格納してください。

• RFC4180に準拠した形式のCSVでデータを格納する
• 文字コードにはUTF-8を用いる。BOM(バイトオーダーマーク)は使用しない
• 1行目に各列の定義を示すフィールド名を持つヘッダ行を記述する
• タブや改行を含む制御文字はデータに使用しない
• 1つのキーワードのデータを1行に格納する
• 行の区切りはLF(line feed)で区切る

フィールド名	項目	必須
keyword	表示するキーワード	○
rank	表示する順位	○

類語登録ファイル

類語登録ファイルのデータは次の形式、書式でファイルに格納してください。

• RFC4180に準拠した形式のCSVでデータを格納する
• 文字コードにはUTF-8を用いる。BOM(バイトオーダーマーク)は使用しない
• 1行目に各列の定義を示すフィールド名を持つヘッダ行を記述する
• タブや改行を含む制御文字はデータに使用しない
• 1つのキーワードのデータを1行に格納する
• 行の区切りはLF(line feed)で区切る

フィールド名	項目	必須
keyword	見出し語	○
synonym1	類語1	○
synonym2	類語2
synonym3	類語3
synonym4	類語4
synonym5	類語5

表示順制御ファイル

表示順制御のデータは次の形式、書式でファイルに格納してください。

• RFC4180に準拠した形式のCSVでデータを格納する
• 文字コードにはUTF-8を用いる。BOM(バイトオーダーマーク)は使用しない
• 1行目に各列の定義を示すフィールド名を持つヘッダ行を記述する
• タブや改行を含む制御文字はデータに使用しない
• キーワードとURLのペアのデータを1行に格納する
• 行の区切りはLF(line feed)で区切る

フィールド名	項目	必須
keyword	見出し語	○
url	URL	○
score	スコア	○
remarks	備考(登録内容は動作に影響しない)

カスタムサジェスト用データファイル

カスタムサジェスト用データファイルのデータは次の形式、書式でファイルに格納してください。

• RFC4180に準拠した形式のCSVでデータを格納する
• 文字コードにはUTF-8を用いる。BOM(バイトオーダーマーク)は使用しない
• 1行目に各列の定義を示すフィールド名を持つヘッダ行を記述する
• タブや改行を含む制御文字はデータに使用しない
• 1つのキーワードのデータを1行に格納する
• 行の区切りはLF(line feed)で区切る

フィールド名	項目	必須
name	表示する名称	○
icon_url	アイコンのURL
link	遷移先URL	○
weight	レコードの重み。整数値で指定。大きいものが優先的にヒットする
keywords	ヒットさせるキーワード。複数指定する場合はカンマ区切りで指定する	○

文字に関する制限

ポップリンクで利用する各ファイルに含めることができる文字には制限があります。

下記のものは不正な文字として扱われます。
この場合、ポップリンクのデータベースの更新時にエラーが起こり、データベースは更新されません。

• バイトオーダーマーク(BOM)
• 制御文字
• UTF-8として正しくないバイト列

制御文字には、VT(Vertical Tab–0B)、CR(Carriage Return–0D)が含まれます。
また、HT(Horizontal Tab–09)はカラムの区切り、LF(Line Feed–0A)は行末文字として扱われるため、カラム内のデータとして含めることはできません。

デバイスタイプ一覧

ここでは、標準で提供されるデバイスタイプについて説明します。
ポップリンクタグの deviceType パラメータに、デバイスタイプ名 (たとえば、pc022) を指定することで、表示するレイアウトを指定することができます。

PC向け

pc011, pc011r

候補語リストの下に商品検索結果を表示するデバイスタイプです。

pc011 は、検索ボックスの左端に表示部の左端を合わせます。
pc011r は、検索ボックスの右端に表示部の右端を合わせます。
検索ボックスが画面の右側にある場合には pc011r を使用してください。

suggest, search, recommend の表示個数のデフォルト値は、以下の表の通りです。

パラメータ名	デフォルト値
suggestCount	5
searchCount	5
recommendCount	5

図.デバイスタイプpc011表示例

pc022, pc033

候補語リストの隣に商品検索結果を表示するデバイスタイプです。

pc022 は、左に候補語リスト、右に商品検索結果を表示します。
pc033 は、右に候補語リスト、左に商品検索結果を表示します。
検索ボックスが画面の右側にある場合にはpc033を使用してください。

suggest, search, recommend の表示個数のデフォルト値は、以下の表の通りです。

パラメータ名	デフォルト値
suggestCount	5
searchCount	5
recommendCount	5

図.デバイスタイプpc022表示例

pcia

候補語リストのみを表示するデバイスタイプです。
入力アシスト機能のみを使用する場合は、このデバイスタイプを指定してください。

pcia は、検索ボックスの左端に候補語リストの左端を合わせます。

suggest, search, recommend の表示個数のデフォルト値は、以下の表の通りです。

パラメータ名	デフォルト値
suggestCount	10
searchCount	5
recommendCount	5

図.デバイスタイプpcia表示例

pcgrid

検索結果リストを格子状に表示するデバイスタイプです。

suggest, search, recommend の表示個数のデフォルト値は、以下の表の通りです。

パラメータ名	デフォルト値
suggestCount	10
searchCount	10
recommendCount	10

図.デバイスタイプpcgrid表示例

スマートフォン向け

sphs

上段に候補語リスト、下段に商品検索結果を表示し、両者とも左右にスクロールするデバイスタイプです。
商品説明、ユーザー定義データは表示されません。

suggest, search, recommend の表示個数のデフォルト値は、以下の表の通りです。

パラメータ名	デフォルト値
suggestCount	20
searchCount	10
recommendCount	10

パラメータを指定する際には次の制限事項があります。

• useSearch を false に設定してはならない
• searchHeader を指定してはならない
• 次のうち一つだけを true にすることができる
  • displayItemTitle
  • displayItemSummary
  • displayItemAny1
  • displayItemAny2
  • displayItemAny3

図.デバイスタイプsphs表示例

sphs2

デバイスタイプsphsの派生タイプです。

候補語リストは左右、検索結果は上下にスクロールさせます。

suggest, search, recommend の表示個数のデフォルト値は、以下の表の通りです。

パラメータ名	デフォルト値
suggestCount	20
searchCount	10
recommendCount	10

図.デバイスタイプsphs2表示例

spia

候補語リストのみを表示するデバイスタイプです。
スマートフォンで入力アシスト機能のみを使用する場合は、このデバイスタイプを指定してください。

suggest, search, recommend の表示個数のデフォルト値は、以下の表の通りです。

パラメータ名	デフォルト値
suggestCount	10
searchCount	5
recommendCount	5

図.デバイスタイプspia表示例

DOM構造リファレンス

各デバイスタイプが持つDOM構造を説明します。
スタイルシートを使ったカスタマイズの際に必要になる情報を掲載しています。

このDOM構造は、サービスの改良のため、将来のバージョンで変更される場合があります。

共通

動作に合わせて次のクラスが使われています。

• highlighted 選択されている要素を表す
• hover マウスポインタが載っている要素を表す
• poplink_invisible 表示しない要素を表す

PC向け

pc011,pc022,pc033,pc011r,pcgrid共通

<div class="poplink pc011"> <!-- デバイスタイプ名と同じクラス名が入るpc011など -->
  <div.class="poplink_suggest">
    <div class="word"> <!-- 繰り返し -->
    </div>
  </div>
  <div class="poplink_search">
    <div class="header"></div>
    <div class="item"> <!-- 繰り返し -->
      <a>
        <div class="item_left">
          <img/>
        </div>
        <div class="item_right">
          <div class="title"></div>
          <div class="summary"></div>
          <div class="any1"></div>
          <div class="any2"></div>
          <div class="any3"></div>
        </div>
        <div class="clear"></div>
      </a>
      <div class="userarea"></div>
    </div>
  </div>
  <div class="poplink_recommend">
    <!-- 省略 -->
  </div>
</div>

クラスuserareaのDIV要素は、CSSによって表示されないように設定されています

コメントは解説のために書かれているもので、実際には挿入されません。

pcia

<div class="poplink pcia"> <!-- デバイスタイプ名と同じクラス名が入る -->
  <div.class="poplink_suggest">
    <div class="word"> <!-- 繰り返し -->
    </div>
  </div>
  <div class="poplink_search">
    <!-- 省略 -->
  </div>
  <div class="poplink_recommend">
    <!-- 省略 -->
  </div>
</div>

クラスpoplink_search,poplink_recommendのDIV要素は、CSSによって表示されないように設定されています。

コメントは解説のために書かれているもので、実際には挿入されません。

スマートフォン向け

sphs,sphs2

<div class="poplink">
  <div.class="poplink_suggest">
    <div class="word"> <!-- 繰り返し -->
    </div>
  </div>
  <div class="poplink_search">
    <div class="item"> <!-- 繰り返し -->
      <a>
        <div class="image_box">
          <img/>
        </div>
        <div class="title"></div>
        <div class="summary"></div>
        <div class="any1"></div>
        <div class="any2"></div>
        <div class="any3"></div>
      </a>
      <div class="userarea"></div>
    </div>
  </div>
  <div class="poplink_recommend poplink_invisible">
    <!-- 省略 -->
  </div>
  <div class="close_button">
    <img />
  </div>
</div>

クラスsummary,any1,any2,any3,userarea,poplink_recommendのDIV要素は、CSSによって表示されないように設定されています。

コメントは解説のために書かれているもので、実際には挿入されません。

spia

<div class="poplink spia">
  <div class="poplink_suggest">
    <div class="word"> <!-- 繰り返し -->
    </div>
  </div>
  <div class="poplink_search">
    <!-- 省略 -->
  </div>
  <div class="poplink_recommend poplink_invisible">
    <!-- 省略 -->
  </div>
  <div class="close_button"><img /></div>
</div>

クラスpoplink_search,poplink_recommendのDIV要素は、CSSによって表示されないように設定されています。

コメントは解説のために書かれているもので、実際には挿入されません。

Googleアナリティクスを用いた計測

Googleアナリティクスを用いたエンドユーザーの行動の計測方法について説明します。

Googleアナリティクスに関する基礎的な知識が必要です。

Googleアナリティクス バージョン

Googleアナリティクスにはいくつかのバージョンがあります。

• Googleアナリティクスの種類とポップリンクでの対応表

世代	Googleアナリティクスバージョン	提供時期	ポップリンク対応状況
第5世代	グローバルサイトタグ (gtag.js)	2017年9月～	利用可
第4世代	ユニバーサルアナリティクス (analytics.js)	2014年4月～	利用可
第3世代	非同期タグ (ga.js)	2009年12月～	非対応
第2世代	同期タグ (ga.js)	2007年12月～	非対応
第1世代	アーチンタグ (urchin.js)	2005年11月～	非対応

ポップリンクがサポートしているのは、グローバルサイトタグ (gtag.js) および ユニバーサルアナリティクス (analytics.js) です。

お客様サイトが利用しているGoogleアナリティクスが、上記のいずれかであれば
フロントエンドのパラメータ gaType に値を設定するだけでエンドユーザーの行動の計測を始めることができます。

また、GA4を利用する場合はGA4の利用を参照してください。

利用できるGoogleアナリティクス バージョン

Webページに埋め込まれたトラッキング コードから、Googleアナリティクスのバージョンを見分けることができます。

第5世代: グローバルサイトタグ (gtag.js)

第5世代: グローバルサイトタグ (gtag.js) トラッキング コード例

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script><script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXXXX-X');
</script>

Settings

GoogleアナリティクスのSCRIPTタグが上記のようなコードである場合には、
ポップリンクタグの設定 で gaType: "gtag" を指定してください。

第4世代: ユニバーサルアナリティクス (analytics.js)

第4世代: ユニバーサルアナリティクス (analytics.js) トラッキング コード例

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
</script>

Settings

GoogleアナリティクスのSCRIPTタグが上記のようなコードである場合には、
ポップリンクタグの設定 で gaType: "universal" を指定してください。

旧バージョンのGoogleアナリティクス

上記以外のGoogleアナリティクスは、ポップリンクではサポートされていません。

第3世代: 非同期タグ (ga.js) トラッキング コード例

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

ポップリンクタグの設定

Googleアナリティクスを利用してエンドユーザーの行動を計測するには、
タグパラメータのgaTypeを指定します。
この設定により、Googleアナリティクスのイベントが、ポップリンクからGoogleアナリティクスのサーバーへ送信されるようになります。

• ポップリンク スクリプトタグ サンプル (グローバルサイトタグの例)

// ポップリンク設定タグ
var poplink3 = {
  uid: "[UID]",
  target: "#q",
  deviceType: 'pc022',
  gaType: "gtag"
};

注意

Googleアナリティクスバージョンによって、以下のように指定します。

• グローバルサイトタグでは gaType: "gtag"
• ユニバーサルアナリティクスでは gaType: "universal"

注意

ポップリンクの旧バージョンで使われていたパラメータ、useGATracking は、バージョン2.6よりgaTypeに置き換えられました。
useGATracking: trueを指定した場合には、gaType: "universal" が指定されたものとして動作します。

旧バージョンのGoogleアナリティクスを使うためには

第1世代～第3世代の旧バージョンGoogleアナリティクスを利用している場合、Googleアナリティクスイベントを送信するプログラムを、フックスクリプトとして記述してください。
次のフックを利用できます。

• suggestClickHook : 候補語がクリックされたときに呼ばれるフック
• searchClickHook : 商品検索結果がクリックされたときに呼ばれるフック

送信されるGoogleアナリティクスイベント

ポップリンクタグの設定の後、次のタイミングで各イベントをGoogleアナリティクスのサーバーに送信します。

ポップリンクの起動 : デバイスタイプとポップリンクが設置されているページのURL

ページをロード後、検索ボックスに最初の文字が入力されたときに、Googleアナリティクスのサーバに次のイベントが送信されます。

名前	値
category	"activate"
action	デバイスタイプ
label	ポップリンクが設置されているページのURL
value	1

候補語のクリック : クリックした候補語と実際に入力した文字列

候補語をクリックすると、Googleアナリティクスのサーバに次のイベントが送信されます。

名前	値
category	"suggest"
action	選択した候補語
label	実際に入力した文字列
value	1

商品検索結果のクリック : 選択した候補語、商品ページのURL、商品名

商品検索結果をクリックすると、Googleアナリティクスのサーバに次のイベントが送信されます。

名前	値
category	"search"
action	選択中の候補語
label	商品ページのURL+商品名
value	1

ポップリンクの効果測定

ポップリンクタグの設定の後に、以下の手順で効果測定をします。

1. Googleアナリティクスにログイン
2. レポートの行動 メニューを選択
3. イベント メニューをプルダウン
4. 上位のイベント を選択

図.Googleアナリティクス ログイン画面例

TODO:画像差し替え＋説明

ポップリンク伴走サービス(有償)のご紹介

ポップリンクでは、お客様向けにカスタマイズした効果測定レポートをご提供する等の有償サービス をご用意しております。

詳しくは、弊社営業までお問い合わせください。

GA4の利用

GA4の利用方法は二種類あります。

• ページに直接GA4を読み込む場合
• GTMからGA4を読み込む場合

また、収集したデータをレポート化するためにカスタムディメンションの設定を行う必要があります。

ページに直接GA4を読み込む場合

gaType: "ga4"を指定してください。

※ gtag.jsが使用されますが、送信内容がgaType: "gtag"とは一部異なります。

GTMからGA4を読み込む場合

gaType: "ga4_gtm"を指定してください。

また、GTMにおけるGA4設定 の手順に従ってGTMの設定を行ってください。