店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。
上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。
設置方法は、サジェストリンクを表示するキーワード検索フォームに「id」を指定し、サジェストリンク表示用JavaScriptを設置します。すでにサイトに設置されている商品検索フォームに追加することができます。なお、デザインはサジェストリンクで既定のものが出力されますが、CSSにてデザイン調整していただけます。
下記のように、検索キーワードを入力するINPUTタグに「id」を指定します。例では「TARGET」というid名を指定します。
コマースクリエイターのスタートアップテーマのヘッダのキーワード検索フォームにサジェストリンクを表示します。コマースクリエイター>パーツ一覧にてキーワードに「ヘッダーナビゲーション」と入力して検索します。該当パーツの変更するボタンを押下して、下記のように検索キーワードを入力するINPUTタグに「 id="TARGET"」と追記します。
<div class="fs-p-headerNavigation__search fs-p-searchForm">
<form action="/p/search" method="get">
<span class="fs-p-searchForm__inputGroup fs-p-inputGroup">
<input type="text" name="keyword" maxlength="1000" placeholder="キーワード検索"
class="fs-p-searchForm__input fs-p-inputGroup__input" id="TARGET">
<button type="submit" class="fs-p-searchForm__button fs-p-inputGroup__button">検索</button>
</span>
</form>
</div>
(後半部分省略)検索キーワードを入力するタグにidを設定し、サジェストリンク表示用JavaScriptで指定します。他のキーワード検索フォームに設置する場合も同様です。
下記のJavaScriptをECサイトに設置します。主な方法は以下となります。
1の方法を下記にてご案内します。
コマースクリエイター>パーツ一覧から「パーツを追加するボタン」を押下して「フリーパーツ」を追加します。パーツ名に「サジェストリンク設定」置換文字に「suggestlink」などと入力し、表示内容に以下のタグを入力して保存ボタンを押下します。
なおサジェストリンクの表示や挙動を変更する場合は、こちらのJavaScriptに追記します。
<script> var poplink3 = { uid: "弊社からご案内したuidを転記", target: "#TARGET", //INPUTタグに指定したidを記述 deviceType: { desktop: 'pc011r', mobile: 'sphs' } }; (function() { var s = document.createElement("script"); s.charset = "utf-8"; s.src = "//poplink-f.probo.biz/pl3/poplink3.js"; document.getElementsByTagName("head")[0].appendChild(s); })(); </script>
コマースクリエイター>パーツ一覧にてキーワード検索にて「ヘッダーエリア(PC)(パネルパーツ)」または「ヘッダーエリア(スマートフォン)(パネルパーツ)」パーツを検索して変更するボタンを押下します。
コマースクリエイター>パネルパーツ追加・変更にて、画面右側のパーツ名検索にて先ほど追加した「サジェストリンク設定」パーツを検索し、パーツ検索結果に表示します。該当パーツの配置するボタンボタンを押下して、画面左側のパーツ配置エリアに追加し、保存するボタンを押下します。
ECサイトを表示またはプレビューして、キーワードを入力し、サジェスト表示されることを確認します。必要に応じて、CSSにてデザイン調整をしてください。
管理画面の構築>その他>各ページURL・タグ一覧-HTMLタグ-商品検索を行うHTMLタグの「HTMLタグ」ボタンを押下すると、商品検索フォーム用のHTMLタグが表示されます。下記のように、検索キーワードを入力するINPUTタグに「id」を指定します。例では「TARGET」というid名を指定します。
表示されるタグの下記の部分に、id="TARGET"を追加してください。
<input type="text" name="keyword" maxlength="1000">
↓
<input type="text" name="keyword" maxlength="1000" id="TARGET">
すでにサイトに設置されている商品検索フォームに追加することができます。
商品検索フォームのタグに続けて、下記のJavaScriptをECサイトに設置します。なおサジェストリンクの表示や挙動を変更する場合は、こちらのJavaScriptに追記します。
<script> var poplink3 = { uid: "弊社からご案内したuidを転記", target: "#TARGET", //INPUTタグに指定したidを記述 deviceType: 'pc011r', }; (function() { var s = document.createElement("script"); s.charset = "utf-8"; s.src = "//poplink-f.probo.biz/pl3/poplink3.js"; document.getElementsByTagName("head")[0].appendChild(s); })(); </script>
<script> var poplink3 = { uid: "弊社からご案内したuidを転記", target: "#TARGET", //INPUTタグに指定したidを記述 deviceType: 'sphs', }; (function() { var s = document.createElement("script"); s.charset = "utf-8"; s.src = "//poplink-f.probo.biz/pl3/poplink3.js"; document.getElementsByTagName("head")[0].appendChild(s); })(); </script>
管理画面の構築>デザイン設定>レイアウト編集から、ご利用されているレイアウトパターンの内、「フッタエリアに表示させるHTMLタグ」に設置ください。
なお、ご利用されているレイアウトパターンは、構築>ページ設定>各ページ設定よりご確認いただけます。
※例になります。実際のECサイトのデザインにあわせて設置してください。
Futureshop2管理画面のモバイルメニュー>スマートフォン>スマートフォン基本設定から、「フッタコメント1」または「フッタコメント2」に設置ください。
なお、フッタコメントの各画面への表示設定は、モバイルメニュー>スマートフォン>スマートフォン各ページ設定よりご確認いただけます。
※例になります。実際のECサイトのデザインにあわせて設置してください。
なお、スマートフォンサイト画面下部に初期表示されている検索フォームへの設置はできません。
こちらのフォームを非表示にしたい場合は、以下のCSSをモバイルメニュー>スマートフォン設定>スマートフォンデザイン設定-デザインCSSの編集に追記してください。
.FS2_Search { display: none; }
サジェストリンク表示用JavaScriptに下記パラメータを追記します。
下記の例のように、パラメータ記述を追加します。
<script> var poplink3 = { uid: "01234567890abcdefghijklmnopqrstuv", //弊社からご案内したuidを転記 target: "#TARGET", //INPUTタグに指定したidを記述 suggestCount: 10, //候補語を10個表示 displayItemSummary: false, //商品説明を表示しない gaType: "gtag", //Googleアナリティクスで測定(拡張eコマース機能を使用) deviceType: 'pc011', //サジェストを左寄せで表示 }; (function() { var s = document.createElement("script"); s.charset = "utf-8"; s.src = "//poplink-f.probo.biz/pl3/poplink3.js"; document.getElementsByTagName("head")[0].appendChild(s); })(); </script>
以下、パラメータの説明となります。
uid: "a0b1c2d3e4f5g6h7i8j9k0lmnopqrstuv",
サジェストのサービスの識別コード(UID)を指定します。UIDは弊社よりお知らせいたします。(必須)
target: "#TARGET",
検索ボックスの要素をCSSセレクタの書式で指定します。(必須)
displayTarget: "#SUGGEST";
デザイン上の都合で、検索ボックスとは離れた場所にサジェストを表示したい場合に使用します。
指定したIDを持つ要素に表示できます。上例では「SUGGEST」というidを持つ要素の場所に表示します。
deviceType: { desktop: 'pc011r', mobile: 'sphs' },
レスポンシブサイトの場合に、PCとmobile(スマートフォン)の表示タイプを(一度に)指定・変更できます。(サジェストリンクそのものはレスポンシブ対応ではありません。)表示についてはサジェストリンク独自に判定されます。
デバイス最適化サイトの場合は以下のようにそれぞれのデバイスタイプのみ記載してください。
deviceType: 'sphs',
deviceTypeに設定できる値は以下となります。設定によってサジェストリンクにあらかじめ用意されたデザインで表示されます。
deviceType | 想定デバイス | 説明 |
---|---|---|
pc011 | PC | 検索キーワード入力欄に対して左寄せで表示します。 |
pc011r | PC | 検索キーワード入力欄に対して右寄せで表示します。 |
pc022 | PC | 左に候補語リスト、右に商品検索結果を表示します。検索ボックスが画面の左側にある場合に使用できます。 |
pc033 | PC | 右に候補語リスト、左に商品検索結果を表示します。検索ボックスが画面の右側にある場合に使用できます。 |
sphs | スマートフォン | 上に候補語リスト。下に商品検索結果を表示します。候補語をタップすると商品検索結果が切り替わります。閉じるボタンをタップするとサジェスト表示が解除されます。 |
pcia | PC | 候補語リストのみを表示します。 |
spia | スマートフォン | 候補語リストのみを表示します。 |
sphsについては以下をご覧ください。
suggestCount: 5,
候補語を表示する最大数を指定します。数値は1から20までの範囲で指定できます。
useSearch: true,
商品検索結果を表示します。falseを指定した場合、商品検索結果を表示しません。(スマートフォン用の「sphs」では指定できません。)
searchCount: 3,
商品検索結果を表示する最大数を指定します。数値は1から10までの値を指定できます。(PCのみ)
displayItemImage: true,
商品検索結果に商品画像を表示します。falseを指定した場合、画像を表示しません。
displayItemSummary: true,
商品検索結果に商品説明を表示します。falseを指定した場合、商品説明を表示しません。
displayItemTitle: true,
商品検索結果に商品名を表示します。falseを指定した場合、商品名を表示しません。
displaySearchHeader: ture,
商品検索結果に、商品表示の見出しを表示します。見出しは、SearchHeaderTextパラメータで指定されている文字列が使用されます。falseを指定した場合、商品表示の見出しを表示しません。
searchHeaderText: "商品検索",
商品表示の見出しに表示される文字列を指定します。文字列が1行に収まらない場合、改行して表示されます。SearchHeaderにfalseが指定されている場合は、商品表示の見出しを表示しません。
searchAutoDisplay: true,
falseを指定した場合は、エンドユーザーが候補語にフォーカスするまで商品検索結果を表示しません。商品検索結果が自動的に表示されなくなります。
closeImage: "//poplink-f.probo.biz/pl3/images/close.png",
スマートフォンで表示されるサジェストを閉じるボタンの画像をURLで指定します。
gaType: "gtag",
Googleアナリティクスのイベントデータとして測定できます。グローバルサイトタグ (gtag.js)を使用している場合は「gaType: "gtag",」、ユニバーサルアナリティクス (analytics.js) を使用している場合は「 gaType: "universal",」と指定します。
拡張eコマース設定(コマースクリエイター)をご利用の場合は、「gaType: "gtag",」を指定いただいた上で、以下のように、サジェストリンクのタグの前にGoogleアナリティクスのタグを記述してください。「, { 'send_page_view': false }」が必須となります。
下記の「トラッキング ID」と記載された部分に、Googleアナリティクスの「トラッキングID」を入力してください。
<script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'トラッキング ID', { 'send_page_view': false }); var poplink3 = { uid: "01234567890abcdefghijklmnopqrstuv", //弊社からご案内したuidを転記 target: "#TARGET", //INPUTタグに指定したidを記述 gaType: "gtag", //Googleアナリティクスで測定(拡張eコマース機能を使用) deviceType: 'pc011' }; (function() { var s = document.createElement("script"); s.charset = "utf-8"; s.src = "//poplink-f.probo.biz/pl3/poplink3.js"; document.getElementsByTagName("head")[0].appendChild(s); })(); </script>
下記のようにGoogleアナリティクスに記述されます。Googleアナリティクス>レポート>イベントで確認いただけます。「上位のイベント」レポートなどをご覧ください。
タイミング | イベント カテゴリ | イベント アクション | イベント ラベル |
---|---|---|---|
画面表示時 | activate | 指定している「deviceType」 | 設置されているページのURL |
候補語を選択(クリック/タップ)時 | suggest | 選択した候補語 | 検索フォームに入力されている文字列 |
商品検索結果を選択(クリック/タップ)時 | search | 選択中の候補語 | 商品ページのURL:商品名 |
検索フォームにそれぞれ違うidを付与してください。下の例は「id="TARGET1"」「id="TARGET2"」というidを付与した場合です。
<script> var poplink3 = [{ uid: "a0b1c2d3e4f5g6h7i8j9k0lmnopqrstuv", target: "#TARGET1", deviceType: { desktop: 'pc011r', mobile: 'sphs' } }, { uid: "a0b1c2d3e4f5g6h7i8j9k0lmnopqrstuv", target: "#TARGET2", deviceType: { desktop: 'pc011r', mobile: 'sphs' } }]; (function() { var s = document.createElement("script"); s.charset = "utf-8"; s.src = "//poplink-f.probo.biz/pl3/poplink3.js"; document.getElementsByTagName("head")[0].appendChild(s); })(); </script>
候補語に対応する商品が表示される商品サジェストの「表示順」は以下のように決定します。なお、表示順の変更はできません。
検索の候補語として表示される単語の文字数は最大で全角25文字です。全角25文字以上の単語は候補語に表示されません。
なお、候補語は『単語』のみが表示され、間に空白を挟んだ『フレーズ』では表示されません。(例えば「ハイウエスト デニム」といった表示はされません。)
サジェストの「解析システム」の処理により、例外的に表示順、候補語が上記と違う形式で表示される可能性があります。予めご了承ください。
新規商品登録・商品基本情報編集にて、「表示」または「他社サービスに公開」のチェックを外している商品はサジェストリンクに解析・表示されません。
サジェストされるキーワード(候補語)は解析システムにより自動抽出されます。商品データ中のHTMLタグは出力されません。
各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。
以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)
コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)
上記以外は共通で使用する項目です。(何も表示されません。)