Skip to content
Complete CDP/
/
/
WebサイトでのServer-Side First...
Last updated

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 APIがTreasure Dataに一意のIDをrequestします。

  6. Treasure Dataがwebページに一意のIDを送り返します。Server-side cookieは最大2年間永続化するように設定できますが、ChromeとEdgeでは設定値に関わらず実際の保持期間が最大400日にクランプされます — 詳細はTreasure AIとCookie Trackingについてを参照してください。

  7. ユーザーのtd_ssc_idはウェブサイトのcookieドキュメントに保存され、Treasure Data SDKで設定されている場合、ユーザーが実行したアクティビティの追跡がCDPアカウントに記録されます。

前提条件

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

  • Treasure Dataの基礎知識

  • Treasure Data JavaScript SDKの基礎知識

  • プライマリウェブサイト配下のsubdomain(DNS)

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

既知の制限事項

Safariは、サードパーティのname serverに委任されたsubdomainに対するCNAME cloakingを、Safari 14（2020年11月）以降検出しており、Safari 16.4（2023年4月）ではIPアドレスcloakingの検出も追加しました — これはまさにこの機能が依拠しているパターンです。WebKitのヒューリスティックがsubdomainをこのように分類すると、td_ssc_id cookieは上記で説明した最大2年間の有効期間ではなく、7日間にキャップされます。iOSでは他のbrowser(Chrome、Firefoxなど)もSafariのWebKitエンジンを使用することが義務付けられているため、この制限はWebKitベースのすべてのブラウザに影響します。一方、iOS以外のChromeとEdgeではtd_ssc_idはcloaking検出の対象にはなりませんが、設定されている2年間の有効期限に関わらず、更新されたCookie仕様（RFC 6265bis）により最大400日にクランプされます。Chrome、Edge、Firefoxとの比較については、Treasure AIとCookie Trackingについてを参照してください。

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

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の概要とインストール

Treasure Data JavaScript SDKクイックスタートを表示できます。また、プライバシー規制と要件に準拠するのに役立つJavaScript SDK関数の説明については、Treasure AIでのGDPRサポートを確認してください。

JavaScript SDKのインストールの詳細については、Website Trackingの開始を参照してください。手順の一部である個別にTracking Eventを有効にすることは、first-party cookieのtrackingを有効にするための鍵です。

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

cookieを含むサーバーのJSコードは、パラメータとして指定されたsubdomain上にcookieを設定します。各エンドユーザーvisitor用の一意のidは、ユーザーがcookieをクリアしない限り2年間永続化するよう設定されていますが、ChromeとEdgeではこの設定値に関わらず実際の保持期間が最大400日にクランプされます（既知の制限事項を参照）。

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

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

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

<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が必要です:

td_ssc_idカラムがserver-side cookieの値を記録するために追加されたデータベーステーブルの設定

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

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

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

ブラウザの開発者ツールで確認したエンドユーザーのlocal storageに保存されたconsentレコード

Cookieを使用したユーザー識別

3rd Party CookieをサポートするBrowserとTD JavaScript SDK