Adobe Target 추가

코어 라이브러리 설정을 관리하는 확장 구성

규칙 작업: 다음을 수행합니다.

1. Target 로드(at.js 2.x)
2. 페이지 로드 요청에 매개 변수 추가
3. 모든 요청에 매개 변수 추가
4. 페이지 로드 요청 실행

Extensions > Catalog ​로 이동합니다.

필터에 target을 입력하여 Adobe Target 확장을 신속하게 찾습니다. Adobe Target과 Adobe Target v2, 이렇게 두 개의 확장이 있습니다. 이 자습서에서는 기존 웹 사이트와 단일 페이지 애플리케이션(SPA) 모두에 적합한 최신 버전의 at.js(현재 2.x)를 사용하는 v2 버전의 확장을 사용합니다.

Install ​을 클릭합니다.

확장을 추가하면 아래 그림과 같이 Target 인터페이스에서 많은 설정을 가져오지만 모든 at.js 설정을 가져오지는 않습니다. 가져오지 않는 한 가지 설정은 시간 초과(확장을 추가한 후 항상 3000ms가 됨)입니다. 자습서에서 기본 설정을 그대로 둡니다. 왼쪽에는 확장의 최신 버전과 함께 제공되는 at.js 버전이 표시됩니다.

Save to Libray ​를 클릭합니다.

로 이동 규칙 왼쪽 탐색에서 을(를) 클릭한 다음 All Pages - Library Loaded 규칙 편집기를 열려면

Actions 아래에 있는 을 클릭하여 새 작업을 추가합니다.

Extension > Adobe Target v2 ​를 선택합니다.

Action Type > Load Target ​을 선택합니다.

Keep Changes ​를 클릭합니다.

Actions 아래에 있는 을 다시 클릭하여 다른 작업을 추가합니다.

Extension > Adobe Target v2 ​를 선택합니다.

Action Type > Fire Page Load Request ​를 선택합니다.

사전 숨김에 사용할 페이지 및 CSS 선택기를 숨길지 여부와 관련된 페이지 로드 요청에 사용할 수 있는 구성이 몇 가지 있습니다. 이러한 설정은 페이지에서 하드코딩된 사전 숨김 코드 조각과 함께 작동합니다. 기본 설정을 그대로 둡니다.

Keep Changes ​를 클릭합니다.

새 작업은 Load Target 작업 다음에 차례로 추가되고 작업들은 이 순서로 실행됩니다. 작업을 드래그 앤 드롭하여 순서를 변경할 수 있지만 이 시나리오에서는 Fire Page Load Request 전에 Load Target이 와야 합니다.

Save to Library and Build ​를 클릭합니다.

샘플 페이지를 다시 로드합니다. 페이지가 표시되기 전에 지연 시간 3초가 더 이상 표시되지 않습니다. file:// 프로토콜을 사용하여 샘플 페이지를 로드하는 경우, Chrome은 file:// 프로토콜을 사용할 때 Target 요청을 실행하지 않으므로 Firefox 또는 Safari 브라우저에서 이 단계를 수행해야 합니다.

Luma 사이트를 엽니다.

디버거가 태그 속성을 다음에 매핑하는지 확인합니다. 본인 에 설명된 개발 환경 이전 단원

디버거의 요약 탭으로 이동합니다.

Launch 섹션에서 Target 제목 아래에 Extensions이 표시되는지 확인합니다.

Target 섹션에서 at.js 라이브러리 버전이 나타나는지 확인합니다.

마지막으로 Target 탭으로 이동하여 클라이언트 코드를 확장하고 페이지 로드 요청이 표시되는지 확인합니다.

Add Params to Page Load Request - 페이지 로드 요청에 매개 변수를 추가합니다(targetPageParams() 메서드에 해당).

Add Params to All Requests - 페이지 로드 요청과 사용자 지정 코드 작업으로 만들었거나 사이트에서 하드코딩된 추가적인 요청(targetPageParamsAll() 메서드에 해당)과 같은 모든 Target 요청에서 매개 변수를 추가합니다.

로 이동 규칙 왼쪽 탐색에서 을(를) 클릭한 다음 All Pages - Library Loaded 규칙 편집기를 엽니다.

Actions 아래에 있는 을 클릭하여 새 작업을 추가합니다.

Extension > Adobe Target v2 ​를 선택합니다.

Action Type > Add Params to Page Load Request ​를 선택합니다.

pageNameName 으로 ​을 입력합니다.

을 클릭하여 데이터 요소 모달을 엽니다.

Page Name 데이터 요소를 클릭합니다.

Select 단추를 클릭합니다.

Keep Changes ​를 클릭합니다.

Add Params to Page Load Request 작업의 왼쪽 가장자리를 클릭-앤-드래그하여 이 작업의 순서를 Fire Page Load Request 작업 전에 배치할 수 있습니다(Load Target 전 또는 후가 될 수 있음).

Save to Library and Build ​를 클릭합니다.

Luma 사이트를 엽니다.

디버거가 태그 속성을 다음에 매핑하는지 확인합니다. 본인 에 설명된 개발 환경 이전 단원

자격 증명 test@adobe.com/test를 사용하여 Luma 사이트에 로그인합니다.

Luma 홈 페이지로 돌아갑니다.

브라우저의 개발자 도구를 엽니다

Network 탭을 클릭합니다.

요청을 tt.omtrdc(또는 Target 요청에 대한 CNAME 도메인)로 필터링합니다.

Headers > Request Payload > id.customerIds.0 섹션을 확장하여 고객 ID 설정과 값의 유효성을 검사합니다.

별도의 탭에서 Target 사용자 인터페이스를 엽니다.

다음으로 이동 관리 > 속성

사용할 속성을 확인하고 </> (또는 새 속성 만들기)

내에서 코드 조각 복사 <script></script> 클립보드에

태그 탭에서 규칙 왼쪽 탐색에서 을(를) 클릭한 다음 All Pages - Library Loaded 규칙 편집기를 엽니다.

Actions에서 Core - Custom Code 작업을 클릭하여 Action Configuration을 엽니다.

코드 편집기를 열고 를 포함하는 Target 인터페이스에서 코드를 붙여넣습니다. targetPageParams() 함수

을(를) 클릭합니다 저장 단추

다음 확인: 전역 실행 상자 소 targetPageParams() 전역 범위에 선언됩니다.

Keep Changes ​를 클릭합니다.

Save to Library and Build ​를 클릭합니다.

Luma 사이트를 엽니다.

디버거가 태그 속성을 다음에 매핑하는지 확인합니다. 본인 에 설명된 개발 환경 이전 단원

브라우저의 개발자 도구를 엽니다

Network 탭을 클릭합니다.

요청을 tt.omtrdc(또는 Target 요청에 대한 CNAME 도메인)로 필터링합니다.

Headers > Request Payload > property.token 섹션을 확장하여 값의 유효성을 검사합니다.

Add Data Element ​를 클릭합니다.

데이터 요소에 이름을 지정합니다 Cart SKUs (Target)

Data Element Type > Custom Code ​를 선택합니다.

Target에서 skus는 쉼표로 구분된 목록이어야 합니다. 이 사용자 지정 코드는 데이터 계층 배열을 적절한 형식으로 다시 지정합니다. 사용자 지정 코드 편집기에서 다음을 붙여넣습니다.

var targetProdSkus="";
for (var i=0; i<digitalData.cart.cartEntries.length; i++) {
  if(i>0) {
    targetProdSkus = targetProdSkus + ",";
  }
  targetProdSkus = targetProdSkus + digitalData.cart.cartEntries[i].sku;
}
return targetProdSkus;

Force lowercase value 옵션을 선택합니다.

Clean text 옵션을 선택합니다.

Save to Libray ​를 클릭합니다.

클릭 규칙 왼쪽 탐색

Add Rule ​을 클릭합니다

규칙 이름을 지정합니다 Order Confirmation Page - Library Loaded - 60

Events > Add ​를 클릭합니다.

1. Event Type > Library Loaded (Page Top) ​을 선택합니다.
2. 아래 고급 옵션, 변경 Order 끝 60 그 후에 발화하도록 Load Target 작업(에 있음) All Pages - Library Loaded 규칙 위치 Order 이(가) (으)로 설정됨 50)
3. Keep Changes ​를 클릭합니다.

Conditions > Add ​를 클릭합니다.

1. Condition Type > Path Without Query String ​을 선택합니다.

2. Path equals에 대해서는 thank-you.html을 입력합니다.

3. Regex 옵션을 켜서 논리를 equals에서 contains로 변경합니다(Test 기능을 사용하여 테스트가 URL https://luma.enablementadobe.com/content/luma/us/en/user/checkout/order/thank-you.html로 통과되는지 확인할 수 있습니다.).

   

4. Keep Changes ​를 클릭합니다.

Actions > Add ​를 클릭합니다.

1. Action Type > Custom Code ​를 선택합니다.

2. Open Editor ​를 클릭합니다.

3. 다음 코드를 Edit Code 모달에 붙여 넣습니다.

   code language-javascript

   adobe.target.getOffer({ "mbox": "orderConfirmPage", "params":{ "orderId": _satellite.getVar('Order Id'), "orderTotal": _satellite.getVar('Cart Amount'), "productPurchasedId": _satellite.getVar('Cart SKUs (Target)') }, "success": function(offer) { adobe.target.applyOffer({ "mbox": "orderConfirmPage", "offer": offer }); }, "error": function(status, error) { console.log('Error', status, error); } });

4. Save ​를 클릭하여 사용자 지정 코드를 저장합니다.

5. Keep Changes ​를 클릭하여 작업을 유지합니다.

Save to Library and Build ​를 클릭합니다.

Luma 사이트를 엽니다.

디버거가 태그 속성을 다음에 매핑하는지 확인합니다. 본인 에 설명된 개발 환경 이전 단원

사이트를 탐색하고 장바구니에 여러 제품을 추가합니다

체크아웃을 계속합니다

체크아웃 프로세스 중에는 First Name 및 Last Name 필드만 필요합니다.

Review Order 페이지에서 Place Order 단추를 클릭합니다.

브라우저의 개발자 도구를 엽니다

Network 탭을 클릭합니다.

요청을 tt.omtrdc(또는 Target 요청에 대한 CNAME 도메인)로 필터링합니다.

두 번째 요청을 클릭합니다.

Headers > Request Payload > execute.mboxes.0 섹션을 확장하여 요청 이름과 주문 매개 변수의 유효성을 검사합니다.