MARS FINDER 2.0 Custom Element Version Setting Up Manual (2020/06)

MARS FINDER 2.0 Custom Element Version Setting Up Manual (2020/06)

MARS FINDER 2.0 Custom Element Version
The custom element version is one of the version extensions of Mars Finder 2.0search service which enables our customer to allocate the search box and search result anywhere just with 2 steps. 

Easy Setting Up of Custom Element Version
★Files to prepare
-html file of the search box（for example: window.html）
-html file of the search result (for example: result.html)

★Flow of Navigation
If a user click the button of the html file of the search box（for ex: window.html）, the browser navigates to the result page (for example: result.html).  


If the user click the button of the html file of the result page, the browser will refresh the result page and show the result.



STEP 1 ★Inserting tags in the search box html file
1) Insert the tag of following square in the search box html file (for ex: window.html) just in between <head> and </head>

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


2) Insert the tag of following square in the search box html file (for ex: window.html) just in between <body> and </body>
<div class="mf_finder_container">

<!-- Custom element for search box-->
<mf-search-box
submit-text=""
ajax-url="//xxxx.marsflag.com/xxxx__xxxx__xxxx/x_search.x"
serp-url="//xxxx.marsflag.jp/result.html#/"
></mf-search-box>

</div>
※The blue part may differ based on the each client?s information
※The green part should be the pass name or file name of the search result html（full pass recommended）


3) Insert the tag of following square in the html file of sarch box (for ex: window.html) just in front of the </body> tag.  
<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>


STEP 2 ★Inserting the tags in the search result html file
1) insert the tags in the following square in the html file of the search result (for ex: result.html) just in between <head> and </head>
<!-- ↓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">

2) insert the following tags in the square in the html file of the search result (for ex: result.html) in between <body> and </body> tag 　　
<div class="mf_finder_container">
        <!-- custom element tag of the search box -->
        <mf-search-box
           submit-text=""
           ajax-url="//xxxx.marsflag.com/xxxx__xxxx__xxxx/x_search.x"
        ></mf-search-box>
        <!-- element for ZUBA-KEN -->
        <mf-zubaken></mf-zubaken>
        <!-- element for organic -->
        <mf-search-results></mf-search-results>
</div>
※The bule part may differ based on the each client?s information

3) insert the tag of following square in the html file of search result (for ex: result.html) just in front of the tag </body>
<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>
It's already done!

★The Rendering Image 
-html file of the search box（for ex: window.html)


-html file of the search result  (for ex: result.html)


    • Related Articles

    • MARS FINDER Analyticsを利用するために特別な設定は必要ですか

      Q. MARS FINDER Analyticsを利用するために特別な設定は必要ですか。 A.MARS FINDER Analyticsを利用するために特別な設定は不要です。 カスタムエレメント Ver.2 を使用して MARS FINDER を設置している場合、MARS FINDER Analyticsは自動的に収集されます。 カスタムエレメントVer.1 ではMARS FINDER Analyticsは取得されません。

    • MARS FINDER Analyticsはいつから保存されていますか

      Q. MARS FINDER Analyticsはいつから保存されていますか。 A.ログ保存期間は2025年12月18日以降〜現在までとなります。 但し、カスタムエレメント Ver.2 を利用している期間内に限ります。 管理画面から変更することはできません。

    • MARS FINDER Analyticsが表示されない／取得されていないように見えます

      Q. MARS FINDER Analyticsが表示されない／取得されていないように見えます。 A.以下が考えられます： カスタムエレメントVer.1 で設置されている 埋め込みコードの不備( https://ce.mf.marsflag.com/latest/js/mf-search.js の埋め込みに不備がある ) 通信エラー 当該サービスを閲覧する権限の不足 参考 MARS FINDER30->マニュアル->2. 検索結果を設置する Ver.2 ( 必須・最新バージョン)

    • MARS FINDER Analyticsの閲覧権限を分けられますか

      Q.MARS FINDER Analyticsの閲覧権限を分けられますか。 A.はい。MARS FINDER の権限管理と連動しています。 MARS FINDER の権限管理 の詳細は、こちら になります。

    • MARS FINDER Analyticsを絞り込んで検索できますか

      Q. MARS FINDER Analytics絞り込んで検索できますか。 A.はい。 日付の条件で絞り込みできます。 操作方法は こちら をご確認ください。