Help us understand the problem. What is going on with this article?

Treasure Data JavaScript SDKの使い方

More than 5 years have passed since last update.

こちらの記事で紹介されているように、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も提供しています。その話はまた他で。

kzk9
treasuredata
Customer Data Platformの開発・提供をしています。
https://www.treasuredata.com/jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした