Nakatta blog » プラグイン

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で携帯解析がサポートされました。

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フォルダ直下においてプラグインを有効にする。

以上です。

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

それなりになってきた？

tada — Thu, 20 Nov 2008 14:39:09 +0000

ほしい機能は大体そろったかな
次はデザインの作りこみっすね

Syntax Highlighter for WordPressを少し改造

tada — Wed, 19 Nov 2008 15:39:59 +0000

自分なりの問題点は以下。
wp.Vicunaとの相性が問題だと思う。

１．ＩＥで行番号位置がおかしい。
２．Firefoxでクリップボードコピー機能が効かない。
３．Firefoxでクリップボードコピーを押すと一番下の体裁がくずれる。

の３つです。

まず1つ目はCSSでul要素にlist-style-positionでinsideを指定してるのがだめなので修正。

2つ目と３つ目ははめんどくさいからクリップボードコピー機能をIE以外表示させないことで解決。

ちょー手抜きだけどよしとしよう

Lightbox不具合の修正

tada — Wed, 19 Nov 2008 14:30:17 +0000

SafariやGoogle Chromeでサイズの違う写真を交互に出すとおかしくなる不具合を発見。
なので修正です。

使用プラグインはWP Lightbox2です。

444行目を追加。

myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
Element.setWidth('lightboxImage', imgPreloader.width);

プログラムコードのハイライト表示

tada — Mon, 17 Nov 2008 09:09:33 +0000

昨日の記事でプログラムコードを載せたんですが、せっかくなのでハイライト表示するプラグインを導入してみました。いろいろ試した結果、とりあえず「Syntax Highlighter for WordPress」に。結構高機能でプレインテキスト表示したりクリップボードにコピーできたりとなかなかいい感じ

…と思っていたんです…がど−も動きがあやしい時がある。

ていうのも、FirefoxとかGoogleCromeでの話。ＩＥなら全然問題ありません。なのでＩＥ以外の方はソース上部にある機能は使わない方がいいかもです。

標準だと言語名が頭についたりして気に食わなかったから消してみたり、ちょこちょこいじったのがまずいんですかね？というよりテーマとの相性問題がでかいかな

[追記]
なんか他のサイトでも同じようなプラグイン使ってる人が同じ症状になってるっぽい。
のでとりあえずはそのままでいーや

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のタグはビジュアルエディタと相性がよくないので使用しないようにしてください。
というか、そもそも今回のコレはタグの挿入を補完するものなので

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

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

暫定PC絵文字入力対応

tada — Fri, 14 Nov 2008 17:04:31 +0000

とりあえずできるようにはしてみた
ちょっとプラグインいじって無理やりだしちゃった感じ
問題ないかな？？

今後の作業メモ

tada — Fri, 14 Nov 2008 05:36:19 +0000

○ＰＣ投稿画面からの絵文字入力対応
○サイドバーに最近のコメントを表示
○続きを読む機能のＪＳ折畳み
○デザイン作りこみ

とりあえずこんなとこ。