gas.jsというGoogle Analytics用スクリプトを書いた

ダウンロード・ソースコード

Github: ahomu/GAS

MITライセンスです。色々とご自由に。

より身近なイベントトラッキングを提供

メインフィーチャとして、gas.jsはイベントトラッキングをより身近にしてくれます。

従来のイベントトラッキング

Event Tracking Guide - Google Analytics — Google Developersより

<a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First Birthday']);">Play</a>

onclick属性とかつらい！不思議なスペルが目に痛い！！

よくよく見ればVideoをPlayして、それがBaby's First Birthdayなのは、なんとなく分かるけど_trackEventメソッドの引数の順序なんですよこれ。やっぱり色々つらい。

gas.jsのイベントトラッキング

そこで、gas.jsを入れるとこうなります。

<a href="#" data-event="Videos" data-action="Play" data-label="Baby's First Birthday" >Play</a>

属性でスッキリ書ける！なんかHTMLっぽい！！！

onclick属性は書きませんし、引数の順序だって覚えなくても大丈夫です。順不同で必要な分の情報を書いておけば、それでバッチリOK。

これはVideoに関するイベントで、Playというアクション、そしてラベルはBaby's First Birthdayだ〜〜〜。という具合です。

オプションで属性名は変更できるので、名前空間をつけて衝突回避することもちゃんとできます。

つかいかた

どえりゃー簡単です。

基本

通常はこれだけでOK

GA公式のスニペットの代わりに、HEAD要素の一番下あたりで下記のように読み込めばOK。

<script src="js/gas.min.js"></script>
<script>new GAS('UA-xxxxxxx-x');</script>

for 玄人

玄人の方々には、下記のようなオプションもご用意しております。

<script>
new GAS('UA-xxxxxxx-x', {
    // 初期化と同時に表示中ページのページビューをトラックする
    trackCurrentPv: true,

    // 外部リンクの自動でイベントトラックする
    trackOutbound: true,

    // データ属性の名前空間に配慮するときはこのへんを書き換えます
    attrEvent        : 'data-event',
    attrAction       : 'data-action',
    attrLabel        : 'data-label',

    // 初期化時のtrackPageviewの前に入れておきたいキュー
    // 普段 _gaq.pushを書き連ねている方にお馴染み
    preQueues             : [
        ['_addOrganic', 'excite', 'search'],
        ['_addOrganic', 'hatena', 'word'],
        ['_addOrganic', 'naver.jp', 'q', true]
    ]
});
</script>

その他の機能・特徴

全体的には、なるべく最小限で収まるようにしているため非常に小規模です。

ライブラリ非依存かつ、2.0KBの小粒ファイル

minify後のファイルサイズを2.0KBと小さく収めてあるので、他のスクリプトに混入させてもサイズ面で気になることは（そんなに）ありません。また、jQueryなど特定のライブラリに依存していないので、どこでも利用できます。

今後、3.0KBぐらいまでは行く気もしますが…。

外部リンクのイベントトラッキング

リンク先のドメインが、表示中ページのドメインと異なる場合、Outbound Linkとして自動でイベントトラッキングをします。

Category

gas:Outbound

Action

リンク先URL

Label

リンク先URLのホスト

初期化時に、trackOutboundをfalseにすることで無効になります。

ページビュートラッキング

かつてイベントがコンバージョンに設定できなかったような頃の名残で、ページビューについても属性指定でトラッキングできるようにしています。

<a href="donwload.zip" data-pv="/siryou_download">資料ダウンロード</a>

スクリプト制御用のAPI

（玄人向け）

clickイベントのバブリングをdocumentで待ち構えているので、attachEvent的にreturn falseとかされるとIEで辿り着けなくなってしまいます。

安易にA要素に機能的イベント貼って、jQueryでreturn falseしちゃうぜゲヘヘ的UIとは相性がよくありません。そんなときは、下記のメソッドをスクリプトから叩いてあげてください。

var gas = new GAS('UA-xxxxxxx-xx');

...

// track as a pageview
gas.trackPageview('/your_optional_path.html');

// track as an event
gas.trackEvent('MusicPlayer', 'start', 'hogehoge');

とはいえ、IE用のソリューションは何かしら用意する予定です（自分が困るから）。classで目印つけて対象の要素に直接attachEventし直すしかないですかね〜。このへんは、onclick属性のほうが合理的かも...。

おねがい

いろいろおしえてください

1. こういう風のほうがいいよー、ってあったらおしえてください
2. 同種のスクリプトがすでにあるときもおしえてください
3. issueとかpull requestでもだいじょうぶです

あんまり多機能にする気はないのですが、GAのノウハウとか不勉強な状態なのでなにとぞ！

余談

週末に本格的に書いてみて、週明けの計測結果みてからの公開でした。

Google AnalyticsでデキることをHTMLに落とし込むことで、何かしら広がる可能性もあるんじゃないかと思って書いてみました。実際に自分の手元でも、コレでdata-event="foo" data-action="bar"でテキトーに計測してみようと思います。

スクリプトを書いたり入れたりすることが多い身としては、ページビューに対してアコーディオンやタブのクリック率ってどんなんだろ？みたいな現実も知りたい次第。

---