こちらの記事で紹介されているように、Treasure Dataにデータを入れる際はTreasure Agent (or Fluentd)を使うのが一般的です。

http://www.treasuredata.com/jp/

しかし、Treasure Dataはその他にもデータを簡単に収集する方法を色々と提供しています。その内の1つがTreasure Data JavaScript SDKです。

これはSite CatalystやGoogle Analyticsと同じように、WebサイトにJavaScriptのタグを貼る事で、サイトを訪れたビジターの情報を簡単にトラッキングする事ができます。

多くのWebサービスで1x1ピクセルの画像ファイルを使用したユーザートラッキングを行っていますが、それと同等の事が数分で実装できます。サーバーを用意する必要も、面倒を見る必要も有りません、受け取り側はTreasure Dataが全て面倒を見ます。

Treasure DataのJavaScript SDKを使うメリットは、簡単に生ログデータにアクセス出来るところです。もちろん他のサービスでも生ログにはアクセス出来るのですが、非常に手間がかかったりコストが高かったりします。

それでは実際に使い方を見て行きましょう。また、こちらのビデオチュートリアルでも実際の設定方法を見ることができます。

Step 1: JavaScript SDK のインストール

以下のスクリプトを < head > head> タグの間に入れてください。

<!-- Treasure Data -->
<script type="text/javascript">
!function(t,e){if(void 0===e[t]){e[t]=function(){e[t].clients.push(this),this._init=[Array.prototype.slice.call(arguments)]},e[t].clients=[];for(var r=function(t){return function(){return this["_"+t]=this["_"+t]||[],this["_"+t].push(Array.prototype.slice.call(arguments)),this}},s=["addRecord","set","trackEvent","trackPageview","ready"],n=0;n<s.length;n++){var i=s[n];e[t].prototype[i]=r(i)}var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"===document.location.protocol?"https:":"http:")+"//s3.amazonaws.com/td-cdn/sdk/td-1.2.0.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(a,c)}}("Treasure",this);
</script>

＊こちらは2014年10月14日付け最新バージョンのv1.2.0を使用しています。最新バージョンはこちらで確認して下さい。

Step 2: 初期化とページビューのトラッキング

以下のコードを body>の前に入れて下さい。APIキーの取得はこちらから行えます。

<script type="text/javascript">
  // Configure an instance for your database
  var td = new Treasure({
    host: 'in.treasuredata.com',
    writeKey: 'YOUR_WRITE_ONLY_APIKEY_IS_HERE',
    database: 'test_database'
  });
  // track pageview information to 'pageviews' table
  td.trackPageview('pageviews');
</script>

これで完了です。コンソールから、データが入っているのを確認して下さい。デフォルトでは以下の情報がロギングされます。

td_version – td-js-sdk’s version
td_client_id – client’s uuid
td_charset – character set
td_language – browser language
td_color – screen color depth
td_screen – screen resolution
td_viewport – viewport size
td_title – document title
td_url – document url
td_host – document host
td_path – document pathname
td_referrer – document referrer
td_ip – request IP (server)
td_browser – client browser (server)
td_browser_version – client browser version (server)
td_os – client operating system (server)
td_os_version – client operating system version (server)

デフォルトのフィールドに追加して付加情報(ユーザーID等)をつける場合は、以下のようにset関数を使用します。

// track pageview information to 'pageviews' table
td.set('pageviews', {foo: 'foo', bar: 'bar'});
td.trackPageview('pageviews');

高度な使い方

Treasure Data JavaScript SDKではその他にも様々な関数を提供しています。例えばアプリケーション内のイベントはtrackEvent関数でトラックする事が出来ます。API一覧はこちらから。

var buttonEvent2 = function () {
  td.trackEvent('button', {
    number: 1
  });
  // doButtonEvent(1);
};

まとめ

Treasure Data JavaScript SDKの使い方を紹介しました。Webサイトの生ログを活かして様々なマーケティング活動やツールにいかす場合には非常に便利です。O2Oシステムの構築、MailChimp/Exact Target/ExperianなどのEメールマーケティングソフトウェアにフィードバックを行ったり、CRM、DMPなどとの連係も可能です。

参考情報

以下、付随情報のリンクです。

IDCFクラウド上で提供しているYahoo!ビッグデータインサイトでもエンドポイントを変えるだけで同じ手順が使用出来ます。初期化時のhost名のみ異なります。

Yahoo!ビッグデータインサイト JavaScript SDK 公式ドキュメント

DMPとの連係事例もあります。

Intimate Merger のDMPとTreasure Dataを使った簡易プライベートDMP（改訂版）

また、Treasure DataではiOS / Android / Unity向けのSDKも提供しています。その話はまた他で。

http://docs.treasuredata.com/categories/mobile-sdks
- TreasureData + iOS SDK