9.スマートフォンサイト解析の準備

SiTestを利用したいウェブサイトのスマートフォン対応の
方法によって、実施の手順が異なります。

①レスポンシブデザインによってスマホ対応している場合
②スマホ専用ページを用意して別URLにリダイレクト(転送)される場合
③URLは同じだけどスマホ専用コンテンツのページが表示される場合

自分のサイトが①~③のどの方式かわからない場合はお問い合わせください。

①レスポンシブデザインによってスマホ対応している場合

特に対応する必要はありません。
各ヒートマップ機能のデバイス切り替えボタンで選択したデバイスに応じたレイアウトでヒートマップ背景が表示されます。

②スマホ専用ページを用意して別URLにリダイレクト(転送)される場合

動的ページ用コードをご利用ください。

パソコン用ページとスマホ用ページが別URLとして計測されます。
各ヒートマップ機能でスマホ用ページのURLを選択して該当のデバイス切り替えボタンでスマホを選択してください。

③URLは同じだけどスマホ専用コンテンツのページが表示される場合

トラッキングコードをカスタマイズする必要があります。

名前をつけるページ用コードを利用します。Javascript内でデバイスを判別して、URLとデバイス種類を組み合わせる事によって、URL+デバイス種別でSiTest内の1ページとして分けて計測させることができます。

カスタマイズのサンプルコード

<script type="text/javascript">
(function(){
  window.sitest_sent_html = document.getElementsByTagName('html')[0].outerHTML;
  var pid = "プロジェクトIDを入力してください";
  var dev;
  if (navigator.userAgent){
    dev = navigator.userAgent.match(/(android.*mobile|iphone|ipod|mobile\ssafari|iemobile|opera\smini|windows\sphone)/i)? "sp": "pc";
  }else{
    dev = "";
  }
  var name = "(" + dev + ")" + decodeURIComponent(location.pathname);
  var script_elm = document.createElement("script");
  script_elm.src = "//sitest.jp/tracking/sitest_js?p=" + pid + "&dynamic=true&urlname=" + encodeURIComponent(name);
  script_elm.async = true;
  document.body.appendChild(script_elm);
 })();
</script>