Treasure Data JavaScript SDKの使い方

[こちらの記事](http://qiita.com/repeatedly/items/df4a3623a78f3e063a34)で紹介されているように、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を使うメリットは、簡単に生ログデータにアクセス出来るところです。もちろん他のサービスでも生ログにはアクセス出来るのですが、非常に手間がかかったりコストが高かったりします。

それでは実際に使い方を見て行きましょう。また、こちらの[ビデオチュートリアル](https://www.youtube.com/watch?v=0bbxUzPKH3E)でも実際の設定方法を見ることができます。

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

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

```js
<!-- 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を使用しています。最新バージョンは[こちら](http://docs.treasuredata.com/articles/javascript-sdk)で確認して下さい。

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

以下のコードを</ body>の前に入れて下さい。APIキーの取得は[こちら](https://console.treasuredata.com/users/current)から行えます。

```js
<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>
```

これで完了です。コンソールから、データが入っているのを[確認](https://console.treasuredata.com/databases)して下さい。デフォルトでは以下の情報がロギングされます。

- 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関数を使用します。

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

# 高度な使い方

Treasure Data JavaScript SDKではその他にも様々な関数を提供しています。例えばアプリケーション内のイベントはtrackEvent関数でトラックする事が出来ます。API一覧は[こちら](https://github.com/treasure-data/td-js-sdk)から。

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

# まとめ

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

# 参考情報

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

- [Treasure Data JavaScript SDK 公式ドキュメント](http://docs.treasuredata.com/articles/javascript-sdk)
- [Treasure Data JavaScript SDK Githubリポジトリ](https://github.com/treasure-data/td-js-sdk)

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

- [Yahoo!ビッグデータインサイト JavaScript SDK 公式ドキュメント](http://ybi-docs.idcfcloud.com/articles/javascript-sdk)

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

- [Intimate Merger のDMPとTreasure Dataを使った簡易プライベートDMP（改訂版）](http://nebula.intimate-merger.info/entry/2014/09/26/152743#.VDzb1dS-gtE)

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

- http://docs.treasuredata.com/categories/mobile-sdks
  - [TreasureData + iOS SDK](http://qiita.com/akito1986/items/6794b75c3b3825cf2c7e)