ブログBLOG

ひとつのHTMLファイルで複数ページにしている場合に表示ページごとのアクセスを確認する方法

更新日：2012/10/12

スマートフォンサイトを構築する際、複数のページをひとつのHTMLファイルにしている場合があります。jQuery mobile を使うときのアレです。

↓ こんなかんじのヤツですね


&lt;body&gt;
    &lt;div  data-role="page" id="page1""&gt;
        &lt;h1&gt;title1&lt;/h1&gt;
        &lt;p&gt;page1&lt;/p&gt;
    &lt;/div&gt;
    &lt;div  data-role="page" id="page2"&gt;
        &lt;h1&gt;title2&lt;/h1&gt;
        &lt;p&gt;page2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div  data-role="page" id="page3"&gt;
        &lt;h1&gt;title3&lt;/h1&gt;
        &lt;p&gt;page3&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;

<body>

<h1>title1</h1>

</div>

<h1>title2</h1>

</div>

<h1>title3</h1>

</div>

</body>

べつに jQuery mobile を使わなくても有効なやり方に見えますので、こういったサイト構築をしている人も多いと思います。

ただしこのやり方で構築すると、たとえば Google Analytics を使ってアクセス解析をしたい場合に表示ページごとの計測ができません。
そこで [ _trackPageview ] というのを使って表示ページごとの確認ができるようにします。これは本来、PDFファイル等のダウンロード数や動画ファイルの再生回数等をトラッキングするためのものです。

各ページへのリンクがこうなります


&lt;a href="#page1" onclick="_gaq.push(['_trackPageview', '/page1']);"&gt;

配列の２つめ（ここでは ‘/page1’）に指定した文字列が URL として扱われます。

Google Analytics の「コンテンツ > サイトコンテンツ > すべてのページ」から確認すると

上記で設定した文字列がページとして表示されます。

リアルタイム機能を使えばコードが正しく動作しているかをすぐに確認することができます。

注意点として、当然ながら該当のページに Google Analytics のトラッキングコードが貼り付けられている必要があります。また、厳密に考えると「ページが表示された回数」ではなく「ページへのリンクがクリックされた回数」になるため、サイト全体の表示回数とページごとの表示回数の合計が一致しない場合もあるかもしれません。

本来１ページごとに確認できるレポートと同様というわけにはいきませんが、おおよそのページ表示回数までは確認できるという方法です。

藤崎

サイト制作