Skip to content
Products
/
/
/
Quick Start Guide
Last updated

Website Trackingの開始

Treasure Data JavaScript SDKを使用して、ウェブサイトから顧客データを追跡します。SDKを使用することで、ウェブサイトのアクティビティを追跡するためにサーバー側に何もインストールする必要がありません。

前提条件

制限事項

IPホワイトリストは、JavaScript SDKからのインポートには適用されません。

Webブラウザは頻繁に無効なtimestampを指定します(1970/01/01など)。このため、7日より古いtimestampを持つログ、または現在の日付より3日先のログは無視されます。

Website TrackingのセットアップとTreasure Data JavaScript SDKのインストール

追跡したい各ページのheaderにJavaScript SDKを追加します。

Treasure DataJavaScript SDKはGitHubで入手できます。READMEには、JavaScript SDK APIの説明が含まれています。

  1. TD Consoleを開きます。

  2. Treasure Dataのwrite-only API keyを見つけます。

  3. 追跡したい各ページのheader(<head>)に以下のコードを追加します。

<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=["addRecord","blockEvents","fetchServerCookie","fetchGlobalID","fetchUserSegments","resetUUID","ready","setSignedMode","setAnonymousMode","set","trackEvent","trackPageview","trackClicks","unblockEvents"],s=0;s<r.length;s++){var c=r[s];e[t].prototype[c]=function(t){return function(){return this["_"+t]=this["_"+t]||[],this["_"+t].push(Array.prototype.slice.call(arguments)),this}}(c)}var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.treasuredata.com/sdk/4.1/td.min.js";var o=document.getElementsByTagName("script")[0];o.parentNode.insertBefore(n,o)}}("Treasure",this);
</script>

Cloudへのeventの初期化と送信

database毎に1つの_Treasure_クライアントオブジェクトを作成し、_trackPageview()_関数を呼び出してpageview trackingを初期化する必要があります。

デフォルトでは、インポートされた各レコードは、SDK backendサーバーで_time_ columnが挿入されます。クライアント側のclockを使用する場合は、td.set_で_time columnを設定します。

JavaScript SDKは、Windows10およびMicrosoft Edgeブラウザの"td_os"、"td_os_version"、"td_browser"を解析しません。新しいUser Agentパーサーライブラリはこの組み合わせをサポートするように更新されていますが、受け入れられないパフォーマンスの制限も導入されています。td_user_agentに含まれるローUser Agent文字列を解析するには、Presto TD_PARSE_AGENT UDFを使用することをお勧めします。

_trackPageview()_関数を呼び出すことで、Treasure Data JavaScript SDK Version 3.0のデフォルトログパラメータで詳しく説明されている以下のパラメータが自動的にログに記録されます。

各eventは非同期で実行されます。

  1. 以下のコードスニペットを追加して、地域のendpoint、write-only API key、trackerオブジェクトを取得し、サイトからの情報を保存するTreasure Data databaseを指定します。
<script type="text/javascript">
// Configure an instance for your database
var td = new Treasure({
  host: 'YOUR_REGION.TREASUREDATA.COM',
  writeKey: 'YOUR_WRITE_ONLY_APIKEY_IS_HERE',
  database: 'DATABASE_NAME'
});
           // Enable cross-domain tracking
td.set('$global', 'td_global_id', 'td_global_id');
// Track pageview information to 'pageviews' table
td.trackPageview('pageviews');
</script>
  1. カスタムパラメータを設定する場合は、_td.set()_関数を使用します。
    // track pageview information to 'pageviews' table
    td.set('pageviews', {foo: 'foo', bar: 'bar'});
    td.trackPageview('pageviews');

個別にTracking Eventをオプションで有効にする

さまざまなドメインでのデータプライバシー規制、特にGDPRに準拠するために、Treasure Data Javascript SDKはanonymousモードで動作します。これは、個人を特定できる特定のeventメタデータを収集しないことを意味します。具体的には、デフォルトでanonymousモードでは以下の情報は収集されません:

  • td_ip - requestのIP(server-sideで追加)

  • td_client_id - クライアントのuuid(1st party cookie - Anonymous IDを参照)

  • td_global_id - クライアントのuuid(3rd party cookie - Anonymous IDを参照)

個々のユーザーを追跡し、ユーザーsession内およびsession間でデータを分析し、追跡された行動を実際の個人と関連付けるなどを行う場合は、td_client_idとtd_global_idが必要です。

個人情報を収集するかどうかを判断するには、会社のデータプライバシー責任者および法務顧問とデータ収集ポリシーを確認する必要があります。個人の追跡を有効にすることを決定した場合は、consent management systemと統合して、個々のユーザーのtrackingのオプトインを追跡することをお勧めします。ユーザーのconsentを判断したら、JS SDKのsignedモードを有効にして、eventでこれらの属性をキャプチャできます:

td.setSignedMode()

カスタムEventの追跡

_trackEvent()_関数を使用して、ページビューに加えてカスタムeventを追跡することもできます。次の例では、_button_はeventがログに記録されるtableの名前です。引数としてeventに追加情報とコンテキストを渡すことができます。

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

Web Trackingビデオ

このビデオは、JavaScript SDKを使用したwebsite trackingの手順を示しています。

JavaScript SDKはREST API endpointを使用してデータをインポートし、server-sideのバッファリングのため、databaseへのインポートが反映されるまでに数分かかる場合があります。

  • X-TD-Data-Type: k—Eventコレクターは複数のデータタイプを処理します。'k'はそのうちの1つです。複数のレコードを処理できます。
  • 単一レコード
$ curl -X POST -H 'Content-Type: application/json' -H 'X-TD-Write-Key: your_write_apikey' \
--data-binary '{"name":"komamitsu", "num":1234}' \
https://your_region.treasuredata.com/js/v3/event/your_db/your_table
  • 複数レコード
$ curl -X POST -H 'Content-Type: application/json' -H 'X-TD-Write-Key: your_write_apikey' \
-H 'X-TD-Data-Type: k'
--data-binary '{"your_db.your_table":[{"time":1403147720, "name":"komamitsu", "age":41},{"time":1403147721, "name":"kzk", "age":29}]}' \
https://your_region.treasuredata.com/js/v3/event

前の例を試す際は、time値を現在のUNIX time値に変更してください。7日より古いtimestamp、または現在の日付より3日先のtimestampは無視されます。

Previous page
Next page