Web SDK에서 페이지 이벤트의 상단 및 하단 구성
작성 대상:
- 개발자
개인화된 경험을 고객에게 전달하려면 웹 페이지의 로딩 시간이 필수적입니다.
로드 시간을 최적화하고 개인화를 가능한 한 빨리 제공하기 위해 Web SDK는 페이지 이벤트의 상단과 하단의 구성을 지원합니다.
페이지 이벤트의 상단 및 하단은 페이지 로드 시간을 최소로 유지하면서 페이지에 있는 다양한 요소를 비동기적으로 로드하는 방법을 설명합니다.
이 구성은 개인화된 콘텐츠가 로드될 때까지 사용자가 기다려야 하는 시간을 최소화합니다.
지표 정확도 측면에서 Adobe Analytics은 페이지 이벤트의 위쪽을 무시할 수 있으므로, 페이지 히트가 한 개만 기록되므로(페이지 이벤트의 아래쪽) 더 정확한 지표 기록으로 이어집니다.
사용 사례
스포츠 의류 소매업체는 방문자 지표를 정확하게 수집하는 동시에 웹 사이트를 방문할 때 사용자 마찰을 최소화하면서 쇼핑객에게 개인화된 경험을 전달하려고 합니다.
마케팅 팀은 Web SDK에서 페이지 이벤트의 맨 위와 아래를 사용하여 최적의 방식으로 개인화 게재를 구성할 수 있습니다.
- Web SDK는 페이지가 로드되기 시작하는 즉시 로드되는 개인화 요청을 전송합니다. 페이지 이벤트의 맨 위입니다.
- 페이지 로드가 완료되면 페이지 보기 이벤트가 기록됩니다. 이 문제는 페이지 로드 프로세스 뒷부분에서 발생합니다. 페이지 이벤트 아래입니다.
페이지 상단 이벤트 예
아래 코드 샘플은 개인화를 요청하지만 자동으로 렌더링된 제안에 대해 디스플레이 이벤트를 전송하지 않는 페이지 이벤트 구성의 맨 위를 나타냅니다. 디스플레이 이벤트은(는) 페이지 하단 이벤트의 일부로 전송됩니다.
alloy("sendEvent", {
type: "decisioning.propositionFetch",
renderDecisions: true,
personalization: {
sendDisplayEvent: false
}
});
type
decisioning.propositionFetch
(으)로 설정하십시오. 이 특수 이벤트 유형은 Adobe Analytics에 이 이벤트를 삭제하도록 지시합니다. Customer Journey Analytics을 사용할 때 이러한 이벤트를 삭제하도록 필터를 설정할 수도 있습니다.renderDecisions
true
(으)로 설정하십시오. 이 매개 변수는 Web SDK에 Edge Network이 반환하는 결정을 렌더링하도록 합니다.personalization.sendDisplayEvent
false
(으)로 설정하십시오. 이렇게 하면 디스플레이 이벤트의 전송이 중지됩니다.페이지 하단 이벤트 예
아래 코드 샘플은 페이지에 자동으로 렌더링되었지만 페이지 상단 이벤트에서 표시 이벤트가 억제된 제안에 대한 표시 이벤트를 보내는 페이지 이벤트 구성의 아래쪽을 나타냅니다.
alloy("sendEvent", {
personalization: {
includeRenderedPropositions: true
},
xdm: { ... }
});
personalization.includeRenderedPropositions
true
(으)로 설정하십시오. 이렇게 하면 페이지 이벤트의 맨 위에서 억제된 표시 이벤트를 보낼 수 있습니다.xdm
아래 코드 샘플은 페이지에 수동으로 렌더링된 제안에 대해(즉, 사용자 지정 결정 범위 또는 표면에 대해) 디스플레이 이벤트를 전송하는 페이지 이벤트 구성의 아래쪽을 구현합니다.
alloy("sendEvent", {
xdm: {
... // Optional bottom of page event data
_experience: {
decisioning: {
propositions: propositions.map(function(p) {
return {
id: p.id,
scope: p.scope,
scopeDetails: p.scopeDetails
};
}),
propositionEventType: {
display: 1
}
}
}
}
});
xdm._experience.decisioning.propositions
ID
, scope
및 scopeDetails
을(를) 포함해야 합니다. 수동으로 렌더링된 콘텐츠의 표시 이벤트를 기록하는 방법에 대한 자세한 내용은 수동으로 개인화를 렌더링하는 방법에 대한 설명서를 참조하십시오. 수동으로 렌더링된 개인화 콘텐츠는 페이지 조회수 하단에 포함되어야 합니다.xdm._experience.decisioning.propositionEventType
display: 1
(으)로 설정하십시오.xdm
상위 및 하위 페이지 히트가 있는 단일 페이지 애플리케이션
아래 예에는 필수 xdm.web.webPageDetails.viewName
매개 변수의 추가가 포함됩니다. 이것이 바로 단일 페이지 애플리케이션입니다. 이 예제의 viewName
은(는) 페이지 로드 시 로드되는 보기입니다.
// Top of page, render decisions for the "home" view.
alloy("sendEvent", {
type: "decisioning.propositionFetch",
renderDecisions: true,
personalization: {
sendDisplayEvent: false
},
xdm: {
web: {
webPageDetails: {
viewName: "home"
}
}
}
});
// Bottom of page, send display events for the items that were rendered.
// Note: You need to include the viewName in both top and bottom of page so that the
// correct view is rendered at the top of the page, and the correct view is recorded
// at the bottom of the page.
alloy("sendEvent", {
personalization: {
includeRenderedPropositions: true
},
xdm: {
...,
web: {
webPageDetails: {
viewName: "home"
}
}
}
});
이 예제에서는 페이지에 대한 개인화를 이미 가져왔으므로 페이지 분할을 상단/하단으로 수행할 필요가 없습니다.
alloy("sendEvent", {
renderDecisions: true,
xdm: {
...,
web: {
webPageDetails: {
viewName: "cart"
}
}
}
});
여전히 페이지 히트의 하단을 지연해야 하는 경우 페이지 히트의 상단에 applyPropositions
을(를) 사용할 수 있습니다. 개인화를 가져올 필요가 없고 Analytics 데이터를 기록할 필요가 없으므로 Edge Network에 요청할 필요가 없습니다.
// top of page, render the decisions already fetched for the "cart" view.
alloy("applyPropositions", {
viewName: "cart"
});
// bottom of page, send display events for the items that were rendered.
// Note: You need to include the viewName in both top and bottom of page so that the
// correct view is rendered at the top of the page, and the correct view is recorded
// at the bottom of the page.
alloy("sendEvent", {
personalization: {
includeRenderedPropositions: true
},
xdm: {
...,
web: {
webPageDetails: {
viewName: "cart"
}
}
}
});
GitHub 샘플
이 주소에 있는 샘플은 Experience Platform 및 Web SDK를 사용하여 페이지 맨 위에서 개인화를 요청하고 맨 아래에서 분석 지표를 보내는 방법을 보여 줍니다. 샘플을 다운로드하여 로컬에서 실행하여 페이지 이벤트의 상단과 하단의 작동 방식을 이해할 수 있습니다.