웹 SDK에서 페이지 이벤트의 상단 및 하단 구성
개인화된 경험을 제공할 때 웹 페이지의 로드 시간은 필수적입니다. 웹 SDK에서는 사용자가 개인화된 컨텐츠를 기다리는 시간을 최소화하기 위해 페이지 이벤트의 상단과 하단의 구성을 지원합니다.
페이지 이벤트의 상단 및 하단은 페이지 로드 시간을 최소로 유지하면서 페이지에 있는 다양한 요소를 비동기적으로 로드하는 방법을 설명합니다.
- 페이지 이벤트 상단은 페이지 로드가 시작되자마자 개인화를 요청합니다.
- 페이지 이벤트 하단은 페이지 로드가 완료되면 페이지 보기를 기록합니다.
Adobe Analytics에서는 페이지 상단 이벤트를 무시하므로 하나의 페이지 히트만 기록되므로(페이지 이벤트 하단) 더 정확한 지표 기록으로 이어집니다.
웹 SDK JavaScript 라이브러리(alloy())를 직접 호출하거나 Adobe Experience Platform 태그 UI에서 웹 SDK 태그 확장 기능을 사용하여 페이지 이벤트의 맨 위와 맨 아래 부분을 구성할 수 있습니다. 태그 확장의 이벤트 보내기 작업에는 ‘개인화 요청’(페이지 상단) 및 ‘분석 수집’(페이지 하단) 시나리오에 대한 필드 값을 미리 구성하는 ‘안내 이벤트 사용’ 옵션이 포함되어 있습니다. 아래의 각 예제는 두 구현을 모두 보여 줍니다.
페이지 상단 이벤트 top-of-page
아래 예제는 개인화를 요청하지만 자동으로 렌더링된 제안에 대해 이벤트 표시를 제외하는 페이지 이벤트의 맨 위를 구성합니다. 이러한 디스플레이 이벤트는 페이지 이벤트 하단과 함께 대신 전송됩니다.
| code language-js |
|---|
|
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| 매개 변수 | 필수/선택 사항 | 설명 |
type |
필수 여부 | 이 매개 변수를 decisioning.propositionFetch(으)로 설정하십시오. 이 특수 이벤트 유형은 Adobe Analytics에 이 이벤트를 삭제하도록 지시합니다. Customer Journey Analytics을 사용할 때 이러한 이벤트를 삭제하는 필터를 설정할 수도 있습니다. 자세한 내용은 Adobe Analytics의 Edge Network 이벤트 유형을 참조하십시오. |
renderDecisions |
필수 여부 | 이 매개 변수를 true(으)로 설정하십시오. 이 매개 변수는 Web SDK에 Edge Network에서 반환한 결정을 렌더링하도록 지시합니다. |
personalization.sendDisplayEvent |
필수 여부 | 이 매개 변수를 false(으)로 설정하십시오. 이 매개 변수는 디스플레이 이벤트의 전송을 중지합니다. |
페이지 맨 위에서 실행되는 규칙에서 이벤트 보내기 작업을 구성하십시오. 안내 이벤트 사용을 사용하도록 설정한 다음 개인화 요청을 선택하십시오. 이 옵션은 'Type’을(를) ‘의사 결정 제안 가져오기’, ‘시각적 개인화 결정 렌더링’ 및 '표시 이벤트 자동 전송’을(를) 비활성화로 잠급니다.
대신 이러한 필드를 수동으로 설정하려면 안내 이벤트 사용을 비활성화하고 각 필드를 직접 구성하십시오.
페이지 하단 이벤트 예 bottom-of-page
자동 렌더링된 제안 bottom-auto-rendered
아래 예제는 페이지에서 자동으로 렌더링되었지만 페이지 상단 이벤트에서 제외된 제안에 대해 디스플레이 이벤트를 보내는 페이지 하단 이벤트를 구성합니다.
| code language-js |
|---|
|
| table 0-row-3 1-row-3 2-row-3 | ||
|---|---|---|
| 매개 변수 | 필수/선택 사항 | 설명 |
personalization.includeRenderedPropositions |
필수 여부 | 이 매개 변수를 true(으)로 설정하십시오. 이 매개 변수를 사용하면 페이지 이벤트의 맨 위에서 억제된 디스플레이 이벤트를 전송할 수 있습니다. |
xdm |
선택 사항입니다 | 이 개체를 사용하여 페이지 이벤트의 맨 아래에 사용할 모든 데이터를 포함합니다. |
수동으로 렌더링된 제안 bottom-manually-rendered
아래 예제는 페이지에서 수동으로 렌더링된 제안(즉, 사용자 지정 결정 범위 또는 표면)에 대한 표시 이벤트를 전송하는 페이지 이벤트의 하단을 구성합니다.
| code language-js |
|---|
|
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| 매개 변수 | 필수/선택 사항 | 설명 |
xdm._experience.decisioning.propositions |
필수 여부 | 이 섹션에서는 수동으로 렌더링된 제안을 정의합니다. 제안 id, scope 및 scopeDetails을(를) 포함해야 합니다. 자세한 내용은 디스플레이 이벤트 관리를 참조하십시오. 수동으로 렌더링된 개인화 콘텐츠는 페이지 이벤트 하단에 포함되어야 합니다. |
xdm._experience.decisioning.propositionEventType |
필수 여부 | 이 매개 변수를 display: 1(으)로 설정하십시오. |
xdm |
선택 사항입니다 | 이 개체를 사용하여 페이지 이벤트의 맨 아래에 사용할 모든 데이터를 포함합니다. |
‘안내 이벤트 사용’ 옵션은 이 시나리오를 다루지 않으므로 작업을 수동으로 구성하십시오.
- 렌더링된 각 명제의
id,scope및scopeDetails(으)로_experience.decisioning.propositions을(를) 채우고_experience.decisioning.propositionEventType.display을(를)1(으)로 설정하는 XDM 개체(또는 변수) 데이터 요소를 만듭니다. 자세한 내용은 디스플레이 이벤트 관리를 참조하십시오. - 페이지 규칙의 맨 아래에 대한 이벤트 보내기 작업에서 안내 이벤트 사용을(를) 사용하지 않도록 설정하고 XDM 필드의 데이터 요소를 참조합니다.
페이지 이벤트의 상단과 하단이 있는 단일 페이지 애플리케이션 spa-example
단일 페이지 애플리케이션에서는 웹 SDK이 페이지 맨 위에서 올바른 개인화를 렌더링하고 페이지 맨 아래에 올바른 보기를 기록할 수 있도록 각 보기 변경 시 보기 이름을 지정해야 합니다.
첫 페이지 보기 spa-first-view
이 예제에서 home은 초기 페이지 로드 시 로드되는 보기입니다.
상위 호출이 Analytics 히트를 기록하거나 디스플레이 이벤트를 실행하지 않고 home 보기에 대한 개인화를 요청합니다. bottom 호출은 페이지 보기를 기록하고 억제된 디스플레이 이벤트를 실행합니다. 보기가 일관되게 기록되도록 두 호출에 동일한 viewName을(를) 포함하십시오.
| code language-js |
|---|
|
두 번째 페이지 보기 — 옵션 1 spa-second-view-option-1
이 예에서는 페이지에 대한 개인화를 이미 가져왔으므로 단일 이벤트로 충분합니다.
| code language-js |
|---|
|
두 번째 페이지 보기 — 옵션 2 spa-second-view-option-2
페이지 이벤트의 하단을 지연해야 할 때(예: 보기 변경 시 페이지의 분석 데이터가 준비되지 않은 경우) 이 접근 방식을 사용합니다. 다음 두 단계로 보기 변경을 처리합니다.
- 페이지 맨 위에서 Edge Network 호출을 수행하지 않고 이미 가져온 제안을 렌더링합니다.
- 분석 데이터가 준비되면 페이지 이벤트의 맨 아래를 보냅니다.
보기가 일관되게 기록되도록 두 호출에 동일한 viewName을(를) 포함하십시오.
페이지 맨 위에서 applyPropositions을(를) 호출하여 새 보기에 대해 캐시된 제안을 렌더링합니다. 그런 다음 페이지 하단에 있는 sendEvent을(를) includeRenderedPropositions: true(으)로 호출하여 숨겨진 표시 이벤트가 실행되도록 합니다.
| code language-js |
|---|
|
GitHub 샘플 github-sample
alloy-samples 저장소의 최상위 및 최하위 샘플은 페이지 맨 위에서 개인화를 요청하고 맨 아래에서 분석 지표를 보내는 방법을 보여 줍니다. 샘플을 다운로드하고 로컬로 실행하여 페이지 이벤트의 상단과 하단의 작동 방식을 확인합니다. 이 샘플은 JavaScript 라이브러리를 직접 사용합니다. 웹 SDK 태그 확장에서 동일한 규칙을 구성할 때에도 동일한 패턴이 적용됩니다.