Web SDKとEdge Network API を使用したハイブリッドパーソナライゼーション

概要 overview

ハイブリッドパーソナライゼーションでは、Edge Network API を使用してパーソナライゼーションコンテンツをサーバーサイドで取得し、Web SDK を使用してクライアント側でレンダリングするプロセスについて説明します。

ハイブリッドパーソナライゼーションを、Adobe Target、Adobe Journey Optimizer、Offer Decisioningなどのパーソナライゼーションソリューションと共に使用できますが、違いは、Edge Network API ペイロードの内容です。

前提条件 prerequisites

Web プロパティにハイブリッドパーソナライゼーションを実装する前に、次の条件を満たしていることを確認してください。

フロー図 flow-diagram

次のフロー図は、ハイブリッドパーソナライゼーションを配信するための実行ステップの順序を示しています。

Cookie cookies

Cookie は、ユーザー ID とクラスター情報を保持するために使用されます。ハイブリッド実装を使用する場合、web アプリケーションサーバーは、リクエストのライフサイクル中にこれらの Cookie の保存と送信を処理します。

リクエストの配置 request-placement

提案を取得し、表示通知を送信するには、Edge Network API リクエストが必要です。 ハイブリッド実装を使用する場合、アプリケーションサーバーはこれらのリクエストをEdge Network API に対して行います。

Edge Network地域のホストの設置 regional-host

Edge Network地域ホストを確立するには、まず kndctr_<orgId>_AdobeOrg_cluster cookie から場所のヒントを読み取ります。この cookie には、次の値を指定できます。

例：kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_cluster: va6

Edge Network地域ホストは、<location_hint>.server.adobedc.net の形式を使用し、次の値を持つことができます。

これらの専用ホストを使用すると、リクエストはユーザーが以前に訪問したのと同じEdge Networkの場所にリダイレクトされ、ユーザーデータが存在するので、システムは最適なエクスペリエンスを提供できます。

場所のヒント（cookie など）がない場合は、デフォルトのホスト server.adobedc.net を使用します。

Analytics への影響 analytics

ハイブリッドパーソナライゼーションを実装する場合、Analytics でページヒットが複数回カウントされないように、特に注意する必要があります。

Analytics 用にデータストリームを設定すると、ページヒットが取り込まれるように、イベントが自動転送されます。

この実装のサンプルでは、次の 2 つの異なるデータストリームを使用しています。

このように、サーバーサイドのリクエストは Analytics イベントを登録しませんが、クライアントサイドのリクエストでは登録します。 これにより、Analytics リクエストが正確にカウントされます。

サーバーサイドリクエストの作成 server-side-request

以下のサンプルリクエストでは、アプリケーションサーバーがパーソナライゼーションコンテンツを取得するために使用できるEdge Network API リクエストを示しています。

API 形式

POST /ee/v2/interact

リクエスト request

curl -X POST "https://edge.adobedc.net/ee/v2/interact?dataStreamId={DATASTREAM_ID}"
-H "Content-Type: text/plain"
-d '{
   "event":{
      "xdm":{
         "web":{
            "webPageDetails":{
               "URL":"http://localhost/"
            },
            "webReferrer":{
               "URL":""
            }
         },
         "identityMap":{
            "FPID":[
               {
                  "id":"xyz",
                  "authenticatedState":"ambiguous",
                  "primary":true
               }
            ]
         },
         "timestamp":"2022-06-23T22:21:00.878Z"
      },
      "data":{

      }
   },
   "query":{
      "identity":{
         "fetch":[
            "ECID"
         ]
      },
      "personalization":{
         "schemas":[
            "https://ns.adobe.com/personalization/default-content-item",
            "https://ns.adobe.com/personalization/html-content-item",
            "https://ns.adobe.com/personalization/json-content-item",
            "https://ns.adobe.com/personalization/redirect-item",
            "https://ns.adobe.com/personalization/dom-action"
         ],
         "decisionScopes":[
            "__view__",
            "sample-json-offer"
         ]
      }
   },
   "meta":{
      "state":{
         "domain":"localhost",
         "cookiesEnabled":true,
         "entries": [{
           "key": "kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_identity",
           "value":"CiY0NzE0NzkwMTUyMzYzMzI4NDAxMjc3NDcwNzA2NTcxMjI3OTI1NVIRCJ_S-uCRMRABGAEqBElSTDHwAZ_S-uCRMQ=="
         }, {
           "key": "kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_consent",
           "value": "general=in"
         }, {
            "key": "kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_cluster",
            "value": "va6"
         }]
      }
   }
}'

プロキシヘッダー proxy-headers

リクエストを正しく処理するには、次のヘッダーが必要です。

実際のクライアント情報を指すように、これらを正しく設定してください。 例えば、X-Forwarded-For ヘッダーには、適切な位置情報を取得するためのクライアント IP を含める必要があります。

User-Agent ヘッダー user-agent-headers

次の user-agent ヘッダーを使用して、リクエストを正しく処理します。

デフォルト

低エントロピー（必須）:

高エントロピー（オプション）:

リクエストは、Edge Network API 仕様に示されているように送信する必要があります。 ユースケースで必要な場合は、 パーソナライゼーションドキュメントを参照してください。

サーバーサイド応答 server-response

Edge Network応答には state:store の命令が含まれます。この命令は、Set-Cookie ヘッダーに変換する必要があります。 これらはブラウザーに保存され、web SDK実装で使用できます。

Cookie は、クライアントインスタンスだけでなく、サーバー実装にもリクエストと共に送信されるように、トップレベルドメインに設定する必要があります。 （または、少なくとも両方の実装で使用される共通のサブドメイン）

例：

どちらの場合でも cookie が共有されるように、.example.com で cookie を設定する必要があります。

サーバーサイドの応答は、データストリーム設定に応じて生成される、Handles と呼ばれるフラグメントで構成されます。 例えば、リアルタイムパーソナライゼーションエンジンは personalization:decisions ハンドルを返し、リアルタイムアクティベーションエンジンは activation:pull ハンドルを生成します。

以下のサンプル応答は、Edge Network API 応答を示しています。

{
   "requestId":"5c539bd0-33bf-43b6-a054-2924ac58038b",
   "handle":[
      {
         "payload":[
            {
               "id":"XXX",
               "namespace":{
                  "code":"ECID"
               }
            }
         ],
         "type":"identity:result"
      },
      {
         "payload":[
            {
               "..."
            },
            {
               "..."
            }
         ],
         "type":"personalization:decisions",
         "eventIndex":0
      }
   ]
}

クライアントサイドリクエスト client-request

クライアントページでは、Web SDK applyResponse コマンドを呼び出して、サーバーサイド応答のヘッダーと本文を渡します。

   alloy("applyResponse", {
      "renderDecisions": true,
      "responseHeaders": {
         "cache-control": "no-cache, no-store, max-age=0, no-transform, private",
         "connection": "close",
         "content-encoding": "deflate",
         "content-type": "application/json;charset=utf-8",
         "date": "Mon, 11 Jul 2022 19:42:01 GMT",
         "server": "jag",
         "strict-transport-security": "max-age=31536000; includeSubDomains",
         "transfer-encoding": "chunked",
         "vary": "Origin",
         "x-adobe-edge": "OR2;9",
         "x-content-type-options": "nosniff",
         "x-konductor": "22.6.78-BLACKOUTSERVERDOMAINS:7fa23f82",
         "x-rate-limit-remaining": "599",
         "x-request-id": "5c539bd0-33bf-43b6-a054-2924ac58038b",
         "x-xss-protection": "1; mode=block"
      },
      "responseBody": {
         "requestId": "5c539bd0-33bf-43b6-a054-2924ac58038b",
         "handle": [
         {
            "payload": [
               {
               "id": "XXX",
               "namespace": {
                  "code": "ECID"
               }
               }
            ],
            "type": "identity:result"
         },
         {
            "payload": [
               {...},
               {...}
            ],
            "type": "personalization:decisions",
            "eventIndex": 0
         }
         ]
      }
   }
   ).then(applyPersonalization("sample-json-offer"));

フォームベースの JSON オファーでは、applyPersonalization メソッドを通じて手動で適用し、パーソナライゼーションオファーに基づいて DOM を更新します。フォームベースのアクティビティの場合、オファーがいつ表示されたかを示すために、表示イベントを手動で送信する必要があります。これは、sendEvent コマンドで実行します。

function sendDisplayEvent(decision) {
    const { id, scope, scopeDetails = {} } = decision;

    alloy("sendEvent", {
        "xdm": {
            "eventType": "decisioning.propositionDisplay",
            "_experience": {
                "decisioning": {
                    "propositions": [{
                        "id": id,
                        "scope": scope,
                        "scopeDetails": scopeDetails
                    }],
                    "propositionEventType": {
                        "display": 1
                    }
                }
            }
        }
    });
}

サンプルアプリケーション sample-app

このタイプのパーソナライゼーションの実験や詳細の確認に役立つように、ダウンロードしてテストに使用できるサンプルアプリケーションを提供しています。この GitHub リポジトリから、アプリケーションとその使用方法に関する詳細な手順をダウンロードできます。