日々のweb業務記録-prostaff-: 100518

1. 【Google Analyticsモバイル解析タグの設置方法】

現在(2010/5/18)Google Analyticsの管理画面に

モバイル用のトラッキングコードが表示されないようです

モバイル用のトラッキングコードを設置したい人はこちらを参考にして下さい

①解析したいファイル(php)の一番上に下記コードを追記

<?php

$GA_ACCOUNT = "MO-*******-**";

$GA_PIXEL = "/ga.php";

function googleAnalyticsGetImageUrl() {

global $GA_ACCOUNT, $GA_PIXEL;

$url = "http://mobile.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);

}

※青色部分はサイトによって適宜変更します

$GA_ACCOUNTの****には プロファイルIDを入れます

$GA_PIXELには ga.phpのパスを入れます

http://mobile.example.com/は サイトのURLを入れます

②</body>タグ直前に下記コードを追記

</body>の直前に以下のコードを追加します

<?php

$googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();

<img src="<?= $googleAnalyticsImageUrl ?>" />

③ga.phpをサーバにアップロードする
http://j.mp/9acAStからダウンロードできます

これでモバイルサイトのアクセス解析ができるはずです

ただしこの方法はモバイルサイトがphpで構成されている場合ですので

htmlや他のファイルの場合は使うことができません

参考資料：Googleが公開している手順

ウェブサイトに Google Analytics を導入するための手順です。

For more information, see http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html

下記のコードをコピーして、解析するすべてのページの </body> タグの直前に貼り付けてください。

注: モバイル用コードとデスクトップ用コードを同じページで使用しないでください。

下記のコードをコピーして、解析するすべてのページの最初の <html> タグの直前に貼り付けてください。

<?php

$GA_ACCOUNT = "MO-******-*";

$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);

}

下記のコードをコピーして、解析するすべてのページの </body> タグの直前に貼り付けてください。

<?php

$googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();

echo '<img src="' . $googleAnalyticsImageUrl . '" />';?>

ファイルをルートディレクトリにコピーします

https://ssl.gstatic.com/analytics/20100420/mobile/ga.php をダウンロードしてウェブサーバーのルートディレクトリ（"/"）に保存してください。ルートディレクトリでのサーバーサイドコードの実行が許可されていることを確認してください。

ご協力に感謝いたします。

2. 【Google AnalyticsのサイトがHTML５に変更された】
Google Analytics(http://www.google.com/analytics/)

Google Analyticsブログ(http://analytics.blogspot.com/)

徐々にHTML5に移行しているサイトが増えてるみたいですね

Google chromeを利用している方は extensionsでHTML5のサイトかどうかがすぐにわかります

HTML5のサイトは⑤マークが表示されます

この機能が使いたい人は chromeに http://bit.ly/bUJqCr をインストールしてください

3. 【Google Mapsで簡単にマーカーやポリライン・ポリゴンを表示する方法】

Google Mapsは直接マーカーの表示用コードを書く以外に

kmlファイルを読み込んで表示することもできます

サンプルコード

google.load("maps", "2");

function initialize() {

　　var init_pos = new google.maps.LatLng(38.5,138.5);

　　var init_zoom = 6;

　　var map = new google.maps.Map2(document.getElementById("map_canvas"));

map.setCenter(init_pos, init_zoom);

　　//KMLファイルの読み込み

　　var geoXml = new google.maps.GeoXml("http://code.prostaff1.com/gmaps/japan.kml");

　　map.addOverlay(geoXml);

}

google.setOnLoadCallback(initialize);

</script>

こっちの書き方の方が多いかな

function initialize() {

　if (GBrowserIsCompatible()) {

　　var map = new GMap2(document.getElementById("map_canvas"));

　　map.setCenter(new GLatLng(34.963076,136.99632), 10);

　　//KMLファイルの読み込み

　　var geoXml = new google.maps.GeoXml("http://code.prostaff1.com/gmaps/japan.kml");

　　map.addOverlay(geoXml);

　}

GEvent.addDomListener(window, "load", initialize);

GEvent.addDomListener(window, "unload", GUnload);

</script>

青い部分がKMLファイルを読み込むコードです

このようにマーカーやポリゴンの設定を外部ファイル化すると

使い回しがしやすくなるのでお勧めです

4. 【Google EarthでKMLファイルを簡単に作る方法】
http://earth.google.com/からGoogle Earthをダウンロードできます

これがGoogle Earthで日本を表示したところ

目印(マーカー)の設置の手順

画面上のピンのアイコンをクリック

目印の設定画面が開きます

説明スタイル・色表示標高など変更設定できます

目印のピンはドラッグして好きなところに移動できます

設定画面の「OK」をクリックすると

マップ上に目印が表示されます

画面の左側の「場所」に

先ほど作成した目印が登録されます

タイトル「日本の真ん中」

説明「日本の真ん中」
としましたが

このタイトルと説明文は

Google Maps APIで読み込んだときも

実際に表示されます

同じ要領でポリラインやポリゴンの作成もできます

ポリゴンの作成手順

画面上のピンの右側のアイコンをクリック

目印(マーカー)のときと同じように

設定画面が開きます

ラインやエリアの線の色や不透明度の変更も可能です

こんな感じに左クリックするたびに

線と表示エリアが塗りつぶされていきます

ドラッグしながらポイントを設定したり

あとからポイントを移動する事も可能です

右クリックすると一番新しいポイントが消えます

ポリゴン作成中の画面の移動は

右側の矢印をクリックして移動します

拡大・縮小はマウスホイールで可能です

こんな感じでぐるっと囲んだら

設定画面のOKをクリックしてください

「場所」に保存されます

ツールバーの「追加」からフォルダの作成ができるので

作ったマーカーやポリゴンをまとめておくこともできます

KMLで書き出す手順

「場所」にあるマーカーやポリゴンを右クリックし

「名前を付けて場所を保存…」をクリックします

保存画面が開くので

適宜名前を変更してください

「ファイルの種類」はkmlとkmzがありますが

kmlを選択し「保存」をクリックします

保存した場所にkmlファイルが作成されます

このファイルをサーバにアップロードし

Google Maps APIで読み込めばマップに表示されます

サンプルサイト：http://code.prostaff1.com/gmaps/japan.html

複数の場所を読み込みたい場合

左の画像のようにフォルダを用意し

その中にマーカーやポリゴンを移動します

kmlファイルの書き出しはフォルダを右クリックし

「名前を付けて場所を保存…」をクリックして下さい

フォルダに含まれる場所の情報が

まとめてkmlファイルで生成されます

このkmlファイルをGoogle Maps APIで読み込めば複数のマーカーやポリゴンを表示することができます

サンプルサイト：http://code.prostaff1.com/gmaps/testfolder.html

ページ

100518

0 件のコメント: