WEBCRE8.jp > 調べる > [web制作]ディレクトリ振り分けタイプのPC/携帯サイトのアナリティクスとか .htaccessとか

[web制作]ディレクトリ振り分けタイプのPC/携帯サイトのアナリティクスとか .htaccessとか

この記事は約8分ぐらいで読めます

2011年11月17日
調べる
.htaccess Web制作アクセス解析トラブルシューティング備忘録携帯サイト新規サイト

備忘録です。小規模なサイトでのPC/携帯サイトの振り分けをしたりアクセス解析の設置をしたり、.htaccess周りそのやり方丸ごとです。

仕事で思いっきり詰まったのが解決したので備忘録として。

「…今更ガラケー？」ってツッコミはナシでお願いしますｗホント備忘録なのでｗもしかしたら困ってる人もいるかもだし…☆ちなみにwebcre8はガラケー好きですｗ

必要としていた携帯対応サイトの仕様

携帯でアクセスするとmディレクトリに飛ぶ
Google Analyticsのアクセス解析をPC、携帯両方に設置

その他実際に実装したのは[.htaccess]サイト作成時のリダイレクト系の.htaccessで指定していたのと大体一緒ですね。

ディレクトリ構成


ルート-	[img]
	[css]
	[js]
	[m] 	-	index.html
			other.html
	index.html
	other.html
	sitemap.xml
	sitemap_m.xml
	ga.php
	.htaccess

こんな感じになってます。一応目的を達するための最低限の構成を書いてます。

アクセス解析にGoogle Analyticsを設置

PCサイトには普通どおりAnalyticsのトラッキングコードを置きますよね。

しかし携帯サイトでは普通のJavaScriptではダメなのでPHP(その他)でやります。

Googleのドキュメントを読んだところ、PCサイトと携帯サイトの手順にはこんな感じの違いがあります。

PCの場合

新しいプロファイルの追加
URLを指定後完了を押す

表示されているアナリティクスのコードを解析する全てのページのheadの終了タグの直前に設置


<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-********-**']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

これだけでOKです。

携帯の場合

新しいプロファイルの追加
URLを指定後完了を押す
「何をトラッキングしますか？」で「携帯電話向けのサイト」を選択

表示されているアナリティクスのコードを解析する全てのページのhtmlの開始タグの直前に設置


<?php
// Copyright 2009 Google Inc. All Rights Reserved.
$GA_ACCOUNT = "MO-********-**";
$GA_PIXEL = "/ga.php";
function googleAnalyticsGetImageUrl() {
global $GA_ACCOUNT, $GA_PIXEL;
$url = "http://example.com/";
$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("&", "&amp;", $url);
}
?>

以下を解析する全てのページのbodyの終了タグの直前に設置


<?php
$googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
echo '<img src="' . $googleAnalyticsImageUrl . '" />';?>

ga.phpをダウンロードしてルートディレクトリに設置

コードを見ても絶対パス(/から始まるルートからの位置)で書いてあるので間違いないですね。

サーバの問題

PHP

(今回の場合)PHPを使うのでもちろんPHPが使えるとこじゃないとダメです。

ロリポップサーバの場合

webcre8が試したサーバのなかではロリポのみで、5のPHPコードだと正常に表示されませんでした。以下の表記で他のサーバと同じ挙動をします。


<?php
$googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
print ('<img src="$googleAnalyticsImageUrl" width="1" height="1" />');
?>

多分echoでもいいんでしょうけど、色んな書き方を試してみてもどうも同じようにならなかったのでやむを得ずprintを使ってます。

あとこれに関して言及したサイトが見当たらなかったのでなんか勘違いしてるのかも知れないです。「それちげーよ」って人いたら教えて下さい…。

コード内にPHPの書かれているHTMLをPHPとして読ませる

.htaccessを使って拡張子が.htmlの文書も.phpとして認識させます。まあ大抵並以上のサーバなら.htaccessもPHPも使えるはずだと思いますが、ここでもロリポップが混乱させてくれます。

ちなみにこのへんのことはカグア！さんの以下の記事に詳細に書かれております。普通のサーバならこの通りにやってればまず大丈夫です。

携帯版Google Analytics設置でよくあるつまづき5つ | カグア！

通常のサーバの.htaccessの記述


AddType application/x-httpd-php .htm .html

ロリポップサーバの.htaccessの記述


AddHandler php5.2-script html

のように、書き方がちょっと変わってきます。いつも通りの書き方で動かないので困惑してしまいました。困っているところを@Snufkinskiさんに助けて頂きました。この時点ではロリポの問題だと気づいてなかったのでそういう検索をしてなかったんですねー。こっちに関してはwebでもいくつか記述を見かけます。以下のサイトを参考にしました。

ロリポップのレンタルサーバーで、htmlのままphpを使い、さらにinclude（インクルード）を使う方法 | ただのメモ帳