ニガくて難しいアクセス解析を、たっぷりのミルクでふわふわの贅沢ラテ的な仕上がりに

Chrome紹介ページに隠された、イケてるHTMLコーディングテクニックとGAの最新版コードみたいなの

CMでやってるChromeの紹介ムービーをなにげなく見てたら、ちょっとおかしいことに気づきました。最先端ブラウザであるChromeの、その紹介サイトとなれば当然HTML5対応してるはず、と思ってみて気づいた点です。
HTMLソースを眺めてみて、気づきました。これがナウいソースなのかと関心する点が多々ありますが、2点、すげぇ!と思ったところがあるので紹介します。
Chrome

1.Google Analyticsのタグが最新版を超えてる

GAの貼り付けタグが公式のものではないことがまず1点目の違和感です。通常はこんな感じでゴチャゴチャしてるんですが

//before
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-1']);
  _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>

ここではこんな感じに素晴らしくすっきり。

//after
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
<script>
  var autoTrack = new gweb.analytics.AutoTrack( {profile: 'UA-XXXXXXXX-1'} );
</script>

これは何をやってるのか

思うに、これはまだ非公式の最新タグではないでしょうか。

去年(2010年)、旧式のタグから非同期のタグへの移行がありました。それはGAの精度と用途を拡張するアップデートで、公式アナウンスから約半年たって、そろそろ旧式のコードが減ってきたかなというタイミングです(旧式コードはまだ動きますが)。
で、これはそのときと同じくらいのインパクトがあります。JSを読んでみたところ、GA本体(ga.js)の確実な呼び出しに加え、タグ二重貼りへの配慮、さらに自動でページ内クリック、サイト内クリック、サイト外クリックをイベントトラッキングしてくれる機能を持ってます。コードが示すように「autoTrack」はダテじゃないかんじですね。
自動イベントトラッキング
自動イベントトラッキングされてる結果(上記JSをまるっとコピペして自分のサイトで使ってみた)

これを見て、公式コード一発でいままで僕らが必死にカスタマイズのノウハウを集めてた部分をカバーされるとしたら、僕らの役割は無駄だったのか、みたいなショックと、考えてもないアップデートでもっと機能を追加してくれ、解析屋の作業にまでもっと踏み込んでくれという期待感を抱いてしまい、うっかりTwitterにポストしてしまいました。

ryownet:
近日中にGAの貼り付けコードがまた変わりそうな予感。今度はすっきり1タグだけを読み込む方式になるっぽい

あ、しまった、と思ったら次の瞬間に@hibukuroにRTされていたので、

hibukuro:
マジ?3rd party cookie対応にして、ドメイン跨ぎとか面倒なの一切なしにして欲しい。 RT @ryownet: 近日中にGAの貼り付けコードがまた変わりそうな予感。今度はすっきり1タグだけを読み込む方式になるっぽい

期せずして風説の流布ポストになっちゃって恥ずかしい限り。そこから10分ほどでいくつかRTされてツイッターの恐ろしさを久しぶりに感じました。

isseik:
期待 RT @hibukuro: マジ?3rd party cookie対応にして、ドメイン跨ぎとか面倒なの一切なしにして欲しい。 RT @ryownet: 近日中にGAの貼り付けコードがまた変わりそうな予感。今度はすっきり1タグだけを読み込む方式になるっぽい
uneidou:
はりかえが簡単だといいけど・・・RT: @isseik: 期待 RT @hibukuro: マジ?3rd party cookie対応にして、ドメイン跨ぎとか面倒なの一切なしにして欲しい。 RT @ryownet: 近日中にGAの貼り付けコードがまた変わりそうな予感。
hibukuro:
まだ同期タグへの移行もままならない世間の対応は。 RT @ryownet: @hibukuro たぶんこんなの:new gweb.analytics.AutoTrack({profile: 'UA-4436568-1'}); ドメイン対応は結局この中に入れる感じになりそうですかね
ysm_mika:
早っ!! メリット多いんでしょうかね... RT @uneidou RT: @isseik RT @hibukuro RT @ryownet: 近日中にGAの貼り付けコードがまた変わりそうな予感。
jordan21th:
RT @hibukuro: まだ同期タグへの移行もままならない世間の対応は。 RT @ryownet: @hibukuro たぶんこんなの:new gweb.analytics.AutoTrack({profile: 'UA-4436568-1'});
naoki_nakajima:
@ryownet 去年の11月頃にはすでにこのautotrack.js自体は存在していたみたいですね。

ちくしょう、いつもブログの更新をツイートしても反応ないのに、こんなときばっかりみんな早えーよ。
しかし、ソースも確認せずzipでよこせとも言わずに情報が伝播する感じ、とても危険だと思います。

googleは何をやりたいのか

去年のコード移行で混乱を招いたせいもあり、プログラムのアップデートはしたいけどユーザの手間(と作業ミスの確率)を減らしたいというジレンマに対し、あえてもう一度だけコード移行を実施して血を流し、これを最後のユーザへの負担にしたいという思いじゃないでしょうか。
だって、上記コードがさしてるのはga.jsの実体じゃなくて、それを読み込むプロキシスクリプトだから。こうすることで全ユーザが同じコードを貼れば、ga.jsはいくらでもアップデートできるし、ga.js以外のリソースをプロキシスクリプトから呼び出すこともできる。google側のメリットは大きそうですね。逆に言うと、GAが何をやるかはユーザにはさらに複雑になる、ということです。

2.javascriptやCSS読み込みの書き方がプロトコル自動調整のイケてる書き方で感動した

こっちは純粋なHTMLソースの話題。

これ、イケてるjavascripterの間では常識だったっぽい(僕も約1年前に知って、業務用コードはこれ使ってる)んですが、javascriptの読み込みでちょっと楽をする裏技です。
上記コードにも表れてるんですが、こんな書き方。それぞれのhrefとsrcの示す先に注目。

<link href="//www.google.com/css/gcs-v2.css" rel="stylesheet">

<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

何がすごいかというと、読み込みリソースのURLが「http://」じゃなくて「//」になってますね。

これは何をやってるのか

これ、ブラウザが現在使っているプロトコルに合わせてリソースをリクエストするよ、という意味です。つまり、現在開いているページがhttpsなら「//」は「https://」と同じ動きをするし、ローカルだったら「file://」と同じ動きをするんです。

もちろん、プロトコルを気にしない仕様なので、httpリソースとhttpsリソースでサブドメインが違う場合は使えません(httpsのリソースは「secure.example.com」にあるときなど)。これをさらっとやってるということは、googleはhttpだけでなくhttpsにも対応、最速化するんだなあ、というのが分かります。

プロトコルレラティブURL

こういう書式を「プロトコルレラティブURL」というそうです。efclさんコメントありがとうございます。CSSでプロトコルレラティブURLを使うと、IEでは2回ダウンロードされるそうです。

IEでCSSに対してこの表記が使われている場合、対象となるCSSファイルが2回ダウンロードされてしまう問題があることが発覚した。ダウンロードされるファイルが2倍に増えるうえ、不要なリクエストやヘッダのやりとりも発生する。
これに対処するには絶対パス、ルートレラティブパス、ロケーションレラティブパス指定を使えばいいとまとめている。
via:IEでCSSが2回ダウンロードされるパターン | エンタープライズ | マイコミジャーナル

つまり、この書式はJSでは非常に有効だけど、CSSの場合は相対パスか絶対パスで正しく書かないとダメとのこと。

Home > 11.他のブログ記事を紹介 > Chrome紹介ページに隠された、イケてるHTMLコーディングテクニックとGAの最新版コードみたいなの

このページの上へ