応用編¶

属性絞り込み機能の実装¶

企業サイト向けポップファインドでは、

URLやファイル種別
meta要素
有償カスタマイズ(お問い合わせください)

にて属性を定義し、それらを用いたヒット件数付きの絞り込み機能(属性絞り込み機能)を利用することが可能です、

URL/ファイル種別による属性絞り込み¶

URLから自動付与される属性¶

クロールしたコンテンツにおいて、以下のPF_ADDR:から始まる属性を指定することで、
URLから絞り込みを行うことができます。

属性名	絞り込みの内容
PF_ADDR:example.com	example.com以下のコンテンツで絞り込む
PF_ADDR:example.com/popfind	example.com/popfind以下のコンテンツで絞り込む
PF_ADDR:example.com/casestudy.php	example.com/casestudy.phpを絞り込む (casestudy.php?id=28 なども含まれます)

ファイル種別から自動付与される属性¶

クロールされたコンテンツにおいて、以下のPF_FILETYPE:から始まる属性を指定することで、
ファイル種別から絞り込みを行うことができます。

属性名	絞り込みの内容
PF_FILETYPE:html	HTML で絞り込む
PF_FILETYPE:pdf	PDF で絞り込む
PF_FILETYPE:excel	Excel で絞り込む
PF_FILETYPE:word	Word で絞り込む
PF_FILETYPE:powerpoint	PowerPoint で絞り込む

meta要素による属性絞り込み¶

クロール対象のコンテンツに

<meta name="pf:attributes" content="[指定する属性名]">

というmeta要素をhead要素内に記述することで、属性絞り込みに使用することができます。

また、1ページの複数の属性を定義したい場合は

<meta name="pf:attributes" content="category:csr|lang:en">

の様に、属性同士を「|(バーティカルバー)」で連結して記述します。

属性名	絞り込みの内容
category:csr	`<meta name="pf:attributes" content="category:csr">` が書かれているページで絞り込む
lang:en	`<meta name="pf:attributes" content="lang:en">` が書かれているページで絞り込む

Info

カテゴリーと言語など、異なる種類の要素を含める場合、見やすさと値同士の衝突を防ぐため、種別:値 のように記述することを推奨します。

属性絞り込み機能の利用方法¶

以下は、実際に属性絞り込み機能を表示するための手順です。

リソースファイルの作成¶

上記の属性を利用した属性絞り込み機能を使用するには、属性リソースファイルの作成が必要です。

この例では以下のようなリソースファイルを作成したとします。
（詳しくは、「リソースファイルリファレンス」を参照してください。）

var sitesearchAttribute = [
  {
    group: {"label": "カテゴリーによる絞り込み", "name":"group1"},
    attributes: [
      {"label":"サービス", "name":"PF_ADDR:example.com/popfind"},
      {"label":"事例","name":"PF_ADDR:example.com/casestudy.php"}
    ]
  },
  {
    group: {"label": "ファイル種別による絞り込み", "name":"group2"},
    attributes: [
      {"label":"HTML", "name":"PF_FILETYPE:html"},
      {"label":"PDF", "name":"PF_FILETYPE:pdf"},
    ]
  }
];

これを、sitesearch_attr.js としてサーバに設置します。

HTMLの修正¶

作成した sitesearch_attr.js を、他のリソースファイルや、CSSなどと同じく、head要素に追加します。

<script type="text/javascript" charset="UTF-8" src="js/sitesearch_attr.js"></script>

次に、body要素内にポップファインドコンポーネントを追加します。

ここで、上記で作成したリソースファイルで定義したカテゴリーによる絞り込みの属性絞り込みコンポーネントを表示する場合は
groupのnameであるgroup1を識別子に含める形式で指定します。

  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="attributes-group1"></div>

あるいは、ファイル種別による絞り込みの属性絞り込みコンポーネントも追加する場合は

  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="attributes-group1"></div>
  <div data-[モード]="attributes-group2"></div>

という指定をすることにより、定義されたグループの属性絞り込みコンポーネントが表示される様になります。

属性絞り込み機能の表示バリエーション変更¶

属性絞り込み機能において、表示バリエーションを変更する場合、属性リソースファイルを修正します。
属性リソースファイルに関しては、「リソースファイルリファレンス」を参照してください。

この例では以下のようなリソースファイルを作成したとします。

var sitesearchAttribute = [
  {
    group: {"label": "絞り込みグループ1", "name":"group1"},
    attributes: [
      {"label":"属性1", "name":"ATTRIBUTE1"},
      {"label":"属性2","name":"ATTRIBUTE2"}
    ]
  }
];

type2(開閉式)の見た目に変更する場合以下のような修正を加えます。

var sitesearchAttribute = [
  {
    group: {"label": "絞り込みグループ1", "name":"group1"},
    attributes: [
      {"label":"属性1", "name":"ATTRIBUTE1"},
      {"label":"属性2","name":"ATTRIBUTE2"}
    ],
    type: "type2"
  }
];

属性絞り込みグループ間のOR結合¶

属性絞り込み機能はデフォルトでは、group同士をANDで結合されます。
ORで繋ぎたい場合は、data-overwrite-group 属性を利用できます。
data-overwrite-group 属性に同じ値が設定されたgroupは、ORで結合されます。

例えば、以下のようなhtmlがあるとします。

<div data-[モード]="attribute-group1"></div>
<div data-[モード]="attribute-group2"></div>

この場合、group1とgroup2はANDで結合されます。
group1とgroup2をORで結合したい場合は、以下のように data-overwrite-group 属性に同じ値を設定します。

<div data-[モード]="attribute-group1" data-overwrite-group="group"></div> 
<div data-[モード]="attribute-group2" data-overwrite-group="group"></div>

注意

data-overwrite-groupに指定する値は、既存のgroup名と重複しないようにして下さい。

表示メッセージの変更¶

ポップファインドでは、一部の表示メッセージは、
メッセージリソースファイルを作成・設置することにより上書きすることができます。

ここでは、表示メッセージの変更方法について説明します。

例えば、並び順変更コンポーネントのメッセージを変更したい場合、
以下のような変更する内容を差分のみ記述したファイルを作成します。

var sitesearchMessage = {
  "sortOrderSelector": {
    "label":"変更したメッセージ"
  }
};

これを、sitesearch_mess.js としてサーバに設置し、
他のリソースファイルや、CSSなどと同じく、head要素に追加します。

<script type="text/javascript" charset="UTF-8" src="js/popfind/sitesearch_mess.js"></script>

このようにすることで、対応する箇所のメッセージを変更することができます。
実際に指定すべきコンポーネント名やキーの名称に関しては、「リソースファイルリファレンス」を参照してください。

特定の出し分けフラグを利用しておすすめリンクを使用する¶

1つのおすすめリンクサービスに対して、データ登録時に出し分けフラグを設定することで、
表示時の指定により特定の出し分けフラグをもったおすすめリンクのみを表示させることができます。

以下の方法で実現します。

・データファイルの sections に出し分けフラグを登録する

データファイルの sections フィールドに、出し分け用の文字列を登録します。この文字列は表示には使用されません。
指定するフォーマットに関しては「データファイルリファレンス」を参照してください。
ここでは、example を登録したとします。

・リソースファイルに出し分けフラグを指定する

上記の作成例に出し分けフラグを指定した例を記載します。

var sitesearchRecommend = [
  {
    group: {"label": "おすすめリンク(上部)", "name": "group1"},
    recommend_id: '[おすすめリンク UID]',
    count: 1,
    section: "example",
  },
  {
    group: {"label": "おすすめリンク(下部)", "name": "group2"},
    recommend_id: '[おすすめリンク UID]',
    count: 2
  }
];

この指定により、おすすめリンク(上部)は、出し分けフラグに example を持ったおすすめリンクから表示され、
おすすめリンク(下部)は、出し分けフラグの影響を受けない設定が可能になります。

meta要素を利用した検索結果のカスタマイズ¶

上記の属性絞り込み機能以外にも、いくつかのmeta要素はポップファインドで利用することができます。
これらの値は、クロール対象サイトのHTMLに埋め込むことで利用可能です。

利用可能なmeta要素については「ポップファインドで利用可能なmeta要素」を参照ください。

例えば、並び順の制御を、HTMLを出力するプログラムの値で行いたい場合

<meta name="pf:sort" content="999">

の様にHTMLに埋め込む事で、sortフィールドでの並び順で検索結果を表示することが可能になります。

最終更新日絞り込み機能の実装¶

ポップファインドでは、クロールしたコンテンツを最終更新日によって絞り込みを行うことが可能です。

ここでは、最終更新日絞り込み機能の実装方法について説明します

最終更新日について

最終更新日はクロール時に決定します
通常、
1. HTML内の meta要素 pf:last_modified
2. HTML内の meta要素 date
3. JSON-LD における dateModified
4. JSON-LD における datePublished
5. Webサーバ(のHTTPレスポンス)における Last-Modified
の順に評価され、値が存在した場合に最終更新日として使用されます。

簡単な利用方法¶

通常、最終更新日絞り込みを行うには、最終更新日リソースファイルを作成する必要がありますが、HTMLの修正を行うだけでも「1日以内」「7日以内」「30日以内」の絞り込みを表示することができます。

次の様にコンポーネントを配置してあるとします。

  <div data-[モード]="attributes-group1"></div>
  <div data-[モード]="attributes-group2"></div>
  <div data-[モード]="sortselector"></div>
  <div data-[モード]="countselector"></div>
  <div data-[モード]="searchstatus"></div>
  <div data-[モード]="searchresults"></div>
  <div data-[モード]="pagenator"></div>

この時、表示したい箇所にlastmodifiedselectorコンポーネントを挿入します

  <div data-[モード]="attributes-group1"></div>
  <div data-[モード]="attributes-group2"></div>
  <div data-[モード]="sortselector"></div>
  <div data-[モード]="countselector"></div>
  <div data-[モード]="lastmodifiedselector"></div>
  <div data-[モード]="searchstatus"></div>
  <div data-[モード]="searchresults"></div>
  <div data-[モード]="pagenator"></div>

これで、「1日以内」「7日以内」「30日以内」の絞り込みを表示することができます

最終更新日絞り込み機能の絞り込み範囲を変更する¶

最終更新日リソースファイルを使用することで、絞り込み範囲を変更することができます

リソースファイルの作成¶

ここでは、以下のようなリソースファイルを作成したとします。
（詳しくは、「リソースファイルリファレンス」を参照してください。）

     var sitesearchLastModified = [
      {
          group: {"label": "最終更新日による絞り込み", "name":"g1"},
          dateranges: [
            {label: "2019年から", from: "2019/01/01"},
            {label: "2020年から", from: "2020/01/01"},
            {label: "2021年から", from: "2021/01/01"},
          ]
      },
      {
          group: {"label": "最終更新日による絞り込み(年単位)", "name":"g2"},
          dateranges: [
            {label: "2019年", from: "2019/01/01", to: "2019/12/31"},
            {label: "2020年", from: "2020/01/01", to: "2020/12/31"},
            {label: "2021年", from: "2021/01/01", to: "2021/12/31"},
          ]
      },      
    ];

これを、sitesearch_lastmodified.js としてサーバに設置します

HTMLの修正¶

作成した sitesearch_lastmodified.jsを、他のリソースファイルや、CSSなどと同じく、head要素に追加します。

<script type="text/javascript" charset="UTF-8" src="js/popfind/sitesearch_lastmodified.js"></script>

次に、body要素内にポップファインドコンポーネントを追加します。

ここで、上記で作成したリソースファイルで定義した最終更新日による絞り込みの絞り込みグループを表示する場合は
groupのnameであるg1を識別子に含める形式で指定します。

  <div data-[モード]="lastmodifiedselector-g1"></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>

Warning

リソースファイルを読み込ませた場合、グループ名を省略した最終更新日絞り込みコンポーネントの利用には先頭グループが使用されます。

クイックプレビュー機能の実装¶

ポップファインドでは、検索結果として表示されたHTMLやPDFを素早く確認することが出来るクイックプレビュー機能が利用できます。

利用には、設定タグ内で quickPreview パラメータを有効にします

  quickPreview: true,

情報

本機能はHTML,PDFのレコードに対して有効になり、プレビューされるWebサイトの設定によっては閲覧できない場合があります。
また、本機能は mobileMaxWidth パラメータの影響を受け、モバイル判定された場合はプレビューボタンが表示されません。

モーダルウィンドウの実装¶

ポップファインドでは、単純に画面上にコンポーネントを配置するのに加え、
モーダルウィンドウ内にコンポーネントを配置することにより、
表示領域を有効活用することが可能です。

ここでは、モーダルウィンドウの実装方法について説明します

次の様にコンポーネントを配置してあるとします。

  <div data-[モード]="attributes-group1"></div>
  <div data-[モード]="attributes-group2"></div>
  <div data-[モード]="sortselector"></div>
  <div data-[モード]="countselector"></div>
  <div data-[モード]="searchstatus"></div>
  <div data-[モード]="searchresults"></div>
  <div data-[モード]="pagenator"></div>

この時、モーダルウィンドウ内に表示したいコンポーネントを
modalコンポーネントの中に入れます。

  <div data-[モード]="modal">
    <div data-[モード]="attributes-group1"></div>
    <div data-[モード]="attributes-group2"></div>
    <div data-[モード]="sortselector"></div>
    <div data-[モード]="countselector"></div>
  </div>
  <div data-[モード]="searchstatus"></div>
  <div data-[モード]="searchresults"></div>
  <div data-[モード]="pagenator"></div>

こうすることにより、モーダルコンポーネントを配置した場所には
「詳細検索」というボタンが表示され、そのボタンを押下した際には
内部にあるコンポーネントがモーダルウィンドウ内に表示されるようになります。

UTF-8以外の文字コードから検索をする場合¶

ポップファインドではUTF-8以外の文字コードからキーワード検索を行う事が出来ます。
対応している文字コードについては、「URLパラメータリファレンス」を参照してください。
変換を行う場合は以下の様にフォームを修正します。

修正前(UTF-8の場合)

  <form class="" method="get" action="search.html">
    <input type="text" name="q" id="q" value="" placeholder="検索キーワード">
    <input type="submit" name="" value="検索">
  </form>

修正後(Shift_JISの場合)

  <form class="" method="get" action="search.html">
    <input type="text" name="q" id="q" value="" placeholder="検索キーワード">
    <input type="hidden" name="charset"  value="Shift_JIS">
    <input type="submit" name="" value="検索">
  </form>

対応している文字コードについては、「URLパラメータリファレンス」を参照してください。

使用するURLパラメータ名を変更する場合¶

ポップファインドでは、標準では予約されたURLパラメータ名を使用しますが、
設定パラメータにより、それらの値を変更することができます。

例えばページ番号を示す値「ssp」を「page」に変更する場合、
以下の様に設定することが可能です。

修正前

// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputId: "q",
};

修正後

// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputId: "q",
  userQueryParamNames: {
    resultPage: "page"
  }
};

この設定項目について詳しくは、「設定パラメータリファレンス」を、
予約されているURLパラメータについては「URLパラメータリファレンス」を参照ください。

事前に特定の検索キーワードや属性で絞り込まれた検索結果を表示する¶

ポップファインドでは、設定パラメータにより、
サイト管理者側で事前に検索キーワードや属性で絞り込まれた結果を表示することができます。

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

修正前

// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputId: "q",
};

修正例1 (検索キーワード「テスト」で絞り込む場合)

// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputId: "q",
  additionalSearchKeyword: "テスト"
};

修正例2(属性「ABC1234」で絞り込む場合)

// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputId: "q",
  additionalAttribute: ["ABC1234"],
};

修正例3(属性「A ANDNOT (B OR C)」で絞り込む場合)

// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputId: "q",
  additionalAttribute: ["A"],
  additionalNotAttribute: ["B","C"],
};

設定項目については、「設定パラメータリファレンス」も参照ください。

注意

本パラメータや、属性絞り込みコンポーネントの組み合わせによって、検索結果が全てゼロ件になる
条件を作成することが可能になります。
利用の際には、実際に使用するコンポーネントなどを考慮して矛盾が発生しない様にご注意ください。

ポップファインドの表示完了後に処理を行う¶

ポップファインドは起動時に必要に応じて通信を行い、動的にDOMを更新します。
その為、表示後に処理を行おうとする際にタイミングによって失敗する事があります。
確実にポップファインドの表示後の結果を参照したい場合は、フック関数を利用してください。

下記の例では、ポップファインドが表示完了になったときに、
ブラウザのコンソールに「popfind is here」という文字列を表示します。

// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputid: "q",
  allUpdateHook: function() { console.log('popfind is here'); }
};

その他のフック関数など、フック関数について詳しくは「フック関数リファレンス」も参照ください。

キーワードランキング機能の実装¶

ポップファインドでは、過去に検索された事の多いキーワードをランキング形式で表示することができます。

ここでは、キーワードランキングの実装方法について説明します。

Info

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

HTMLの修正¶

body 要素内にポップファインドコンポーネントを追加します。

  <div data-kwranking="keywordranking"></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>

キーワードランキング設定タグの記述¶

キーワードランキング設定タグを記述します。
キーワードランキング設定タグの中にパラメータと呼ぶ値を記述することで、
キーワードランキングの設定を変更することが出来ます。

// キーワードランキング設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-kwranking"] = {
  uid: "[キーワードランキング UID]",
  mode: "[モード]",
  parameter1: "[パラメータ値 1]" ,
  parameter2: "[パラメータ値 2]",
  // (略)
  parameterN: "[パラメータ値 N]",
  keywordRankingResource: [
    {
      group: {label: "注目ワード"},
      count: 5,
    }
  ]
};

設定パラメータ一覧¶

パラメータ名	データ型	デフォルト値	説明
asyncUpdate	真偽値	false	非同期モードを使うかどうか。非同期モードでは状態変更時に画面の再読み込みが発生しません。ポップファインド設定タグとおすすめリンク設定タグにも同じ設定を行います。

キーワードランキングリソース (keywordRankingResource) に指定する内容について、「リソースファイルリファレンス」を参照してください。

起動タグの記述¶

※導入先の画面において、既に他機能でポップファインドを利用している場合、この作業は不要です。

タグマネージャーを画面の最後に挿入します。

将来的に機能追加などを行った際もこの記述は有効になるので、
</body>の直前など、なるべくHTMLの後ろの方へ追加することを推奨します。

// タグマネージャー
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);

これにより、キーワードランキングが表示されるようになります。

キーワード制御ファイルのアップロード¶

キーワード制御ファイルを管理画面よりアップロードすることで、
特定のキーワードを指定した順位に表示したり、非表示にすることが可能です

キーワード制御ファイルの作成方法について、
詳しくは、「データファイルリファレンス」を参照してください。

レコメンド(popwiz)機能の利用¶

ポップファインドでは、クロール対象のページにレコメンド用のタグを埋め込む事により、表示中のページにレコメンドを表示することができます。

ここでは、レコメンドの実装方法について説明します

Info

以下の作業は、クロール対象のページに対して行います
利用には、レコメンド機能のご契約が必要になります。

レコメンド設定タグの記述¶

レコメンド設定タグを記述します。

注意

既に同じ画面でポップファインドを使用している場合、既に動作している起動タグよりも前に設定タグが記述されるようにしてください。
起動タグよりも後に設定タグが記述された場合、期待した動作にならない場合があります。

// レコメンド設定タグ
var popfindConf = popfindConf || {};
popfindConf['data-popwiz'] = {
  uid: '[レコメンド UID]',
  mode: '[モード]',
  popwizResource: [
    {
      group: { label: 'レコメンド' },
      layoutOrder: ['thumbnail', 'title'],
      type: 'type1',
      count: 3,
      popwiz_id: 'XXXXXX' // <- そのページのURLが入るようにする
    }
  ]
};

popwizResource内で利用できる内容について、詳しくは「リソースファイルリファレンス」を参照してください。

Info

popwiz_idにURLを代入するには、サイトの変数参照機能やPHPやJavaScriptなどのプログラムを利用する必要があります。
詳しくは、サイト管理者にお問い合わせください。

作成したら、HTML上に記述します。

表示コンポーネントの追加¶

レコメンドを表示したい場所にコンポーネントを追加します。

<div data-popwiz="popwiz"></div>

起動タグの記述¶

※導入先の画面において、既に他機能でポップファインドを利用している場合、この作業は不要です。

ポップファインド起動タグを画面の最後に挿入します。

将来的に機能追加などを行った際もこの記述は有効になるので、
</body>タグの直前など、なるべくHTMLの後ろの方へ追加することを推奨します。

// タグマネージャー
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);

検索結果追加表示機能¶

検索結果利用時に特定のパラメータを設定することで追加で見るボタンを表示できます。
追加で見るボタンを押すと非同期に検索結果が追加されます。

基本的な利用方法¶

extraResultsCount パラメータを 1 以上に設定してください。
html に searchresults を含めてください。
ページを表示すると、検索結果の下部に「追加で表示」ボタンが表示されます。
「追加で表示」ボタンをクリックすると、extraResultsCount 分追加で表示されます。
(追加で表示できる検索結果がない場合は、ボタンが非表示になります。)

ボタンクリック時にスクロールする¶

extraClickHook を設定することで、ボタンクリック時にスクロールさせることができます。

追加で見るボタンが画面最下部になるようにスクロールする。

extraClickHook: (btn) => {
    btn.scrollIntoView({ behavior: 'smooth', block: 'end' });
}

追加で表示された要素が画面最上部になるようにスクロールする。

extraClickHook: (btn, items) => {
    items[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
}

ボタンに表示される文字列を変更する¶

メッセージリソースファイルの searchResults.extra を変更することで表示内容を変更できます。

例

var sitesearchMessage = {
    searchResults: {
        extra: "もっと見る",
    }
}

スマホと PC で表示を分ける¶

スマホと PC で表示を分けたい場合は CSS のメディアクエリを利用してください。

以下は、スマホでは追加で見るボタン、PC では pagenator を表示する例です。

html で表示を切り替えたい要素に任意のクラスを追加する。

<div data-[モード]="searchresults"></div>
<div data-[モード]="pagenator" class="_sp_hidden"></div>

CSS でメディアクエリを記述する。

/* 画面幅が 800px 以下のとき、pagenator を非表示にする (スマホ想定) */
@media screen and (max-width: 800px) { 
    ._sp_hidden {
        display: none;
    }
}

/* 画面幅が 801px 以上のとき、もっと見るボタンを非表示にする (PC 想定) */
@media screen and (min-width: 801px) {
    ._extraresults {
        display: none;
    }
}

ハッシュタグ機能¶

ポップファインドでは、ハッシュタグ機能を利用することで、ユーザーが選択したハッシュタグに基づいて商品を絞り込むことができます。

前提

ハッシュタグ機能オプションの契約が必要です。

ハッシュタグコンポーネントの追加¶

body 要素内に、ハッシュタグコンポーネントを追加します。

<div data-[モード]="hashtag-group1"></div>
<div data-[モード]="..."></div>
<div data-[モード]="..."></div>
<div data-[モード]="..."></div>

ハッシュタグ設定タグの記述¶

ハッシュタグ機能を利用したいページに対して、ハッシュタグリソースファイルを記述した設定タグを記述します。

補足

ハッシュタグを利用したいページとしては、詳細ページや検索結果ページなどが挙げられます。
それらのページでハッシュタグリソースファイルを記述した設定タグを読み込むことで、ハッシュタグ機能を利用することができます。

以下に、ハッシュタグリソースファイルを記述した設定タグの例を示します。

// ハッシュタグリソースファイルを記述した設定タグ
var popfindConf = popfindConf || {};
popfindConf['data-[モード]'] = {
  uid: '[UID]',
  mode: '[モード]',
  hashtagResource: [
    {
      name: 'group1',
      sort: [
        { key: "count", order: "desc" }
      ],
      count: 5
    }
  ]
};

hashtagResource 内で利用できる内容について、詳しくは「ハッシュタグリソースファイル」を参照してください。

特定の条件に絞り込んだハッシュタグを表示する¶

hashtagResource に itemId を記述することで、特定のコンテンツに紐づくハッシュタグを表示することができます。

以下に、特定のコンテンツURLに紐づくハッシュタグを表示する例を示します。

前提

実際に設定する場合は、検索データの id に連携されている値を設定する必要があります。

var popfindConf = popfindConf || {};
popfindConf['data-[モード]'] = {
  uid: '[UID]',
  mode: '[モード]',
  hashtagResource: [
    {
      name: 'group1',
      sort: [
        { key: "count", order: "desc" }
      ],
      count: 5,
      itemId: 対象とするコンテンツ URL
    }
  ]
};

検索結果画面ごとに統計情報を見る¶

検索結果画面にスクリーン ID を指定することで、スクリーン ID ごとに統計情報を見ることができます。
screenId パラメータの値には以下のような種類のキーワードを指定することができます。識別しやすい文字列を指定してください。

言語
ドメイン

screenId パラメータの指定がなければ、値には default が指定されます。

たとえば、言語ごとに統計を取りたい場合、screenId パラメータで言語のキーワードを指定します。

// ポップファインド設定タグ (英語コンテンツを対象とした検索結果画面)
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  screenId: "en"
};

// ポップファインド設定タグ (日本語コンテンツを対象とした検索結果画面)
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  screenId: "jp"
};

管理画面での統計画面の操作は、統計画面の利用を参照ください。

応用編¶

属性絞り込み機能の実装¶

URL/ファイル種別による属性絞り込み¶

URLから自動付与される属性¶

ファイル種別から自動付与される属性¶

meta要素による属性絞り込み¶

属性絞り込み機能の利用方法¶

リソースファイルの作成¶

HTMLの修正¶

属性絞り込み機能の表示バリエーション変更¶

属性絞り込みグループ間のOR結合¶

表示メッセージの変更¶

おすすめリンク機能の実装¶

データのアップロード¶

リソースファイルの作成¶

HTMLの修正¶

おすすめリンク設定タグの記述¶

設定パラメータ一覧¶

特定の出し分けフラグを利用しておすすめリンクを使用する¶

関連キーワード機能の実装¶

データのアップロード¶

簡単な利用方法¶

表示件数や選択時の振る舞いを変更する場合¶

リソースファイルの作成¶

HTMLの修正¶

meta要素を利用した検索結果のカスタマイズ¶

最終更新日絞り込み機能の実装¶

簡単な利用方法¶

最終更新日絞り込み機能の絞り込み範囲を変更する¶

リソースファイルの作成¶

HTMLの修正¶

クイックプレビュー機能の実装¶

モーダルウィンドウの実装¶

UTF-8以外の文字コードから検索をする場合¶

使用するURLパラメータ名を変更する場合¶

事前に特定の検索キーワードや属性で絞り込まれた検索結果を表示する¶

ポップファインドの表示完了後に処理を行う¶

キーワードランキング機能の実装¶

HTMLの修正¶

キーワードランキング設定タグの記述¶

設定パラメータ一覧¶

起動タグの記述¶

キーワード制御ファイルのアップロード¶

レコメンド(popwiz)機能の利用¶

レコメンド設定タグの記述¶

表示コンポーネントの追加¶

起動タグの記述¶

検索結果追加表示機能¶

基本的な利用方法¶

ボタンクリック時にスクロールする¶

ボタンに表示される文字列を変更する¶

スマホと PC で表示を分ける¶

ハッシュタグ機能¶

ハッシュタグコンポーネントの追加¶

ハッシュタグ設定タグの記述¶

特定の条件に絞り込んだハッシュタグを表示する¶

検索結果画面ごとに統計情報を見る¶