インストールガイド – エクスチュア株式会社

MouseflowでWebサイトを計測するには、提供されるJavaScriptの計測スクリプトを計測対象の各Webページに埋め込みます。

基本のインストール

Mouseflowの計測スクリプトを取得するには、

Mouseflowにログインする
左側のナビゲーション・メニューのSETTINGSをクリックする
Settings画面の右側にあるTRACKING CODEをクリック

計測スクリプトが表示されます。

window._mfq = window._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>

上記の計測スクリプトを、ページの<BODY>タグの中(一般的には</BODY>タグの直前)に記述します。

※ Mouseflowの計測スクリプトは非同期でロードされるため、Mouseflowスクリプトのロードによってページの表示が遅くなるということは通常ありません。

計測スクリプトを実装したら、実際にブラウザでそのページにアクセスし、マウスのクリックやスクロールを試してみます。そして、Mouseflowのダッシュボードにそのデータが表示されることを確認します。

※ そのサイトで初めてMouseflowで計測する場合には、ダッシュボードにデータが表示されるまでに数分間要することがあります。 2回目以降は通常数秒〜数十秒でダッシュボードに反映されます。

カスタム変数

Mouseflowではカスタム変数を使って、セッションに任意の値を関連付けることが出来ます。関連付けられたカスタム変数は、レコーディングやヒートマップでフィルタ−に利用することが出来ます。

カスタム変数の実装は非常にシンプルです。 Mouseflowの計測スクリプトに以下の例の赤字部分のように、カスタム変数と設定値をKey-Valueペア形式で追加します。

<script type="text/javascript"> 
    window._mfq = window._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); 
    })(); 
    window._mfq.push(["setVariable", "KEY", "VALUE"]);
</script>

window._mfq.push(["setVariable", "KEY", "VALUE"]);

ここで、”KEY”にはカスタム変数名を、”VALUE”にはカスタム変数に設定する値をセットします。

例：

window._mfq.push(["setVariable", "Logged_in", "TRUE"]);

カスタム変数を実装したら、ブラウザで対象のページにアクセスし、Mouseflowダッシュボードのそのセッションにカスタム変数が付加されていることを確認します。

関連記事