Adobe Target 추가

이 단원에서는 페이지 로드 요청 및 사용자 지정 매개 변수와 함께 Adobe Target 확장을 구현합니다.

Adobe Target은 고객의 경험을 조정하고 개인화하는 데 필요한 모든 기능을 제공하는 Adobe Experience Cloud 솔루션입니다. 따라서 사용자의 웹 및 모바일 사이트, 앱, 소셜 미디어 및 기타 디지털 채널의 매출을 극대화할 수 있습니다.

학습 목표

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

전제 조건

이 섹션의 학습 내용을 완료하려면 먼저 태그 구성 및 ID 서비스 추가의 학습 내용을 완료해야 합니다.

Target 사전 숨김 코드 조각 추가

시작하기 전에 태그 포함 코드를 약간 업데이트해야 합니다. 태그 포함 코드가 비동기식으로 로드되면 Target 라이브러리가 완전히 로드되고 콘텐츠 교환이 수행되기 전에 페이지에서 렌더링을 완료할 수 있습니다. 이렇게 하면 Target에서 지정한 개인화된 컨텐츠로 대체되기 전에 기본 컨텐츠가 잠깐 나타나는 "깜박임"이라고 하는 것이 나타날 수 있습니다. 이러한 깜박임을 방지하려면 태그의 비동기 포함 코드 바로 앞에 특수 사전 숨김 코드 조각을 하드코딩하는 것이 좋습니다.

이 작업은 이미 Luma 사이트에서 수행되었지만 구현을 이해할 수 있도록 샘플 페이지에서 수행해 보겠습니다. 다음 코드 줄을 복사합니다.

<script>
   //prehiding snippet for Adobe Target with asynchronous tags deployment
   ;(function(win, doc, style, timeout) {
   var STYLE_ID = 'at-body-style';
   function getParent() {
      return doc.getElementsByTagName('head')[0];
   }
   function addStyle(parent, id, def) {
      if (!parent) {
      return;
      }
      var style = doc.createElement('style');
      style.id = id;
      style.innerHTML = def;
      parent.appendChild(style);
   }
   function removeStyle(parent, id) {
      if (!parent) {
      return;
      }
      var style = doc.getElementById(id);
      if (!style) {
      return;
      }
      parent.removeChild(style);
   }
   addStyle(getParent(), STYLE_ID, style);
   setTimeout(function() {
      removeStyle(getParent(), STYLE_ID);
   }, timeout);
   }(window, document, "body {opacity: 0 !important}", 3000));
</script>

샘플 페이지를 열고 아래 그림과 같이 태그 포함 코드 바로 앞에 붙여 넣습니다(줄 번호가 다른 경우 걱정하지 마십시오). 이 스크린샷에서는 코드 조각 사전 숨김이 축소되었습니다.

샘플 페이지를 다시 로드합니다. 페이지는 표시되기 전에 3초 동안 숨겨집니다. 이 동작은 일시적이며 Target을 배포하면 사라집니다. 이 사전 숨김 동작은 사용자 지정할 수 있지만 일반적으로 기본 설정에서 맨 왼쪽 위에 있는 코드 조각의 맨 끝에서 다음 두 가지 구성으로 제어됩니다.

자세한 내용을 알고 축소되지 않은 사전 숨김 코드 조각을 가져오려면 비동기 배포를 사용한 Adobe Target 확장을 참조하십시오.

Target 확장 추가

Adobe Target 확장은 최신 웹, at.js에 Target의 JavaScript SDK를 사용하여 클라이언트측 구현을 지원합니다. 여전히 Target의 이전 라이브러리인 mbox.js 을(를) 사용하는 고객은 태그를 사용하려면 at.js 2.x로 업그레이드해야 합니다.

Target v2 확장은 다음 두 가지 주요 부분으로 구성됩니다.

이 첫 번째 연습에서는 확장을 추가하고 구성을 살펴보십시오. 이 작업은 나중에 연습할 때 사용하게 됩니다.

확장을 추가하려면

현재는 Target이 실제로 아무것도 수행하지 않으므로 확인할 사항이 없습니다.

Target 로드 및 페이지 로드 요청 실행

마케터는 Target을 사용하여 컨텐츠를 테스트하고 타깃팅할 때 페이지에서 방문자 경험을 제어합니다. 페이지 표시에서의 이 중요한 역할로 인해 페이지 가시성에 미치는 영향을 최소화하려면 가능한 한 빨리 Target을 로드해야 합니다. 이 섹션에서는 Target JavaScript 라이브러리(at.js)를 로드하고 페이지 로드 요청(이전 버전의 at.js에서는 "글로벌 mbox"라고 함)을 실행합니다.

데이터 요소, 규칙 및 라이브러리 추가 단원에서 만든 All Pages - Library Loaded 규칙은 페이지 로드 시 가능한 한 빨리 트리거되므로 이 규칙을 사용하여 Target을 구현할 수 있습니다.

Target을 로드하려면

Load Target 작업이 추가되면 at.js가 페이지에 로드됩니다. 그러나 Target 요청은 Fire Page Load Request 작업을 추가하기 전까지 실행되지 않습니다.

페이지 로드 요청을 실행하려면

페이지 로드 요청의 유효성 확인

Target v2 확장을 추가하고 Load Target 및 Fire Page Load Request 작업을 실행했으므로 태그 속성이 사용되는 모든 페이지에서 페이지 로드 요청이 수행되어야 합니다.

Target 로드 및 페이지 로드 요청 실행 작업의 유효성을 검사하려면

축하합니다! Target을 구현했습니다!

매개 변수 추가

Target 요청에 매개 변수를 전달하면 타깃팅, 테스트 및 개인화 활동에 강력한 기능이 추가됩니다. 태그 확장은 전달 매개 변수에 두 가지 작업을 제공합니다.

이러한 작업은 Load Target 작업 전에 사용할 수 있으며, 규칙 구성에 따라 페이지마다 다른 매개 변수를 설정할 수 있습니다. 페이지 로드 요청을 실행하는 규칙 전에 고객 ID를 ID 서비스로 설정할 때 사용한 규칙 순서 지정 기능을 사용하여 Library Loaded 이벤트에 대한 추가적인 매개 변수를 설정합니다.

요청(mbox) 매개 변수

매개 변수는 사용자 지정 데이터를 Target에 전달하여 개인화 기능을 향상시키는 데 사용됩니다. 페이지 이름, 템플릿 등과 같은 검색 세션 중에 자주 변경되는 속성에 적합하며 지속되지 않습니다.

데이터 요소, 규칙 및 라이브러리 추가 단원에서 이전에 요청 매개 변수로서 만든 Page Name 데이터 요소를 추가하겠습니다.

요청 매개 변수를 추가하려면

요청 매개 변수의 유효성 검사

당분간은 at.js 2.x 요청과 함께 전달된 사용자 지정 매개 변수가 디버거에 쉽게 표시되지 않으며, 따라서 브라우저의 개발자 도구를 활용하겠습니다.

pageName 요청 매개 변수의 유효성을 검사하려면

프로필 매개 변수

요청 매개 변수와 유사한 프로필 매개 변수는 Target 요청을 통해서도 전달됩니다. 하지만 프로필 매개 변수는 Target의 방문자 프로필 데이터베이스에 저장되고 방문자 프로필의 지속 시간 동안 지속됩니다. 사이트의 한 페이지에서 이러한 매개 변수를 설정하고 다른 페이지의 Target 활동에 사용할 수 있습니다. 다음은 자동차 웹 사이트의 예입니다. 방문자가 차량 페이지로 이동하면 프로필 매개 변수 "profile.lastViewed=sportscar"를 전달하여 해당 특정 차량에 관심 사항을 기록할 수 있습니다. 방문자가 다른 비차량 페이지로 이동하면 마지막으로 본 차량을 기준으로 컨텐츠를 타깃팅할 수 있습니다. 프로필 매개 변수는 거의 변경되지 않거나 특정 페이지에서만 사용할 수 있는 속성에 이상적입니다

이 자습서에서는 프로필 매개 변수를 전달하지 않지만, 작업 과정은 pageName 매개 변수를 전달할 때 수행한 작업 과정과 거의 동일합니다. 한 가지 차이점은 프로필 매개 변수 이름에 profile. 접두사를 지정해야 한다는 것입니다. 프로필 매개 변수 "userType"은 Add Params to Page Load Request 작업에서 다음과 같이 표시됩니다.

엔티티 매개 변수

엔티티 매개 변수는 다음과 같은 세 가지 주된 이유로 추천 구현에 사용되는 특수 매개 변수입니다.

이 자습서에서는 엔터티 매개 변수를 전달할 필요가 없지만, 작업 과정은 pageName 요청 매개 변수를 전달할 때 이전에 수행한 작업과 동일하므로 매개 변수에 "entity."가 접두사로 붙은 이름을 지정하고 이것을 적절한 데이터 요소에 매핑하기만 하면 됩니다. 일부 일반 엔티티는 사용해야 하는 이름을 예약했습니다(예: 제품 sku의 경우 entity.id). 다음은 Add Params to Page Load Request 작업에서 엔티티 매개 변수를 설정할 때의 모습입니다.

고객 ID 매개 변수 추가

Adobe Experience Platform ID 서비스를 통해 고객 ID를 수집하면 Adobe Experience Cloud의 사용자 특성 기능을 사용하여 CRM 데이터를 Target에 쉽게 가져올 수 있습니다. 또한 장치 간 방문자 스티칭을 지원하므로 고객이 랩톱 및 모바일 장치 간을 전환할 때 일관된 사용자 환경을 유지할 수 있습니다.

페이지 로드 요청을 실행하기 전에 ID 서비스의 Set Customer IDs 작업에서 고객 ID를 설정해야 합니다. 이렇게 하려면 사이트에 다음과 같은 기능이 있는지 확인하십시오.

이전 단원인 Adobe Experience Platform ID 서비스 추가에서는 "고객 ID 설정" 작업을 실행하는 All Pages - Library Loaded - Authenticated - 10 규칙을 만들었습니다. 이 규칙에는 10이라는 Order 설정이 있으므로, 페이지 로드 요청이 50이라는 해당 Order 설정으로 All Pages - Library Loaded 규칙에서 실행되기 전에 고객 ID가 설정됩니다. 따라서 Target에 대한 고객 ID 컬렉션을 이미 구현했습니다!

고객 ID의 유효성 검사

당분간은 at.js 2.x 요청과 함께 전달된 사용자 지정 매개 변수가 디버거에 쉽게 표시되지 않으며, 따라서 브라우저의 개발자 도구를 활용하겠습니다.

고객 ID의 유효성을 검사하려면

속성 토큰 매개 변수 추가

속성 토큰은 Target Premium Enterprise 사용자 권한 기능과 함께 사용되는 예약된 매개 변수입니다. Experience Cloud 조직의 서로 다른 구성원에게 각 속성에 대한 서로 다른 권한을 할당할 수 있도록 다양한 디지털 속성을 정의하는 데 사용됩니다. 예를 들어, 사용자 그룹 하나가 여러분의 웹 사이트에서는 Target 활동을 설정할 수 있지만 모바일 애플리케이션에서는 설정할 수 없도록 할 수 있습니다.

Target 속성은 태그 속성 및 Analytics 보고서 세트와 유사합니다. 여러 브랜드, 웹 사이트 및 마케팅 팀이 있는 기업은 각 웹 사이트 또는 모바일 앱에서 다른 Target 속성, 태그 속성 및 Analytics 보고서 세트를 사용할 수 있습니다. 태그 속성은 해당 포함 코드로 구별되고, Analytics 보고서 세트는 해당 보고서 세트 ID로 구별되며, Target 속성은 해당 속성 토큰 매개 변수로 구별됩니다.

속성 토큰은 targetPageParams() 함수가 있는 태그의 사용자 지정 코드 작업을 사용하여 구현해야 합니다. 단일 태그 속성으로 서로 다른 at_property 값을 사용하여 서로 다른 여러 사이트를 구현하는 경우 데이터 요소를 통해 at_property 값을 관리할 수 있습니다.

다음은 Target Premium 고객이 자습서 속성에 속성 토큰을 구현하려는 경우에 대한 선택적 연습입니다.

속성 토큰 유효성 검사

당분간은 at.js 2.x 요청과 함께 전달된 사용자 지정 매개 변수가 디버거에 쉽게 표시되지 않으며, 따라서 브라우저의 개발자 도구를 활용하겠습니다.

속성 토큰 매개 변수의 유효성을 검사하려면

사용자 지정 요청 추가

주문 확인 요청 추가

주문 확인 요청은 Target에 주문 세부 사항을 전송하는 데 사용되는 특별한 유형의 요청입니다. orderId, orderTotal 및 productPurchasedId와 같은 세 가지 특정 요청 매개 변수를 포함하면 일반 Target 요청이 주문 요청으로 바뀝니다. 주문 요청은 매출 보고 외에 다음 작업도 수행합니다.

모범 사례는 비소매 사이트에서도 모든 주문 유입 경로에 주문 확인 요청을 사용하는 것입니다. 예를 들어 리드 생성 사이트에는 일반적으로 끝에 고유한 "리드 ID"가 생성되는 리드 유입 경로가 있습니다. 이러한 사이트에서는 orderTotal에 정적 값(예: "1")을 사용하여 주문 요청을 구현해야 합니다.

대부분의 보고에 A4T(Analytics for Target) 통합을 사용하는 고객은 A4T를 지원하지 않는 Automated Personalization 활동을 사용하는 경우 주문 요청을 구현하고자 할 수도 있습니다. 또한 주문 요청은 Recommendations 구현에 중요한 요소로, 구매 행동에 따라 알고리즘을 강화합니다. A4T 지원에 대한 최신 정보는 설명서를 참조하세요.

주문 확인 요청은 주문 확인 페이지나 이벤트에서만 트리거되는 규칙에서 실행해야 합니다. 이 요청은 종종 Adobe Analytics 구매 이벤트를 설정하는 규칙과 결합될 수 있습니다. 적절한 데이터 요소를 사용하여 orderId, orderTotal 및 productPurchasedId 매개 변수를 설정하는 Core 확장의 사용자 지정 코드 작업을 사용하여 구성해야 합니다.

Luma 사이트에서 주문 확인 요청을 실행하기 위해 필요한 데이터 요소 및 규칙을 추가하겠습니다. 이미 여러 개의 데이터 요소를 만들었으므로 이러한 지침은 간략하게 설명됩니다.

주문 ID에 대한 데이터 요소를 만들려면

장바구니 금액에 대한 데이터 요소를 만들려면

장바구니 SKU(Target)에 대한 데이터 요소를 만들려면

이제 주문 확인 페이지에서 이러한 데이터 요소를 매개 변수로 사용하여 주문 확인 요청을 실행하는 규칙을 만들어야 합니다.

주문 확인 페이지에 대한 규칙을 만들려면

주문 확인 요청의 유효성 검사

당분간은 at.js 2.x 요청과 함께 전달된 사용자 지정 매개 변수가 디버거에 쉽게 표시되지 않으며, 따라서 브라우저의 개발자 도구를 활용하겠습니다.

사용자 지정 요청

드물게 페이지 로드 및 주문 확인 요청 이외의 Target 요청을 수행해야 하는 경우가 있습니다. 예를 들어 개인화에 사용하려는 중요한 데이터가 태그 포함 코드 앞에 페이지에 정의되지 않은 경우가 있습니다. 이 데이터는 페이지 하단에 하드코딩되거나 비동기 API 요청에서 반환될 수 있습니다. 페이지가 이미 표시되므로 이 요청을 컨텐츠 전달에 사용하는 것이 최적은 아니지만, 추가 요청을 사용하여 이 데이터를 Target에 보낼 수 있습니다. 이 데이터는 나중에 사용하기 위해 방문자 프로필을 보강하거나(프로필 매개 변수 사용) Recommendations 카탈로그를 채우는 데 사용할 수 있습니다.

이러한 경우 getOffer()/applyOffer() 및 trackEvent() 메서드를 사용하여 요청을 실행하도록 Core 확장에서 사용자 지정 코드 작업을 수행합니다. 이는 주문 확인 요청 연습에서 수행한 것과 매우 유사하지만, 다른 요청 이름을 사용하고 특별한 주문 매개 변수는 사용하지 않습니다. 사용자 지정 코드에서 Target 요청을 수행하기 전에 Target 로드 작업을 사용하십시오.

라이브러리 머리글 및 라이브러리 바닥글

Target 사용자 인터페이스의 Edit at.js 화면에는 at.js 파일 전후에 바로 실행되는 사용자 지정 JavaScript를 붙여넣을 수 있는 위치가 있습니다. 라이브러리 헤더는 경우에 따라 targetGlobalSettings() 함수를 통해 at.js 설정을 재정의하거나 데이터 공급자 기능을 사용하여 타사의 데이터를 전달하는 데 사용됩니다. 라이브러리 바닥글은 경우에 따라 at.js 사용자 지정 이벤트 리스너를 추가하는 데 사용됩니다.

태그에서 이 기능을 복제하려면 코어 확장에서 사용자 지정 코드 작업을 사용하고, 이 작업 순서를 Target 로드 작업 전(라이브러리 헤더) 또는 후(라이브러리 바닥글)로 지정합니다. 이 작업은 아래 그림에 표시된 대로 Load Target 작업과 동일한 규칙으로 수행하거나, Load Target가 들어 있는 규칙 전이나 후에 안정적으로 실행되는 이벤트 또는 주문 설정을 사용하여 별도의 규칙으로 수행할 수 있습니다.

사용자 지정 머리글과 바닥글에 대한 사용 사례에 대해 자세히 알아보려면 다음 리소스를 참조하십시오.

다음 "Adobe Analytics 추가" >