カスタマイズ

ユーザーはカスタマイズすることで高度な検索を実現することができます。

複数のサジェストの設置

同じページの複数の検索ボックスに、サジェストを導入することができます。
サジェスト設定タグにそれぞれの検索ボックス用の設定を配列の形式で指定します。
target パラメータの値は重複しない値にする必要があります。
また、複数のサジェストを契約している場合は、それぞれの UID を指定してください。

例:

<script>
  // サジェスト設定タグ
  var poplink3 = [{
    uid: "[UID]",
    target: "#q1",
    deviceType: 'pcia'
  }, {
    uid: "[UID]",
    target: "#q2",
    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>

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

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

例: PC 向け (desktop) に pcia を指定し、スマートフォン向け (mobile) に spia を指定する。

deviceType: { desktop: 'pcia', mobile: 'spia' }

注意

デバイスタイプはサジェストのロード時に決定します。動的には変更されません。

補足

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

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

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

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

Cookie の利用

機能を充実させるため、フロントエンドで Cookie および LocalStorage を使用しています。
利用者のプライバシーの権利を尊重し、Cookie および LocalStorage の利用は許可あるいは拒否を選択することができます。
拒否によりユーザビリティーに関わる一部の機能が提供されなくなることにご注意ください。

種類	名前	目的	サジェスト向け	EC 検索向け	サイトサーチ向け
LocalStorage	bst.cid.0	長期的なユーザ識別	○	○	○
Cookie	bst.sid.0	短期的なユーザ識別		○	○
LocalStorage	popfind_[uid]_comparison	比較機能選択履歴		○
LocalStorage	popfind_[uid]_checked	検索結果選択履歴		○	○
Cookie	bst.ih.0	入力履歴	○
LocalStorage	bstDisableBrowserStorage	Cookie および LocalStorage の使用を切り替える	○	○	○

Cookie および LocalStorage を利用しない

Cookie および LocalStorage の利用を拒否するには useBrowserStorage を false に設定してください。

以下のように設定を行います。

// サジェスト設定タグ
var poplink3 = {
  uid: "[UID]",
  target: "#q",
  useBrowserStorage: false,
};

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

動作の変更

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

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

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

表示スタイルの変更

表示スタイルは、GENIEE SEARCH が提供する標準のスタイルシートに追加する形で読み込まれる、差分のみを記述した変更用のスタイルシートを用いてカスタマイズしてください。
スタイルシートによるカスタマイズには、次の3つの方法があります。
既に存在するスタイルシートとの干渉が起こった場合に、!important の指定が必要になる場合があります。

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

補足

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

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

注意

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

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

Google タグマネージャーなどのタグマネージャーを用いて、ページにサジェストのタグを導入することができます。

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

Google タグマネージャーにサジェストのタグを登録する際に留意する点は下記のとおりです。

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

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

Google アナリティクスを用いてエンドユーザーの行動を計測する方法

GA4 の利用

GA4 を利用する場合、サジェスト設定タグの gaType パラメータは次のように指定してください。

• ページに直接 GA4 を読み込む: "ga4"
  
  ※ gtag.js が使用されますが、送信内容が gaType: "gtag" とは一部異なります。
• GTM から GA4 を読み込む: "ga4_gtm"
  • GTM における GA4 設定 も行なってください。

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

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 月～	非対応

サジェストは次の 2 つをサポートしています。

• グローバルサイトタグ (gtag.js)
• ユニバーサルアナリティクス (analytics.js)

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

利用できる Google アナリティクス

ページに埋め込まれたトラッキング コードから、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 アナリティクスは、GENIEE SEARCH ではサポートしません。

第 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 アナリティクスのサーバーへ送信されるようになります。

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

例: グローバルサイトタグ

// サジェスト設定タグ
var poplink3 = {
  uid: "[UID]",
  target: "#q",
  deviceType: "pcia",
  gaType: "gtag",
};

注意

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

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

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

• suggestClickHook : 候補語がクリックされたときに呼ばれる

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

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

サジェストの起動 : デバイスタイプとサジェストが設置されているページの URL

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

名前	値
category	"activate"
action	デバイスタイプ
label	サジェストが設置されているページの URL
value	1

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

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

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

サジェストの効果測定

サジェスト設定タグの設定の後に、以下の手順で効果測定をします。

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

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