キーワードランキングコンポーネント¶

機能説明¶

検索キーワードランキングを表示します
識別子にグループ名が含まれます。
表示にはグループ名に対応したキーワードランキングリソースが必要です。
グループ識別子を指定しない場合、キーワードランキングリソースの先頭の定義が使用されます。
存在しないグループ名を指定した場合、警告が表示されます

See the Pen this by BST developer (@bsearchtech)on CodePen.

設定方法¶

必須設定¶

Htmlの修正

<div data-kwranking="keywordranking-group1"></div>

リソースファイルの作成

キーワードランキングリソースファイル¶

キーワードランキングリソースファイルは、キーワードランキング UID や表示条件を指定したグループを定義し、キーワードランキングコンポーネントを用いて検索キーワードを表示するためのファイルです。

前提

利用には、キーワードランキング UID が必要になります。

キーワードランキング機能を使用しない場合、このファイルを作成、読み込みする必要はありません。

キーワードランキング設定タグを記述します。

// キーワードランキング設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-kwranking"] = {
  uid: "[キーワードランキング UID]",
  mode: "[モード]",
  keywordRankingResource: [
    {
      group:{label: "注目ワード", name: "group1"},
      count: 5,
    }
  ]
};

設定パラメータ一覧¶

パラメータ名	データ型	デフォルト値	説明
asyncUpdate	真偽値	false	非同期モードを使うかどうか非同期モードでは状態変更時に画面の再読み込みが発生しません。すべての設定タグに同じ設定を行ってください。

keywordRankingResource のエントリ一覧¶

親要素	子要素	型	デフォルト値	説明
group		ハッシュ		キーワードランキングコンポーネントを表示するグループの単位以下のメンバーを持つ。
	label	文字列		キーワードランキングコンポーネントで表示される見出し
	name	文字列		キーワードランキングコンポーネントを呼び出す際のコンポーネント識別子の一部
kwranking_id		文字列		以前のキーワードランキング UID の設定方法 uid に設定するため、設定は不要です。
count		数値	5	最大表示件数上限値: 100 (ただしキーワードの総数を超える値を設定しても、総数分しか表示されません。)
location		文字列	なし (現在の画面)	表示されたキーワードを選択した際の遷移先
param_name		文字列	クエリパラメータの設定に依存	遷移する際に付与する検索キーワードのパラメータ名

以前の指定方法

モードが sitesearch の場合、以下の記述となります。

var sitesearchKeywordRanking = [
  {
    group: {label: "注目ワード", name: "group1"},
    kwranking_id: "[キーワードランキング UID]",
    count: 5,
  }
];

DOM 構造¶

Dom

キーワードランキングコンポーネント¶

<!-- グループの名称を"人気のキーワード"、値を"group1" とする -->
<div data-kwranking="keywordranking-group1" class="_[モード]_component">
  <div class="_keywordranking">
    <div class="_label">人気のキーワード</div>
    <div class="_keywords">
      <div class="_keyword _keyword_1" id="...">
        <div class="_rank">1</div>
        <div class="_word">
          <a href="..." onclick="...">1位のキーワード</a>
        </div>
      </div>
      <div class="_keyword _keyword_2" id="...">
        <!-- 以下、表示件数の数だけ繰り返し表示される -->
      </div>
    </div>
  </div>
</div>