# Website Trackingの開始 Treasure Data JavaScript SDKを使用して、ウェブサイトから顧客データを追跡します。SDKを使用することで、ウェブサイトのアクティビティを追跡するためにサーバー側に何もインストールする必要がありません。 * [前提条件](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/getting-started-with-website-tracking#prerequisites) * [制限事項](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/getting-started-with-website-tracking#limitations) * [Website TrackingのセットアップとTreasure Data JavaScript SDKのインストール](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/getting-started-with-website-tracking#setting-up-website-tracking-and-installing-the-treasure-data-javascript-sdk) * [Web Trackingビデオ](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/getting-started-with-website-tracking#web-tracking-video) ## 前提条件 * JavaScriptとHTMLの基礎知識 * Treasure Dataの基礎知識 * [リージョン固有のサイトとendpoint](https://api-docs.treasuredata.com/en/overview/aboutendpoints/) ## 制限事項 IPホワイトリストは、JavaScript SDKからのインポートには適用されません。 Webブラウザは頻繁に無効なtimestampを指定します(1970/01/01など)。このため、7日より古いtimestampを持つログ、または現在の日付より3日先のログは無視されます。 ## Website TrackingのセットアップとTreasure Data JavaScript SDKのインストール追跡したい各ページのheaderにJavaScript SDKを追加します。 [Treasure DataJavaScript SDKはGitHubで入手できます](https://github.com/treasure-data/td-js-sdk)。READMEには、JavaScript SDK APIの説明が含まれています。 1. TD Consoleを開きます。 2. Treasure Dataの[write-only API key](/products/my-settings/getting-your-api-keys)を見つけます。 3. 追跡したい各ページのheader(``)に以下のコードを追加します。 ```html ``` ## 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](https://api-docs.treasuredata.com/en/tools/presto/api/#td_parse_agent) UDFを使用することをお勧めします。 _trackPageview()_関数を呼び出すことで、[Treasure Data JavaScript SDK Version 3.0のデフォルトログパラメータ](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/treasure-data-javascript-sdk-version-3-0-default-log-parameters)で詳しく説明されている以下のパラメータが自動的にログに記録されます。各eventは非同期で実行されます。 1. 以下のコードスニペットを追加して、地域のendpoint、write-only API key、trackerオブジェクトを取得し、サイトからの情報を保存するTreasure Data databaseを指定します。 ```html ``` 1. カスタムパラメータを設定する場合は、_td.set()_関数を使用します。 ```javascript // 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](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/anonymous-visitor-ids-with-javascript-sdk)を参照) * td_global_id - クライアントのuuid(3rd party cookie - [Anonymous ID](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/anonymous-visitor-ids-with-javascript-sdk)を参照) 個々のユーザーを追跡し、ユーザーsession内およびsession間でデータを分析し、追跡された行動を実際の個人と関連付けるなどを行う場合は、td_client_idとtd_global_idが必要です。個人情報を収集するかどうかを判断するには、会社のデータプライバシー責任者および法務顧問とデータ収集ポリシーを確認する必要があります。個人の追跡を有効にすることを決定した場合は、consent management systemと統合して、個々のユーザーのtrackingのオプトインを追跡することをお勧めします。ユーザーのconsentを判断したら、JS SDKの**signedモード**を有効にして、eventでこれらの属性をキャプチャできます: ```javascript td.setSignedMode() ``` ## カスタムEventの追跡 _trackEvent()_関数を使用して、ページビューに加えてカスタムeventを追跡することもできます。次の例では、_button_はeventがログに記録されるtableの名前です。引数としてeventに追加情報とコンテキストを渡すことができます。 ```javascript var buttonEvent2 = function () { td.trackEvent('button', { number: 1 }); // doButtonEvent(1); }; ``` ## Web Trackingビデオこのビデオは、JavaScript SDKを使用したwebsite trackingの手順を示しています。 JavaScript SDKは[REST API endpoint](https://api-docs.treasuredata.com/en/overview/aboutendpoints/)を使用してデータをインポートし、server-sideのバッファリングのため、databaseへのインポートが反映されるまでに数分かかる場合があります。 * X-TD-Data-Type: k—Eventコレクターは複数のデータタイプを処理します。'k'はそのうちの1つです。複数のレコードを処理できます。 - 単一レコード ```bash $ 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 ``` - 複数レコード ```bash $ 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は無視されます。