Web SDK と Edge Network Server API を使用したハイブリッドパーソナライゼーション
概要
ハイブリッドパーソナライゼーションでは、Edge Network Server API を使用してパーソナライゼーションコンテンツをサーバーサイドで取得し、Web SDK を使用してクライアント側でレンダリングするプロセスについて説明します。
ハイブリッドパーソナライゼーションを、Adobe Target や Offer Decisioning などのパーソナライゼーションソリューションと共に使用できますが、違いは、Server API ペイロードの内容です。
前提条件
Web プロパティにハイブリッドパーソナライゼーションを実装する前に、次の条件を満たしていることを確認してください。
- 使用するパーソナライゼーションソリューションを決定しました。 これは、Server API ペイロードの内容に影響を与えます。
- アプリケーションサーバーにアクセスし、そのサーバーを使用して Server API 呼び出しを行います。
- Edge Network Server API にアクセスできます。
- パーソナライズするページに Web SDK を正しく設定しデプロイしました。
フロー図
次のフロー図は、ハイブリッドパーソナライゼーションを配信するための実行ステップの順序を示しています。
- ブラウザーによって以前に保存された
kndctr_で始まる既存の Cookie は、ブラウザーリクエストに含まれます。 - クライアントの web ブラウザーは、アプリケーションサーバーに web ページをリクエストします。
- アプリケーションサーバーがページリクエストを受信すると、
POSTリクエストを Server API インタラクティブデータ収集エンドポイントに送信して、パーソナライゼーションコンテンツを取得します。 このPOSTリクエストにはeventとqueryが含まれています。前のステップで作成した Cookie がある場合は、meta>state>entries配列に含まれています。 - Server API は、パーソナライゼーションコンテンツをアプリケーションサーバーに返します。
- アプリケーションサーバーは、ID とクラスターの Cookie を含んだ HTML 応答をクライアントブラウザーに返します。
- クライアントページでは、Web SDK
applyResponseコマンドが呼び出され、前のステップの Server API 応答のヘッダーと本文が渡されます。 renderDecisionsフラグがtrueに設定されているので、Web SDK は Visual Experience Composer (VEC) が提供するページの読み込みを自動的にレンダリングします。- フォームベースの JSON オファーは、
applyPersonalizationメソッドを使用して手動で適用され、パーソナライゼーション オファーに基づいて DOM を更新します。 - フォームベースのアクティビティの場合、オファーがいつ表示されたかを示すために、表示イベントを手動で送信する必要があります。これは、
sendEventコマンドを使用して行われます。
Cookie
Cookie は、ユーザー ID とクラスター情報を保持するために使用されます。ハイブリッド実装を使用する場合、web アプリケーションサーバーは、リクエストのライフサイクル中にこれらの Cookie の保存と送信を処理します。
| Cookie | 目的 | 保存者 | 送信者 |
|---|---|---|---|
kndctr_AdobeOrg_identity |
ユーザー ID の詳細が含まれます。 | アプリケーションサーバー | アプリケーションサーバー |
kndctr_AdobeOrg_cluster |
リクエストを満たすために使用する Edge Network クラスターを示します。 | アプリケーションサーバー | アプリケーションサーバー |
リクエストの配置
提案を取得し表示通知を送信するには、Server API リクエストが必要です。 ハイブリッド実装を使用する場合、アプリケーションサーバーはこれらのリクエストを Server API に対して行います。
| リクエスト | 作成者 |
|---|---|
| 提案を取得するためのインタラクションリクエスト | アプリケーションサーバー |
| 表示通知を送信するためのインタラクションリクエスト | アプリケーションサーバー |
Analytics への影響
ハイブリッドパーソナライゼーションを実装する場合、Analytics でページヒットが複数回カウントされないように、特に注意する必要があります。
Analytics 用にデータストリームを設定すると、ページヒットが取り込まれるように、イベントが自動転送されます。
この実装のサンプルでは、次の 2 つの異なるデータストリームを使用しています。
- Analytics 用に設定されたデータストリーム。 このデータストリームは、Web SDK のインタラクションに使用されます。
- Analytics 設定のない 2 つ目のデータストリーム。 このデータストリームは、Server API リクエストに使用されます。このデータストリームは、Analytics 用に設定したデータストリームと同じ宛先設定で設定する必要があります。
このように、サーバーサイドのリクエストは Analytics イベントを登録しませんが、クライアントサイドのリクエストでは登録します。 これにより、Analytics リクエストが正確にカウントされます。
サーバーサイドリクエスト
以下のサンプルリクエストでは、アプリケーションサーバーがパーソナライゼーションコンテンツを取得するために使用できる Server API リクエストを示します。
このサンプルリクエストでは、Adobe Target をパーソナライゼーションソリューションとして使用します。リクエストは、選択したパーソナライゼーションソリューションによって異なる場合があります。
API 形式
POST /ee/v2/interact
リクエスト
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_XXX_AdobeOrg_identity",
"value":"abc123"
},
{
"key":"kndctr_XXX_AdobeOrg_cluster",
"value":"or2"
}
]
}
}
}'
| パラメーター | タイプ | 必須 | 説明 |
|---|---|---|---|
dataStreamId |
String |
はい。 | Edge Network にインタラクションを渡すために使用するデータストリームの ID。データストリームの設定方法については、データストリームの概要を参照してください。 |
requestId |
String |
いいえ | 内部サーバーリクエストを関連付けるためのランダム ID。何も指定されない場合、Edge Network によって生成され、応答で返されます。 |
サーバーサイド応答
以下のサンプル応答では、Server API 応答がどのようになるかを示します。
{
"requestId":"5c539bd0-33bf-43b6-a054-2924ac58038b",
"handle":[
{
"payload":[
{
"id":"XXX",
"namespace":{
"code":"ECID"
}
}
],
"type":"identity:result"
},
{
"payload":[
{
"..."
},
{
"..."
}
],
"type":"personalization:decisions",
"eventIndex":0
}
]
}
クライアントサイドリクエスト
クライアントページでは、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,
},
],
},
},
},
});
}
サンプルアプリケーション
このタイプのパーソナライゼーションの実験や詳細の確認に役立つように、ダウンロードしてテストに使用できるサンプルアプリケーションを提供しています。この GitHub リポジトリから、アプリケーションとその使用方法に関する詳細な手順をダウンロードできます。
リソース
アドビアカウント
