Hybride Personalisierung mit Web SDK und Edge Network API
Überblick overview
Die hybride Personalisierung beschreibt den Prozess des Server-seitigen Abrufens von Personalisierungsinhalten mithilfe der Edge Network-API und des Client-seitigen Renderns mithilfe der Web SDK.
Sie können hybride Personalisierung mit Personalisierungslösungen wie Adobe Target, Adobe Journey Optimizer oder Offer Decisioning verwenden, wobei der Unterschied in den Payload-Inhalten der Edge Network-API besteht.
Voraussetzungen prerequisites
Bevor Sie hybride Personalisierung in Ihre Web-Eigenschaften implementieren, müssen Sie sicherstellen, dass Sie die folgenden Bedingungen erfüllen:
- Sie haben entschieden, welche Personalisierungslösung Sie verwenden möchten. Dies wirkt sich auf die Payload-Inhalte der Edge Network-API aus.
- Sie haben Zugriff auf einen Anwendungsserver, mit dem Sie die Aufrufe der Edge Network-API durchführen können.
- Sie haben Zugriff auf die Edge Network-API.
- Sie haben Web SDK korrektkonfiguriert) und auf den Seiten bereitgestellt, die Sie personalisieren möchten.
Flussdiagramm flow-diagram
Im folgenden Flussdiagramm wird die Reihenfolge der Schritte beschrieben, die zur Bereitstellung der hybriden Personalisierung unternommen werden.
- Alle vorhandenen Cookies, die zuvor vom Browser gespeichert wurden, sind, mit dem Präfix
kndctr_
versehen, in der Browser-Anfrage enthalten. - Der Client-Webbrowser fordert die Webseite von Ihrem Anwendungs-Server an.
- Wenn der Anwendungs-Server die Seitenanforderung erhält, führt er eine
POST
Anfrage an den interaktiven Datenerfassungsendpunkt der Edge Network-API durch um Personalisierungsinhalte abzurufen. DiePOST
-Anfrage enthält einevent
und einequery
. Die Cookies aus dem vorherigen Schritt sind, sofern verfügbar, im Arraymeta>state>entries
enthalten. - Die Edge Network-API gibt den Personalisierungsinhalt an Ihren Anwendungsserver zurück.
- Der Anwendungs-Server gibt eine HTML-Antwort an den Client-Browser zurück, die die Identitäts- und Cluster-Cookies enthält.
- Auf der Client-Seite wird der Befehl Web SDK
applyResponse
aufgerufen, wobei die Kopfzeilen und der Hauptteil der Antwort der Edge NetworkAPI aus dem vorherigen Schritt übergeben werden. - Die Web SDK rendert Target-Visual Experience Composer (VEC) und Journey Optimizer-Webkanal-Elemente automatisch, da das
renderDecisions
-Flag auftrue
gesetzt ist. - Zielformularbasierte HTML/JSON-Angebote und Journey Optimizer-Code-basierte Erlebnisse werden manuell über die
applyProposition
angewendet, um die DOM basierend auf dem Personalisierungsinhalt im Vorschlag zu aktualisieren. - Bei formularbasierten HTML/JSON-Angeboten in Target und Journey Optimizer müssen Anzeigeereignisse manuell gesendet werden, um anzugeben, wann der zurückgegebene Inhalt angezeigt wurde. Dies geschieht über den Befehl
sendEvent
.
Cookies cookies
Cookies werden verwendet, um die Benutzeridentität und Cluster-Informationen beizubehalten. Bei Verwendung einer Hybridimplementierung übernimmt der Web-Anwendungs-Server das Speichern und Senden dieser Cookies während des Lebenszyklus der Anfrage.
kndctr_AdobeOrg_identity
kndctr_AdobeOrg_cluster
Platzierung anfordern request-placement
Edge Network-API-Anfragen sind erforderlich, um Vorschläge zu erhalten und eine Anzeigebenachrichtigung zu senden. Bei Verwendung einer Hybridimplementierung sendet der Anwendungs-Server diese Anfragen an die Edge Network-API.
Einrichten des regionalen Hosts für Edge Network regional-host
Um den regionalen Edge Network-Host einzurichten, lesen Sie zunächst den Standorthinweis aus dem kndctr_<orgId>_AdobeOrg_cluster
-Cookie, das die folgenden Werte haben kann:
va6
or2
irl1
ind1
sgp3
jpn3
aus3
Beispiel: kndctr_53A16ACB5CC1D3760A495C99_AdobeOrg_cluster: va6
Der regionale Edge Network-Host verwendet das folgende Format:<location_hint>.server.adobedc.net
und kann die folgenden Werte haben:
va6.server.adobedc.net
or2.server.adobedc.net
irl1.server.adobedc.net
ind1.server.adobedc.net
sgp3.server.adobedc.net
jpn3.server.adobedc.net
aus3.server.adobedc.net
Durch die Verwendung dieser spezifischen Hosts werden die Anfragen an denselben Edge Network-Speicherort weitergeleitet, den der Benutzer zuvor besucht hat, und das System kann das beste Erlebnis bieten, da die Benutzerdaten dort vorhanden sind.
Wenn kein Standorthinweis (d. h. kein Cookie) vorhanden ist, verwenden Sie den Standard-Host: server.adobedc.net
.
Analytics-Auswirkungen analytics
Bei der Implementierung der hybriden Personalisierung müssen Sie besonders darauf achten, dass Seitentreffer in Analytics nicht mehrmals gezählt werden.
Wenn Sie für Analytics einen Datenstrom konfigurieren, werden Ereignisse automatisch weitergeleitet, sodass Seitentreffer erfasst werden.
Das Beispiel aus dieser Implementierung verwendet zwei verschiedene Datenströme:
- Ein für Analytics konfigurierter Datenstrom. Dieser Datenstrom wird für Web SDK-Interaktionen verwendet.
- Ein zweiter Datenstrom ohne eine Analytics-Konfiguration. Dieser Datenstrom wird für Edge Network-API-Anfragen verwendet. Sie müssen diesen Datenstrom mit derselben Zielkonfiguration konfigurieren wie den Datenstrom, den Sie für Analytics konfiguriert haben.
Auf diese Weise werden bei der Server-seitigen Anforderung keine Analytics-Ereignisse registriert, bei den Client-seitigen Anforderungen jedoch schon. Dies führt dazu, dass Analytics-Anforderungen genau gezählt werden.
Erstellen der Server-seitigen Anfrage server-side-request
Die folgende Beispielanfrage zeigt eine Edge Network-API-Anfrage, mit der Ihr Anwendungsserver den Personalisierungsinhalt abrufen kann.
API-Format
POST /ee/v2/interact
Anfrage 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"
}]
}
}
}'
dataStreamId
String
requestId
String
Proxy-Kopfzeilen proxy-headers
Die folgenden Kopfzeilen sind erforderlich, um die Anfrage korrekt zu verarbeiten.
Referer
X-Forwarded-For
X-Forwarded-Proto
X-Forwarded-Host
Stellen Sie sicher, dass diese korrekt eingestellt sind, sodass sie auf die tatsächlichen Client-Informationen verweisen. Beispielsweise sollte der X-Forwarded-For
-Header die Client-IP enthalten, damit eine ordnungsgemäße Geolokalisierung stattfindet.
User-Agent-Header user-agent-headers
Verwenden Sie die folgenden User-Agent-Header, um die Anfrage korrekt zu verarbeiten.
Standard
User-Agent
Niedrige Entropie (obligatorisch):
Sec-CH-UA
Sec-CH-UA-Mobile
Sec-CH-UA-Platform
Hohe Entropie (optional):
Sec-CH-UA-Platform-Version
Sec-CH-UA-Arch
Sec-CH-UA-Model
Sec-CH-UA-Bitness
Sec-CH-UA-WoW64
Die Anfrage muss gesendet werden, wie in der Edge Network-API-Spezifikation dargestellt. Siehe die Personalisierungsdokumentation falls Ihr Anwendungsfall dies erfordert.
Server-seitige Antwort server-response
Die Edge Network-Antwort enthält state:store
Anweisungen, die in Set-Cookie
-Kopfzeilen umgewandelt werden sollten. Sie werden im Browser gespeichert und können von der Web SDK-Implementierung verwendet werden.
Die Cookies sollten in der Domain auf oberster Ebene gesetzt werden, damit sie zusammen mit Anfragen an die -Serverimplementierung sowie an den Client gesendet werden. (Oder zumindest eine von beiden Implementierungen verwendete gemeinsame Subdomain)
Beispiel:
- Server-seitige Aufrufe verwenden
api.example.com
- Client-seitige Aufrufe verwenden
adobe.example.com
Cookies sollten auf .example.com
gesetzt werden, damit sie in beiden Fällen freigegeben werden.
Die Server-seitige Antwort ist in Fragmente namens Handles
organisiert, die je nach Datenstromkonfiguration generiert werden. Beispielsweise geben Echtzeit-Personalisierungs-Engines personalization:decisions
-Handles zurück, während die Echtzeit-Aktivierungs-Engine activation:pull
-Handles erzeugt.
Die folgende Beispielantwort zeigt, wie die Edge Network-API-Antwort aussehen könnte.
{
"requestId":"5c539bd0-33bf-43b6-a054-2924ac58038b",
"handle":[
{
"payload":[
{
"id":"XXX",
"namespace":{
"code":"ECID"
}
}
],
"type":"identity:result"
},
{
"payload":[
{
"..."
},
{
"..."
}
],
"type":"personalization:decisions",
"eventIndex":0
}
]
}
Client-seitige Anfrage client-request
Auf der Client-Seite wird der Befehl Web SDK applyResponse
aufgerufen, wobei die Kopfzeilen und der Hauptteil der Server-seitigen Antwort übergeben werden.
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"));
Formularbasierte JSON-Angebote werden manuell über die Methode applyPersonalization
angewendet, um die DOM basierend auf dem Personalisierungsangebot zu aktualisieren. Bei formularbasierten Aktivitäten müssen Anzeigeereignisse manuell gesendet werden, um anzugeben, wann das Angebot angezeigt wurde. Dies geschieht über den Befehl 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
}
}
}
}
});
}
Beispielanwendung sample-app
Um Ihnen beim Experimentieren zu helfen und damit Sie mehr über diese Personalisierungsart erfahren können, stellen wir eine Beispielanwendung bereit, die Sie herunterladen und zum Testen verwenden können. Sie können die Anwendung zusammen mit detaillierten Anweisungen zu ihrer Verwendung von diesem GitHub-Repository herunterladen.