携帯電話向けGoogle Analyticsを導入

携帯電話とったどー



昨年の後半発表された、Google Analyticsの日本の携帯電話対応。絵文字のユニコード化といい、なぜかGoogleは日本のガラパゴス技術にも積極的な取り組みを見せてくれています。

今回、それを使って携帯電話のアクセスがなんとなく取れました。なんとなく取れたのでメモ。

でもスクリーンショットを見ると分かるとおり、Softbankっぽいキャリアが見あたりません。単純にいないだけなのか、取得できていないのか謎なので、もうちょっと調べる必要がありそうです。

=> 解決編追記@携帯向けGoogle Analyticsの計測異常(au, softbank)


携帯電話向けのGoogle Analyticsトラッキング

通常のGoogle Analyticsはga.jsを挿入することで、ユーザーがブラウザを開いたときにJavascriptが起動して、Googleにアクセス情報を送信します。

しかし、日本の携帯電話のほとんどは依然としてブラウジング時にJavascriptが使えないため、同じようなアクセス解析はできません。そこで携帯電話向けのGoogle Analyticsは以下のような、一見して回りくどいプロセスでトラッキングを行います。

(1)アクセス情報を飛ばすPHPファイル(ga.php)を設置
Google Analyticsからga.phpをダウンロードしてきて、公開ディレクトリのルートに配置します。これが、Googleにアクセス情報を飛ばす処理の本体です。
(2)ユーザーアクセス時に、(1)のPHPを起動するための下準備
HTMLファイルの先頭にトラッキングURLを生成する関数を記述。bodyタグの終了直前に、src属性が前述の関数が出すURLになっているimgタグを記述。
(3)ユーザーからのアクセスによってga.phpが起動
ユーザーがページにアクセスすると、ページ下端に仕込まれたimgタグが読み込まれます。imgタグのsrc属性がga.phpにアクセスするようなURLになっているため、ブラウザは画像を求めてga.phpにアクセスします。アクセス情報はsrcにあるURLのGETクエリーとして乗っています。
(4)ユーザーにダミー画像を Googleにはアクセス情報を
アクセスされたga.phpは、ユーザーには1x1ピクセルのダミー画像を返し、GoogleにはGETクエリーに乗ってきたアクセス情報を送ります

普通にphpなどのプログラムを貼る必要があるため、慣れない人やHTMLオンリーな人は戸惑いを感じるかもしれません。とはいえやってること自体はコピペ天国です。

ナマのHTML+PHPなら大体こんな感じ

<?php
  // Copyright 2009 Google Inc. All Rights Reserved.
  $GA_ACCOUNT = "MO-0000000-0";
  $GA_PIXEL = "/ga.php";

  function googleAnalyticsGetImageUrl() {
    global $GA_ACCOUNT, $GA_PIXEL;
    $url = "";
    $url .= $GA_PIXEL . "?";
    $url .= "utmac=" . $GA_ACCOUNT;
    $url .= "&utmn=" . rand(0, 0x7fffffff);
    $referer = $_SERVER["HTTP_REFERER"];
    $query = $_SERVER["QUERY_STRING"];
    $path = $_SERVER["REQUEST_URI"];
    if (empty($referer)) {
      $referer = "-";
    }
    $url .= "&utmr=" . urlencode($referer);
    if (!empty($path)) {
      $url .= "&utmp=" . urlencode($path);
    }
    $url .= "&guid=ON";
    return str_replace("&", "&", $url);
  }
?>
<html>
<head>
<title>タイトるんるん♪</title>
</head>
<body>
<h1>まことにもうしわけありません</h1>
<p>ろれむいぷさむらりるれろ ろれむいぷさむらりるれろ ろれむいぷさむらりるれろ ろれむいぷさむらりるれろ ろれむいぷさむらりるれろ</p>
<?php
  $googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
?>
<img src="<?= $googleAnalyticsImageUrl ?>" />
</body>
</html>

拡張子htmlのまま動かしたい場合は、.htaccessに下の記述を加えればいいです。

AddType application/x-httpd-php .html

携帯向けサイトを作る機会がある方はぜひ。カスタムレポートとかちゃんと設定すれば、Google AnalyticsひとつでコンテンツへのPC版等と比較しながら検討できて便利です。サービスが分散しないのはいいこと。

a-blog cmsはテンプレート上でphpが使えないので、GETモジュールにしてあげる必要があります。次回、そのGETモジュールをまるまる公開予定です。