Platform Web SDK를 사용하여 Adobe Target 설정

Adobe Experience Platform Web SDK를 사용하여 Adobe Target을 구현하는 방법을 알아봅니다. 경험을 제공하는 방법과 추가 매개변수를 Target에 전달하는 방법을 알아봅니다.

Adobe Target은(는) 사용자의 웹 및 모바일 사이트, 앱 및 기타 디지털 채널의 매출을 극대화하도록 고객의 경험을 조정하고 개인화하는 데 필요한 모든 기능을 제공하는 Adobe Experience Cloud 애플리케이션입니다.

학습 목표

이 단원을 마치면 Target의 웹 SDK 구현으로 다음을 수행할 수 있습니다.

전제 조건

이 섹션의 학습 내용을 완료하려면 먼저 다음을 수행해야 합니다.

깜박임 처리 추가

시작하기 전에 태그 라이브러리를 로드하는 방법에 따라 추가적인 플리커 처리 솔루션이 필요한지 여부를 결정합니다.

비동기 구현

태그 라이브러리가 비동기식으로 로드되면 Target이 기본 콘텐츠를 개인화된 콘텐츠로 대체하기 전에 페이지에서 렌더링을 완료할 수 있습니다. 이 동작으로 인해 개인화된 콘텐츠로 대체되기 전에 기본 콘텐츠가 잠깐 나타나는 "깜박임"이라고 하는 것이 나타날 수 있습니다. Adobe 이러한 깜박임을 방지하려면 비동기 태그 포함 코드 바로 앞에 특수 사전 숨김 코드 조각을 추가하는 것이 좋습니다.

이 코드 조각은 이미 Luma 사이트에 있지만 이 코드의 기능을 이해하기 위해 자세히 살펴보겠습니다.

<script>
  !function(e,a,n,t){var i=e.head;if(i){
  if (a) return;
  var o=e.createElement("style");
  o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
  (document, document.location.href.indexOf("adobe_authoring_enabled") !== -1, ".personalization-container { opacity: 0 !important }", 3000);
</script>

코드 조각 사전 숨김은 선택한 항목의 CSS 정의가 있는 페이지 헤드에 스타일 태그를 만듭니다. 이 스타일 태그는 Target에서 응답을 받거나 시간 초과에 도달하면 제거됩니다.

사전 숨김 동작은 코드 조각의 맨 끝에서 두 가지 구성으로 제어됩니다.

코드 조각 사전 숨김은 태그 내에서도 사용할 수 있습니다.

동기식 구현

Adobe은 Luma 사이트에 표시된 대로 태그를 비동기식으로 구현할 것을 권장합니다. 그러나 태그 라이브러리가 동기적으로 로드되는 경우 코드 조각 사전 숨김이 필요하지 않습니다. 대신, 사전 숨김 스타일은 Platform Web SDK 확장 설정에 지정됩니다.

동기 구현을 위한 사전 숨김 스타일은 다음과 같이 구성할 수 있습니다.

Platform Web SDK에서 플리커를 관리하는 방법에 대한 자세한 내용은 개인화된 경험에 대한 플리커 관리 가이드 섹션을 참조하십시오.

데이터 스트림 구성

Platform Web SDK에서 Target 활동을 제공하려면 먼저 데이터 스트림 구성에서 Target을 활성화해야 합니다.

데이터 스트림에서 Target을 구성하려면 다음 작업을 수행하십시오.

속성 토큰

Target Premium 고객은 속성을 사용하여 사용자 권한을 관리할 수 있습니다. Target 속성을 사용하면 사용자가 Target 활동을 실행할 수 있는 경계를 설정할 수 있습니다. 자세한 내용은 Target 설명서의 엔터프라이즈 권한 섹션을 참조하십시오.

속성 토큰을 설정하거나 찾으려면 Adobe Target > 관리 > 속성 ​으로 이동합니다. </> 아이콘에 구현 코드가 표시됩니다. at_property 값은 데이터 스트림에서 사용할 속성 토큰입니다.

데이터스트림당 하나의 속성 토큰만 지정할 수 있지만, 속성 토큰 재정의를 사용하면 데이터스트림에 정의된 기본 속성 토큰을 대체할 대체 속성 토큰을 지정할 수 있습니다. 데이터 스트림을 재정의하려면 sendEvent 작업에 대한 업데이트도 필요합니다.

대상 환경 ID

Target의 환경을 사용하면 모든 개발 단계에서 구현을 관리할 수 있습니다. 이 선택적 설정은 각 데이터 스트림에 사용할 Target 환경을 지정합니다.

Adobe은 개발, 스테이징 및 프로덕션 데이터스트림마다 타겟 환경 ID를 다르게 설정하여 작업을 단순화할 것을 권장합니다. 또는 호스트 기능을 사용하여 Target 인터페이스에서 환경을 구성할 수 있습니다.

환경 ID를 설정하거나 찾으려면 Adobe Target > 관리 > 환경 ​으로 이동합니다.

Target 타사 ID 네임스페이스

이 선택적 설정을 사용하면 Target 타사 ID에 사용할 ID 기호를 지정할 수 있습니다. Target은 단일 ID 기호 또는 네임스페이스에서만 프로필 동기화를 지원합니다. 자세한 내용은 Target 안내서의 mbox3rdPartyId에 대한 실시간 프로필 동기화 섹션을 참조하십시오.

ID 기호는 데이터 수집 > 고객 > ID ​의 ID 목록에서 찾을 수 있습니다.

Luma 사이트를 사용하는 이 자습서에서는 ID에 대한 단원 중에 설정된 ID 기호 lumaCrmId을(를) 사용하십시오.

시각적 개인화 결정 렌더링

시각적 개인화 결정은 Adobe Target의 시각적 경험 작성기에서 만들어진 경험을 참조합니다. 먼저 Target 및 태그 인터페이스에 사용되는 용어를 이해해야 합니다.

이벤트 보내기 동작 업데이트

Target이 데이터 스트림에서 활성화되어 있을 경우 Target의 시각적 개인화 결정은 Platform Web SDK에 의해 전달됩니다. 그러나 자동으로 렌더링되지 않습니다. 자동 렌더링을 사용하려면 이벤트 보내기 작업을 업데이트해야 합니다.

시각적 개인화 결정 렌더링 설정을 사용하면 Platform Web SDK에서 Target 시각적 경험 작성기 또는 "글로벌 mbox"를 사용하여 지정된 수정 사항을 자동으로 적용합니다.

사용자 지정 코드를 사용하여 직접 이러한 결정에 대해 렌더링하거나 작업을 수행하려는 경우 시각적 개인화 결정 렌더링 설정을 사용하지 않도록 설정할 수 있습니다. Platform Web SDK는 유연하며 완벽한 제어 기능을 제공하는 이 기능을 제공합니다. 개인화된 콘텐츠를 수동으로 렌더링하는 방법에 대한 자세한 내용은 안내서를 참조하세요.

시각적 경험 작성기로 Target 활동 설정

이제 기본 구현 부분이 완료되었으므로 Target에서 XT(경험 타깃팅) 활동을 만들어 모든 것이 올바르게 작동하는지 확인하십시오. 도움이 필요한 경우 Target 자습서에서 경험 타깃팅 활동 만들기를 참조할 수 있습니다.

디버거를 사용하여 유효성 검사

활동을 설정하면 콘텐츠가 페이지에 렌더링됩니다. 그러나 활성 상태인 활동이 없어도 이벤트 보내기 네트워크 호출을 보고 Target이 제대로 구성되었는지 확인할 수 있습니다.

사용자 지정 결정 범위 설정 및 렌더링

사용자 지정 결정 범위(이전의 "mbox")는 Target 양식 기반 경험 작성기를 사용하여 구조화된 방식으로 HTML 또는 JSON 콘텐츠를 전달하는 데 사용할 수 있습니다. 이러한 사용자 지정 범위 중 하나에 전달된 콘텐츠는 Platform Web SDK에 의해 자동으로 렌더링되지 않습니다. Tags의 작업을 사용하여 렌더링할 수 있습니다.

이벤트 보내기 작업에 범위 추가

페이지 로드 규칙을 수정하여 사용자 지정 결정 범위를 추가합니다.

Target의 응답을 처리합니다.

homepage-hero 범위에 대한 콘텐츠를 요청하도록 Platform Web SDK를 구성했으므로 응답을 사용하여 작업을 수행해야 합니다. Platform Web SDK 태그 확장은 이벤트 보내기 작업의 응답을 받을 때 새 규칙을 즉시 트리거하는 데 사용할 수 있는 이벤트 보내기 완료 이벤트를 제공합니다.

양식 기반 경험 작성기로 Target 활동 설정

이제 사용자 지정 결정 범위를 수동으로 렌더링하는 규칙이 있으므로 Target에서 다른 XT(경험 타깃팅) 활동을 만들 수 있습니다. 이번에는 양식 기반 경험 작성기를 사용합니다.

디버거를 사용하여 유효성 검사

활동을 활성화한 경우 페이지에 콘텐츠가 렌더링되는 것을 볼 수 있습니다. 그러나 활성 상태의 활동이 없더라도 이벤트 보내기 네트워크 호출을 확인하여 Target이 사용자 지정 범위에 대한 콘텐츠를 요청하고 있는지 확인할 수도 있습니다.

Target에 매개 변수 보내기

이 섹션에서는 Target별 데이터를 전달하고 XDM 데이터가 Target 매개 변수에 매핑되는 방식을 자세히 살펴봅니다.

페이지(mbox) 매개 변수 및 XDM

모든 XDM 필드는 페이지 매개 변수 또는 mbox 매개 변수로 Target에 자동으로 전달됩니다.

이러한 XDM 필드 중 일부는 Target 백엔드의 특수 오브젝트에 매핑됩니다. 예를 들어 web.webPageDetails.URL은(는) URL 기반 타깃팅 조건을 빌드하거나 프로필 스크립트를 만들 때 page.url 개체로 자동으로 사용할 수 있습니다.

데이터 개체를 사용하여 페이지 매개 변수를 추가할 수도 있습니다.

특수 매개 변수 및 데이터 개체

XDM 오브젝트에서 매핑되지 않은 Target에 유용할 수 있는 일부 데이터 포인트가 있습니다. 이러한 특수 Target 매개 변수는 다음과 같습니다.

이러한 매개 변수는 xdm 개체 대신 data 개체에서 전송해야 합니다. 또한 페이지(또는 mbox) 매개 변수도 data 개체에 포함될 수 있습니다.

데이터 개체를 채우려면 다음 데이터 요소를 만들고 데이터 요소 만들기 단원에서 만든 데이터 요소를 다시 사용합니다.

페이지 로드 규칙 업데이트

XDM 개체 외부의 Target에 대한 추가 데이터를 전달하려면 적용 가능한 규칙을 업데이트해야 합니다. 이 예제에서는 일반 페이지 로드 규칙 및 제품 페이지 보기 규칙에 새 data.content 데이터 요소를 포함하는 것만을 수정해야 합니다.

Personalization 및 Analytics 요청 분할

Luma 사이트의 데이터 레이어는 태그 포함 코드 앞에 완전히 정의됩니다. 이를 통해 단일 호출을 사용하여 개인화된 콘텐츠(예: Adobe Target에서)를 가져오고 분석 데이터(예: Adobe Analytics으로)를 전송할 수 있습니다.

그러나 많은 웹 사이트에서 데이터 레이어는 두 애플리케이션에 대한 단일 호출을 사용할 수 있을 만큼 충분히 일찍 또는 빠르게 로드될 수 없습니다. 이러한 경우 단일 페이지 로드에서 두 개의 이벤트 보내기 작업을 사용하고 첫 번째 작업은 개인화에 사용하고 두 번째 작업은 분석에 사용할 수 있습니다. 이러한 방식으로 이벤트를 분류하면 Analytics 이벤트를 보내기 전에 데이터 레이어가 완전히 로드되기를 기다리는 동안 개인화 이벤트를 가능한 한 빨리 실행할 수 있습니다. 이는 Adobe Target이 페이지 맨 위에서 target-global-mbox을(를) 실행하고 Adobe Analytics이 페이지 맨 아래에서 s.t() 호출을 실행하는 많은 사전 웹 SDK 구현과 유사합니다

Personalization-on-top 요청을 만들려면:

Analytics-on-bottom 요청을 만들려면:

디버거를 사용하여 유효성 검사

이제 규칙이 업데이트되었으므로 Adobe Debugger을 사용하여 데이터가 올바르게 전달되는지 확인할 수 있습니다.

Target 인터페이스에서 유효성 검사

그런 다음 Target 인터페이스를 살펴보고 데이터가 수신되었고 대상 및 활동에서 사용할 수 있는지 확인합니다. XDM 데이터는 사용자 지정 Target 매개 변수에 자동으로 매핑됩니다. XDM 데이터가 Target에 의해 수신되었고 대상자를 만들어 사용할 수 있는지 확인할 수 있습니다.

다음으로 로그인 상태 프로필 속성이 전달되었는지 확인합니다.

Target Premium이 있는 경우 엔티티 데이터가 올바르게 전달되었고 제품 데이터가 Recommendations 제품 카탈로그에 기록되었는지 확인할 수도 있습니다.

Assurance를 사용한 유효성 검사

또한 Assurance를 사용하여 적절한 위치에서 Target 의사 결정 요청이 올바른 데이터를 가져오고 서버측 변환이 올바르게 발생하는지 확인할 수 있습니다. Target 의사 결정 및 Adobe Analytics 호출이 별도로 전송된 경우에도 캠페인 및 경험 정보가 Adobe Analytics 호출에 포함되어 있는지 확인할 수 있습니다.

이를 통해 Target 의사 결정 호출을 만들 때 이후 전송을 위해 큐에 있던 A4T 정보가 나중에 페이지에서 Analytics 추적 호출이 실행될 때 제대로 전송되었는지 확인할 수 있습니다.

이 단원을 완료했으므로 Platform Web SDK를 사용하여 Adobe Target을 구현해야 합니다.

다음: