Nakatta blog » ktai style

Google Analyticsでモバイル解析

tada — Wed, 04 Feb 2009 03:58:01 +0000

アクセス解析は色々ありますが、高機能で人気なのがGoogle Analytics。Googleっていうネームバリューもしかり、使いやすくて自分も気に入ってます。でもJavaScriptを埋め込んで情報を送る仕組みなため、携帯とかモバイル関連の解析ができないのが難点。

そこでエクスブリッジからSELENE.GA4KというGoogle Analyticsを携帯サイトで利用するためのライブラリが登場しました。

で、Wordpressのktai styleプラグイン利用環境に導入する手順の覚書です。

SELENE.GA4Kの設置

まずこちらからSELENE.GA4Kをダウンロードして解凍。

Configフォルダ内のanalytics_config.phpファイルを修正。
21,22行目先頭のコメントアウトを消して有効にし、自分の環境に書き換える。

define('ANALYTICS_ID',      'XX-XXXXXXX-X');
define('WEBSITE_DOMAIN',    'http://muda.info');

Google Analyticsフォルダごとktai styleのテーマファイルのある場所にアップロード。
次にktai styleのテーマファイルheader.phpファイルを編集。
headタグの中あたりに以下のコードを追加。

ちなみにフォルダ構成はこんな感じです。
wp-content/ktai-themes/GoogleAnalitics/Service/
wp-content/ktai-themes/GoogleAnalitics/Config/
wp-content/ktai-themes/muda.info/header.php

パスはheader.phpファイルからの相対パスで。
dirname(__FILE__)は後ろに/付かないので入れ忘れないように注意。

一応これだけで解析そのものはできるようになります。

記事タイトルの解析

このままだと記事のタイトルが記録されず、すべてハイフンになるので使いづらいです。
なので記事タイトルもGoogle Analyticsに送信するようにします。

analytics.phpファイルの53行目に以下を追加

$ptitle  = urlencode(ks_title()); //page title

その下の$urchinUrlにセットする処理でutmdtに$ptitleを記述。
つまり以下↓

$urchinUrl = 'http://www.google-analytics.com/__utm.gif?utmwv=1&utmn='.$utmn.'&utmsr=-&utmsc=-&utmul=-&utmje=0&utmfl=-&utmdt='.$ptitle.'&utmhn='.$utmhn.'&utmr='.$referer.'&utmp='.$utmp.'&utmac='.$utmac.'&utmcc=__utma%3D'.$cookie.'.'.$random.'.'.$today.'.'.$today.'.'.$today.'.2%3B%2B__utmb%3D'.$cookie.'%3B%2B__utmc%3D'.$cookie.'%3B%2B__utmz%3D'.$cookie.'.'.$today.'.2.2.utmccn%3D(direct)%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D'.$cookie.'.'.$uservar.'%3B';

別にいちいち変数かまさなくてもいいと思いますが、わかりづらいので一応。

検索エンジンクローラー対策

ktai styleはそもそもモバイル端末しか来ない(PCからのアクセスではSELENE.GA4Kは実行されない)のでPC用クローラーは心配ありません。さらにSELENE.GA4KはPC用のクローラー防御対策を備えています。なのでもし仮に通っても記録されません。

でも携帯に模した検索クローラーはすごい数やってくる。。。
なので対策。

クローラー対策についてはke-tai.orgさんの記事を参考にしました。

isCrawler関数をanalytics.phpに追加。

/**
 * クローラ判定
 * @return	bool	true:クローラ、false:非クローラ
 */
function isCrawler()
{
	$crawler_arr = array(
		'Googlebot-Mobile',
		'moba-crawler',
		'mobile goo',
		'LD_mobile_bot',
		'froute.jp',
		'Y!J-SRD',
		'Y!J-MRD'
	);

	foreach ($crawler_arr as $val) {
		if (false !== strpos($_SERVER['HTTP_USER_AGENT'], $val)) {
			return true;
		}
	}

	return false;
}

isMobile関数内のユーザーエージェント判定処理をisCrawlerの判定文で囲む。
つまり、クローラーだったら情報をGoogle Analyticsに送信しない。

if(!isCrawler()){
	if(eregi(USER_AGENT_PATTERN_DOCOMO, $user_agent)){
		//echo("ドコモ");
		$mobile_flg = true;
	}else if(eregi(USER_AGENT_PATTERN_SOFTBANK, $user_agent)){
		//echo("SoftBank");
		$mobile_flg = true;
	}else if(isset($_SERVER["HTTP_X_JPHONE_MSNAME"])){
		//echo("旧 J-Phone");
		$mobile_flg = true;
	}else if(eregi(USER_AGENT_PATTERN_AU, $user_agent)){
		//echo("au");
		$mobile_flg = true;
	}else if(eregi(USER_AGENT_PATTERN_WILLCOM, $user_agent)){
		//echo("WILLCOM");
		$mobile_flg = true;
	}else{
		//echo("PC");
		$mobile_flg = false;
	}
}

こんな感じです。正直これやらないとクローラーきまくりで使い物にならないかと。
有用なクローラー判定処理を作成していただいたke-tai.orgさんに感謝です。

一応手順は以上ですがこの方法、サーバー内でJavaScrit送信処理を生成して送る方式なのでGoogle Analyticsの規約としては正直微妙だと思います。

なので試す方は自己責任でお願いします。

【追記】
Ver1.1.1でクローラー対策などが改善された模様です。

Google Analyticsでモバイル解析

tada — Tue, 03 Feb 2009 15:58:57 +0000

そこでエクスブリッジからSELENE.GA4KというGoogle Analyticsを携帯サイトで利用するためのライブラリが登場しました。

で、Wordpressのktai styleプラグイン利用環境に導入する手順の覚書です。

SELENE.GA4Kの設置

まずこちらからSELENE.GA4Kをダウンロードして解凍。

Configフォルダ内のanalytics_config.phpファイルを修正。
21,22行目先頭のコメントアウトを消して有効にし、自分の環境に書き換える。

define('ANALYTICS_ID',      'XX-XXXXXXX-X');
define('WEBSITE_DOMAIN',    'http://muda.info');

require_once (dirname(__FILE__) . '/../GoogleAnalytics/Config/analytics_config.php');
require_once (dirname(__FILE__) . '/../GoogleAnalytics/Service/analytics.php');
sendGoogleAnalytics(ANALYTICS_ID, WEBSITE_DOMAIN);
?>

ちなみにフォルダ構成はこんな感じです。
wp-content/ktai-themes/GoogleAnalitics/Service/
wp-content/ktai-themes/GoogleAnalitics/Config/
wp-content/ktai-themes/muda.info/header.php

パスはheader.phpファイルからの相対パスで。
dirname(__FILE__)は後ろに/付かないので入れ忘れないように注意。

一応これだけで解析そのものはできるようになります。

記事タイトルの解析

analytics.phpファイルの53行目に以下を追加

$ptitle  = urlencode(ks_title()); //page title

その下の$urchinUrlにセットする処理でutmdtに$ptitleを記述。
つまり以下↓

$urchinUrl = 'http://www.google-analytics.com/__utm.gif?utmwv=1&utmn='.$utmn.'&utmsr=-&utmsc=-&utmul=-&utmje=0&utmfl=-&utmdt='.$ptitle.'&utmhn='.$utmhn.'&utmr='.$referer.'&utmp='.$utmp.'&utmac='.$utmac.'&utmcc=__utma%3D'.$cookie.'.'.$random.'.'.$today.'.'.$today.'.'.$today.'.2%3B%2B__utmb%3D'.$cookie.'%3B%2B__utmc%3D'.$cookie.'%3B%2B__utmz%3D'.$cookie.'.'.$today.'.2.2.utmccn%3D(direct)%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D'.$cookie.'.'.$uservar.'%3B';

別にいちいち変数かまさなくてもいいと思いますが、わかりづらいので一応。

検索エンジンクローラー対策

でも携帯に模した検索クローラーはすごい数やってくる。。。
なので対策。

クローラー対策についてはke-tai.orgさんの記事を参考にしました。

isCrawler関数をanalytics.phpに追加。

/**
* クローラ判定
* @return	bool	true:クローラ、false:非クローラ
*/
function isCrawler()
{
$crawler_arr = array(
'Googlebot-Mobile',
'moba-crawler',
'mobile goo',
'LD_mobile_bot',
'froute.jp',
'Y!J-SRD',
'Y!J-MRD'
);

foreach ($crawler_arr as $val) {
if (false !== strpos($_SERVER['HTTP_USER_AGENT'], $val)) {
return true;
}
}

return false;
}

isMobile関数内のユーザーエージェント判定処理をisCrawlerの判定文で囲む。
つまり、クローラーだったら情報をGoogle Analyticsに送信しない。

if(!isCrawler()){
if(eregi(USER_AGENT_PATTERN_DOCOMO, $user_agent)){
//echo("ドコモ");
$mobile_flg = true;
}else if(eregi(USER_AGENT_PATTERN_SOFTBANK, $user_agent)){
//echo("SoftBank");
$mobile_flg = true;
}else if(isset($_SERVER["HTTP_X_JPHONE_MSNAME"])){
//echo("旧 J-Phone");
$mobile_flg = true;
}else if(eregi(USER_AGENT_PATTERN_AU, $user_agent)){
//echo("au");
$mobile_flg = true;
}else if(eregi(USER_AGENT_PATTERN_WILLCOM, $user_agent)){
//echo("WILLCOM");
$mobile_flg = true;
}else{
//echo("PC");
$mobile_flg = false;
}
}

一応手順は以上ですがこの方法、サーバー内でJavaScrit送信処理を生成して送る方式なのでGoogle Analyticsの規約としては正直微妙だと思います。

なので試す方は自己責任でお願いします。

【追記】
Ver1.1.1でクローラー対策などが改善された模様です。

【さらに追記】
Google Analyticsで携帯解析がサポートされました。

WP-Cacheプラグイン導入

tada — Thu, 11 Dec 2008 14:48:49 +0000

どーもムダブログの表示が遅いので、なんとかしようと「WP-Cache」プラグインを導入。
Wordpressは表示が遅いとよく言われます。
アクセスがある度にページを動的生成する仕組みのためしょうがないところ。
エントリーが増えてきたらそれはそれでアドバンテージがあるんですが。
MovableTypeとか標準は静的ファイルで表示する半面、再構築が結構手間ですからね。

…と、前置きはこれぐらいにして導入メモ。

そのまま有効にすると「Ktai Style」と競合します。
なので少し作業が必要。

まず「WP-Cache」からダウンロード。

解凍したら中にある「wp-cache-config-sample.php」を「wp-cache-config.php」にリネームしてコピー。

 'bot', 1 => 'ia_archive', 2 => 'slurp', 3 => 'crawl', 4 => 'spider');

if (file_exists(ABSPATH. 'wp-content/plugins/ktai_style/patch-wpcache.php')) {
	include ABSPATH. 'wp-content/plugins/ktai_style/patch-wpcache.php';
}

// Just modify it if you have conflicts with semaphores
$sem_id = 5419;

if ( '/' != substr($cache_path, -1)) {
	$cache_path .= '/';
}

?>

20行目のところに３行追加。

つまり、$cache_rejected_user_agentのところの下に

if (file_exists(ABSPATH. 'wp-content/plugins/ktai_style/patch-wpcache.php')) {
	include ABSPATH. 'wp-content/plugins/ktai_style/patch-wpcache.php';
}

を追加。

で、その「wp-cache-config.php」をwp-contentフォルダ直下においてプラグインを有効にする。

以上です。

一度キャッシュされると多少は体感速度変わる…かな
とりあえず使ってみます

WordpressでPCから携帯対応の絵文字入力

tada — Sat, 15 Nov 2008 15:17:28 +0000

せっかくなので手順をメモしときます。

携帯に絵文字も含めて対応できる「ktai_style」と、PC投稿時に顔アイコンを一覧から選べるようにする「WP Grings」の二つをムリヤリ組み合わせてみます。つまり、WP Gringsで使用するアイコンをktai_style互換にしちゃおうって作戦。

結構いろいろいじってるし、自分のためにやっつけで対応したためチャレンジする人は自己責任でどうぞ。

まず、なにはともあれ２つのプラグインを普通にインストール。

標準だとWP GringsはWordpress標準のスマイルマークが使えるようになってます。これはただアイコンタグの入力を補完しているだけっぽい。てことはまるまるktai_styleのアイコンを表示して、クリックしたとき入力されるタグもktai_styleのものに差し替えることができれば目的達成？

というわけでWP Gringsをいじります。

wp-grins.phpを4か所修正
行番号は未編集のVersion1.5のwp-grins.phpを対象にしています。

まずはktai_styleのタグ用にスペースを排除する処理をコメントアウト。

//$tag = str_replace(' ', '', $tag);

次に画像ファイルのパスをktai_styleのインストール場所に変更。

$grins .= ' ';

※パスはインストールした環境によって変わります。

my-hacks.phpに以下を追加。

 'happy01.gif',
		'' => 'angry.gif',
		'' => 'despair.gif',
		'' => 'sad.gif',
		'' => 'think.gif',
		'' => 'confident.gif',
		'' => 'coldsweats01.gif',
		'' => 'coldsweats02.gif',
		'' => 'pout.gif',
		'' => 'gawk.gif',
		'' => 'lovely.gif',
		'' => 'bleah.gif',
		'' => 'wink.gif',
		'' => 'happy02.gif',
		'' => 'bearing.gif',
		'' => 'catface.gif',
		'' => 'crying.gif',
		'' => 'weep.gif',
		'' => 'delicious.gif',
		'' => 'smile.gif',
		'' => 'shock.gif',
		'' => 'heart02.gif',
		'' => 'wobbly.gif',
		'' => 'up.gif',
		'' => 'note.gif',
		'' => 'shine.gif',
		'' => 'flair.gif',
		'' => 'annoy.gif',
		'' => 'punch.gif',
		'' => 'bomb.gif',
		'' => 'down.gif',
		'' => 'sleepy.gif',
		'' => 'sign02.gif',
		'' => 'sign03.gif',
		'' => 'sweat01.gif',
		'' => 'sweat02.gif',
		'' => 'dash.gif',
		'' => 'sign05.gif',
		'' => 'run.gif',
		'' => 'eye.gif',
		'' => 'ear.gif',
		'' => 'rock.gif',
		'' => 'scissors.gif',
		'' => 'paper.gif',
		'' => 'foot.gif',
		'' => 'good.gif',
		'' => 'clip.gif',
		'' => 'secret.gif',
		'' => 'thunder.gif',
	);
?>

個人的に使いそうなやつだけピックアップしました。
ここで行を増やすなり減らすなりすれば反映されます。
あんま多いと重くなるので注意です。

と、ここまででとりあえず使えるようになるはず。

ただ、wp.vicunaとか使ってるとこのままではコメント投稿欄にIE以外のブラウザだと反映されません。

なのでさらにちょっと修正。

else if (document.getElementById('comment')) {
	var type = 'before';
	var node = $('comment');
}
else if (document.getElementById('comment-text')) {
	var type = 'before';
	var node = $('comment-text');
}
else {
	return;
}

else if ($('comment') && $('comment').type == 'textarea') {
	myField = $('comment');
}
else if ($('comment-text') && $('comment-text').type == 'textarea') {
	myField = $('comment-text');
}
else {
	return false;
}

こんな感じ。

それと注意事項としてはktai_styleのタグはビジュアルエディタと相性がよくないので使用しないようにしてください。
というか、そもそも今回のコレはタグの挿入を補完するものなので

…一応以上ですが、よく要素も確認せずにとりあえず使えるようにしたって感じでなんか不具合あるかもです。

時間あったらも少しちゃんとしてプラグインにでもしようかな。