Mouseflow（マウスフロー）公式サポート > BLOG > オンラインマニュアル（Mouseflowの使い方） > Mouseflow（マウスフロー）の初期設定 > インストールと設定 > インストールガイド

インストールガイド

2016年11月25日

Mouseflowはインストールをなるべくシンプルな形にとどめています。多くの場合MouseflowのインストールをあなたのWebサイトにインストールする作業は１分も経たずに終わるでしょう。

ベーシックインストール

アカウントを作成した後にトラッキングコード(Javascript)のスニペットを受け取るでしょう。もし、あなたが既にアカウントを持っているのならダッシュボードのWebsitesのEditからコードを確認することができます。

<script type="text/javascript"> 
var _mfq = _mfq || []; 
(function() { 
var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true; 
mf.src = "//cdn.mouseflow.com/projects/123.js"; 
document.getElementsByTagName("head")[0].appendChild(mf); 
})(); 
</script>

Mouseflowをインストールするために、追跡を開始したいページ内bodyの閉じタグの前にスニペットを貼り付けて下さい。

Mouseflowは非同期で読み込まれます。そのため、あなたのサイトのレンダリングを遅延させたり妨害することはありません。多くのクライアントはMouseflowをfooterのテンプレートやGoogle Tag Managerを使ってサイト全体にインストールしています。

インストールが完了したら、コードがインストールされたページを閲覧し、マウスを動かし/クリックしてください。その後にダッシュボードを開き、あなたの最初のレコーディングを確認してください。※最初のレコーディングが反映されるまでに数分かかることがあります。

機密性の高いデータを収集する場合に、特定の入力フィールドからキーストロークを使用不可にしたい場合があるかもしれません。詳細は以下の記事を参照してください。

同様に全ての入力フィールドでキーストロークを使用不可にしたい場合もあるでしょう。詳細は以下の記事を参照して下さい。

レコーディングやヒートマップを除外もしくは置換したい場合は、除外コメントタグを使用できます。詳細は以下の記事を参照して下さい。

もし、あなた自身がアクセスした場合にキャプチャーされることを防ぎたい場合には、あなたのIPアドレスを除外することもできます。詳細は以下の記事を参照して下さい。

また、クッキーで記録されることをオプトアウトすることができます。詳細は以下の記事を参照してください。

アドバンスドインストール

いくつかの場合に、あなたはMouseflowのインストールをカスタマイズしたい場合があるでしょう。私達はニーズに応じた幾つかのオプションを用意しています。

A/Bテスト

サイトでA / Bテストを実行する場合は、テストバリエーションごとに個別のヒートマップコレクションを作成すると便利です。
データが流入する各バリエーションごとにカスタムヒートマップ（バケット）を指定することができます。これは単純な変数で行われます。

<script type="text/javascript"> 
var mouseflowPath = '/product-a';
var _mfq = _mfq || []; 
(function() { 
var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true; 
mf.src = "//cdn.mouseflow.com/projects/123.js"; 
document.getElementsByTagName("head")[0].appendChild(mf); 
})(); 
</script>

このスニペットが実行されるたびに、すべてのデータが “/ product-a”のヒートマップコレクションに送信されます。

このコードはA / Bテストツール自体の中に追加され、バリエーションのコードに直接追加されます。

ほとんどのA / Bテストツールは、ページバリエーションに動的に挿入することができる独自の変数を提供します。

<script type="text/javascript"> 
var mouseflowPath = '/product-' + variationId;
var _mfq = _mfq || []; 
(function() { 
var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true; 
mf.src = "//cdn.mouseflow.com/projects/123.js"; 
document.getElementsByTagName("head")[0].appendChild(mf); 
})(); 
</script>

これは、バリエーションに関連付けられた一意のIDを含むバリエーションIDと呼ばれる変数がA / Bテストツールによって提供されていることを前提としています。最終結果は “var mouseflowPath = ‘/ product-a’;”もしくは類似したコードになります。

※：mouseflowPathの前には必ずスラッシュを含めてください。

正：

<script type="text/javascript"> 
var mouseflowPath = '/correct';
</script>

誤：

<script type="text/javascript"> 
var mouseflowPath = 'notcorrect';
</script>

詳細は以下の記事を参照して下さい。

複数のページを1つのヒートマップに結合する

似たようなレイアウトのページが多数ある場合は、訪問ユーザーのデータを1つのヒートマップに結合し、集計すると便利です。

例えばほとんどのecサイトのカテゴリや商品ページの様に同じ構造を持つページの場合に活用できます。

結合する必要のあるページにはデータが流入するヒートマップを単純な変数で指定します。

<script type="text/javascript"> 
var mouseflowPath = '/product';
var _mfq = _mfq || []; 
(function() { 
var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true; 
mf.src = "//cdn.mouseflow.com/projects/123.js"; 
document.getElementsByTagName("head")[0].appendChild(mf); 
})(); 
</script>

このスニペットが実行されるたびに、すべてのデータが “/ product”のヒートマップコレクションに送信されます。

※：mouseflowPathの前には必ずスラッシュを含めてください。

詳細は以下の記事を参照して下さい。

Mouseflowを使用すると、追加のデータを記録されたセッションに関連付けることができます。

これは、例えばecサイトでメールアドレス、マーケティングセグメント、注文ID等でセッションを検索したい場合に役立ちます。

メインのトラッキングコードに行を追加して、キー/値のペアをセッションに関連付けるだけでこの機能を使用することができます。

<script type="text/javascript"> 
var _mfq = _mfq || []; 
(function() { 
var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true; 
mf.src = "//cdn.mouseflow.com/projects/123.js"; 
document.getElementsByTagName("head")[0].appendChild(mf); 
})(); 
_mfq.push(["setVariable", "KEY", "VALUE"]);
</script>

この例では、「KEY」キーと「VALUE」キーのセッションでタグ付けします。実際には、キーは「order_id」であり、値は「12345」である可能性があります。

この機能は、上記で説明したように、さまざまな用途に拡張できます。

詳細は以下の記事を参照して下さい。

シングルページアプリケーション

Mouseflowが読み込まれると、ページにあるすべてのコンテンツが検出されます。

単一ページのアプリケーションの場合、同一のURLで異なるコンテンツが表示される可能性があります。

その場合は、関数を呼び出すことで新しい「仮想」ページがレンダリングされたことをMouseflowに通知することが重要です。

<script type="text/javascript"> 
mouseflow.newPageView();
</script>

ほとんどのクライアントは、この機能を”before filter”またはアプリケーションのルーティングシステムの一部として追加します。これにより、ページのコンテンツが変更されるたびに呼び出されます。

Mouseflow（マウスフロー）の料金・価格はコチラ

インストールガイド

ベーシックインストール

アドバンスドインストール

A/Bテスト

複数のページを1つのヒートマップに結合する

シングルページアプリケーション

この記事を読んだ人は、こんな記事も読んでいます。