2. 検索結果を設置する

2. 検索結果を設置する

1) 検索結果を表示したいhtmlファイルの<head>〜</head>の中に、以下のタグを埋め込んでください。
 必ず直リンクでcssを読み込んでください。デザインを編集されたい場合はオーバーライドしてください。

<!-- ↓CSS -->

    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

※オレンジ色の部分は、カスタムエレメント版のバージョン番号です。
※「1.0-latest」は、「1.0.X.X」の範囲内で最新バージョンを提供いたします。

2) 検索結果を表示したいhtmlファイルの<body>〜</body>の中に、以下のタグを埋め込んでください。

<div class="mf_finder_container">

 

        <!-- ↓検索窓用カスタムエレメント -->

        <mf-search-box

           submit-text=""

           ajax-url="//xxxx.marsflag.com/xxxx__xxxx__xxxx/x_search.x"

        ></mf-search-box>


        <!-- ↓オーガニック用エレメント -->

        <mf-search-results></mf-search-results>

 

</div>

　※青字の部分はお客様によって異なります。

3) 検索結果を表示したいhtmlファイルの</body>の直前に、以下のタグを埋め込んでください。

<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>

※オレンジ色の部分は、カスタムエレメント版のバージョン番号です。
※「1.0-latest」は、「1.0.X.X」の範囲内で最新バージョンを提供いたします。

4) 完成イメージ
​

    • Related Articles

    • 2. 検索結果を設置する Ver.2 ( 推奨 )

      ステップ2★検索結果を表示したいhtmlファイルにタグを埋め込む 1） 検索結果を表示したいhtmlファイル（例 result.html）の<body>～</body>の中に、以下のタグを埋め込んでください。　　 <!-- ↓検索窓用カスタムエレメント --> <mf-search-box ajax-url="https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/{サービス識別名}/search" ...

    • 2. 検索結果を設置する Ver.1 ( 初期バージョン )

      ステップ2★検索結果を表示したいhtmlファイルにタグを埋め込む 1） 検索結果を表示したいhtmlファイル（例 result.html）の<head>～</head>の中に、以下のタグを埋め込んでください。 <!-- ↓CSS --> <link href="https://ce.mf.marsflag.com/latest/css/mf-search.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8"> 2） ...

    • GTM（Google Tag Manager）を使わず導入は可能ですか？

      Q. GTM（Google Tag Manager）を使わず導入は可能ですか？ A. いいえ。 本サービスは、MF3.0の検索結果画面でGTM（Google Tag Manager）を利用されていることが前提となっております。 以下マニュアルを参考して設定ください。 参考： 2. Google AnalyticsとGoogle Tag Managerの設定 MARS FINDER 3.0 サポートサイト->マニュアル->Webサイトへの導入ガイド->2. 検索結果を設置する

    • はじめに

      カスタムエレメント版(CE版)最新バージョンについて記述しています。 検索窓を設置する 検索結果を設置する ずばケンを表示する ずば画像を表示する キーワードランキングを表示する カテゴリを利用する タイトルアイコンを表示する ドリルダウンを表示する 関連検索キーワードを表示する ■検索窓設置イメージ ■検索結果設置イメージ https://www.marsflag.com/searchresult/ce-result.html#/

    • サービス作成前なのですが、サンプルとして使えるajax-URLはありますか

      Q.サービス作成前なのですが、サンプルとして使えるajax-URLはありますか。 A.はい、ございます。以下のajax-URLをお使いください。 https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/bbce25dc/search 参考： カスタムエレメント設置ガイド->1. 検索窓を設置する カスタムエレメント設置ガイド->2. 検索結果を設置する