[Alpha]{class="badge informative"}
서버 SDK을 사용한 하이브리드 개인화
하이브리드 개인화 구현에서 서버는 개인화된 콘텐츠를 요청하고 방문자의 브라우저는 이를 렌더링합니다. 서버가 페이지를 빌드하는 동안 JavaScript용 Adobe Experience Platform Server SDK 또는 Server SDK이 콘텐츠를 요청하고 Web SDK이 브라우저에서 렌더링합니다.
클라이언트측 개인화와 비교하여 이 접근 방식은 다음과 같은 이점이 있습니다.
- Personalization이 더 빨리 준비되었습니다. 서버는 페이지를 작성하는 동안 제안을 요청하므로 브라우저는 컨텐츠를 렌더링하기 전에 Edge Network에 대한 별도의 요청을 기다리지 않습니다.
- 깜박임 감소 제안에 이미 페이지가 있으므로 브라우저는 웹 SDK이 로드되는 즉시 이를 렌더링할 수 있습니다.
- 서버에서도 결정을 사용할 수 있습니다. 예를 들어 서버가 페이지를 보내기 전에 제안에 따라 로드할 제품을 선택할 수 있습니다.
작동 방식 how-it-works
- 방문자의 브라우저가 서버에서 페이지를 요청합니다.
- 서버가 방문자의
forRequest핸들에서personalization옵션을 사용하여sendEvent을(를) 호출합니다. 그 결과에는 방문자의 제안이 포함됩니다. - 서버는 HTML에서 반환하는 제안을 포함합니다.
- 브라우저에서 웹 SDK은
applyPropositions명령을 사용하여 제안을 렌더링합니다. - 웹 SDK이 렌더링한 제안에 대한 표시 이벤트를 보냅니다.
사전 요구 사항 prerequisites
- Adobe Target 또는 Adobe Journey Optimizer이 활성화된 데이터 스트림입니다. 서버에서 인증된 요청을 보내고 브라우저에서 인증되지 않은 요청을 보내므로 액세스 형식을(를) 혼합 인증(으)로 설정하십시오. 인증을 참조하세요.
- 서버에 서버 SDK, 설치됨 및 구성됨이(가) 있습니다.
- 페이지의 웹 SDK이 동일한
orgId및datastreamId(으)로 구성되었습니다.
1단계: 서버에 제안 요청 server
서버가 페이지 요청을 처리할 때 해당 페이지의 표면 또는 결정 범위에 대한 제안을 요청합니다. 탐색 중에 요청의 Referer 헤더에 previous 페이지가 포함되어 있으므로 페이지 URL을 명시적으로 설정하십시오. 컨텍스트 및 전달된 헤더를 참조하십시오.
async function getPropositions(req) {
const visitor = alloy.forRequest({ request: req });
try {
const { propositions = [] } = await visitor.sendEvent({
xdm: {
eventType: "decisioning.propositionFetch",
web: {
webPageDetails: {
URL: `https://www.example.com${req.url}`
}
},
identityMap: {
Email: [{ id: "visitor@example.com", primary: true }]
}
},
personalization: {
surfaces: ["web://www.example.com/home#hero"],
decisionScopes: ["daily-special"]
}
});
return propositions;
} catch (error) {
// Render the default experience if personalization isn't available
console.error("Failed to fetch propositions", error);
return [];
}
}
서버 SDK은 제안을 렌더링하거나 디스플레이 이벤트를 전송하지 않습니다. 반환만 수행합니다. 요청이 실패하면 페이지가 여전히 기본 콘텐츠로 렌더링되도록 빈 배열을 반환합니다.
2단계: 페이지에 제안 포함 page
서버가 반환하는 제안을 HTML으로 직렬화합니다. < 문자를 이스케이프 처리하면 제안에 있는 콘텐츠가 <script> 요소를 조기에 닫을 수 없습니다.
const propositions = await getPropositions(req);
const serialized = JSON.stringify(propositions).replace(/</g, "\\u003c");
res.end(`<!DOCTYPE html>
<html>
<head>
<script>window.serverPropositions = ${serialized};</script>
<!-- Web SDK base code and library -->
</head>
<body>
<div id="hero">Default hero content</div>
<div id="daily-special">Default special</div>
</body>
</html>`);
3단계: 브라우저에서 제안 렌더링 browser
웹 SDK이 페이지에 구성된 후 제안을 applyPropositions에 전달합니다. 선택기가 포함되지 않은 HTML 오퍼의 경우 metadata을(를) 사용하여 웹 SDK에 각 오퍼를 배치할 위치를 지정하십시오. HTML 오퍼 렌더링을 참조하십시오.
alloy("applyPropositions", {
propositions: window.serverPropositions || [],
metadata: {
"daily-special": { selector: "#daily-special", actionType: "setHtml" }
}
}).then(({ propositions: renderedPropositions = [] }) => {
if (!renderedPropositions.length) { return; }
return alloy("sendEvent", {
xdm: {
eventType: "decisioning.propositionDisplay",
_experience: {
decisioning: {
propositions: renderedPropositions.map(({ id, scope, scopeDetails }) => ({
id,
scope,
scopeDetails
})),
propositionEventType: { display: 1 }
}
}
}
});
});
applyPropositions이(가) 디스플레이 이벤트를 자체적으로 보내지 않습니다. 두 번째 sendEvent 호출은 방문자가 본 제안 사항을 기록합니다. 디스플레이 이벤트 관리를 참조하세요.
방문자의 ID를 일관되게 유지 identity
정확한 보고 및 개인화를 위해 서버와 브라우저는 동일한 방식으로 방문자를 식별해야 합니다.
서버 SDK에는 방문자의 요청 쿠키를 읽는 쿠키 서비스가 포함되어 있지 않습니다. 쿠키 서비스에서 구현해야 하는 인터페이스에 대해서는 플랫폼 서비스를 참조하십시오.