レスポンシブデザインを追跡する

要素は画面サイズに応じて再構成されるため、ヒートマップを見ると、訪問者が異なるレイアウトとやり取りしていた場合、空いた場所でクリックが表示されることがあります。この問題を回避するために、訪問者の画面解像度に基づいてヒートマップを分割するテクニックがあります。

mouseflowPath変数とjQueryを使用して、異なる画面サイズのWebページの仮想パスを変更します。

次の仮想パスを使用します。

www.website.com/smartphone

www.website.com/tablet

www.website.com（デスクトップ用）

コードは次のようになります。

var mouseflowPath = document.location.pathname; 
if ($(window).width() <= 480) mouseflowPath += \"/smartphone\"; 
else if ($(window).width() <= 840) mouseflowPath += \"/tablet\";

ブラウザウィンドウの幅が480ピクセル未満のすべての訪問は ‘/ smartphone’の下に保存され、480ピクセルから840ピクセルの間ブラウザウィンドウの幅は ‘/タブレット’として保存されます。その他のブラウザウィンドウではは元のURLの下に保存されます。あなたは、この他にも好きなだけ多くの画面サイズを変更して追加することができます。

例：

<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/your-website-id.js\";
document.getElementsByTagName(\"head\")[0].appendChild(mf);
})();
var mouseflowPath = document.location.pathname; 
if ($(window).width() <= 480) mouseflowPath += \"/smartphone\"; 
else if ($(window).width() <= 840) mouseflowPath += \"/tablet\";
</script>