Web SDK と Edge Network Server API を使用したハイブリッドパーソナライゼーション
概要 overview
ハイブリッドパーソナライゼーションでは、Edge Network Server API を使用してパーソナライゼーションコンテンツをサーバーサイドで取得し、Web SDK を使用してクライアント側でレンダリングするプロセスについて説明します。
ハイブリッドパーソナライゼーションを、Adobe Target、Adobe Journey Optimizer、Offer decisioningなどのパーソナライゼーションソリューションと共に使用できます。違いは、 サーバー API ペイロード。
前提条件 prerequisites
Web プロパティにハイブリッドパーソナライゼーションを実装する前に、次の条件を満たしていることを確認してください。
- 使用するパーソナライゼーションソリューションを決定しました。 これは、Server API ペイロードの内容に影響を与えます。
- アプリケーションサーバーにアクセスし、そのサーバーを使用して Server API 呼び出しを行います。
- Edge Network Server API にアクセスできます。
- 正しい 設定済み パーソナライズするページに Web SDK をデプロイしました。
フロー図 flow-diagram
次のフロー図は、ハイブリッドパーソナライゼーションを配信するための実行ステップの順序を示しています。
- ブラウザーによって以前に保存された
kndctr_で始まる既存の Cookie は、ブラウザーリクエストに含まれます。 - クライアントの web ブラウザーは、アプリケーションサーバーに web ページをリクエストします。
- アプリケーションサーバーがページリクエストを受信すると、
POSTリクエストを Server API インタラクティブデータ収集エンドポイントに送信して、パーソナライゼーションコンテンツを取得します。 このPOSTリクエストにはeventとqueryが含まれています。前のステップで作成した Cookie がある場合は、meta>state>entries配列に含まれています。 - Server API は、パーソナライゼーションコンテンツをアプリケーションサーバーに返します。
- アプリケーションサーバーは、ID とクラスターの Cookie を含んだ HTML 応答をクライアントブラウザーに返します。
- クライアントページでは、Web SDK
applyResponseコマンドが呼び出され、前のステップの Server API 応答のヘッダーと本文が渡されます。 - The Web SDK renders Target Visual Experience Composer (VEC) オファーとJourney Optimizer Web チャネルの項目は、
renderDecisionsフラグがtrue. - Target フォームベース HTML/JSON オファーとJourney Optimizerのコードベースのエクスペリエンスは、
applyPropositionメソッドを使用して、 DOM 提案内のパーソナライゼーションコンテンツに基づいて - Target フォームベースの場合 HTML/JSON オファーおよびJourney Optimizerのコードベースのエクスペリエンスでは、表示イベントを手動で送信して、返されたコンテンツがいつ表示されたかを示す必要があります。 これは、
sendEventコマンドを使用して行われます。
Cookie cookies
Cookie は、ユーザー ID とクラスター情報を保持するために使用されます。ハイブリッド実装を使用する場合、web アプリケーションサーバーは、リクエストのライフサイクル中にこれらの Cookie の保存と送信を処理します。
kndctr_AdobeOrg_identitykndctr_AdobeOrg_clusterリクエストの配置 request-placement
提案を取得し表示通知を送信するには、Server API リクエストが必要です。 ハイブリッド実装を使用する場合、アプリケーションサーバーはこれらのリクエストを Server API に対して行います。
Analytics への影響 analytics
ハイブリッドパーソナライゼーションを実装する場合、Analytics でページヒットが複数回カウントされないように、特に注意する必要があります。
Analytics 用にデータストリームを設定すると、ページヒットが取り込まれるように、イベントが自動転送されます。
この実装のサンプルでは、次の 2 つの異なるデータストリームを使用しています。
- Analytics 用に設定されたデータストリーム。 このデータストリームは、Web SDK のインタラクションに使用されます。
- Analytics 設定のない 2 つ目のデータストリーム。 このデータストリームは、Server API リクエストに使用されます。 このデータストリームは、Analytics 用に設定したデータストリームと同じ宛先設定で設定する必要があります。
このように、サーバーサイドのリクエストは Analytics イベントを登録しませんが、クライアントサイドのリクエストでは登録します。 これにより、Analytics リクエストが正確にカウントされます。
サーバーサイドリクエスト server-side-request
以下のサンプルリクエストでは、アプリケーションサーバーがパーソナライゼーションコンテンツを取得するために使用できる Server 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_XXX_AdobeOrg_identity",
"value":"abc123"
},
{
"key":"kndctr_XXX_AdobeOrg_cluster",
"value":"or2"
}
]
}
}
}'
dataStreamIdStringrequestIdStringサーバーサイド応答 server-response
以下のサンプル応答では、Server 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,
},
],
},
},
},
});
}
サンプルアプリケーション sample-app
このタイプのパーソナライゼーションの実験や詳細の確認に役立つように、ダウンロードしてテストに使用できるサンプルアプリケーションを提供しています。この GitHub リポジトリから、アプリケーションとその使用方法に関する詳細な手順をダウンロードできます。