ga.jsを読み解いてみたけどあまり得るものがなかった

ga.jsの4.9.4を読んでみました。Javascriptの勉強になるかなと思ったので。

結論から言うと、あまり得るものがありませんでした。それならjQueryを読んだ方がよさそうだし、勉強という意味ではprototypeのほうが向いてるような気もしています。
でもGA読んでみたいじゃん。

事前準備

まず、ga.jsをOnline javascript beautifierで圧縮解除。1540行ほどなのと、後半は関数定義なので読み飛ばしていいかなと思ったので実質1000行くらいでしょうか。

所感

ざっと見て一言。「トリッキーすぎる」。
勉強のためにこんなのを読む必要はありませんでした。そもそも、windowを変数Lに入れて、window.document.locationにアクセスするのにL[w][y]って書いたりしてるし、そんな潰れた関数名を配列に入れてforで回して…みたいなことをやっているので、そもそも意味不明です。

やっていることとしては、現状のパスやリファラやクッキー状況を見て、イベントに応じたリクエストをGAのサーバに投げる、というものなので難しくないのかなーと思ってたら、アホみたいに難しいだけなので、おすすめしません。

そんな中でいくつか得るものがあったところだけをメモ。

変数をかっこよく圧縮する

1：false

boolean判定のとき、falseと書くと5バイト使っちゃいますが、!1と書くと2バイトで済みます。
!1 == false かつ !1 === false　なので、今後はfalseって書くときは僕も!1 って書こうかと思います。

2：undefined

undefinedを判定するケースって意外と使い方が難しいです。==で判定すると厳密には違っていてもtrueになったりするので。
ga.jsでは、まず最初に「var k= void 0」と置いています。(void 0) === undefined　なので、確実な判定が行えるというわけですね。

3：０がたくさん付いた数

setTimeOut(5000)とか、ランダムに大きい数を作りたいときなんかで使えそうです。目安としては1000以上。
1000 === 1E3　です。10000 === 1E4 です。つまり、ゼロの代わりにEとゼロの個数を書きます。

POST時のトリック

リクエスト長が2036バイト以上の場合はPOSTでデータを送るけど、その方法です。
まず、幅と高さゼロのiframeを作り、その中でXMLHttpRequestにより通信します。そこでポイントとなるのは、3つ。

1.リクエスト時に、通常のGET用URLとは別のURLにアクセスしているところ。
2.リクエストパラメータにwithCredentials = true をつけているところ。
3.レスポンスヘッダがheader(‘Access-Control-Allow-Origin:*’);を使っているところ。

まず1について。通常はhttp://www.google-analytics.com/__utm.gifをリクエストするんですが、POSTの場合はhttp://www.google-analytics.com/p/__utm.gifになっています。またGETのときはレスポンスに3のヘッダはありません。
なぜかというと、2をセットすることで、インラインフレームからのcookie値送信を許可させているんですね。そのうえで3。なるほどですね。POST機能は最近になって追加されたものなので、最新技術を使ってるっぽいですね。

まとめ

Javascriptのトリッキーな書き方に興味があって、かつ暇な人は読めばいいよ。

普通にGoogle Analyticsを使いたい人はトラッキングコードのリファレンスを読む方が得るものが1E3倍くらい違います。（早速使ってみた）