LoginSignup
34
37

More than 5 years have passed since last update.

Treasure Data JavaScript SDKの使い方

Last updated at Posted at 2014-10-14

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

しかし、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名のみ異なります。

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

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

34
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
37