Google AnalyticsでJavaScriptファイルのローディング時間を計測する

やっほぉ、鳥さんとかそんな感じのものだ。

今回はGoogle Analyticsで外部のJavaScriptのローディングタイムをトラッキングする方法を説明するよっ
Google Analyticsの「_trackTiming」ってやつを使うんだ〜。

導入手順

user-timing.js - analytics-api-samples - Google Analytics Sample Code - Google Project Hostingを元にして、ちょっとしたスクリプトを組んでみた。

Tracking JavaScript file loading time with Google Analytics ― Gist

まず、上記のJavaScriptファイルをDLする。

エディタで開いて、_loadJsAryにこんな感じでロードするJavaScriptとその説明の配列をセットする。非同期でOK!の場合は、最後にtrueって入れると良いよん。

var _loadJsAry = [
['js/ga.js', 'Load Google Analytics Component', true]
, ['js/jquery-min.js', 'Load jQuery']
, ['js/jquery-ui-min.js', 'Load jQuery UI']
];

必要に応じて、デバッグかどうかをセットする。(デバッグの場合はサンプルレート100%、GA標準の場合は1%)
グローバル変数( ̄▽ ̄;

var debug = true;

IE8以下で動かない

ちなみに、IE8以下だと、どーーーにもウマく動かん(´・ω・`)

試した方法は、以下のとおり。

  • DOMでスクリプトタグの直前や直後にロード(GA標準) → なんか要素自体が追加されない
  • DOMでbodyタグの最後にロード → 要素自体は追加されるけど、ロード順が同期にしてもグチャグチャ
  • scriptタグをbodyタグの最後に追加 → なんか追加されない
  • Ajaxでロードしてeval → グローバル変数にした奴が機能しない( ̄▽ ̄; (どうやらスコープがeval内で完結するっぽい、セキュリティ考えれば確かにね)←Gistのコードはこの状態

参考

でわでわっ

Google AnalyticsでiOS(iPhone/iPad)アプリのバージョンをトラッキングする、ほか

はぁい、鳥さんだよ。

本題をトラッキング方法にしようと思ったけど、ちょっと変更w

2012/09/22追記:Ver 2系はこちらの新しい記事を参考にしてね!

Google AnalyticsiOSアプリをトラッキングする方法

まずはGoogle AnalyticsiOSアプリをトラッキングする方法を紹介するよっ

Google Analyticsで取れるログはふつーのウェブサイトのトラッキングと同じで、以下のトラッキングが可能だよ。

と書いてみたものの、もう去年だし、わりと記事が出回ってたので、この辺は記事紹介に留めるのである。

Google Analyticsでの設定から、iOS SDKでのアプリへの設定まできちんと解説してる記事:
10分でわかるGoogle Analytics SDK for iOS - murapongの日記

ちなみに、今は「ウェブサイト以外」という設定ができてるので、アプリの場合はそれを使うといいよっ
あと、iOSアプリは一旦データを貯めこんで一定期間ごとにポイっと投げるので、リアルタイム解析でも、ふつーのウェブサイトよりかは反映がちっと遅めだよっ

また、Google Analyticsの時計を使うのではなく、iOSバイスの時計を使うので、時間はデバイスごとにわりとブレるよん。(誤差が出る)

便利マクロが載ってるSlideShare
iPhoneアプリのアクセス解析Google Analytics SDK for iOSについて - ninjinkunの日記
ちょっと誤記があるので、そのままでは使えにゃい。
クラスはページとして、メソッドはイベントとしてトラッキングされるマクロだよん。

初期化マクロはこちら:
iPhoneアプリの使用状況をGoogle Analytics for iOSで解析する | へびにっき

簡単に説明すると、以下の手順。

  1. Google Analyticsでアプリ用のアカウント作る
  2. Google AnalyticsでGA SDKをダウンロードする
  3. Xcodeで作ってるプロジェクトに、GA SDKを追加
  4. アプリに「CFNetwork.framework」と「libsqlite3.0.dylib」 を追加
  5. 「<プロジェクト名>-Prefix.pch」 で 「GANTracker.h」 をインクルードして、 各種マクロをペタペタ貼る
  6. アプリの「didFinishLaunchingWithOptions」で「GA_INIT_TRACKER」する
  7. 途中でマクロを使って便利に計測
  8. アプリの最後「dealloc」で「[[GANTracker sharedTracker] stopTracker];」する

ちなみに、同梱されているlibGoogleAnalytics_NoThumb.aは、現時点では"_OBJC_CLASS_$_GANAdHitIdGenerator"が無いってリンカーでエラーメッセージが出るので使えないよ〜。

Google AnalyticsiOSのバージョンをトラッキングする方法

で、ここからやっと本題。

現時点では、GoogleAnalyticsはiPadiPhoneかだけをトレースして、そのバージョンまでは判別してくんないわけで。Google アナリティクスでiOSのバージョンを確認する方法 | MOL の結果とかここギコ!: Google Analytics SDK for iOSでUserAgentの変更の方法で勝手にUAを変更して確認する限りでは、そもそもiOS類のバージョン自体をまだトラッキングしてくんないらしい。

てわけで、iOSのバージョンは手動でカスタム変数を使ってトラッキングする。その方法は以下のとおりだね。

UIDevice *cd = [UIDevice currentDevice];
NSError *error;
if (![[GANTracker sharedTracker] setCustomVariableAtIndex:1 name:cd.model value:cd.systemVersion withError:&error]) {
NSLog(@"%@",error.helpAnchor);
}

ちなみに、流行(?)のマクロにすると、こんな感じ〜。

#define GA_TRACK_VER { UIDevice *cd = [UIDevice currentDevice]; NSError *error; if (![[GANTracker sharedTracker] setCustomVariableAtIndex:1 name:cd.model value:cd.systemVersion withError:&error]) { NSLog(@"%@",error.helpAnchor); }  };

GA_TRACK_INITの後にGA_TRACK_VERをセットしとくと、バージョン情報が取れるようになるよっ つまり、手順のNo.6のすぐ後だね〜。

あ、この場合はカスタム変数の1番に記録するよ。
他の番号のカスタム変数を使用したい場合は、「setCustomVariableAtIndex:1」の番号を1からその番号に変更してね〜。
ちなみに、フリー版のGoogle Analyticsだと、現時点で使えるカスタム変数の数は5つまでだよ〜。

参考

でわでわ。

Google Analyticsでダウンロード(PDFとかZIPファイルとか)をトラッキングする(たぶん)正しい方法

やぁ鳥さんだよ。

Google Analyticsを埋め込めないファイルのトラッキング方法を説明するよっ
PDFとかAVI、ZIPファイルのダウンロードとかのトラッキングね。

まず、非同期トラッキング用の配列が無ければ作る。

var _gaq = _gaq || [];

今度は外部ファイルをクリックした時の関数を定義する。

function recordObjectLink(link) {
try {
var linkedURL = link.href.replace('http://' + document.domain, '');
linkedURL = linkedURL.replace('https://' + document.domain, '');
_gaq.push(['_trackPageview', linkedURL]);
var cl = '';
if (link.target && link.target !== '_self') {
switch (link.target) {
case '_parent':
cl = 'parent.document.location = "' + linkedURL + '"';
break;
case '_top':
cl = 'top.document.location = "' + linkedURL + '"';
break;
default:
cl ='var w = window.open("' + linkedURL + '", "' + link.target + '");if(!w){document.location = "' + linkedURL + '"}';
break;
}
} else {
cl = 'document.location = "' + linkedURL + '"';
}
setTimeout(cl, 100);
} catch (err) {}

return false;
}

ミソは、以下のとおり。

  • Google Analyticsはどうも_gaqに対するトリガーを仕掛けているのではなく、タイマーで定期的にクロールしているらしく、_gaqに突っ込んだ非同期イベントが、ページ遷移が早すぎるとトラックされないことがある。なので、ごく短い時間遅延させ、確実にトラッキングされるようにする
  • その影響で、setTimeoutで呼び出す式に、aでtarget指定されてた時の挙動をJavaScriptに引き継がないといけない。(HTMLと完全に一緒にするのは無理)
  • このトラッキング方法だと、ふつーにhrefに付いてるURLを渡してもドメイン名がいちいちくっ付いて来るので、それを引っぺがす。

で、最後にトラッキングしたいリンクにイベントを仕掛ける。

<a href="〜" onclick="return recordObjectLink(this);" target="_blank">

つまり、このJavaScript(要編集)を読み込んで、リンクにonclickを仕掛けておけば、トラッキングされるよっ

ページ内の特定のリンクに一気にイベントを仕掛けるなら、こんな方法もあるね。
以下は<div id="targetDiv">〜</div>にあるa要素すべてにトラッキングを仕掛ける場合だよ(jQuery利用の場合)

<script type="text/javascript">
$(function(){
$("#targetDiv").delegate('a', 'click', function (e) {
return recordObjectLink($(this)[0]);
});
});
</script>

参考

でわでわ。

Google AnalyticsでTwitterのログを取る(たぶん)正しい方法

へいへいほ〜、鳥さんへいへいほ〜!

タイトルの通りだけど、つかかなーり遅めだけど、
Google AnalyticsTwitterのアクションをトラッキングする(たぶん)正しい方法を紹介してみるよっ

余談だけど、このアクセス解析ガンガン進歩してて、追いかけるのがタイヘン( ̄▽ ̄;

キーは以下のとおり:

つまり、Twitterの公式のウィジェットコードをいじらないと、まともにトラッキングできないのん。
以下が公式ウィジェットの吐くツイートボタンのソースコードね↓

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

これのJavaScript部分を下記に張り替えないといけない↓

<script>window.twttr = (function (d,s,id) {var t, js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });}(document, "script", "twitter-wjs"));
</script>

つまり、ツイッターウィジェット埋め込み完了のタイミングを検知できるようにするの。
で、必ずこのコードの後にトラッキングコードを入れる。

DOMのロードが完了していないと、twttr変数すら未定義って怒られるので、jQuery的には$(function(){と});の間に入れるのさ。
つまり、Twitterラッキングの事前準備コードの最後の部分だけど、以下のとおり。(jQuery利用の場合を想定)

$(function(){
  _ga.trackSocial();
});

で、ウィジェットの埋め込みが完了してからトラッキングコードをバインドするようにしているのが以下のコード。

_ga.trackSocial = function(opt_pageUrl, opt_trackerName) {
  twttr.ready(function (twttr) {
    _ga.trackTwitter(opt_pageUrl, opt_trackerName);
  });
};

最後に、中身のトラッキングコードを実装。
Google Analyticsのソーシャルトラッキングは出来ることがイベントより少なくて100%使いまわせるので、下記コードでOK。

var twttrFunc = function(event) {
  if (event) {
    var targetUrl; // Default value is undefined.
    if (event.target && event.target.nodeName == 'IFRAME') {
      targetUrl = _ga.extractParamFromUri_(event.target.src, 'url');
    }
    _gaq.push([trackerName + '_trackSocial', 'twitter', event.type,
      targetUrl, opt_pageUrl]);
  }
};

これの関数を、5種類すべてのイベントにバインドする。

twttr.events.bind('tweet', twttrFunc);
twttr.events.bind('click', twttrFunc);
twttr.events.bind('retweet', twttrFunc);
twttr.events.bind('favorite', twttrFunc);
twttr.events.bind('follow', twttrFunc);

つまり、下記のコードを外部JS化して保存、そしてTwitterウィジェットコードの後で読み込むんだ!
なんだかGoogle側のコードはやけにiframeにこだわってるのだけど、謎す。

var _ga = _ga || {};
var _gaq = _gaq || [];
_ga.trackSocial = function(opt_pageUrl, opt_trackerName) {
  twttr.ready(function (twttr) {
    _ga.trackTwitter(opt_pageUrl, opt_trackerName);
  });
};
_ga.trackTwitter = function(opt_pageUrl, opt_trackerName) {
  var trackerName = _ga.buildTrackerName_(opt_trackerName);
  try {
    if (twttr && twttr.events && twttr.events.bind) {
      var twttrFunc = function(event) {
        if (event) {
          var targetUrl; // Default value is undefined.
          if (event.target && event.target.nodeName == 'IFRAME') {
            targetUrl = _ga.extractParamFromUri_(event.target.src, 'url');
          }
          _gaq.push([trackerName + '_trackSocial', 'twitter', event.type,
            targetUrl, opt_pageUrl]);
        }
      };

      // tweet
      twttr.events.bind('tweet', twttrFunc);
      twttr.events.bind('click', twttrFunc);
      twttr.events.bind('retweet', twttrFunc);
      twttr.events.bind('favorite', twttrFunc);
      twttr.events.bind('follow', twttrFunc);
    }
  } catch (e) {}
};
_ga.extractParamFromUri_ = function(uri, paramName) {
  if (!uri) {
    return;
  }
  var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)');
  var params = regex.exec(uri);
  if (params != null) {
    return unescape(params[1]);
  }
  return;
};

$(function(){
  _ga.trackSocial();
});

Gistにコードを入れてみたよ!

Tracking Twitter Widget Action with Google Analytics - Gist

参考URL

でわでわ。

はてなブログを使ってみた感想

あろーは、久々の鳥だ。

今更だけど、はてなブログを使ってみたよ。
結論だけ言うと、到底使えないシロモノ
かなり前のブログというツールが出来たころなら通用しそうな状態だ。
まーよく言っても10年以上前の話だよね。

カテゴリーについて

  • カテゴリーはカテゴリーではなくてタグ扱い。
  • タグのページの見え方が変。

記事投稿について

  • 一度公開した記事は下書きに戻せず、削除しかできない←致命傷。
  • ゴミ箱機能もなし。
  • WYSIWYGのショボさは、あまりはてなダイアリーからは変わらず。
  • WYSIWYGにはショートカットも無く。
  • 取り消し線が<span style="text-decoration: line-through;">。
  • 投稿日指定はできるけど時限公開なし。
  • カスタムURLは指定できるけど、それほど重要でなし。

独自アクセスログについて

  • プレビューでもカウントする。 
  • 今日アクセスして「1日前」ってカウントされるアクセスログってダメだと思います。
  • GoogleAnalyticsに加えて、ウェブマスターツールとも関連付けられるんだから、独自の中途半端なアクセスログ解析って要らないと思うの。

デザインについて

  • デザインはカスタムで利用可能でサイドバーに任意のHTMLを仕込める点が違うかな。(スクリプトの仕込みも可能)

2011-11-07にリリースされていて現状がこの状態では、将来性は非常に薄いしそのまま消えてなくなるのだろうと勝手に思ってる。
なぜ、はてなダイアリーの機能増強するという位置づけではなく、明らかにカニバるサービスを新規にリリースするのか。

ところで、いい加減改行箇所にBR突っ込みまくる無駄機能なんとかしてください。

頻繁にプログラムが強制終了したりブルースクリーンになったりするPCの原因を調べてみた

やほほ。
鳥さんだよ。

ここのところ、メインマシンがすんごい調子悪いので色々と調べて復旧させたんだけど、すんごい時間かかったのでメモ。

症状

症状は以下の通り:

  • いきなりアプリケーションを問わず強制終了が頻発するようになる。
    何もしなければ特に強制終了は起こらない。
  • その後、しばらくするとブルースクリーンが頻繁に発生する。
    今回確認したSTOPエラーは二種類:PFN_LIST_CORRUPTIRQL_NOT_LESS_OR_EQUAL
  • チェックディスクをかけると、どのディスクでもエラーが発生する。
  • OSをクリーンインストールしても同様のエラーが発生する。
    再インストール後しばらくは何もエラーが発生しない。

私の調べた方法

すんごい回り道したけど・・・

最近導入したアプリケーションを削除

しかし何も変わらなかった!

OSを入れ直してアプリケーションまで入れ直し

しかし何も変わらなかった!

ハードディスクにチェックディスクをかけて不良セクタを回復

しかし何も変わらなかった!

違うハードディスクにOSをインストール

しかし何も変わらなかった!

memtest86+を使ってメモリーを調査 (使い方は「Memtest86+」の使い方(外部サイト)参照)

しかし何も変わらなかった!

1周じゃ分からないことが多いそうなので、8時間放置

驚くほどのエラー、驚くほどのエラー、驚くほどのエラー、わずかな希望、驚くほどのエラー、(ry (9周で35件)

ここで初めてPCのふたを開ける。
すると初期のものと思われるノーブランドの1GBのメモリー2本と、増設したと思われるKingston純正メモリーが各2本。
ノーブランドのメモリー2本を取り除き、Kingstonのメモリー2本のみにする。
その後、再度memtest86+を実行。

同時間たってもエラー発生せず!(9周でゼロ)

OSを再度クリーンインストール

問題なし

解決!!!

・・・という按配。要するに、

解決策

ノーブランドのメモリーを撤去

ですた。
勘の働く人は当たりを付けてメモリー交換しちゃうんだろなぁとか思った。

しかし購入して数年も経ってくると、自分の買ったPCの構成どうしたかなんてこれっぽっちも記憶に残ってないもんでw

ちなみに取り外したノーブランドのメモリーは、板の分厚さは十分だったものの回路設計がびみょーな感じでレジスタとかの位置もバラバラだった。



回路設計びみょーの図


分厚さいいかんじの図


Kingstonぜーたくの図

感想

ちょっと時間がかかりすぎた。。メモリーが原因だったのは今回が初めて。

ま、途中に重要度の低いドライブを間違えてフォーマットするとか愉快なこともやったよ!
ネタにはなったがなorz

でわでわ。

LYNX 3D(SH-03C)をメジャーアップデートした!しかし何も起こらなかった!・・・?

あろー。
1ヶ月連勤達成の鳥さんでーす。

さてさて、我がLYNX 3D(SH-03C)のメジャーアップデートが出たということで。アップデートいたしました・・・というかしようとしました。

ところが、いくら頑張ってもアップデートできない。ソフトウェアは最新のはずだが。

「どーゆーことやねん!」とDoCoMoにメールを送った後、ソフトウェアアップデートの通知が。

てわけで、どうもソフトウェアアップデートとメジャーアップデートはワンセットらしい。そうならそうと書いてくれorz

ちなみに、メジャーアップデートのプレスが出たのは6/6、ソフトウェアアップデートがケータイに届いたのは6/11の朝

もうね、アボカドバナナと。

てわけで、めげずにアップデート開始。トータル1時間半かかりますた。

さて、メジャーアップデートで変わった点は幾つかありますけど。その辺はプレス参照

個人的には、一番大きなところは、SDカードへのアプリ保存と無駄なアプリの削除、あと1割もRAMの空きを確保しないと何もできなくなる仕様だと思っております。順番に行ってみましょうか。

SDカードへのアプリ保存

できるようになったよ。わりとアプリを移動したよ。ただし自分でダウンロードしたアプリだけ
しかし。
spモードメールっていう37MBの巨大なラスボスは、本体に鎮座したまま移動する気がないようです。さすがラスボスという面持ち。
また、SDカードにアプリを移行できると言っても一部を外部化できるだけで、ランチャー的なものはどうやら本体に残るらしい。マイッタネ。

無駄なアプリの削除

できないまま。30個以上あるアプリは、すべてアンインストールも移動も不可。

RAMの容量制限

変化無し。空き容量30MBを割ると、何の情報取得もできなくなるよ。

結局、SimejiとFacebookを追加でインストールして終わった本日。はぁ。。

てゆかですね、
設定してたロックの指定が無くなりました
明朝体フォントが変になりました(カーニングがなってない)。
マナーモードも勝手に解除されちゃいました。
他にも変なところが初期化されちゃってないか、とても心配。

でわでわ。