대화형 이미지 interactive-images

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

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

다음 위치로 이동하여 위의 웹 페이지에서 대화형 이미지를 참조하십시오.

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html?lang=ko?lang=ko

대화형 이미지 배너를 만드는 방법을 확인하십시오 watch-how-interactive-image-banners-are-created

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

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

다음 단계별 워크플로우 설명은 AEM Assets에서 대화형 이미지를 빠르게 시작하고 실행할 수 있도록 설계되었습니다.

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=ko?lang=ko

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

대화형 이미지 워크플로우:

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

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

AEM Assets에서 배너 이미지에 핫스팟을 추가할 때 SKU(Stock Keeping Unit)를 할당해야 합니다. 각 핫스팟에 대한 선택적 추가 변수 및 개별 제품 또는 서비스의 고유 식별자입니다. 이러한 핫스팟 변수는 나중에 Quickview 컨텐츠와 핫스팟을 일치시키기 위해 사용됩니다.

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

핫스팟 데이터에 사용할 변수 집합을 식별하는 다른 방법이 있습니다.

시스템에서 Quickview를 식별하는 데 필요한 최소 데이터 세트를 알 수 있으므로 경우에 따라 기존 Quickview 구현을 담당하는 IT 전문가와 상의하는 것이 충분할 수 있습니다. 그러나 대부분의 경우 프런트 엔드 코드의 기존 동작을 간단히 분석할 수도 있습니다.

대부분의 Quickview 구현은 다음 패러다임을 사용합니다.

그런 다음 빠른 보기 기능이 구현된 기존 웹 사이트의 다른 영역을 방문하여 빠른 보기를 트리거하고 Quickview 데이터 또는 컨텐츠를 로드하기 위해 웹 페이지에서 보낸 Ajax URL을 캡처하는 것이 좋습니다.

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

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

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

이 프로세스 중에는 다양한 제품 카테고리와 유형을 사용하여 웹 사이트의 다양한 영역을 방문하는 것이 중요합니다. 그 이유는 Quickview URL에 주어진 웹 사이트 카테고리에 공통되는 부분이 있을 수 있지만 웹 사이트의 다른 영역을 방문하는 경우에만 변경되기 때문입니다.

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

하지만 복잡한 경우, Quickview URL은 카테고리 ID, 색상 코드, 크기 코드 등과 같은 SKU 외에도 다양한 요소를 가지고 있습니다. 이러한 경우 AEM Assets에서 쇼퍼블 대화형 이미지 기능에서 모든 요소는 핫스팟 데이터 정의에서 별도의 변수입니다.

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

예

위의 세 예에서 사용된 동일한 접근 방식을 데모 웹 페이지에 적용할 수 있습니다.

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=ko?lang=ko

데모 웹 페이지에는 여러 제품 축소판이 있으며, 각 페이지에는 빠른 보기 단추가 표시됩니다 자세히 보기. 웹 브라우저의 디버깅 도구가 계속 활성화되면 각 단추를 클릭하고 기록된 Quickview URL을 기록해 둡니다. 페이지에서 사용할 수 있는 4개의 제품 빠른 보기를 모두 활성화하면 백엔드에 대해 수행된 Quickview 요청 목록이 있습니다.

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

이 정보가 주어지면 전체 Quickview URL은 다음 패턴을 가집니다.

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

이러한 분석을 기반으로 다음을 사용할 수 있습니다 categoryId 및 SKU 핫스팟

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

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

이라는 기본 기본 기본 대화형 이미지 뷰어 사전 설정을 사용하도록 선택할 수 있습니다. Shopperable_Banner AEM Assets과 함께 제공됩니다. 또는 대화형 이미지에 사용할 사용자 지정 뷰어 사전 설정을 직접 만들 수도 있습니다.

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

뷰어 사전 설정을 저장하면 뷰어 사전 설정 AEM Assets의 목록 페이지. 이 기능은 Interactive Media 구성 요소에 표시되고 자산을 볼 때마다 표시됩니다. 하지만, 게재 이 뷰어 사전 설정이 있는 대화형 배너입니다. 게시 뷰어 사전 설정도 마찬가지입니다(사용자 지정 또는 기본 제공 뷰어 사전 설정의 경우 true).

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

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

사용하려는 이미지를 이미 업로드한 경우 다음 단계로 진행합니다. 이미지 배너에 핫스팟 추가.

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

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

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

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

자세한 내용은 경험 조각.

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

대화형 이미지 만들기를 마치면 다음을 사용할 수 있습니다 미리 보기 대화형 이미지가 고객에게 표시되는 방식을 보여 줍니다.

자세한 내용은 (선택 사항) 대화형 이미지 미리 보기.

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

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

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

대화형 이미지에 만족하면 게시할 수 있습니다.
자세한 내용은 웹 페이지에 비디오 또는 이미지 뷰어 포함.
자세한 내용은 URL을 웹 애플리케이션에 연결. 대화형 컨텐츠에 상대 URL이 있는 링크, 특히 AEM Sites 페이지에 대한 링크가 있는 경우 URL 기반 연결 방법이 지원되지 않습니다.
자세한 내용은 페이지에 Dynamic Media 자산 추가

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

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

자세한 내용은 자산 게시 대화형 이미지 자산을 게시하는 방법에 대한 자세한 내용.

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

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

AEM Sites 고객의 경우 대화형 미디어 구성 요소를 페이지로 드래그하여 대화형 이미지를 추가할 수 있습니다. 자세한 내용은 페이지에 Dynamic Media 자산 추가

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

예

데모 웹 사이트 사용 예:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=ko?lang=ko

세 남자의 사진은 정적인 것이다 IMG 태그:

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

통합은 을 제거하는 것만큼 간단합니다 IMG 태깅하여 AEM Assets에서 복사한 포함 코드로 바꿉니다. 다음 URL에서 세 개의 원 핫스팟이 있는 페이지에서 쇼퍼블 인터랙티브 이미지를 보여 줍니다.

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-1.html?lang=ko?lang=ko

응답형 환경을 위한 쇼퍼블 대화형 이미지에 자르기를 적용하려면 대화형 이미지 구성 속성을 포함할 수 있습니다 ZoomView.iscommand 경로 - 여기서 ZoomView 는 및 를 호출할 구성 요소입니다 iscommand 은 적용하는 자르기 이미지 제공 명령입니다.

자세한 내용은 ZoomView.iscommand 구성 속성입니다.

자세한 내용은 자르기 이미지 제공 명령.

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

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

이 프로세스의 마지막 단계는 대화형 이미지를 웹 사이트의 기존 Quickview 구현과 통합하는 것입니다. 모든 경우에 작동하는 통합에 대한 해결 방법이 없습니다. 모든 Quickview 구현은 고유하며 프런트 엔드 IT 담당자의 지원이 필요한 특정 접근 방식이 필요합니다.

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

이러한 호출은 임의의 단계에서 웹 페이지 로직에서 호출할 수 있는 독립 공용 API 호출을 나타내지 않을 수 있습니다. 대신, 이전 단계의 마지막 단계(콜백)에서 모든 다음 단계가 숨겨지는 체인 호출입니다.

동시에 쇼퍼블 대화형 이미지에는 1단계와 2단계를 대체하고, 사용자가 쇼퍼블 이미지 내의 핫스팟을 클릭할 때 이러한 사용자 상호 작용은 뷰어에 의해 처리됩니다. 뷰어는 이전에 AEM Assets에 추가된 모든 핫스팟 데이터를 포함하는 웹 페이지에 이벤트를 반환합니다.

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

AEM 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, you will need to add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //Please refer to your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

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

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

자세한 내용은 핫스팟 변수 식별.

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

Quickview URL을 트리거하고 Quickview 패널을 활성화하는 마지막 단계는 IT 부서의 프런트 엔드 IT 담당자의 지원이 필요할 수 있습니다. 이들은 사용 준비 중인 Quickview URL을 사용하여 적절한 단계에서 Quickview 구현을 정확하게 트리거하는 방법을 잘 알고 있습니다.

이러한 단계를 데모 웹 사이트에 적용하여 쇼퍼블 인터랙티브 이미지를 Quickview 코드와 완전히 통합하는 방법을 확인할 수 있습니다. 이전에는 Quickview URL의 구조가 다음과 같이 식별되었습니다.

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

에서 이 URL을 재구성하려면 quickViewActivate 핸들러, 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();

완전히 통합된 대화형 이미지를 사용하는 최종 데모 웹 사이트는 다음과 같습니다.

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-3.html?lang=ko?lang=ko

빠른 보기를 사용하여 사용자 지정 팝업 만들기 using-quickviews-to-create-custom-pop-ups

자세한 내용은 빠른 보기를 사용하여 사용자 지정 팝업 만들기.