コマースクリエイター未利用コマースクリエイター移行中（有効）コマースクリエイター利用中説明を表示　▼

futureサジェストリンクの設置

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター未利用: 以前からの管理画面で構築し、以前からのECサイト（ユーザー画面）で店舗を構築・運用されている場合（コマースクリエイターをご利用でない場合）はこちらを選択してください。
コマースクリエイター移行中（有効）: 以前からの管理画面で構築し、以前からのECサイト（ユーザー画面）で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター利用中: コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト（ユーザー画面）で店舗を新規構築・運用されている場合（以前からのユーザー画面をご利用でない場合）はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

futureサジェストリンクの設置方法

設置方法は、サジェストリンクを表示するキーワード検索フォームに「id」を指定し、サジェストリンク表示用JavaScriptを設置します。すでにサイトに設置されている商品検索フォームに追加することができます。なお、デザインはサジェストリンクで既定のものが出力されますが、CSSにてデザイン調整していただけます。

キーワード検索フォームに「id」を指定（コマースクリエイター）

下記のように、検索キーワードを入力する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を設置（コマースクリエイター）

下記のJavaScriptをECサイトに設置します。主な方法は以下となります。

フリーパーツを作成し、JavaScriptファイルを記述。「ヘッダーエリア（パネルパーツ）」に配置します。
JavaScriptファイルを作成し、コマースクリエイター＞アイテム一覧からアップロード。フリーパーツにリンクタグを記入し、headタグ内に設置します。

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にてデザイン調整をしてください。

キーワード検索フォームに「id」を指定（以前からのユーザー画面）

管理画面の構築＞その他＞各ページ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を設置（以前からのユーザー画面）

商品検索フォームのタグに続けて、下記のJavaScriptをECサイトに設置します。なおサジェストリンクの表示や挙動を変更する場合は、こちらのJavaScriptに追記します。

PCサイト用

<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>

設置方法の例（PCサイト）

管理画面の構築＞デザイン設定＞レイアウト編集から、ご利用されているレイアウトパターンの内、「フッタエリアに表示させるHTMLタグ」に設置ください。

なお、ご利用されているレイアウトパターンは、構築＞ページ設定＞各ページ設定よりご確認いただけます。

※例になります。実際のECサイトのデザインにあわせて設置してください。

設置方法の例（スマートフォンサイト）

2管理画面のモバイルメニュー＞スマートフォン＞スマートフォン基本設定から、「フッタコメント１」または「フッタコメント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

uid: "a0b1c2d3e4f5g6h7i8j9k0lmnopqrstuv",

サジェストのサービスの識別コード(UID)を指定します。UIDは弊社よりお知らせいたします。(必須）

target

target: "#TARGET",

検索ボックスの要素をCSSセレクタの書式で指定します。(必須）

displayTarget

displayTarget: "#SUGGEST";

デザイン上の都合で、検索ボックスとは離れた場所にサジェストを表示したい場合に使用します。
指定したIDを持つ要素に表示できます。上例では「SUGGEST」というidを持つ要素の場所に表示します。

deviceType

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）のデフォルトは20です。
商品検索結果の最大表示数（searchCount）のデフォルトは10です。
商品検索結果の表示（useSearch）をfalse（非表示）に設定できません。
searchHeader（商品表示の見出し）を指定できません。
「商品検索結果の商品名（displayItemTitle）」または「商品検索結果の商品説明（displayItemSummary）」のいずれかをtrueにできます。

suggestCount

suggestCount: 5,

候補語を表示する最大数を指定します。数値は1から20までの範囲で指定できます。

useSearch

useSearch: true,

商品検索結果を表示します。falseを指定した場合、商品検索結果を表示しません。（スマートフォン用の「sphs」では指定できません。）

searchCount

searchCount: 3,

商品検索結果を表示する最大数を指定します。数値は1から10までの値を指定できます。（PCのみ）

displayItemImage

displayItemImage: true,

商品検索結果に商品画像を表示します。falseを指定した場合、画像を表示しません。

displayItemSummary

displayItemSummary: true,

商品検索結果に商品説明を表示します。falseを指定した場合、商品説明を表示しません。

displayItemTitle

displayItemTitle: true,

商品検索結果に商品名を表示します。falseを指定した場合、商品名を表示しません。

displaySearchHeader

displaySearchHeader: ture,

商品検索結果に、商品表示の見出しを表示します。見出しは、SearchHeaderTextパラメータで指定されている文字列が使用されます。falseを指定した場合、商品表示の見出しを表示しません。

searchHeaderText

searchHeaderText: "商品検索",

商品表示の見出しに表示される文字列を指定します。文字列が1行に収まらない場合、改行して表示されます。SearchHeaderにfalseが指定されている場合は、商品表示の見出しを表示しません。

searchAutoDisplay

searchAutoDisplay: true,

falseを指定した場合は、エンドユーザーが候補語にフォーカスするまで商品検索結果を表示しません。商品検索結果が自動的に表示されなくなります。

closeImage

closeImage: "//poplink-f.probo.biz/pl3/images/close.png",

スマートフォンで表示されるサジェストを閉じるボタンの画像をURLで指定します。

gaType

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>

サジェストリンクの仕様について

サジェストリンクソート順

候補語に対応する商品が表示される商品サジェストの「表示順」は以下のように決定します。なお、表示順の変更はできません。

1 よくクリックされている商品: サジェストリンクでクリックされた商品のデータより、よくクリックされている商品が上位に表示されます。なお、クリックされた商品のデータが蓄積された後、サジェストリンク独自の解析処理によって上位表示されます。検索語に対して商品が一定数以上クリックされると解析の対象となり上位表示されます。
2 キーワード（候補語）の重み: 1.運用＞商品管理＞商品新規登録・商品基本情報編集の「商品名」
2.運用＞商品管理＞商品コメント設定（コマースクリエイター）の「商品説明」
「商品名」にキーワードがある商品が、「商品説明」にキーワードがある商品より優先されます。「商品名」にキーワードがあれば、「商品説明」にキーワードがあるかどうかは考慮されません。（『3 優先度』以降の値でソートされます。）また、キーワードの登場回数などは考慮されません。
3 優先度（数値・昇順）: 運用＞商品管理＞商品新規登録・商品基本情報編集の「優先度」
4 最終更新日時（日付時刻・降順）: 商品情報の更新日時
5 ブランド（文字列・昇順）: 設定＞プロモーション＞Google設定-商品ID-ブランド（brand）構築＞ページ設定＞Google設定のGoogleデータフィード設定-ブランド、または運用＞商品管理＞Googleデータフィード設定-ブランド
6 商品id（数値・降順）: 商品を登録するとシステムで自動的に付与します。連番となります。

キーワードサジェスト（候補語）について

検索の候補語として表示される単語の文字数は最大で全角25文字です。全角25文字以上の単語は候補語に表示されません。
なお、候補語は『単語』のみが表示され、間に空白を挟んだ『フレーズ』では表示されません。（例えば「ハイウエストデニム」といった表示はされません。）

サジェストの「解析システム」の処理により、例外的に表示順、候補語が上記と違う形式で表示される可能性があります。予めご了承ください。

サジェストに表示しない商品（除外指定）

新規商品登録・商品基本情報編集にて、「他社サービスに公開」のチェックを外している商品はサジェストリンクに解析・表示されません。

表示できる商品データ

サジェストされるキーワード（候補語）は解析システムにより自動抽出されます。商品データ中のHTMLタグは出力されません。

候補語の自動抽出

サジェストされるキーワード（候補語）は自動抽出されます。対象は「商品名」「商品説明」です。
キーワード（候補語）として判断されるのは「日本語」のみです。
キーワードの文字数は3文字から最大25文字になります。
半角英数字やハイフンなどの記号を含むキーワードには対応しておりません。
キーワードは(1)商品名・(2) 商品説明の順に優先されます。
単語と単語の間にスペースを入れた検索（複数語）には対応しておりません。
and検索/or検索（複数語）には対応しておりません。
商品名が長い場合、末尾が「…」に変換されます。
登場回数が1回しかない言葉は候補語にならない場合がございます。
任意の候補語を設定する機能はありません。候補語の抽出については、サジェストリンクの解析システムが自動的に行います。
候補語の抽出については、サジェストリンクの解析システムの改善により予期せず変更される場合があります。

ご注意

「任意の単語を検索候補に表示」「任意の単語を検索候補に表示しない」機能には対応しておりません。

項目表示について

各項目は「以前からのECサイト用」「コマースクリエイター用」「共通」の3種類があります。「コマースクリエイター移行中（有効）」選択時は全ての項目と説明が表示されます。

・以前からのECサイト用項目（コマースクリエイターでは使用しない）：右側にこちらの色の点線が表示されます。

・コマースクリエイター専用ECサイト用の項目（以前からのECサイトには影響しない）：右側にこちらの色の点線が表示されます。

・上記以外は共通で使用する項目です。（何も表示されません。）