1. kzk9

    Posted

    kzk9
Changes in title
+Treasure Data JavaScript SDKの使い方
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,97 @@
+[こちらの記事](http://qiita.com/repeatedly/items/df4a3623a78f3e063a34)で紹介されているように、Treasure Dataにデータを入れる際はTreasure Agent (or Fluentd)を使うのが一般的です。
+
+- http://www.treasuredata.com/jp/
+
+しかし、Treasure Dataはその他にもデータを簡単に収集する方法を提供しています。その内の1つが**JavaScript SDK**です。
+
+これはSite CatalystやGoogle Analyticsと同じように、WebサイトにJavaScriptのタグを貼る事で、サイトを訪れたビジターの情報を簡単にトラッキングする事ができます。多くの会社が1x1ピクセルの画像ファイルでトラッキングを行っていますが、それと同等の事が数分で実装できます。
+
+TDのJS SDKを使うSCやGAに対する違いは、簡単に生ログにアクセス出来るところです。具体的には両方生ログにはアクセス出来るのですが、非常に手間がかかったりコストが高かったりします。
+
+それでは実際に使い方を見て行きましょう。
+
+## 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>
+```
+
+これで完了です。コンソールから、データが入っているのを[確認](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関数でトラックする事が出来ます。
+
+```js
+var buttonEvent2 = function () {
+ td.trackEvent('button', {
+ number: 1
+ });
+ // doButtonEvent(1);
+};
+```
+
+# まとめ
+
+Treasure Data JavaScript SDKの使い方を紹介しました。Webサイトの生ログを活かして様々なマーケティング活動やツールにいかす場合には非常に便利です。MailChimp/Exact Target/ExperianなどのEメールマーケティングソフトウェアにフィードバックを行ったり、CRMなどとの連係も可能です。
+
+# 参考情報
+
+以下、公式ドキュメントへのリンクです。
+
+- [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/)でもエンドポイントを変えるだけで同じ手順が使用出来ます。
+
+- [Yahoo!ビッグデータインサイト JavaScript SDK 公式ドキュメント](http://ybi-docs.idcfcloud.com/articles/javascript-sdk)