A4T での ID サービスの使用と Target のサーバーサイド実装

Last update: Wed Jul 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

開発者
ユーザー
管理者
リーダー

これらの手順は、Target、Analytics、ID サービスのサーバーサイドとクライアントサイドの実装が混在している A4T ユーザー向けのものです。 NodeJS または Rhino 環境で ID サービスを実行する必要があるユーザーも、この情報を確認する必要があります。 ID サービスのこのインスタンスでは、Node Package Manager （NPM）からダウンロードしてインストールできる短縮バージョンの VisitorAPI.js コードライブラリを使用します。インストール手順およびその他の設定要件については、この節を参照してください。

はじめに

A4T （および他の顧客）は、以下が必要な場合に、このバージョンの ID サービスを使用できます。

web ページコンテンツをサーバー上でレンダリングして最終表示用にブラウザーに渡す。
サーバー側 Target 呼び出しをおこなう。
Analytics に対するクライアント側（ブラウザー内）呼び出しをおこなう。
個別の Target および Analytics ID を同期して、あるソリューションで見られた訪問者が他のソリューションで見られた人物と同じかどうかを判定する。

コードのダウンロードと提供されたインターフェイス

ID サービスの NPM リポジトリを参照して、サーバーサイドのコードパッケージをダウンロードし、現在のビルドに含まれているインターフェイスを確認します。

ワークフロー

以下の図と節では、サーバーサイド実装プロセスの各手順で何が行われ、何を設定する必要があるかを説明します。

手順 1：リクエストページ

web ページを読み込む HTTP リクエストを訪問者が実行すると、サーバーサイドアクティビティが開始します。このステップで、サーバーはこのリクエストを受け取り、AMCV cookie をチェックします。 AMCV cookie には、訪問者の Experience Cloud ID（MID）が含まれます。

手順 2：ID サービスペイロードの生成

次に、サーバー側 payload request を ID サービスにする必要があります。ペイロードリクエストは以下を行います。

AMCV cookie を ID サービスに渡す。
以下に説明する後続の手順で Target と Analytics で必要になるデータをリクエストします。

NOTE

このメソッドは、Target から 1 つの mbox をリクエストします。1 回の呼び出しで複数の mbox をリクエストする必要がある場合は、generateBatchPayload を参照してください。

ペイロードリクエストは、以下のコードサンプルのようになります。このコードサンプルでは、visitor.setCustomerIDs 関数はオプションです。詳しくは、顧客 ID および認証の状態を参照してください。

//Import the ID service server package
var Visitor = require("@adobe-mcid/visitor-js-server");

//Pass in your Organization ID to instantiate Visitor
var visitor = new Visitor("Insert Experience Cloud ID here");

//
<i>(Optional)</i> Set a custom customer ID
visitor.setCustomerIDs({
     userid:{
          id:"1234",
          authState: Visitor.AuthState.UNKNOWN //AuthState is a static property of the Visitor class
     }
});

//Parse the visitor's HTTP request for the AMCV cookie
var cookies = cookie.parse(req.headers.cookie || "");
var cookieName = visitor.getCookieName(); // Visitor API that returns the cookie name.
var amcvCookie = cookies[cookieName];

//Generate the payload request pass your mbox name and the AMCV cookie if present
var visitorPayload = visitor.generatePayload({
     mboxName: "bottom-banner-mbox",
     amcvCookie: amcvCookie
});

ID サービスは、以下の例のように、JSON オブジェクトでペイロードを返します。ペイロードデータは、Target で必要です。

{
    "marketingCloudVisitorId": "02111696918527575543455026275721941645",
    "mboxParameters": {
        "mboxAAMB": "abcd1234",
        "mboxMCGLH": "9",
        "mboxMCSDID": "56BE026543F7E211-1CC51BCAAE88F0D2",
        "vst.userid.id": "1234567890",
        "vst.userid.authState": 0
    }
}

訪問者が AMCV Cookie を持っていない場合、ペイロードは、これらのキーと値のペアを省略します。

marketingCloudvisitorId
mboxAAMB
mboxMCGLH

手順 3：Target 呼び出しへのペイロードの追加

サーバーが ID サービスからペイロードデータを受け取ったら、追加のコードをインスタンス化して、Target に渡したデータと結合する必要があります。Target に渡された最終的な JSON オブジェクトは、以下のようになります。

{
"mbox" : "target-global-mbox",
"marketingCloudVisitorId":"02111696918527575543455026275721941645",
"requestLocation" : {
     "pageURL" : "http://www.domain.com/test/demo.html",
     "host" : "localhost:3000"
     },
"mboxParameters" : {
     "mboxAAMB" : "abcd1234",
     "mboxMCGLH" : "9",
     "mboxMCSDID": "56BE026543F7E211-1CC51BCAAE88F0D2",
     "vst.userid.id": "1234567890",
     "vst.userid.authState": 0,
     }
}

手順 4：ID サービスのサーバー状態の取得

サーバー状態データには、サーバー上で行われた作業に関する情報が含まれています。クライアントサイドの ID サービスコードには、この情報が必要です。 Dynamic Tag Manager（DTM）を使用して ID サービスを実装したお客様は、このツールを使用してサーバー状態データを渡すように DTM を設定できます。非標準のプロセスで ID サービスを設定した場合、独自のコードを使用してサーバー状態を返す必要があります。クライアント側 ID サービスおよび Analytics コードは、ページが読み込まれる際に Adobe に状態データを渡します。

DTM を使用したサーバー状態の取得

DTM を使用して ID サービスを実装した場合、ページにコードを追加して、DTM 設定に名前と値のペアを指定する必要があります。

ページコード

このコードを HTML ページの <head> タグに追加します。

//Get server state
var serverState = visitor.getState();

Response.send("
...
<head>
     <script>
          //Add 'serverState' as a stringified JSON global variable.
          "var serverState = "+ JSON.stringify(serverState) +";
     </script>
     <script src = "DTM script (satellite JS)">
     </script>
</head>
...

DTM 設定

これらを名前と値のペアとして ID サービスインスタンスの 一般／設定 セクションに追加します。

名前： serverState
値：%serverState%

IMPORTANT
値の名前は、ページコードの serverState に設定した変数名に一致する必要があります。

設定は次のようになります。

DTM を使用しないサーバー状態の取得

ID サービスの非標準の実装をおこなった場合、このコードを設定して、リクエストされたページのアセンブル中に、サーバー上で実行する必要があります。

//Get server state
var serverState = visitor.getState();

Response.send("
...
<head>
     <script src="VisitorAPI.js"></script>
     <script>
          var visitor = Visitor.getInstance(orgID, {
          serverState: serverState
          ...
     </script>
</head>
...

手順 5：ページを提供して Experience Cloud データを返す

この時点で、Web サーバーは訪問者のブラウザーにページコンテンツを送信します。これ以降、（サーバーではなく）ブラウザーが残りのすべての ID サービスおよび Analytics の呼び出しをおこないます。例えば、ブラウザーでは次のようになります。

ID サービスがサーバーから状態データを受け取り、SDID を AppMeasurement に渡します。
AppMeasurement が、SDID を含むページヒットに関するデータを Analytics に送信します。
Analytics および Target は、この訪問者の SDID を比較します。同一の SDID の場合、Target および Analytics は、サーバー側呼び出しとクライアント側呼び出しを共に結合します。この時点で、両方のソリューションは、この訪問者を同じ人物として認識します。

recommendation-more-help