かえラボBlog

かえラボBlogはラナデザインアソシエイツのテクニカルチームが運営する技術系ラボプロジェクトです

RaNa design associates, inc.

December 28, 2011

Ajax遷移するページのページビューをGoogle Analyticsで計測する

Category :

Ajaxで他のページを取ってきて、コンテンツをガリガリ書き換えてしまうようなサイトを先日案件で作ったのですが、従来の方法ではGoogle Analyticsで遷移先のページビューを取得できないことに気づいて、実験を行ってみました。

20111228_googleanalytics.png

実験のために作成したデモがこちらです。

Google Analytics Demo

何をやっているかを解説していきます。

以下のような部分がAjaxでページを書き換える処理の例です。
今回はjQuery 1.7.1を使うことを前提にしてコードを書いています。"ul a"セレクタ(いかにもやっつけですが。。)で選択されたa要素をクリックすると、href属性値で指定されたURLをAjaxリクエストし、その内容で <div id="contents"/> の中身を書き換えちゃうよ、というものです。

$(function() {
    $(document).on('click', 'ul a', function (e) {
        if (this.href) {
            $.ajax(this.href, {
                dataType: 'html',
                success: function(data) {
                    $('#contents').empty().html(data);
                }
            });
        }
        e.preventDefault();
    });
}); 

Google Analyticsの設定を行っていきましょう。
まずはhead要素内で普通にトラッキングコードを埋め込みます。

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-TRACKINGID']);
_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>

UA-TRACKINGIDの部分は適切なトラッキングIDに置き換えてください。

さて、本題です。
Ajaxで読むページのページビューを取るには、_trackPageview()という機能を使います。リンクをクリックしたイベントをトリガーに、このコードを呼び出してやればOK。
それが以下のコードです。

$(function() {
  $(document).on('click', 'a', function () {
    if (_gaq && this.href) {
      _gaq.push(['_trackPageview', this.href]);
    }
    return true;
  });
});

.on()というメソッドはjQuery 1.7の新機能なので、古いバージョンのjQueryを使わなければいけない場合、.live()とか使えばいいと思います。

$('a').live('click', function() { ...

という感じに。
なお、今回はhref属性値に目的のURLがセットされているのが前提のコードになっています。もし特定のページを計測したい場合、this.hrefの部分は特定の文字列に置き換えても問題ないです。

_gaq.push(['_trackPageview', '/contact/email.html']);

というようになりますね。

リアルタイムレポートでページビューを確認する

Google Analyticsはリアルタイムなレポート機能を実装してきました。ログインして、リニューアルされたUIになっていたら、その機能が使えます。(まだ使えない人はここから申し込めるみたいですね)

20111228_googleanalytics2.jpg

メニューの「リアルタイム」→「コンテンツ」を選択し、ページ中央の「ページビュー数(直前の30分間)」をクリックします。これで、直近30分間のページビュー数をリアルタイムにウォッチしている状態になるので、先ほどのデモなどをいじくってこちらで確認する、ということができます。Ajaxで読むページのURLが、ページビュー数としてカウントされているかどうかを確認しましょう。

弊社は本日が仕事納めです。
今年は震災などがあり大変な年になりましたが、来年はよりよい年となるよう、この場を借りてお祈り申し上げます。
来年もどうぞよろしくお願いいたします。

December 9, 2011

『WebデザイナーのためのjQuery入門』を献本いただきました

Category :

WebデザイナーのためのjQuery入門

出版されたばかりのjQuery本を著者の高津戸さん(@Takazudo)より献本いただきました。ありがとうございます! タイトルの通り、本書はWebデザイナーなどのプログラミング初心者のための本であり、著者曰く

本書は、「自分でコードを書けるようになる人」がひとりでも増えるように配慮して書いたつもりです。

というわけで、非プログラマのjQuery/JavaScript入門書としては強力な一冊となっています。

手にとって思ったのは、とにかく親しみやすい文体と図解でわかりやすく書かれている、ということ。
書籍なので丁寧な文体で書かれてはいますが、文章のもって行き方や言い回し、作例などはユニークで「プログラミングを理解する」という複雑なテーマに挑む読者に対して、著者がとてもフレンドリーに向き合っている印象を受けました。

私はJavaScriptをちゃんと学び始めて4年くらいが経ちますが、私にとっての入門書は「WebクリエイティブのためのDOM Scripting」でした。
当時は今ほどブラウザが優秀ではありませんでしたし、JavaScriptライブラリなどもそれほど強力ではありませんでしたから、本書のようにフレームワークに特化した日本語書籍は当時なかったと記憶しています。しかしもし自分が今JavaScript入門者であったら、まさに本書は読みたい内容であるなあと感じました。

June 21, 2011

画像を読み込みを制御するプラグイン imgloader.js

Category :

画像の読み込みと生成を行い、ローディング完了またはタイムアウトを確認してからコールバックに設定した処理を行う。 【 実行方法 】

$("element").imgloader(options);
【 オプション 】 imglist: (Array) 画像のsrcに指定するパスを配列形式で指定。 callback: (function) コールバック処理を関数形式で指定。 timeout: (Number) タイムアウトをミリ秒で指定。省略時はタイムアウトしない。 【 例 】

	var options = {
		imglist: [
			"photo/0.jpg",
			"photo/1.jpg",
			"photo/2.jpg",
			"photo/3.jpg"
		],
		width: 1200,
		height: 896,
		callback: function() {
			// コールバック処理
		}
	}
	
	// loader
	$("#imgContainer").imgloader(options);


// HTML
	
Posted by 山本圭助

June 17, 2011

画像をウィンドウにフィッティングさせるプラグイン fitter.js

Category :

リサイズイベント発生時に要素内の画像サイズをウィンドウサイズに合わせて変更する。
最小サイズを指定しておけば、それより小さくはならない。

【 実行方法 】


$("element").fitter(options);

【 オプション 】
width: 画像の初期横幅
height: 画像の初期縦幅
minWidth: 最小横幅
minHeight: 最小縦幅
selector: フィッティングさせる要素を指定する。初期値は"img"。


Posted by 山本圭助

June 14, 2011

フローティングなナビゲーションを作るjQueryプラグイン

fixedオプションを追加。

ナビゲーションなどのコンテンツをスクロールに追従させ、画面の上下に接着させるjQueryプラグイン。

どこかで見たような気がするのだが、どこで見たか思い出せない&探してもすぐ出てこないので、作ってみた。

floater.js

サンプル デモ

使い方は簡単。
よくある感じで、動かしたい要素でfloaterメソッドを実行する。


	$(element).floater();

オプションは以下の通り。

  • marginTop: 上の余白
  • marginBottom: 下の余白
  • agility: 0~1。0はナビが通り過ぎるまで待つ。1はナビの末端が出るとすぐ動きだす。
  • speed: アニメーションにかける時間
  • easing: イージング
  • fixed: trueでposition: fixedに切り替え。初期値はfalse。

オプションを適用すると、こんな感じ。


	$("nav").floater({
		marginTop: 60,
		marginBottom: 80,
		wait: 0.75,
		speed: 800,
		easing: "easeInQuad"
	});

June 11, 2011

要素をフェードで切り替えていくプラグイン fadechanger.js

Category :

追記: 2012/04/04 オプションを追加しました。

最前面(末尾)の要素をfadeOutさせたのち、最背面(先頭)へ移動させ、show()している。その繰り返し。
CSSは特に指定していないので、同じ場所で切り替える場合は、position: absoluteなどで重ねておく必要あり。

【 実行方法 】


$(parent-element).fadechanger({ selector: child-element });

【 オプション 】
speed: 切り替えにかける時間をミリ秒で指定。初期値は2000。
wait: 次の切替までの待ち時間をミリ秒で指定。初期値は2000。
selector: 要素内のどの子要素を切り替えるかを指定する。省略した場合は、すべての子要素が対象となる。
(例) { selector: ".opened" }とした場合は、openedというクラス名を持った子要素のみが対象となる。
loop: 切替のループ回数を数値で指定。初期値は"infinite"(無限)。


April 7, 2011

RaNa design WEBSITE RENEWAL PROJECTのネタばらし その2

Category :

昨年末に公開したRaNa design WEBSITE RENEWAL PROJECTの舞台裏エントリーその2です。その1の後に読んでいただくとよりお楽しみいただけます。

今回からはJavaScriptの実装についてより深く踏み込んでいきますが、全体のコードは長大なので、要点と思える部分だけ切り取っていく感じでお話できればと思っています。

April 4, 2011

RaNa design WEBSITE RENEWAL PROJECTのネタばらし その1

Category :

昨年末に公開したRaNa design WEBSITE RENEWAL PROJECTですが、どんな仕組みでできているのかネタばらしをしておきたいと思います。

企画とデザイン

サイトのトップが工事現場になって、そこにカエルの作業員が動き回る。Twitterとも連動する、というものでした。
最初に受け取ったデザインはこんな感じ。

Renewal Project ネタばらし その1(1)

たすけあいジャパン
ラナデザインアソシエイツは、「助けあいジャパン」に協力しています。