[Premium]{class="badge positive" title="Target Premium에 포함된 내용을 확인하십시오."}

디자인 만들기

디자인은 페이지에 권장 사항이 어떻게 나타나는지를 정의합니다.

기본 디자인을 사용하거나 사용자 지정 디자인을 만들어 Recommendations 디자인을 만들 수 있습니다. Recommendations > Designs 화면에 기본 디자인 카드와 계정에서 만든 모든 디자인이 표시됩니다.

디자인 작업 시 다음 정보를 염두에 두십시오.

  • 기본 디자인을 사용하여 권장 사항 디자인을 만들거나 사용자 지정 디자인을 만들 수 있습니다.
  • 기본 디자인은 편집하거나 삭제할 수 없습니다.
  • 사용자 지정 디자인을 편집, 복사 또는 삭제할 수 있습니다.
  • 기본 디자인을 기반으로 디자인을 생성하려면 먼저 디자인을 복사한 다음 복사본을 편집해야 합니다.

이 그림은 기본 1 x 4 디자인을 보여 줍니다.

1 x 4 기본 디자인

이 그림은 사용자 정의 디자인을 보여 줍니다.

사용자 지정 디자인

VEC(시각적 경험 작성기) 내에서 또는 활동 작성 외부의 디자인 라이브러리에서 활동 작성 프로세스 중에 디자인을 만들 수 있습니다. 다음 섹션에서는 라이브러리에서 디자인을 생성하는 것으로 가정하지만 단계는 유사합니다.

디자인 만들기

기본 디자인을 기반으로 디자인을 만들거나 사용자 지정 디자인을 만들 수 있습니다.

기본 디자인을 기반으로 디자인 만들기

  1. Recommendations > Designs ​을(를) 클릭하여 Designs 라이브러리를 표시합니다.

    디자인 라이브러리

  2. 만들려는 디자인에 대한 카드 위로 마우스를 가져간 다음 Copy 아이콘을 클릭합니다.

    Card_CopyDesign 이미지

    Create Design 대화 상자가 표시됩니다.

    createDesign 이미지

  3. Information 패널에서 디자인 카드에 표시할 Content Name 및 선택적 미리 보기 이미지를 추가합니다.

    기본 디자인을 사용하면 디자인 이름과 "복사본"이 Content Name 필드에 나타납니다. 이름을 편집할 수 있습니다. 디자인 카드에 표시할 이미지를 선택할 수도 있습니다.

  4. (조건부) 원하는 대로 디자인 Code ​을(를) 편집합니다.

    권장 디자인은 오픈 소스 Velocity 디자인 언어를 사용합니다. Velocity에 대한 정보는 https://velocity.apache.orgVelocity를 사용하여 디자인 사용자 지정에서 찾을 수 있습니다.

    디자인은 HTML 또는 비 HTML일 수 있습니다. 기본적으로 HTML 디자인은 웹 환경에서 클릭 추적을 허용하기 위해 <div> 태그로 줄바꿈됩니다. 비 HTML 디자인은 클릭 추적이 불가능한 웹이 아닌 환경을 위한 것입니다. HTML 코드가 아닌 코드를 사용하려면 HTML Design 토글을 "끄기" 위치로 밉니다.

    note note
    NOTE
    하드 코딩되거나 루프를 통해 디자인에서 참조할 수 있는 최대 개체 수는 99개입니다.
  5. Save 아이콘을 클릭합니다.

사용자 지정 디자인 만들기

  1. Recommendations > Designs ​을(를) 클릭하여 Designs 라이브러리를 표시합니다.

  2. Create Design 아이콘을 클릭합니다.

    기존 디자인을 기준으로 새 사용자 지정 디자인을 만들려면 원하는 디자인 위로 마우스를 가져간 후 Copy 아이콘을 클릭합니다. 그런 다음 사본을 편집하여 새 사용자 정의 디자인을 만들 수 있습니다.

  3. Content Name 및 선택적 미리 보기 이미지를 추가합니다.

  4. (조건부) 원하는 대로 디자인 Code ​을(를) 편집합니다.

    자세한 내용은 위의 4단계 정보를 참조하십시오.

  5. Save 아이콘을 클릭합니다.

디자인 편집, 복사 또는 삭제

기본 디자인은 편집하거나 복사할 수 없으며 기본 디자인만 복사할 수 있습니다.

Design 라이브러리에서 원하는 디자인 위로 마우스를 가져간 다음 해당 아이콘(편집, 복사 또는 삭제)을 클릭합니다.

디자인을 가리키기 아이콘

기존 디자인을 복사하여 수정할 수 있는 중복 디자인을 생성할 수 있습니다. 이를 통해 적은 노력으로 유사한 디자인을 만들 수 있습니다.

디자인은 전체 계정에서 사용할 수 있습니다. 디자인을 삭제하기 전에 이를 고려하십시오. 삭제된 디자인을 복구할 수 없습니다.

JSON 예 section_75BFB2537CFF4FBD9B560F59EB32C8DD

다음 예제에서는 양식 기반 편집기를 통해 활동을 구성할 때 JSON 응답을 반환하는 방법을 보여 줍니다.

  1. 디자인 라이브러리 내에서 또는 양식 기반 워크플로 내에서 디자인을 만듭니다. VEC(시각적 경험 작성기) 워크플로에서 이 작업을 수행하려고 하면 클릭 추적을 위해 <div>에 래핑된 HTML 디자인 이외의 다른 디자인을 만들 수 없습니다.

  2. "HTML 디자인" 선택 사항이 꺼져 있는지 확인합니다.

    html_design_toggle 이미지

  3. 다음 코드는 디자인에 붙여넣을 수 있는 사항의 예입니다.

    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"
          }
        }
    
  4. 이 디자인을 사용하는 양식 기반 Recommendations 활동을 설정하십시오.

    1. Activities 페이지로 이동합니다.
    2. Create Activity > Recommendations ​을(를) 클릭합니다.
    3. Choose Experience Composer ​에서 Form ​을(를) 선택한 다음 Next ​을(를) 클릭합니다.
    4. 위치 아래에 "Sample_Recs_Response"라는 텍스트를 입력합니다.
    5. Default Content ​에서 아래쪽 화살표를 클릭한 다음 Add Recommendation ​을(를) 클릭합니다.
    6. 페이지 유형을 선택합니다. 이 유형은 그 다음 화면의 초기 필터링을 결정합니다.
    7. 기준 카드를 선택한 다음 Next ​을(를) 클릭합니다.
    8. 이전 단계에서 만든 디자인을 선택한 다음 Next ​을(를) 클릭합니다.
    9. 설정 프로세스를 완료합니다.
    10. Inactive 옆의 오른쪽 화살표를 클릭한 다음 Activate ​을(를) 선택합니다.
  5. 활동이 설정되고 활성화된 후 깨끗한 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 클라이언트 코드(/docs/target/target/products.html에서 사용 가능#recsSettings > Recommendations API 토큰 > 클라이언트 코드.
    [YOUR_MBOX_NAME] 양식 기반 Recommendations의 "위치" 섹션에서 선택한 이름입니다. 이 경우 Sample_Recs_Response입니다.
    [ENTITY_ID 카탈로그에 있는 항목의 entity.id입니다.
    [AT_PROPERTY_TOKEN] (선택 사항) 활동 설정 중에 속성(엔터프라이즈 권한의 일부)을 선택한 경우 추가하십시오.

알고리즘이 실행되고 결과가 나오면, 응답은 다음과 같은 모습이어야 합니다.

json_recommendation 이미지

추가 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) 개요 배지

이 비디오에는 다음 정보가 포함됩니다.

  • 사용자 지정 디자인 만들기
  • 디자인에서 디스플레이 변수를 참조하는 방법 이해하기
recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654