レスポンシブデザインを計測する

Mouseflowでレスポンシブデザインのサイトを計測する場合、レコーディングは問題ありませんがヒートマップは実装が必要な場合があります。

レスポンシブデザインでは、画面サイズによってページのパーツ位置が変わります。 そのため、ヒートマップを表示した時に訪問者が見ている画面レイアウトと異なると何もない場所にクリック情報が表示されることがあります。 これに対応するためには、画面サイズによってヒートマップを分ける方法があります。

画面サイズ毎に仮想パスを設定する

mouseflowPath変数とjQueryを使って、それぞれの画面サイズに対して以下の仮想パスを設定します。

  www.website.com/smartphone

  www.website.com/tablet

  www.website.com (for desktop)

jQueryを使うと、以下の様なコードになります。

  var mouseflowPath = document.location.pathname; 

  if ($(window).width() <= 480) mouseflowPath += "/smartphone"; 

  else if ($(window).width() <= 840) mouseflowPath += "/tablet";

このコードによって、ブラウザの画面幅が480px以下の訪問は '/smartphone' に、480px〜840pxの場合には '/tablet' に、それ以外は元々の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>

 

他にご質問がございましたら、リクエストを送信してください

0 コメント

記事コメントは受け付けていません。
Powered by Zendesk