대화형 이미지 interactive-images

"구매 가능한" 핫스팟을 이미지에 끌어다 놓아 정적 이미지를 고객에게 풍부하고 매력적인 경험을 쉽게 만들 수 있습니다. 구매 가능한 핫스팟은 제품 또는 서비스에 대한 추가 정보를 판매 시점("장바구니에 추가" 또는 "구매") 기능과 결합합니다. 고객은 제품 또는 서비스에 직접 연결되거나 장바구니에 추가되거나 웹 페이지에 연결되는 이러한 핫스팟을 선택할 수 있습니다. 이와 같은 직접적인 경험은 웹 사이트에서의 고객 참여와 전환을 증가시킵니다.

다음은 빠른 보기 팝업 창이 있는 구매 가능한 배너입니다. 사용자가 모델에서 원 또는 "핫스팟"을 탭하여 빠른 보기를 활성화합니다.

위 그림의 웹 페이지에서 대화형 작업 이미지를 참조하십시오.

대화형 이미지 배너가 생성되는 방식 보기 watch-how-interactive-image-banners-are-created

대화형 이미지 배너를 만드는 방법(10분 33초)에 대해 연습합니다. 또한 대화형 이미지 배너를 미리 보고, 편집하고, 전달하는 방법도 알아봅니다.

빠른 시작: 대화형 이미지 quick-start-interactive-images

다음 단계별 워크플로 설명은 Adobe Experience Manager Assets에서 대화형 이미지를 빠르게 시작하고 실행하는 데 도움이 되도록 설계되었습니다.

일부 빠른 시작 작업에서 예제 제목을 찾습니다. 여기에는 아직 대화형 이미지가 추가되지 않은 웹 페이지 예제를 기반으로 하는 간단한 자습서가 포함되어 있습니다.

이 자습서는 웹 사이트에서 대화형 이미지를 통합하는 단계를 설명하는 데 도움이 됩니다.

대화형 이미지 단계:

(선택 사항) 핫스팟 변수를 식별합니다 optional-identifying-hotspot-variables

핫스팟 데이터를 입력하여 대화형 이미지를 만들 수 있도록 기존 Quickview 구현에서 사용하는 동적 변수를 식별하여 시작합니다.

Experience Manager Assets에서 배너 이미지에 핫스팟을 추가하는 경우 SKU(Stock Keeping Unit)를 할당합니다. SKU는 제공하는 각 고유 제품 또는 서비스에 대한 고유 식별자입니다. 각 핫스팟에 추가 옵션 변수를 추가합니다. 이러한 핫스팟 변수는 나중에 핫스팟을 빠른 보기 콘텐츠와 일치시키는 데 사용됩니다.

핫스팟 데이터와 연결할 변수의 수와 유형을 올바르게 식별하는 것이 중요합니다. 배너 이미지에 추가된 각 핫스팟에는 기존 백엔드 시스템의 제품을 명확하게 식별할 수 있는 충분한 정보가 있어야 합니다.

핫스팟 데이터에 사용할 변수 세트를 식별하는 방법은 여러 가지가 있습니다.

때로는 기존 Quickview 구현을 담당하는 IT 전문가와 상담하는 것으로 충분합니다. 이러한 사람들은 시스템에서 빠른 보기를 식별하는 데 필요한 최소 데이터 세트가 무엇인지 알 수 있습니다. 그러나 프론트엔드 코드의 기존 동작을 간단하게 분석할 수도 있습니다.

대부분의 빠른 보기 구현은 다음 패러다임을 사용합니다.

그러면 빠른 보기 기능이 구현된 기존 웹 사이트의 다른 영역을 방문하는 방법이 제공됩니다. 그런 다음 빠른 보기를 트리거하고 빠른 보기 데이터 또는 콘텐츠를 로드하기 위해 웹 페이지에서 전송하는 Ajax URL을 얻습니다.

일반적으로 특수 디버깅 도구를 사용할 필요가 없습니다. 최신 웹 브라우저에는 적절한 작업을 수행하는 웹 검사기가 있습니다. 다음은 웹 검사기를 포함하는 웹 브라우저의 몇 가지 예입니다.

브라우저에서 네트워크 모니터링이 켜지면 페이지에서 빠른 보기를 트리거합니다.

이제 네트워크 로그에서 Quickview Ajax URL을 찾아 기록된 URL을 복사하여 향후 분석할 수 있습니다. 일반적으로 빠른 보기를 트리거하면 서버로 전송되는 요청이 많이 있습니다. 일반적으로 Quickview Ajax URL은 목록의 첫 번째 URL 중 하나입니다. 복합 쿼리 문자열 부분 또는 경로가 있으며 응답 MIME 유형은 text/html, text/xml 또는 text/javascript입니다.

이 프로세스 중에 다양한 제품 카테고리와 유형을 사용하여 웹 사이트의 다양한 영역을 방문하는 것이 중요합니다. 그 이유는 Quickview URL에 특정 웹 사이트 카테고리에 대해 공통적인 부분이 있을 수 있기 때문입니다. 단, 웹 사이트의 다른 영역을 방문하는 경우에만 변경됩니다.

가장 간단한 경우, 빠른 보기 URL에 있는 유일한 변수 부분은 제품 SKU입니다. 이 경우 SKU 값은 배너 이미지에 핫스팟을 추가하는 데 필요한 유일한 데이터 부분입니다.

그러나 복잡한 경우 빠른 보기 URL에는 SKU 외에도 다양한 요소가 있습니다. 예를 들어 다양한 요소에는 카테고리 ID, 색상 코드 및 크기 코드가 포함될 수 있습니다. 이러한 경우 모든 요소는 Experience Manager Assets의 구매 가능한 대화형 이미지 기능에서 핫스팟 데이터 정의에 있는 별도의 변수입니다.

다음 Quickview URL 및 결과 핫스팟 변수 예를 생각해 보십시오.

예

위의 세 가지 예에서 사용한 것과 동일한 방법을 데모 웹 페이지에 적용할 수 있습니다.

데모 웹 페이지에는 여러 제품 썸네일이 있으며, 각 페이지에는 "자세히 보기"라는 빠른 보기 버튼이 있습니다. 웹 브라우저의 디버깅 도구가 여전히 활성화된 상태에서 각 버튼을 선택하고 기록된 빠른 보기 URL을 확인합니다. 페이지에서 사용할 수 있는 4개의 제품 빠른 보기를 모두 활성화하면 다음과 같은 백엔드에 대한 빠른 보기 요청 목록이 제공됩니다.

서버 호출을 살펴보면 제품별 정보가 요청 경로에만 있음을 알 수 있습니다. 또한 쿼리 문자열은 전혀 사용되지 않으며 두 가지 유형의 데이터가 관련되어 있습니다.

이 정보가 주어지면 전체 Quickview URL의 패턴은 다음과 같습니다.

/datafeed/$categoryId$-$SKU$.json

이러한 분석을 기반으로 핫스팟에 categoryId 및 SKU을(를) 사용합니다.

이제 Experience Manager Assets에서 구매 가능한 대화형 이미지 기능을 사용하여 이미지 배너를 업로드하고 핫스팟을 추가할 준비가 되었습니다.

(선택 사항) 대화형 이미지 뷰어 사전 설정 만들기 optional-creating-an-interactive-image-viewer-preset

Experience Manager Assets과 함께 제공되는 Shoppable_Banner(이)라는 기본 기본 대화형 이미지 뷰어 사전 설정을 사용하도록 선택할 수 있습니다. 또는 대화형 이미지에 사용할 사용자 지정 뷰어 사전 설정을 만들 수 있습니다.

사용자 지정 대화형 이미지 뷰어 사전 설정을 만들 때 이미지 배너에 핫스팟의 모양을 결정할 수 있습니다. 뷰어 사전 설정을 만들 때 미리 정의된 이미지 갤러리에서 핫스팟 그래픽을 사용하도록 선택할 수 있습니다.

뷰어 사전 설정을 저장하면 Experience Manager Assets의 뷰어 사전 설정 목록 페이지에서 자동으로 활성화(켜짐)됩니다. 이 기능은 자산을 볼 때마다 대화형 미디어 구성 요소에서 볼 수 있음을 의미합니다. 그러나 이 뷰어 사전 설정을 사용하는 대화형 배너를 배달 ​하려면 뷰어 사전 설정도 게시 ​하십시오. 이 규칙은 사용자 지정 또는 기본 뷰어 사전 설정에 대해 적용됩니다.

대화형 이미지 뷰어 사전 설정을 만들려면:

이미지 배너 업로드 uploading-an-image-banner

사용할 이미지를 이미 업로드한 경우 다음 단계인 이미지 배너에 핫스팟을 추가로 이동하십시오.

이미지 배너를 업로드하려면:

이미지 배너에 핫스팟 추가 adding-hotspots-to-an-image-banner

핫스팟 관리 페이지의 편집기를 사용하여 이미지 배너에 핫스팟을 추가할 수 있습니다.

핫스팟을 추가할 때 빠른 보기 팝업 표시, 하이퍼링크 또는 경험 조각으로 정의할 수 있습니다.

경험 조각을 참조하세요.

페이지의 오른쪽 상단 모서리 근처에 있는 실행 취소 및 재실행 옵션은 현재 생성/편집 세션 중에 지원됩니다.

대화형 이미지 만들기가 완료되면 미리보기 를 사용하여 대화형 이미지가 고객에게 표시되는 방식을 확인할 수 있습니다.

(선택 사항) 대화형 이미지 미리 보기를 참조하십시오.

이미지 배너에 핫스팟을 추가하려면:

(선택 사항) 대화형 이미지 미리 보기 optional-previewing-interactive-images

미리보기 를 사용하여 대화형 이미지가 고객에게 표시되는 방식을 확인할 수 있습니다. 또한 미리 보기를 통해 이미지의 핫스팟이 예상대로 작동하는지 테스트할 수 있습니다.

대화형 이미지가 만족스러우면 게시할 수 있습니다.
웹 페이지에 비디오 또는 이미지 뷰어 포함을 참조하십시오.
웹 응용 프로그램에 URL 연결을 참조하십시오. 대화형 콘텐츠에 상대 URL이 있는 링크, 특히 Experience Manager Sites 페이지에 대한 링크가 있는 경우에는 URL 기반 연결 방법이 불가능합니다.
페이지에 Dynamic Media Assets 추가를 참조하십시오.

대화형 이미지를 미리 보려면:

Publish 대화형 이미지 자산 publishing-interactive-image-assets

대화형 이미지 에셋을 게시하는 방법에 대한 자세한 내용은 Publish Assets을 참조하십시오.

대화형 이미지를 웹 사이트에 통합 integrating-an-interactive-image-with-your-website

배너 이미지를 업로드하고 핫스팟을 추가한 다음 대화형 이미지를 게시하면 웹 사이트 페이지에 추가할 수 있습니다.

Experience Manager Sites 고객의 경우 대화형 미디어 구성 요소를 페이지에 드래그하여 대화형 이미지를 추가할 수 있습니다. 페이지에 Dynamic Media Assets 추가를 참조하십시오.

독립형 Experience Manager Assets 고객인 경우 이 섹션에 설명된 대로 대화형 이미지를 웹 사이트에 수동으로 추가할 수 있습니다.

예

데모 웹 사이트를 예로 사용할 때 세 사람의 사진은 정적 IMG 태그입니다.

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

통합은 IMG 태그를 제거하고 Experience Manager Assets에서 복사한 포함 코드로 바꾸는 것만큼 간단합니다. 결과 3개의 원형 핫스팟이 있는 페이지에서 구매 가능한 대화형 이미지를 표시합니다.

응답형 환경의 구매 가능한 대화형 이미지에 "자르기"를 적용하려면 해당 경로에 대화형 이미지 구성 특성 ZoomView.iscommand을(를) 포함하십시오. 이 경우 ZoomView 구성 요소가 호출되고 iscommand은(는) 사용자가 적용하는 "자르기" 이미지 제공 명령입니다.

ZoomView.iscommand 구성 특성을 참조하십시오.

자르기 이미지 제공 명령을 참조하십시오.

이제 대화형 이미지를 웹 사이트의 기존 빠른 보기와 통합할 준비가 되었습니다.

기존 빠른 보기와 대화형 이미지 통합 integrating-an-interactive-image-with-an-existing-quickview

이 프로세스의 마지막 단계는 웹 사이트에서 대화형 이미지를 기존 Quickview 구현과 통합하는 것입니다. 모든 경우에 작동하는 통합 솔루션은 없습니다. 모든 Quickview 구현은 고유하며 특정 접근 방식이 필요합니다. 따라서 프런트엔드 IT 담당자의 지원을 포함하는 것이 도움이 됩니다.

기존 빠른 보기 구현은 일반적으로 웹 페이지에서 다음 순서로 발생하는 상호 관련된 작업 체인을 나타냅니다.

이러한 호출이 임의의 단계에서 웹 페이지 논리에 의해 호출되는 독립적인 공개 API 호출을 반드시 나타내지는 않습니다. 대신 모든 다음 단계가 이전 단계의 마지막 단계(콜백)에서 숨겨지는 체인 호출입니다.

쇼퍼블 대화형 이미지가 1단계 및 2단계를 부분적으로 바꾸는 경우 사용자가 쇼퍼블 이미지 내부의 핫스팟을 탭합니다. 이러한 사용자 상호 작용은 뷰어에 의해 처리된다. 뷰어가 이전에 Experience Manager Assets에 추가한 모든 핫스팟 데이터를 포함하는 웹 페이지에 이벤트를 반환합니다.

이러한 이벤트 처리기에서 프론트엔드 코드는 다음을 수행합니다.

Experience Manager Assets에서 반환한 포함 코드에는 다음과 같이 강조 표시된 코드 조각에 표시된 대로 주석 처리된 즉시 사용 가능한 이벤트 핸들러가 있습니다.

        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : {
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/",
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //See your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

따라서 코드의 주석 처리를 제거하고 더미 처리기 본문을 특정 웹 페이지에만 해당하는 코드로 바꾸기만 하면 됩니다.

Quickview URL을 구성하는 프로세스는 이전에 설명한 핫스팟 변수를 식별하는 데 사용되는 프로세스와 반대입니다.

핫스팟 변수 식별을 참조하십시오.

앞의 Quickview URL 예제를 사용하면 다음 예에서 각 경우에 Quickview URL이 구성되는 방식을 확인할 수 있습니다.

빠른 보기 URL을 트리거하고 빠른 보기 패널을 활성화하는 마지막 단계는 작업에서 프론트엔드 IT 직원의 도움이 필요합니다. 바로 사용 가능한 빠른 보기 URL을 가지고 적절한 단계에서 빠른 보기 구현을 정확하게 트리거하는 방법을 가장 잘 알고 있는 지식을 보유하고 있습니다.

이러한 단계를 데모 웹 사이트에 적용하여 구매 가능한 대화형 이미지를 Quickview 코드와 완전히 통합하는 방법을 확인할 수 있습니다. 이전에는 빠른 보기 URL의 구조가 다음과 같이 식별되었습니다.

/datafeed/$categoryId$-$SKU$.json

quickViewActivate 처리기 내에서 이 URL을 다시 구성하려면 categoryId 및 SKU 필드를 사용할 수 있습니다. 이러한 필드는 뷰어의 코드에서 처리기에 전달되는 inData 개체에서 사용할 수 있습니다.

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

데모 웹 사이트에서 간단한 loadQuickView() 함수 호출을 사용하여 빠른 보기 대화 상자를 트리거하고 있습니다. 이 함수는 Quickview 데이터 URL인 인수를 하나만 사용합니다. 따라서 구매 가능한 대화형 이미지를 통합하는 마지막 단계는 quickViewActivate 처리기에 다음 코드 행을 추가하는 것입니다.

loadQuickView(quickViewUrl);

다음은 전체 소스 코드입니다.

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : {
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   });
 s7interactiveimageviewer.init();

완전히 통합된 대화형 이미지가 포함된 최종 데모 웹 사이트.

빠른 보기를 사용하여 사용자 정의 팝업 제작 using-quickviews-to-create-custom-pop-ups

빠른 보기를 사용하여 사용자 지정 팝업 Windows® 만들기를 참조하십시오.