オフィシャルサイトで使った技術その2in work

 
date:2010.05.31   posted by:oikawa
 

お世話になります。最近はGareth Emeryな日々の及川です。
今回はイベントhistoryとGoogle Analyticsのトラッキング制御方法を少しお話したいと思います。

 

[JS]イベントhistoryとGoogle Analytics
Google Analyticsでは特定のイベント時の情報を取得することができます。
Google Code: Tracking API

このイベントを取得の際、aタグへのonClickイベントに記述するサンプルを多くみますが、今回はイベントhistoryを使うことで、ひとつひとつaタグに記述することなくイベントを管理できるようなサンプルを紹介してみたいと思います。

左の図はGoogle Analyticsで取得したイベント情報です

 

Mootoolsを使ったHistory KeeperとGoogle Analytics設置サンプル

var dsn = {
  init: function() {
  },
  dominit: function() {
    //DOMの準備が出来次第historyFuncを呼び出してhistoryChangeイベントを設置
    this.historyFunc();
    this.pagetopFunc();
  },
  historyFunc: function() {
    unFocus.History.addEventListener('historyChange', dsn.historyListener);
    if(stockHash.split('#')[1]) this.historyListener();
  },
  pagetopFunc: function {
    //特定のclassにイベントを定義して記録
    //この場合pagetopというclassが設置されている要素がクリックされた際イベントを記録します
    $$('.pagetop').addEvent('click',function(){
      _gaq.push(['_trackEvent', 'Pagetop', 'Click', stockHash]);
    });
  },
  historyListener: function() {
    //アンカーが変わるごとに以下の操作をします
    stockHash = location.hash;
    var pwd = unFocus.History.getCurrent();
    //リンクへのトラッキングを記録
    _gaq.push(['_trackPageview', pwd]);
    //特定イベントを定義して記録する場合
    _gaq.push(['_trackEvent', 'Listener', 'Click', pwd]);
  }
}

//ページURLのアンカーを取得
var stockHash = location.hash;

window.addEvent('domready', function(){ dsn.dominit() });
window.onresize = function() {};
window.onload = function() { dsn.init(); };

今回Google Analyticsの新しいトラッキングコードで記述しています。
もし古いコードをお使いの方は「カグア!Google Analytics 活用塾:事例や使い方」さんのところの非同期トラッキングコード移行マニュアルをご覧いただけたらと思います。

一応軽く記述しておきますと、新しいほうは二重配列で_gaqという変数にpushで入れ込む形になっています。
また特定イベントのカテゴリについては自由に記述していいところなどは変わっていないようです。

  //リンクへのトラッキングを記録
  _gaq.push(['_trackPageview', ここにページURLなどを記述]);
  //特定イベントを定義して記録する場合
  _gaq.push(['_trackEvent', 独自のカテゴリ名, イベント名(clickなど), 補足的な情報を登録(ラベル)]);
  //最後のラベルは、数値データとして記録し平均値を取ることもできます

これを使えばFlashなどでのトラッキングが容易になると思います。
ということで次回は「イベントhistoryとCookieを使った履歴」についてお話してみたいと思います。

 

[追記] onClickイベントを個々に記述しないで制御する方法

その外onClickイベントを個々のaタグに記述しなくても、以下のようにして制御することもできるのでご紹介しておきます。

  //すべてのaタグにトラッキングイベントを追加
  $$('a').addEvent('click',function(){
    var stockURL = this.get('href');
    _gaq.push(['_trackPageview', stockURL]);
  });

aタグのrelを使って追加の情報を記録したいときは以下のように記述もできます。

  //すべてのaタグにトラッキングイベントを追加
  $$('a').addEvent('click',function(){
    var stockURL = this.get('href');
    var stockRel = this.get('rel');
    _gaq.push(['_trackPageview', stockURL]);
    _gaq.push(['_trackEvent', 'History', 'Click', stockRel]);
  });

aタグのrelを使って特定のイベントだけを記録したいときは以下のような感じになります。

  //すべてのaタグにトラッキングイベントを追加
  $$('a').addEvent('click',function(){
    var stockURL = this.get('href');
    var stockRel = this.get('rel');
    //クリックされたaタグのrelが'hoge'だった場合トラッキングイベント発生
    if(stockRel == 'hoge') _gaq.push(['_trackPageview', stockURL]);
  });
 
"JavaScript"で関連する記事一覧 (シーケンスで表示する)
•2011.10.13-悩める漢のダイエットアプリ「漢のダイエット」リリース! in news
•2010.06.04-each関数を使ったテキスト上下中央揃え in work
•2010.05.31-オフィシャルサイトで使う予定だった技術 in work
•2010.05.31-オフィシャルサイトで使った技術その3 in work
•2010.05.31-オフィシャルサイトで使った技術その2 in work
•2010.05.25-オフィシャルサイトで使った技術その1 in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2009.05.27-もっとがほしいDSN in work
•2009.04.16-Webページで角丸のボックスを作る方法あれこれ in work
•2009.04.03-AJAX Libraries API in work
 
 
"lab"で関連する記事一覧 (シーケンスで表示する)
•2010.07.05-iPadアプリ「Twin Striker」をリリース in news
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.06.06-iPhoneアプリ「TWIN STRIKER」をリリース! in news
•2010.06.04-each関数を使ったテキスト上下中央揃え in work
•2010.05.31-オフィシャルサイトで使う予定だった技術 in work
•2010.05.31-オフィシャルサイトで使った技術その3 in work
•2010.05.31-オフィシャルサイトで使った技術その2 in work
•2010.05.28-Androidアプリ「Twin Striker」をリリース! in news
•2010.05.26-リンク集 in development
•2010.05.26-事例(Twin Strikerのワークフロー) in development
•2010.05.26-Coronaトラブル対策 in development
•2010.05.26-Coronaと他Projectの比較 in development
•2010.05.26-Tips4. iPhone3GSとAndroid1.6の動作の違い in development
•2010.05.26-Tips3. iPhoneで気をつけるべきこと in development
•2010.05.26-Tips2. Androidで気をつけるべきこと in development
•2010.05.26-Tips1. Flashからの変換 in development
•2010.05.26-Coronaの環境構築編 in development
•2010.05.26-Coronaの紹介編 in development
•2010.05.26-『日本代表に応援メッセージを送ろう!』携帯版リリース in news
•2010.05.25-オフィシャルサイトで使った技術その1 in work
•2010.05.25-おっぱいw-cup携帯版をリリースしました! in news
•2010.05.24-会津大学 ソフトウェアスタジオ キックオフ編 in work
•2010.05.24-会津大学 ソフトウェアスタジオ 準備編 in work
•2010.05.22-サッカー日本代表に応援メッセージを送ろう! in news
•2010.05.21-DSNオフィシャルサイトリニューアル in news
•2010.05.17-Processing.jsを使った万華鏡デモ in work
•2010.05.14-CSS3のアニメーション機能 in development
•2010.05.07-複数打ったはずのマーカーが1つしか表示されない in work
•2010.05.07-TwitterSearchAPIのフィードをパースする in work
•2010.04.24-HTML5&CSS3のデモを作成しました in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2010.01.08-Processingおもしろい&使えるライブラリ10 in work
•2010.01.04-HTML5を学ぶつもりならスマートフォンを買おう in work
•2009.12.02-マルチタッチディスプレイ vol.02 in work
•2009.10.23-「くままり」で使用したBox2D AS3テクニック in work
•2009.10.22-mixiアプリモバイル作成前に見ておくべき10のまとめ in work
•2009.10.21-mixiアプリの公開手順 in work
•2009.10.15-mixiアプリ「鉄血王女と待受騎士団」をリリース in news
•2009.10.14-mixiアプリのパズルゲームについて in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました! in work
•2009.08.27-mixiアプリ「くままり」をリリース in news
•2009.08.26-くままるのmixiアプリ『くままり』登場 in work
•2009.05.27-もっとがほしいDSN in work
•2009.04.16-Webページで角丸のボックスを作る方法あれこれ in work
•2009.03.02-みんなが大好きjQuery in work
•2009.02.27-マルチタッチディスプレイ vol.01 in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.11-センサー講座 Spe.001 Wiimote Whiteboard in work
•2009.02.06-センサー講座 Lec.003 Phidgetsインストール in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウト その2 in work
•2009.01.29-センサー講座 Lec.002 phidgetsの購入 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウト その1 in work
•2009.01.20-センサー講座 Lec.001 どれを選ぶ? in work
 
 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|JavaScript lab