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

Last update: Mon Mar 11 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:
Web SDK,Tags

작성 대상:

Beginner
Intermediate
Developer

CAUTION

2024년 3월 15일 금요일에 이 자습서에 대한 주요 변경 사항을 게시하려고 합니다. 이 시점 이후에는 많은 연습이 변경되며 모든 단원을 완료하려면 튜토리얼을 처음부터 다시 시작해야 할 수 있습니다.

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

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

학습 목표

이 단원을 마치면 다음을 수행할 수 있습니다.

비동기 태그 포함 코드와 함께 Target을 사용할 때 깜박임을 방지하기 위해 Platform Web SDK 사전 숨김 코드 조각을 추가하는 방법을 이해합니다
Target 기능을 사용하도록 데이터 스트림 구성
페이지가 로드될 때 시각적 개인화 결정 렌더링(이전에는 "글로벌 mbox"라고 함)
Target에 XDM 데이터 전달 및 Target 매개 변수에 대한 매핑 이해
프로필 및 엔티티 매개 변수와 같은 사용자 지정 데이터를 Target에 전달
Platform Web SDK를 사용하여 Target 구현의 유효성 검사

TIP

다음 참조: Target을 at.js 2.x에서 Platform Web SDK로 마이그레이션 기존 at.js 구현을 마이그레이션하는 단계별 안내서에 대한 자습서입니다.

전제 조건

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

데이터 요소 및 규칙 설정을 포함하여 Platform Web SDK의 초기 구성에 대한 모든 단원을 완료합니다.
다음 항목이 있는지 확인합니다. 편집자 또는 승인자 역할.
설치 시각적 경험 작성기 Helper 확장 프로그램 Google Chrome 브라우저를 사용하는 경우
Target에서 활동을 설정하는 방법을 이해할 수 있습니다. 새로 고침이 필요한 경우 다음 튜토리얼 및 안내서가 이 단원에 유용합니다.

깜박임 완화 추가

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

NOTE

이 튜토리얼에서는 Luma 사이트 태그 및 플리커 완화 의 비동기적 구현이 있습니다. 이 섹션은 Platform Web SDK에서 플리커 완화 가 작동하는 방식을 이해하는 데 참조되는 것입니다.

비동기 구현

태그 라이브러리가 비동기적으로 로드되면 Target이 콘텐츠 교환을 수행하기 전에 페이지에서 렌더링을 완료할 수 있습니다. 이 동작으로 인해 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에서 응답을 받거나 시간 초과에 도달하면 제거됩니다.

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

body { opacity: 0 !important } Target이 로드될 때까지 사전 숨김에 사용할 CSS 정의를 지정합니다. 기본적으로 전체 페이지가 숨겨집니다. 이 정의를 숨기려는 방법과 함께 미리 숨길 선택기로 업데이트할 수 있습니다. 이 값은 단순히 사전 숨김 스타일 태그에 삽입되기 때문에 여러 정의를 포함할 수 있습니다. 탐색 아래의 콘텐츠를 줄바꿈하는 쉽게 식별할 수 있는 컨테이너 요소가 있는 경우 이 설정을 사용하여 해당 컨테이너 요소로 사전 숨김을 제한할 수 있습니다.
3000 사전 숨김에 대한 시간 제한(밀리초)을 지정합니다. 시간 초과 전에 Target에서 응답을 받지 못하면 사전 숨김 스타일 태그가 제거됩니다. 이 시간 제한에 도달하는 경우는 드뭅니다.

NOTE

Platform Web SDK용 사전 숨김 코드 조각은 Target at.js 라이브러리와 함께 사용되는 코드 조각과 약간 다릅니다. Platform Web SDK는 의 다른 스타일 ID를 사용하므로 반드시 올바른 코드 조각을 사용하십시오. alloy-prehiding. at.js에 대한 사전 숨김 코드 조각이 사용되는 경우 제대로 작동하지 않을 수 있습니다.

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

로 이동 확장 태그의 섹션
선택 구성 Adobe Experience Platform Web SDK 확장 기능용

다음 항목 선택 클립보드에 사전 숨김 코드 조각 복사 단추

비동기 구현을 위한 Target 사전 숨김 코드 조각

note note
NOTE
Platform Web SDK 확장에서 복사한 기본 사전 숨김 코드 조각에 다음과 같이 사이트에 없는 CSS 정의가 포함될 수 있습니다. `.personalization-container { opacity: 0 !important }`. 사전에 숨기는 코드 조각을 사이트에 맞게 확인하고 수정해야 합니다.

동기식 구현

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

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

로 이동 확장 태그의 섹션
다음 항목 선택 구성 Platform 웹 SDK 확장에 대한 단추
다음 항목 선택 사전 숨김 스타일 편집 단추
사용할 선택기 및 숨기기 메서드를 포함하도록 CSS를 수정합니다. 예: body { opacity: 0 !important } 페이지의 전체 본문을 미리 숨기려는 경우.
변경 사항을 저장하고 라이브러리에 빌드

NOTE

사전 숨김 스타일 설정은 동기식 구현에만 사용됩니다. 태그의 비동기 구현을 사용하는 경우 이 스타일은 비워 두거나 주석 처리해야 합니다.

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

데이터 스트림 구성

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

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

다음으로 이동 데이터 수집 인터페이스
왼쪽 탐색에서 을 선택합니다. 데이터스트림
이전에 만든 항목 선택 Luma Web SDK 데이터스트림
선택 서비스 추가
선택 Adobe Target (으)로 서비스
원하는 경우 아래 지침에 따라 Target 구현에 대한 선택적 세부 정보를 입력합니다.
선택 저장

속성 토큰

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

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

대상 속성 토큰

NOTE

데이터 스트림당 하나의 속성 토큰만 지정할 수 있습니다.

대상 환경 ID

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

Adobe은 개발, 스테이징 및 프로덕션 데이터스트림마다 타겟 환경 ID를 다르게 설정하여 작업을 단순화할 것을 권장합니다.

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

Target 환경

NOTE

Target 환경 ID를 지정하지 않으면 프로덕션 Target 환경으로 간주됩니다.

Target 타사 ID 네임스페이스

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

ID 기호는 아래의 ID 목록에 있습니다. 데이터 수집 > 고객 > ID.

ID 목록

Luma 사이트를 사용하는 이 튜토리얼의 목적상 ID 기호 를 사용하십시오 lumaCrmId 에 대한 단원 기간 동안 설정 ID.

시각적 개인화 결정 렌더링

먼저 Target 및 태그 인터페이스에 사용되는 용어를 이해해야 합니다.

활동: 하나 이상의 대상을 타겟으로 하는 경험 세트입니다. 예를 들어, 간단한 A/B 테스트는 두 개의 경험이 있는 활동일 수 있습니다.
경험: 하나 이상의 위치 또는 결정 범위에 타겟팅된 작업 세트입니다.
결정 범위: Target 경험이 제공되는 위치입니다. 이전 버전의 Target 사용에 익숙한 경우 결정 범위는 "mbox"와 동일합니다.
개인화 결정: 서버에서 결정하는 작업을 적용해야 합니다. 이러한 결정은 대상 기준 및 Target 활동 우선 순위를 기반으로 할 수 있습니다.
제안: Platform Web SDK 응답에서 전달되는 서버의 의사 결정 결과입니다. 예를 들어 배너 이미지를 교체하는 것이 좋습니다.

페이지 로드 규칙 업데이트

Target이 데이터 스트림에서 활성화되어 있을 경우 Target의 시각적 개인화 결정은 Platform Web SDK에 의해 전달됩니다. 그러나 자동으로 렌더링되지 않습니다.. 자동 렌더링을 활성화하려면 전역 페이지 로드 규칙을 수정해야 합니다.

다음에서 데이터 수집 인터페이스에서 이 자습서에 사용할 태그 속성을 엽니다.
를 엽니다. all pages - library load - AA & AT 규칙
다음 항목 선택 Adobe Experience Platform Web SDK - Send event 작업
사용 시각적 개인화 결정 렌더링 확인란 포함
변경 사항을 저장한 다음 라이브러리에 빌드

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

NOTE

일반적으로 시각적 개인화 결정 렌더링 전체 페이지 로드당 하나의 이벤트 보내기 작업에 대해서만 설정을 활성화해야 합니다. 여러 이벤트 보내기 작업에서 이 설정이 활성화되어 있으면 후속 렌더링 요청이 무시됩니다.

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

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

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

NOTE

Google Chrome을 브라우저로 사용하는 경우 VEC(시각적 경험 작성기) Helper 확장 프로그램 를 사용하면 VEC에서 편집할 사이트를 제대로 로드할 수 있습니다.

Target으로 이동
활동 URL에 대한 Luma 홈 페이지를 사용하여 경험 타깃팅 (XT) 활동을 만듭니다
페이지를 수정합니다(예: 홈페이지 배너의 텍스트 변경).

적절한 보고서 세트를 가진 보고 소스로 Adobe Analytics 를 선택하고 목표로 주문 지표를 선택합니다

note note
NOTE
Adobe Analytics을 사용하지 않는 경우 보고 소스로 Target 을 선택하고 과 같은 다른 지표를 선택합니다 참여 > 페이지 보기 수 대신, 활동을 저장하고 미리 보려면 목표 지표가 필요합니다.

활동 저장
변경 사항이 익숙하다면 활동을 활성화할 수 있습니다. 그렇지 않고 를 활성화하지 않고 경험을 미리 보려면 다음을 복사할 수 있습니다. QA 미리보기 URL.
Luma 홈 페이지를 로드하면 변경 사항이 적용된 것을 볼 수 있습니다
몇 시간 후에 Adobe Analytics에서 Target 활동 데이터 및 전환을 볼 수 있습니다. 자세한 내용은 Target 안내서 를 참조하십시오. A4T(Analytics for Target) 보고.

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

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

CAUTION

Google Chrome을 사용 중이며 VEC(시각적 경험 작성기) Helper 확장 프로그램 설치되어 있는지 확인합니다. Target 라이브러리 삽입 설정이 비활성화되었습니다. 이 설정을 활성화하면 추가 Target 요청이 발생합니다.

Adobe Experience Platform Debugger 브라우저 확장 프로그램 열기
로 이동 Luma 데모 사이트 디버거를 사용하여 사이트의 태그 속성을 자신의 개발 속성으로 전환합니다.
페이지 다시 로드
다음 항목 선택 네트워크 디버거의 도구
필터링 기준 Adobe Experience Platform 웹 SDK
첫 번째 호출에 대한 이벤트 행의 값을 선택합니다.
아래에 키가 있습니다. query > personalization 및 decisionScopes 의 값이 __view__. 이 범위는 Target의 "글로벌 mbox"에 해당합니다. 이 Platform Web SDK 호출은 Target에 의사 결정을 요청했습니다.
오버레이를 닫고 두 번째 네트워크 호출에 대한 이벤트 세부 정보를 선택합니다. 이 호출은 Target이 활동을 반환한 경우에만 표시됩니다.
Target에서 반환된 활동 및 경험에 대한 세부 사항이 있습니다. 이 Platform Web SDK 호출은 Target 활동이 사용자에게 렌더링되었다는 알림을 보내고 노출을 증가시킵니다.

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

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

페이지 로드 규칙에 범위 추가

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

를 엽니다. all pages - library load - AA & AT 규칙
다음 항목 선택 Adobe Experience Platform Web SDK - Send Event 작업
사용할 범위를 하나 이상 추가합니다. 이 예에서는 를 사용합니다. homepage-hero.
변경 사항을 저장하고 라이브러리에 빌드

TIP

이 자습서에서는 데모용으로 수동으로 정의된 단일 범위를 사용합니다. 특정 페이지에 사용할 수 있는 여러 결정 범위를 사용하려는 경우 페이지 경로에 따라 조건 적으로 범위 배열을 반환하는 데이터 요소를 사용하는 것이 좋습니다. 이 접근 방식은 구현을 단순하고 확장 가능하게 유지하는 데 도움이 됩니다.

Target의 응답을 처리합니다.

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

라는 규칙 만들기 homepage - send event complete - render homepage-hero.
규칙에 이벤트를 추가합니다. 사용 Adobe Experience Platform 웹 SDK 확장 및 이벤트 전송 완료 이벤트 유형.
Luma 홈 페이지(쿼리 문자열이 없는 경로 가 다음과 같음)에 규칙을 제한하는 조건을 추가합니다. /content/luma/us/en.html).

규칙에 작업을 추가합니다. 사용 코어 확장 및 사용자 지정 코드 작업 유형.

홈페이지 주인공 규칙 렌더링

note tip
TIP
기본 이름을 사용하는 대신 규칙 이벤트, 조건 및 작업에 설명 이름을 지정합니다. 강력한 규칙 구성 요소 이름을 사용하면 검색 결과를 더욱 유용하게 사용할 수 있습니다.

Platform Web SDK 응답에서 반환된 제안에 대해 읽고 조치할 사용자 지정 코드를 입력합니다. 이 예제의 사용자 지정 코드는에 대한 안내서에 요약된 접근 방식을 사용합니다. 개인화된 콘텐츠 수동 렌더링. 코드가 다음에 대해 조정되었습니다. homepage-hero 태그 규칙 작업을 사용하는 범위 예입니다.

code language-javascript

code language-javascript
var propositions = event.propositions; var heroProposition; if (propositions) { // Find the hero proposition, if it exists. for (var i = 0; i < propositions.length; i++) { var proposition = propositions[i]; if (proposition.scope === "homepage-hero") { heroProposition = proposition; break; } } } var heroHtml; if (heroProposition) { // Find the item from proposition that should be rendered. // Rather than assuming there a single item that has HTML // content, find the first item whose schema indicates // it contains HTML content. for (var j = 0; j < heroProposition.items.length; j++) { var heroPropositionItem = heroProposition.items[j]; if (heroPropositionItem.schema === "https://ns.adobe.com/personalization/html-content-item") { heroHtml = heroPropositionItem.data.content; break; } } } if (heroHtml) { // Hero HTML exists. Time to render it. var heroElement = document.querySelector(".heroimage"); heroElement.innerHTML = heroHtml; // For this example, we assume there is only a signle place to update in the HTML. } // Send a "display" event alloy("sendEvent", { xdm: { eventType: "propositionDisplay", _experience: { decisioning: { propositions: [ { id: heroProposition.id, scope: heroProposition.scope, scopeDetails: heroProposition.scopeDetails } ] } } } });

var propositions = event.propositions;

var heroProposition;
if (propositions) {
   // Find the hero proposition, if it exists.
   for (var i = 0; i < propositions.length; i++) {
      var proposition = propositions[i];
      if (proposition.scope === "homepage-hero") {
         heroProposition = proposition;
         break;
      }
   }
}

var heroHtml;
if (heroProposition) {
   // Find the item from proposition that should be rendered.
   // Rather than assuming there a single item that has HTML
   // content, find the first item whose schema indicates
   // it contains HTML content.
   for (var j = 0; j < heroProposition.items.length; j++) {
      var heroPropositionItem = heroProposition.items[j];
      if (heroPropositionItem.schema === "https://ns.adobe.com/personalization/html-content-item") {
         heroHtml = heroPropositionItem.data.content;
         break;
      }
   }
}

if (heroHtml) {
   // Hero HTML exists. Time to render it.
   var heroElement = document.querySelector(".heroimage");
   heroElement.innerHTML = heroHtml;
   // For this example, we assume there is only a signle place to update in the HTML.
}

// Send a "display" event
alloy("sendEvent", {
   xdm: {
      eventType: "propositionDisplay",
      _experience: {
         decisioning: {
            propositions: [
               {
                  id: heroProposition.id,
                  scope: heroProposition.scope,
                  scopeDetails: heroProposition.scopeDetails
               }
            ]
         }
      }
   }
});

변경 사항을 저장하고 라이브러리에 빌드
Luma 홈 페이지를 몇 번 로드하십시오. 충분히 새 페이지를 만들 수 있습니다. homepage-hero target 인터페이스의 의사 결정 범위 등록입니다.

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

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

열기 Adobe Target
이전 단원에 사용된 활동 비활성화
양식 기반 경험 작성기 선택 사항을 사용하여 경험 타깃팅 (XT) 활동 만들기
다음 항목 선택 homepage-hero 위치 드롭다운 및 HTML 오퍼 만들기 콘텐츠 드롭다운에서 위치를 사용할 수 없는 경우 입력할 수 있습니다. Target은 해당 위치 또는 범위에 대한 요청을 받은 후 정기적으로 새 위치 이름을 채웁니다.

다음 코드를 콘텐츠 상자에 붙여 넣습니다. 이 코드는 다른 배경 이미지가 있는 기본 영웅 배너입니다.

code language-html

code language-html
`<div class="we-HeroImage jumbotron" style="background-image: url('/content/luma/us/en/women/_jcr_content/root/hero_image.coreimg.jpeg');"> <div class="container cq-dd-image"> <div class="we-HeroImage-wrapper"> <p class="h3">New Luma Yoga Collection</p> <strong class="we-HeroImage-title h1">Be active with style </strong> <p> <a class="btn btn-primary btn-action" href="/content/luma/us/en/products.html" role="button">Shop Now</a> </p> </div> </div> </div>`

<div class="we-HeroImage jumbotron" style="background-image: url('/content/luma/us/en/women/_jcr_content/root/hero_image.coreimg.jpeg');">
   <div class="container cq-dd-image">
      <div class="we-HeroImage-wrapper">
         <p class="h3">New Luma Yoga Collection</p>
         <strong class="we-HeroImage-title h1">Be active with style&nbsp;</strong>
         <p>
            <a class="btn btn-primary btn-action" href="/content/luma/us/en/products.html" role="button">Shop Now</a>
         </p>
      </div>
   </div>
</div>

다음에서 목표 및 설정 단계, 보고 소스로 Adobe Target 선택 및 참여 > 페이지 보기 수 을(를) 목표로 함
활동 저장
변경 사항이 익숙하다면 활동을 활성화할 수 있습니다. 그렇지 않고 를 활성화하지 않고 경험을 미리 보려면 다음을 복사할 수 있습니다. QA 미리보기 URL.
Luma 홈 페이지를 로드하면 변경 사항이 적용된 것을 볼 수 있습니다

NOTE

"mbox를 클릭함" 전환 목표가 자동으로 작동하지 않습니다. Platform Web SDK는 사용자 지정 범위를 자동으로 렌더링하지 않으므로 콘텐츠를 적용하기 위해 선택한 위치에 대한 클릭 수를 추적하지 않습니다. "click"을 사용하여 각 범위에 대한 고유한 클릭 추적을 만들 수 있습니다 eventType 를 사용 가능으로 _experience 를 사용한 세부 사항 sendEvent 작업.

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

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

Adobe Experience Platform Debugger 브라우저 확장 프로그램 열기
로 이동 Luma 데모 사이트 디버거를 사용하여 사이트의 태그 속성을 자신의 개발 속성으로 전환합니다.
페이지 다시 로드
다음 항목 선택 네트워크 디버거의 도구
필터링 기준 Adobe Experience Platform 웹 SDK
첫 번째 호출에 대한 이벤트 행의 값을 선택합니다.
아래에 키가 있습니다. query > personalization 및 decisionScopes 의 값이 __view__ 이전과 비슷하지만 지금은 homepage-hero 범위가 포함되었습니다. 이 Platform Web SDK 호출은 VEC 및 특정 homepage-hero 위치.
오버레이를 닫고 두 번째 네트워크 호출에 대한 이벤트 세부 정보를 선택합니다. 이 호출은 Target이 활동을 반환한 경우에만 표시됩니다.
Target에서 반환된 활동 및 경험에 대한 세부 사항이 있습니다. 이 Platform Web SDK 호출은 Target 활동이 사용자에게 렌더링되었다는 알림을 보내고 노출을 증가시킵니다.

Target에 추가 데이터 전달

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

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

Target 매개 변수에 대한 데이터 요소 만들기

먼저 프로필 속성, 엔티티 속성, 카테고리 값에 대한 몇 가지 추가 데이터 요소를 설정한 다음 data 비 XDM 데이터를 전달하는 데 사용되는 개체:

target.entity.id 매핑됨 digitalData.product.0.productInfo.sku
target.entity.name 매핑됨 digitalData.product.0.productInfo.title

target.user.categoryId 다음 사용자 지정 코드를 사용하여 최상위 카테고리에 대한 사이트 URL을 구문 분석합니다.

code language-javascript
`var cat = location.pathname.split(/[/.]+/); if (cat[5] == 'products') { return (cat[6]); } else if (cat[5] != 'html') { return (cat[5]); }`

data.content 다음 사용자 지정 코드 사용:

code language-javascript

code language-javascript
`var data = { __adobe: { target: { "entity.id": _satellite.getVar("target.entity.id"), "entity.name": _satellite.getVar("target.entity.name"), "profile.loggedIn": _satellite.getVar("user.profile.attributes.loggedIn"), "user.categoryId": _satellite.getVar("target.user.categoryId") } } } return data;`

var data = {
   __adobe: {
      target: {
         "entity.id": _satellite.getVar("target.entity.id"),
         "entity.name": _satellite.getVar("target.entity.name"),
         "profile.loggedIn": _satellite.getVar("user.profile.attributes.loggedIn"),
         "user.categoryId": _satellite.getVar("target.user.categoryId")
      }
   }
}
return data;

페이지 로드 규칙 업데이트

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

를 엽니다. all pages - library load - AA & AT 규칙
다음 항목 선택 Adobe Experience Platform Web SDK - Send event 작업
추가 data.content 데이터 필드에 대한 데이터 요소
변경 사항을 저장하고 라이브러리에 빌드
에 대해 1~4단계를 반복합니다. 제품 보기 - 라이브러리 로드 - AA 규칙

NOTE

위의 예에서는 data 일부 페이지 유형에서 완전히 채워지지 않은 개체입니다. 태그는 이 상황을 적절하게 처리하며 정의되지 않은 값이 있는 키는 생략합니다. 예를 들어, entity.id 및 entity.name 는 제품 세부 사항을 제외한 어떤 페이지에서도 전달되지 않습니다.

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

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

다음 위치로 이동 Luma 데모 사이트 전자 메일로 로그인 test@adobe.com 및 암호 test
제품 세부 사항 페이지로 이동
Adobe Experience Platform 디버거 브라우저 확장 을 열고 태그 속성을 자신의 개발 속성으로 전환합니다.
페이지 다시 로드
다음 항목 선택 네트워크 디버거의 도구 및 필터링 기준 Adobe Experience Platform 웹 SDK
첫 번째 호출에 대한 이벤트 행의 값을 선택합니다.
아래에 키가 있습니다. data > __adobe > target 제품, 카테고리 및 로그인 상태에 대한 정보로 채워집니다.

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

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

열기 Adobe Target
다음 위치로 이동 대상 섹션
대상자를 만들고 사용자 정의 속성 유형
검색 매개 변수 필드 web. 드롭다운 메뉴가 웹 페이지 세부 사항과 관련된 모든 XDM 필드로 채워집니다.

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

다음을 선택합니다. 방문자 프로필 속성 유형
loggedIn을 검색합니다. 드롭다운 메뉴에서 속성을 사용할 수 있는 경우 속성이 Target에 올바르게 전달되었습니다. 새 속성을 Target UI에서 사용할 수 있게 되는 데 몇 분이 걸릴 수 있습니다.

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

다음 위치로 이동 Recommendations 섹션
선택 카탈로그 검색 왼쪽 탐색
Luma 사이트에서 이전에 방문한 제품 SKU 또는 제품 이름을 검색합니다. 제품이 제품 카탈로그에 표시되어야 합니다. 새 제품이 Recommendations 제품 카탈로그에서 검색되는 데 몇 분이 걸릴 수 있습니다.

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

NOTE

Adobe Experience Platform Web SDK에 대해 학습하는 데 시간을 투자해 주셔서 감사합니다. 질문이 있거나 일반적인 피드백을 공유하려는 경우 또는 향후 콘텐츠에 대한 제안이 있는 경우 이에 대해 공유하십시오 Experience League 커뮤니티 토론 게시물

recommendation-more-help

8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4