PREMIUM 디자인 만들기

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

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

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

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

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

1 x 4 기본 디자인

다음 그림은 맞춤형 디자인을 보여줍니다.

맞춤형 디자인

VEC(Visual Experience Composer) 내에서 또는 활동 생성 외부의 디자인 라이브러리에서 활동 만들기 프로세스 동안 디자인을 만들 수 있습니다. 다음 섹션에서는 라이브러리에서 디자인을 만드는 경우를 가정하지만 단계는 유사합니다.

디자인 만들기

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

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

  1. Recommendations > 디자인​을 클릭하여 디자인 라이브러리를 표시합니다.

    디자인 라이브러리

  2. 만들려는 디자인의 카드 위에 마우스를 놓고 복사 아이콘을 클릭합니다.

    디자인 만들기 대화 상자가 표시됩니다.

  3. 정보 패널에서 디자인 카드에 표시할 내용 이름 및 선택 사항 미리 보기 이미지를 추가합니다.

    기본 디자인을 사용하는 경우 디자인 이름과 "복사"가 컨텐트 이름 필드에 나타납니다. 이름을 편집할 수 있습니다. 디자인 카드에 표시할 이미지를 선택할 수도 있습니다.

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

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

    디자인은 HTML 또는 비 HTML일 수 있습니다. 기본적으로 HTML 디자인은 웹 환경에서 클릭 추적을 수행할 수 있도록 <div> 태그로 래핑되어 있습니다. 비 HTML 디자인은 클릭 추적이 불가능한 웹이 아닌 환경을 위한 것입니다. 비HTML 코드를 사용하려면 HTML 디자인 전환을 "해제" 위치로 끕니다.

    노트

    하드 코딩되거나 루프를 통해 디자인에서 참조할 수 있는 최대 개체 수는 99개입니다.

  5. 저장​을 클릭합니다.

사용자 지정 디자인 만들기

  1. Recommendations > 디자인​을 클릭하여 디자인 라이브러리를 표시합니다.

  2. 디자인 만들기​를 클릭합니다.

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

  3. 콘텐츠 이름 및 선택적 미리 보기 이미지를 추가합니다.

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

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

  5. 저장​을 클릭합니다.

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

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

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

디자인의 아이콘 마우스로 표시

기존 디자인을 복사하여 복제 디자인을 만든 다음 수정할 수 있습니다. 이를 통해 유사한 디자인을 손쉽게 만들 수 있습니다.

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

JSON 예

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

  1. 디자인 라이브러리 내에서 또는 양식 기반의 워크플로우에서 디자인을 만들 수 있습니다. VEC(Visual Experience Composer) 작업 과정 내에서 이 작업을 시도하면 클릭 추적 목적으로 <div>에 둘러싸인 HTML 디자인 이외의 것을 만들 수 없습니다.

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

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

        #* 
        * "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. 활동 페이지로 이동합니다.
    2. 활동 만들기 > Recommendations​를 클릭합니다.
    3. 경험 작성기 선택​에서 양식​을 선택한 다음 다음​을 클릭합니다.
    4. 위치 아래에 "Sample_Recs_Response"라는 텍스트를 입력합니다.
    5. 기본 컨텐츠 아래에서 아래쪽 화살표를 클릭한 다음 권장 사항 추가​를 클릭합니다.
    6. 페이지 유형을 선택합니다. 이 유형은 그 다음 화면의 초기 필터링을 결정합니다.
    7. 기준 카드를 선택한 후, 다음을 클릭합니다.
    8. 이전 단계에서 만든 디자인을 선택한 다음 다음​을 클릭합니다.
    9. 설정 프로세스를 완료합니다.
    10. 비활성 옆의 오른쪽 화살표를 클릭한 다음, 활성화​를 선택합니다.
  5. 활동이 설정되고 활성화된 후 깨끗한 JSON 응답을 다시 가져오는 샘플 요청을 설정할 수 있습니다.

    활동을 저장할 때부터 선택한 기준 구성을 지원하기 위해 Target이(가) 모델을 만들어야 합니다. 요소의 수에 따라 시간이 다소 걸릴 수 있습니다. 모델이 만들어지면 결과가 표시됩니다.

    예:

    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

    매개 변수
    [YOUR_CLIENT_CODE] Target 클라이언트 코드(/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] (선택 사항) 활동 설정 중에 속성(엔터프라이즈 권한의 일부)을 선택한 경우 추가하십시오.

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

추가 JSON 개체 팁 및 트릭

다음 구문으로 디자인을 설정하여 간단한 쉼표로 구분된 항목 목록만 다시 전송할 수도 있습니다.

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

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

  • 사용자 지정 디자인 만들기
  • 디자인에서 디스플레이 변수를 참조하는 방법 이해하기

이 페이지에서는

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now