# TD JavaScript SDKを使用したWeb Trackingのチュートリアル
TD JavaScript SDK(TD JS SDK)には、Treasure Dataを通じてウェブサイトの行動を追跡できるsite tagが含まれています。TD JS SDKを使用する利点は、収集する情報が、audience scoring、identity resolution、その他を含む、CDPとしてのTreasure Dataを際立たせる多くのツールに力を与えることです。
Treasure Data JS SDKが実行されるたびに、指定されたtableに新しいレコードが作成され、収集するように指示されたすべてのattributeおよびbehavior dataが追加されます。このデータには、指定した値と、Identity Resolutionおよび個人による行動の追跡に使用できるTreasure Dataで生成されたClientおよびGlobal IDを含めることができます。
このチュートリアルでは、TD JavaScript SDKを使用してウェブサイトの行動を追跡するプロセスについて説明します。
Treasure Dataは、Treasure Data JavaScript SDK version 3を使用したサイトでの新機能や機能の実装を推奨しています。cookieの管理方法が異なります。これらの記事のほとんどを参照する際は、提案されたeventコレクターとTreasure Data JavaScript SDK version 3の呼び出しをソリューション内で定義する必要があることに注意してください。
* [前提条件](#prerequisites)
* [テストウェブサイトのセットアップまたは既存のウェブサイトの使用](#set-up-test-website-or-use-your-existing-website)
* [テストウェブサイトのセットアップ](#setting-up-test-website)
* [既存のウェブサイトの使用](#use-your-existing-website)
* [新しいDatabaseとTableの作成](#create-new-database-and-table)
* [Treasure Data Write-only API Keyの取得](#get-treasure-data-write-only-api-key)
* [ウェブサイトへのDirect Tagの実装](#implement-direct-tag-on-website)
* [TD JavaScript SDKの追加](#add-the-td-javascript-sdk)
* [API Write-only KeyとTreasure Database情報の追加](#add-the-api-write-only-key-and-treasure-data-database-information)
* [Direct Tagのテスト](#testing-the-direct-tag)
* [Treasure コンソールでの結果の確認](#check-results-on-td-console)
* [td_idの追加](#adding-td_ids)
## 前提条件
* [Website Trackingの開始](/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/quickstart)を確認してください
### テストウェブサイトのセットアップまたは既存のウェブサイトの使用
[squarespace.com](http://squarespace.com)を使用してテストウェブサイトをセットアップするか、既存のウェブサイトを使用できます。
#### テストウェブサイトのセットアップ
1. [squarespace.com](http://squarespace.com/)に移動し、右上隅の**Get Started**を選択します。
2. templatesにスキップして、希望する古いtemplateを選択します。
3. Googleログインを使用してアカウントを作成します。このチュートリアルを実行するために14日間のトライアルを使用できます。
4. 左側のナビゲーションで**Settings** > **Advanced** > **Code Inject**のパスに従います。
#### 既存のウェブサイトの使用
既存のウェブサイトを使用し、headerに呼び出しを追加することで、TD JS SDKをテストすることもできます。TD JS SDKの追加の詳細は、JavaScriptコードをラップするHTML tag `
```
### API Write-only KeyとTreasure Database情報の追加
1. TD JS SDKの後のheader、またはbodyやfooterに以下のコードスニペットを追加して、ページビューデータを送信するTreasure Data databaseを指定します。
2. 表にリストされている``プレースホルダーを置き換えて、write-only API keyを含め、trackerオブジェクトを取得し、サイトからの情報を保存するTreasure Data databaseを指定します。
```html
```
| **プレースホルダー** | **例** |
| --- | --- |
| | xxxx/xxxxxxxxxxxxxxxxxxxxx[API keyの取得方法](/products/my-settings/getting-your-api-keys)を学びます。 |
| | jasonsmith_website_tracking |
| | pageviews_jasonsmith |
# Direct Tagのテスト
1. SquareSpaceの左側パネルで**Settings** > **Availability**に移動し、覚えやすいパスワードでサイトを表示可能にします。
2. ウェブサイトのベースURLをコピーします。
1. ChromeブラウザでIncognitoウィンドウを新しく開き、URLを貼り付けてサイトにアクセスします。
2. サイトがパスワードを求めます。パスワードを入力する前に、右上の**More Options**メニューを選択します。
5. **More Tools** > [Developer Tools](https://developers.google.com/web/tools/chrome-devtools/)に移動します。
1. **Network**を選択します。
ウェブサイトとbrowser間の通信で起こっていることすべてをリアルタイムで確認できます。
2. ウェブサイトのパスワードを入力します。
consoleですべての画像ファイルおよび他の要素がロードされるのが表示されます。
3. すべてのtagに'td'が含まれているため、'td'を検索します。
1. サイトの他のページに移動して、tagがそこにも表示されるかどうかを確認します。
### Treasure コンソールでの結果の確認
1. **Treasure コンソール**に移動します。
2. **Data Workbench** > **Databases**に移動します。
1. 作成した`_website_tracking` databaseを検索して選択します。
2. 作成した`pageviews_` tableを選択します。
3. tableでtracking結果を確認できます。
# td_idの追加
次のステップは、個別にtracking eventを有効にすることです。さまざまなドメインでのデータプライバシー規制、特にGDPRに準拠するために、TD JS SDKは**anonymousモード**で動作します。これは、td_client_idやtd_global_idなど、個人を特定できる特定のeventメタデータを収集しないことを意味します。
個々のユーザーを追跡し、ユーザーsession内およびsession間でデータを分析し、追跡された行動を実際の個人と関連付けるなどを行う場合は、td_client_idとtd_global_idが必要です。
1. SquareSpaceに戻ります。
2. **Settings** > **Advanced** > **Code Injection**に移動するか、HTMLファイル内のJavaScriptコードをラップするHTML tag < script>を挿入するウェブサイトに移動します。
3. この例に示すように、既存のコードに以下のコマンドを挿入します。
```javascript
td.setSignedMode()
```
1. データが収集される前にIDが設定されるように、td.trackPageviewの前への配置が重要です。
JSで行の先頭に`'//'`を使用すると、注釈を追加できます。これは、後で解読できるようにJSコードにラベルを付けるのに重要です。