# WebサイトでのServer-Side First Party Cookieのtracking

ウェブサイト上のユーザーを識別して追跡するには、server-side first party cookieを使用します。Treasure DataのJavascript SDKを通じてfirst party、server-side cookieを作成して収集できます。

ウェブサイトでユーザーデータを収集するフローは次のとおりです:

1. ユーザーがウェブサイトにアクセスします。Treasure Dataは、ユーザー用のtd_ssc_id cookieが存在するかどうかを確認します。
2. 存在する場合、ウェブサイトにインストールされているTreasure Data SDKを通じてアクティビティが追跡されます
3. 存在せず、consentが許可されている場合、Treasure Data SDKはユーザー用にfirst party、server-side cookieを作成します
4. Treasure Dataはユーザーのconsent responseを記録します。Treasure Data SDKの設定で、ユーザーconsentが保存される場所を指定します。ユーザーのbrowserにconsentを保存することで、ウェブサイトにアクセスするたびにtrackingの許可を求められることがなく、consent recordはウェブサイトのcookieドキュメントで指定されたとおりに永続化されます。
5. ユーザーがtrackingの許可を付与します。webページ上のTreasure Data APIがTreasure Dataに一意のIDをrequestします。
6. Treasure Dataがwebページに一意のIDを送り返します。Server-side cookieは最大2年間永続化するように設定できます。
7. ユーザーのtd_ssc_idはウェブサイトのcookieドキュメントに保存され、Treasure Data SDKで設定されている場合、ユーザーが実行したアクティビティの追跡がCDPアカウントに記録されます。


first party cookieのserver-side trackingを有効にするには、以下のセクションを完了します:

* [前提条件](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/tracking-server-side-first-party-cookies-on-your-website#prerequisites)
* [既知の制限事項](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/tracking-server-side-first-party-cookies-on-your-website#known-limitation)
* [DNSでのNS Recordのセットアップ](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/tracking-server-side-first-party-cookies-on-your-website#setting-up-the-ns-record-in-your-dns)
* [First Party Cookieを収集して保存するためのJS SDKの設定](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/tracking-server-side-first-party-cookies-on-your-website#configuring-the-js-sdk-to-collect-and-store-first-party-cookies)
* [Treasure Data Javascript SDKの概要とインストール](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/tracking-server-side-first-party-cookies-on-your-website#treasure-data-javascript-sdk-overview-and-installation)
* [Server Side Cookieを呼び出すJSコードの埋め込み](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/tracking-server-side-first-party-cookies-on-your-website#embed-the-js-code-to-call-the-server-side-cookie)
* [接続を確立するための既存のJS SDKの変更](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/tracking-server-side-first-party-cookies-on-your-website#modify-your-existing-js-sdk-to-establish-a-connection)
* [Consent Record locationの指定](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/tracking-server-side-first-party-cookies-on-your-website#specifying-the-consent-record-location)


## 前提条件

この機能のセットアップには、HTMLとJavascriptでの設定方法を知っている必要があります。さらに、以下が必要です:

* Treasure Dataの基礎知識
* Treasure Data JavaScript SDKの基礎知識
* プライマリウェブサイト配下のsubdomain(DNS)


Treasure Dataは、2.xバージョンからTreasure Data JavaScript SDK version 3,4を使用したサイトでの新機能や機能の実装を検証することをお勧めします。

## 既知の制限事項

Safari 16.4以降では、server-side cookieは7日間に制限されています。さらに、iOS上の他のbrowserも同じwebkitを使用している場合、同じ制限を受けます。

## DNSでのNS Recordのセットアップ

Treasure Dataのserver-side trackingでは、サーバーがプライマリウェブサイトのsubdomain配下にfirst party cookieを作成する必要があります。Treasure Dataのserver-side cookie serviceを指すNS recordをsubdomainに追加する必要があります。NS recordは、subdomainの名前をTreasure Dataのname serverに向けます。

たとえば:

プライマリウェブサイト: [www.example.com](http://www.example.com/)

subdomain: **ssc**.example.com


```
ssc.example.com.
NS
ns-###.awsdns-##.com.
ns-####.awsdns-##.co.uk.
ns-###.awsdns-##.net.
ns-###.awsdns-##.org.
```

一般的に、ウェブサイト設定の手順に従ってNS recordを追加します。Treasure Dataのカスタマーサクセス担当者が、使用するTreasure Dataサーバーレコードの詳細を提供します。冗長性とDNS lookupの高速化のために複数のレコードを指定することもできます(browserに物理的に最も近いname serverを選択できます)。

## First Party Cookieを収集して保存するためのJS SDKの設定

ウェブサイトサーバー開発者として、TD JS SDKをインストールし、ウェブサイトを訪問する各ユーザー用にTreasure Dataで生成されたIDをfetchする関数呼び出しを設定します。関数呼び出しは基本的にTreasure Dataのserver-side cookieへのAPI requestです。server-side cookieがウェブサイトに返すIDは、エンドユーザーのbrowserに保存されます。

パラメータと関数には以下が含まれます:

* sscDomain: String | (String) => String | null. ウェブサイトのトップレベルdomain。
* sscServer: String | null. Treasure Dataに接続するためにウェブサイトで作成するsubdomain。
* useServerSideCookie: Boolean
* setSignedMode() 関数
* trackPageview() 関数
* set() 関数


## Treasure Data Javascript SDKの概要とインストール

[TD JS SDKクイックスタート](https://api-docs.treasuredata.com/en/sdk/js-sdk/quickstart/)を表示できます。また、プライバシー規制と要件に準拠するのに役立つTD JS SDK関数の説明については、[Treasure DataでのGDPRサポート](/trust/gdpr-support-in-treasure-data)を確認してください。

TD JS SDKのインストールの詳細については、[Website Trackingの開始](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/getting-started-with-website-tracking)を参照してください。手順の一部である個別にTracking Eventを有効にすることは、first-party cookieのtrackingを有効にするための鍵です。

## Server Side Cookieを呼び出すJSコードの埋め込み

cookieを含むサーバーのJSコードは、パラメータとして指定されたsubdomain上にcookieを設定します。各エンドユーザーvisitor用の一意のidは、ユーザーがcookieをクリアしない限り、2年間永続化されます。

ユーザーが後でサイトに再訪問すると、同じユーザーとして認識されます。

Treasure Dataアカウントがwebページからデータをインポートするようにセットアップされていることを確認してください。

以下のコード例は、ウェブサイトで設定するパラメータと関数を示しています:


```html
<html>
  <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=function(t){return function(){return this["_"+t]=this["_"+t]||[],this["_"+t].push(Array.prototype.slice.call(arguments)),this}},s=["collectTags","addRecord","blockEvents","fetchServerCookie","fetchGlobalID","fetchUserSegments","fetchPersonalization","resetUUID","ready","setSignedMode","setAnonymousMode","set","trackEvent","trackPageview","trackClicks","unblockEvents"],c=0;c<s.length;c++){var o=s[c];e[t].prototype[o]=r(o)}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.4/td.min.js";var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(n,i)}}("Treasure",this);
    </script>
  </head>
  <body>
    <script type="text/javascript">
      var td = new Treasure({
        database: "YOUR_DATABASE",
        writeKey: "YOUR_API_KEY",
        host: "us01.records.in.treasuredata.com",
        startInSignedMode: true,
        sscDomain: "YOUR_SSC_DOMAIN", // ex) example.com
        sscServer: "YOUR_SSC_SERVER", // ex) ssc.example.com
        useServerSideCookie: true,
      });

      td.set("$global", "td_global_id", "td_global_id");
      td.fetchServerCookie(successCallback, errorCallback);

      function fireEvents() {
        td.trackPageview("YOUR_TABLE");
      }

      function successCallback(result) {
        // result === Server Side Cookie
        td.set("$global", { td_ssc_id: result });
        fireEvents();
      }

      function errorCallback() {
        // Track events, even if the server-side cookie does not work
        fireEvents();
      }
    </script>
  </body>
</html>
```

## 接続を確立するための既存のJS SDKの変更

ウェブサイト上の既存のJS SDKコーディングを更新し、前のセクションに示されているように、必要なパラメータと関数を追加します。

次に、Treasure Dataで、first-party cookieデータを受信するdatabase tableにtd_ssc_id用のcolumnが含まれていることを確認します。eventが既存のtableに記録される場合、columnが必要です:

![](/assets/idsontdblur.4193c29e7243be6ef222ea08cb04efda1220e118a4059cbe95c289ea529ede45.ad50cbca.png)

## Consent Record locationの指定

通常、consentはdocument.cookieなどのclient-side cookieとしてbrowserに保存されます。Treasure Dataは、consentの新しいlocationオプションを提供します。locationはユーザーのlocal storageにあります。

JS SDKで`storeConsentByLocalStorage: true.`を指定します。

エンドユーザーがconsentを受け入れると、consentはエンドユーザーのlocal storageに保存されます。

![](/assets/consentrecord.78f1d717c3034c612f4b731573833d1e14009b6f3ab150c8dc8f3bceb354969a.ad50cbca.png)