概要
2024年5月に導入した、サイト内検索ツール「ジーニーサーチ」の設定や解説をします。
※実際に使用した機能に限ります。
環境
■導入サイトのURL
https://www.romapri.com/
■サイト分類
ECサイト
■ECシステム
future-shop（連携機能を使用）
機能解説
「ジーニーサーチ」には大まかに2種類の機能があります。
機能① ポップリンク
説明
ポップリンクは、入力アシスト機能、商品検索機能、商品レコメンド機能を提供するWebサービスです。
ポップリンクを導入したWebページでは、検索ボックスに入力された文字を元に、少ない操作で商品ページへ到達することができます。
https://docs.geniee-search.net/poplink/service_description/
実際の画面 PC / SP
機能② ポップファインド
説明
ポップファインドは、コーポレートサイトやECサイト向けに検索機能やレコメンド機能を提供するWebサービスです。
ポップファインドを導入したWebページでは、検索窓で入力したキーワードで検索された検索結果を適切に表示し少ない操作でWebコンテンツへ到達することができます。また、キーワード検索だけでなく、特定の属性を持つカテゴリ等の検索結果を表示するWebページにもご使用いただくことでサイトの検索性を強化し、Webコンテンツへの到達性の向上を支援します。
https://docs.geniee-search.net/popfind/service_description/
ドキュメントには、2つの導入ガイド（ECサイト検索 / 企業サイト検索）が存在しますが、
今回導入したのは、「ECサイト検索」になります。
実際の画面 PC / SP
各社導入事例
公式サイト導入事例ページ
https://www.bsearchtech.com/casestudy/
今回の導入にあたって、主に参考にしたサイト
・NY.ONLINE
https://www.ny-onlinestore.com/shop/default.aspx?common=true
・暮らしのデザイン
https://www.kurashi-ec.jp/
・ブルーノオンライン
https://bruno-onlineshop.com/
・ダーツショップMAXIM
https://www.maximnet.co.jp/
・ハニーズ
https://www.honeys-onlineshop.com/shop/default.aspx
・プレミアムバンダイ
https://p-bandai.jp/
・オフィスコム
https://www.office-com.jp/
・SABON
https://www.sabon.co.jp/
導入方法
future-shopとの連携
連携作業については、ジーニーサーチ様にて対応したため、キノスラでは未対応です。
機能の導入（ポップリンク）
導入時、デモページ
導入ページ
ヘッダー / サイドメニュー
https://www.romapri.com/
サイドナビ
https://www.romapri.com/f/search
関連ファイル
https://www.romapri.com/js/search_results.js
※「システムの起動タグ」を記述したファイル
https://www.romapri.com/js/search_results-csvImport.js
※「各formの設定」や「レイアウト変更」などを記述したファイル
導入手順-1（実装編）
■検索窓(フォーム)の作成
例：
<form class="" method="get" action="search.html">
<input type="text" name="q" id="q" value="" placeholder="検索キーワード">
<input type="submit" name="" value="検索">
</form> 設置ルール：
・input要素のnameはq固定
・form要素のmethodはget固定
・form要素のactionに検索結果画面URLを指定
※同一ページ内に、複数のform（ジーニー用）が存在させる場合、idが重複しないようにする。
→header / sp時のみ表示させるform など、検証画面上で確認できる、
コメントアウトされていないformすべてが対象となる。コンテンツ内外は問わない。
■検索窓(フォーム)の起動
inputIdの値に、追加したいformのidを追加する。
例：
search_results.js
var popfindConf = popfindConf || {};
popfindConf["data-popfind"] = {
uid: "~", // 商品検索 (ポップファインド) UID (本番環境)
// uid: "~", // 商品検索 (ポップファインド) UID (検証環境)
inputId: "q,q02,q03,q04",
};導入手順-2（応用編）
ドキュメントページ
https://docs.geniee-search.net/poplink/technical_reference/
■フォームごとの設定
フォームのidごとに設定が必要。
（idを「,」で連結させることができなかったため）
例：
search_results-csvImport.js
{
uid: "~", // 画像付きサジェスト(ポップリンク) UID (本番環境)
// uid: "~", // 画像付きサジェスト(ポップリンク) UID (検証環境)
target: "#q02",
}■レイアウト変更
https://docs.geniee-search.net/poplink/technical_reference/#device_type_reference
例：
search_results-csvImport.js
{
uid: "~", // 画像付きサジェスト(ポップリンク) UID (本番環境)
// uid: "~", // 画像付きサジェスト(ポップリンク) UID (検証環境)
target: "#q02",
deviceType: { desktop: 'pc022', mobile: 'sphs' },
}機能の導入（ポップファインド）
導入ページ
https://www.romapri.com/f/search
※フリーページにて導入
関連ファイル
https://www.romapri.com/js/search_results.js
※「システムの起動タグ」や「フックが必要なスクリプト」などを記述したファイル
https://www.romapri.com/js/search_results-csvImport.js
※「絞り込み情報」や「システムで出力されるテキストのテキスト変更」などを記述したファイル
導入手順-1（準備編）
ドキュメントページ
https://docs.geniee-search.net/popfind/popfind/prepare
■データファイルの作成、設置 / 各種ファイルの作成とアップロード
データ作成者が作成します。
今回の対応では、クライアント様にて対応しているため、
詳細は省きます。
■リソースファイルの作成、設置
表示する検索結果一覧の操作に関するファイル。
下記の様に複数存在する。
・並び順リソースファイル(必須)
・メッセージリソースファイル(表示メッセージを変更する場合)
・属性リソースファイル(属性絞り込み機能を使用する場合)
など
ドキュメントページでは、複数のファイルに分けて紹介されているが、
今回の対応では、すべて同一ファイルに記述している。（search_results-csvImport.js）
導入手順-2（実装編）
ドキュメントページ
https://docs.geniee-search.net/popfind/popfind/implementation/
■検索結果画面の作成
◇head要素内の修正
・並び順リソースファイルの読み込み（search_results-csvImport.js）
・CSSファイルの読み込み（popfind2.css / popfind_base.css / popfind.css）
3種類の中から一つを選んで設置する。
今回の対応では、popfind.cssを使用した。（デザインとの互換性を配慮）
・meta要素の記述
meta要素を追加し、検索結果画面自体がインデックスされることを防ぎます
<meta name=”robots” content=”noindex,nofollow”>
◇body要素内の修正
・ポップファインドコンポーネント（ソート機能）の追加
例：
<div data-popfind="searchstatus"></div>
<div data-popfind="attributes-group2"></div>
<div data-popfind="attributes-group3"></div>
<div data-popfind="attributes-group4"></div>
<div data-popfind="attributes-group7"></div>
<div data-popfind="attributes-group8"></div>
<div data-popfind="attributes-group9"></div>
<div data-popfind="attributes-group10"></div>
<div data-popfind="attributes-group5"></div>
<div data-popfind="attributes-group6"></div> ・ポップファインド設定タグ・起動タグの追加
※poptag は必ず、popfindの設定タグよりも後に発火するように設置する
→前に設置しても表示されるが、ハードリフレッシュ（Shift + F5 など）時に一覧が表示されなくなる。
例：
search_results.js
var popfindConf = popfindConf || {};
popfindConf["data-popfind"] = {
uid: "~", // 商品検索 (ポップファインド) UID (本番環境)
// uid: "~", // 商品検索 (ポップファインド) UID (検証環境)
inputId: "q",
useGrouping: true,
};
<!-- poptag manager -->
<script>
// 起動タグの読込み
(function () {
var script = document.createElement('script');
script.setAttribute('src', 'https://js.poplink.jp/15173ffbc8cc420c950f74441f3bb7a7u/poptagmanager.js?ts=' + Date.now());
script.setAttribute('defer', true);
document.head.appendChild(script);
})();
</script>
<!-- end: poptag manager -->導入手順-3（応用編）
ドキュメントページ
https://docs.geniee-search.net/popfind/popfind/advanced/
今回の対応で使用した応用処理の一部を紹介します。
◇ポップファインドの発火タイミングに合わせて処理を行う。
https://docs.geniee-search.net/popfind/popfind/reference/hook/
例：
search_results.js
// 全コンポーネントが起動されたときに発火
allActivateHook: function() {
priceSlider();
},
// 全コンポーネントが表示完了したときに発火
allUpdateHook: function() {
firstsetTag();
},
asyncActivateHook(){
priceSliderFocus();
},
// 非同期モードでの状態変更後に発火
allAsyncUpdateHook(count){ //allAsyncUpdateHook(count){で回数確認可能
console.log(`非同期操作が完了しました。現在のカウント: ${count}`);
pageFirstLastBtn();
}◇キーワードランキング機能の実装
表示させたい箇所 例：
<div data-kwranking="keywordranking"></div>表示に必要な設定 例：
search_results-csvImport.js
// キーワードランキングリソース
var popfindConf = popfindConf || {};
popfindConf["data-kwranking"] = {
uid: "~", // キーワードランキング UID (本番環境)
// uid: "~", // キーワードランキング UID (検証環境)
keywordRankingResource: [
{
group: { "label": " "},
count: 8,
location: "https://www.romapri.com/f/search"
}
],
};