[web制作]ディレクトリ振り分けタイプのPC/携帯サイトのアナリティクスとか .htaccessとか
この記事は約8分ぐらいで読めます
仕事で思いっきり詰まったのが解決したので備忘録として。
「…今更ガラケー?」ってツッコミはナシでお願いしますw ホント備忘録なのでw もしかしたら困ってる人もいるかもだし…☆ちなみにwebcre8はガラケー好きですw
必要としていた携帯対応サイトの仕様
- 携帯でアクセスすると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("&", "&", $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(インクルード)を使う方法 | ただのメモ帳
終わりに
まあそんな感じで知識不足でわりと引っかかったなーって話でした。足りない情報は[.htaccess]サイト作成時のリダイレクト系の.htaccessとあわせて読めば大体何とかなると思いますが、あとは携帯のキャリア判定に関しては以下の記事が参考になります。