[Premium]{class="badge positive" title="Target Premium에 포함된 내용을 확인합니다."}
디자인 만들기
디자인은 페이지에 권장 사항이 어떻게 나타나는지를 정의합니다.
기본 디자인을 사용하거나 사용자 지정 디자인을 만들어 Recommendations 디자인을 만들 수 있습니다. Recommendations > Designs 화면에 기본 디자인 카드와 계정에서 만든 모든 디자인이 표시됩니다.
디자인 작업 시 다음 정보를 염두에 두십시오.
- 기본 디자인을 사용하여 권장 사항 디자인을 만들거나 사용자 지정 디자인을 만들 수 있습니다.
- 기본 디자인은 편집하거나 삭제할 수 없습니다.
- 사용자 지정 디자인을 편집, 복사 또는 삭제할 수 있습니다.
- 기본 디자인을 기반으로 디자인을 만들려면 먼저 디자인을 복사한 다음 복사본을 편집해야 합니다.
이 그림은 기본 1 x 4 디자인을 보여 줍니다.
이 그림은 사용자 정의 디자인을 보여 줍니다.
VEC(시각적 경험 작성기) 내에서 또는 활동 작성 외부의 디자인 라이브러리에서 활동 작성 프로세스 중에 디자인을 만들 수 있습니다. 다음 섹션에서는 라이브러리에서 디자인을 생성하는 것으로 가정하지만 단계는 유사합니다.
디자인 만들기
기본 디자인을 기반으로 디자인을 만들거나 사용자 지정 디자인을 만들 수 있습니다.
기본 디자인을 기반으로 디자인 만들기
-
Recommendations > Designs 을(를) 클릭하여 Designs 라이브러리를 표시합니다.
-
만들려는 디자인에 대한 카드 위로 마우스를 가져간 다음 Copy 아이콘을 클릭합니다.
Create Design 대화 상자가 표시됩니다.
-
Information 패널에서 디자인 카드에 표시할 Content Name 및 선택적 미리 보기 이미지를 추가합니다.
기본 디자인을 사용하면 디자인 이름과 "복사본"이 Content Name 필드에 나타납니다. 이름을 편집할 수 있습니다. 디자인 카드에 표시할 이미지를 선택할 수도 있습니다.
-
(조건부) 원하는 대로 디자인 Code 을(를) 편집합니다.
권장 디자인은 오픈 소스 Velocity 디자인 언어를 사용합니다. Velocity에 대한 정보는 https://velocity.apache.org 및 다음을 사용하여 디자인 사용자 지정 Velocity에서 찾을 수 있습니다.
디자인은 HTML 또는 비 HTML일 수 있습니다. 기본적으로 HTML 디자인은 웹 환경에서 클릭 추적을 허용하기 위해
<div>
태그로 줄바꿈됩니다. 비 HTML 디자인은 클릭 추적이 불가능한 웹이 아닌 환경을 위한 것입니다. HTML 코드가 아닌 코드를 사용하려면 HTML Design 토글을 "끄기" 위치로 밉니다.note note NOTE 하드 코딩되거나 루프를 통해 디자인에서 참조할 수 있는 최대 개체 수는 99개입니다. -
Save 아이콘을 클릭합니다.
사용자 지정 디자인 만들기
-
Recommendations > Designs 을(를) 클릭하여 Designs 라이브러리를 표시합니다.
-
Create Design 아이콘을 클릭합니다.
기존 디자인을 기준으로 새 사용자 지정 디자인을 만들려면 원하는 디자인 위로 마우스를 가져간 후 Copy 아이콘을 클릭합니다. 그런 다음 사본을 편집하여 새 사용자 정의 디자인을 만들 수 있습니다.
-
Content Name 및 선택적 미리 보기 이미지를 추가합니다.
-
(조건부) 원하는 대로 디자인 Code 을(를) 편집합니다.
자세한 내용은 위의 4단계 정보를 참조하십시오.
-
Save 아이콘을 클릭합니다.
디자인 편집, 복사 또는 삭제
기본 디자인은 편집하거나 복사할 수 없으며 기본 디자인만 복사할 수 있습니다.
Design 라이브러리에서 원하는 디자인 위로 마우스를 가져간 다음 해당 아이콘(편집, 복사 또는 삭제)을 클릭합니다.
기존 디자인을 복사하여 수정할 수 있는 중복 디자인을 생성할 수 있습니다. 이 프로세스를 사용하면 적은 노력으로 유사한 디자인을 만들 수 있습니다.
디자인은 전체 계정에서 사용할 수 있습니다. 디자인을 삭제하기 전에 다른 계정에서 사용을 고려하십시오. 삭제된 디자인을 복구할 수 없습니다.
JSON 예 section_75BFB2537CFF4FBD9B560F59EB32C8DD
다음 예제에서는 양식 기반 편집기를 통해 활동을 구성할 때 JSON 응답을 반환하는 방법을 보여 줍니다.
-
디자인 라이브러리 또는 양식 기반 워크플로에서 디자인을 만듭니다. Visual Experience Composer (VEC) 워크플로 내에서 디자인을 만들려고 하면 클릭 추적을 위해
<div>
에 래핑된 HTML 디자인 이외의 다른 디자인을 만들 수 없습니다. -
"HTML 디자인" 선택 사항이 꺼져 있는지 확인합니다.
-
다음 코드는 디자인에 붙여넣을 수 있는 사항의 예입니다.
code language-javascript #* * "Return a simple list of recommended entity ids" *# { "notes":{ "purpose": "Return a simple list of recommended entity ids", "use-case": "Use this approach if you prefer to do a real-time lookup of entity attribute details (such as inventory, price, rating) from another system (such as a CMS, PIM or ecommerce platform)", "version": "01" }, "recommendedItems": { "key": "$key.id", "slot-01": "$entity1.id", "slot-02": "$entity2.id", "slot-03": "$entity3.id", "slot-04": "$entity4.id", "slot-05": "$entity5.id", "slot-06": "$entity6.id", "slot-07": "$entity7.id", "slot-08": "$entity8.id", "slot-09": "$entity9.id", "slot-10": "$entity10.id" } }
-
이 디자인을 사용하는 양식 기반 Recommendations 활동을 설정하십시오.
- Activities 페이지로 이동합니다.
- Create Activity > Recommendations 을(를) 클릭합니다.
- Choose Experience Composer 에서 Form 을(를) 선택한 다음 Next 을(를) 클릭합니다.
- 위치 아래에 "Sample_Recs_Response"라는 텍스트를 입력합니다.
- Default Content 에서 아래쪽 화살표를 클릭한 다음 Add Recommendation 을(를) 클릭합니다.
- 페이지 유형을 선택합니다. 이 유형은 그 다음 화면의 초기 필터링을 결정합니다.
- 기준 카드를 선택한 다음 Next 을(를) 클릭합니다.
- 이전 단계에서 만든 디자인을 선택한 다음 Next 을(를) 클릭합니다.
- 설정 프로세스를 완료합니다.
- Inactive 옆의 오른쪽 화살표를 클릭한 다음 Activate 을(를) 선택합니다.
-
활동이 설정되고 활성화된 후 깨끗한 JSON 응답을 다시 가져오는 샘플 요청을 설정할 수 있습니다.
활동을 저장한 후 Target에서 선택한 기준 구성을 지원하는 모델을 만들어야 합니다. 여러 요인에 따라 이 프로세스는 시간이 걸릴 수 있습니다. 모델이 만들어지면 결과가 표시됩니다.
예:
code language-none https://[YOUR_CLIENT_CODE].tt.omtrdc.net/m2/YOUR_CLIENT_CODE/ubox/raw?mbox=[YOUR_MBOX_NAME]&mboxContentType=text/html&mboxXDomain=disabled&entity.id=[ENTITY_ID]&mboxHost=rawbox_sample&at_property=[AT_PROPERTY_TOKEN]&mboxNoRedirect=true&mboxPC=1234-4321&mboxSession=9876-7000
where
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 매개 변수 값 [YOUR_CLIENT_CODE]
Target 클라이언트 코드(https://experienceleague.adobe.com/docs/target/target/products.html?lang=ko#recsSettings%20%3E%20Recommendations%20API%20%ED%86%A0%ED%81%B0%20%3E%20%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%20%EC%BD%94%EB%93%9C%EC%97%90%EC%84%9C%20%EC%82%AC%EC%9A%A9%20%EA%B0%80%EB%8A%A5). [YOUR_MBOX_NAME]
양식 기반 Recommendations의 "위치" 섹션에서 선택한 이름입니다. 이 경우 Sample_Recs_Response입니다. [ENTITY_ID
카탈로그에 있는 항목의 entity.id
입니다.[AT_PROPERTY_TOKEN]
(선택 사항) 활동 설정 중에 속성(엔터프라이즈 권한의 일부)을 선택한 경우 추가하십시오.
알고리즘이 실행되고 결과가 나오면, 응답은 다음과 같은 모습이어야 합니다.
{width="575px"}
추가 JSON 개체 팁 및 요령 section_C305673C68944749969DB239E3221DC2
다음 구문으로 디자인을 설정하여 간단한 쉼표로 구분된 항목 목록만 다시 전송할 수도 있습니다.
entity1.id, $entity2.id, $entity3.id, $entity4.id, $entity5.id,
또는 응답에서 추가 정보를 전송할 수도 있습니다. 다음 코드 파일은 연결된 슬롯(순서)이 있는 엔티티 ID보다 훨씬 더 많은 내용을 반환하는 더 복잡한 예입니다. 이 디자인 예는 반환된 항목과 연결된 활동 세부 사항, Target 프로필 세부 사항(해당하는 경우) 및 기타 entity.attributes
도 반환합니다.
{
"adobeRecommendations": {
"notes": {
"purpose": "Return a list of entity ids with their associated entity.attributes",
"use-case": "Use this approach to avoid looking up attribute details after receiving a response from Target",
"version": "01"
},
"recommendedItems": {
"slot-01": "$entity1.id",
"slot-02": "$entity2.id",
"slot-03": "$entity3.id",
"slot-04": "$entity4.id",
"slot-05": "$entity5.id",
"slot-06": "$entity6.id",
"slot-07": "$entity7.id",
"slot-08": "$entity8.id",
"slot-09": "$entity9.id",
"slot-10": "$entity10.id"
},
"activityDetails": {
"mbox.name": "email-mbox",
"campaign.name": "\${campaign.name}",
"campaign.id": "\${campaign.id}",
"campaign.recipe.name": "\${campaign.recipe.name}",
"campaign.recipe.id": "\${campaign.recipe.id}",
"offer.name": "\${offer.name}",
"offer.id": "\${offer.id}",
"criteria.title": "$criteria.title",
"algorithm.name": "$algorithm.name",
"algorithm.dayCount": "$algorithm.dayCount"
},
"visitorProfile": {
"profile.favorite-category": "\${profile.favorite-category}",
"profile.test": "\${profile.test}",
"user.endpoint.lastPurchasedEntity": "\${user.endpoint.lastPurchasedEntity}",
"user.endpoint.lastViewedEntity": "\${user.endpoint.lastViewedEntity}",
"user.endpoint.mostViewedEntity": "\${user.endpoint.mostViewedEntity}",
"user.endpoint.categoryAffinity": "\${user.endpoint.categoryAffinity}",
"profile.geolocation.city": "\${profile.geolocation.city}",
"profile.geolocation.dma": "\${profile.geolocation.dma}",
"profile.geolocation.state": "\${profile.geolocation.state}",
"profile.geolocation.country": "\${profile.geolocation.country}",
"profile.sessionCount": "\${profile.sessionCount}",
"profile.averageDaysBetweenVisits": "\${profile.averageDaysBetweenVisits}",
"profile.browserTime": "\${profile.browserTime}",
"user.activeActivities": "\${user.activeActivities}",
"user.pcId": "\${user.pcId}",
"user.isFirstSession": "\${user.isFirstSession}",
"user.isNewSession": "\${user.isNewSession}",
"user.header": "\${user.header}",
"user.parameter": "\${user.parameter}"
},
"recKey": {
"recKeyDetails": {
"id": "$key.id",
"name": "$key.name",
"category": "$key.category",
"pageUrl": "$key.pageUrl",
"thumbnailUrl": "$key.thumbnailUrl"
}
},
"recDetailedResults": {
"recEntity1Details": {
"id": "$entity1.id",
"name": "$entity1.name",
"category": "$entity1.category",
"pageUrl": "$entity1.pageUrl",
"thumbnailUrl": "$entity1.thumbnailUrl"
},
"recEntity2Details": {
"id": "$entity2.id",
"name": "$entity2.name",
"category": "$entity2.category",
"pageUrl": "$entity2.pageUrl",
"thumbnailUrl": "$entity2.thumbnailUrl"
},
"recEntity3Details": {
"id": "$entity3.id",
"name": "$entity3.name",
"category": "$entity3.category",
"pageUrl": "$entity3.pageUrl",
"thumbnailUrl": "$entity3.thumbnailUrl"
},
"recEntity4Details": {
"id": "$entity4.id",
"name": "$entity4.name",
"category": "$entity4.category",
"pageUrl": "$entity4.pageUrl",
"thumbnailUrl": "$entity4.thumbnailUrl"
},
"recEntity5Details": {
"id": "$entity5.id",
"name": "$entity5.name",
"category": "$entity5.category",
"pageUrl": "$entity5.pageUrl",
"thumbnailUrl": "$entity5.thumbnailUrl"
},
"recEntity6Details": {
"id": "$entity6.id",
"name": "$entity6.name",
"category": "$entity6.category",
"pageUrl": "$entity6.pageUrl",
"thumbnailUrl": "$entity6.thumbnailUrl"
},
"recEntity7Details": {
"id": "$entity7.id",
"name": "$entity7.name",
"category": "$entity7.category",
"pageUrl": "$entity7.pageUrl",
"thumbnailUrl": "$entity7.thumbnailUrl"
},
"recEntity8Details": {
"id": "$entity8.id",
"name": "$entity8.name",
"category": "$entity8.category",
"pageUrl": "$entity8.pageUrl",
"thumbnailUrl": "$entity8.thumbnailUrl"
},
"recEntity9Details": {
"id": "$entity9.id",
"name": "$entity9.name",
"category": "$entity9.category",
"pageUrl": "$entity9.pageUrl",
"thumbnailUrl": "$entity9.thumbnailUrl"
},
"recEntity10Details": {
"id": "$entity10.id",
"name": "$entity10.name",
"category": "$entity10.category",
"pageUrl": "$entity10.pageUrl",
"thumbnailUrl": "$entity10.thumbnailUrl"
}
}
}
}
교육 비디오: Recommendations에서 사용자 지정 디자인 만들기(3:20)
이 비디오에는 다음 정보가 포함됩니다.
- 사용자 지정 디자인 만들기
- 디자인에서 디스플레이 변수를 참조하는 방법 이해