대화형 비디오 interactive-videos

비디오에서 직접 전환을 구현하는 대화형 비디오를 쉽게 만들 수 있습니다. 비디오에 대한 고객 참여는 비디오 플레이어와 함께 패널에서 발생합니다. 비디오 플레이어에서 관련 서비스, 정보 또는 제품 축소판 그림이 포함된 내용을 기준으로 스크롤하여 보기로 표시됩니다. 고객은 축소판을 탭하여 서비스에 직접 연결하거나, 항목을 장바구니에 추가하여 즉시 구매하거나, 웹 페이지에 연결하여 자세한 내용을 확인할 수 있습니다.

비디오가 종료되면 클릭유도하기 위해 모든 오퍼링의 시각적 요약이 표시됩니다. 고객은 원하는 항목을 탭할 수 있는 다른 기회를 갖게 됩니다. 실행 가능하고 특별한 환경(예: )이 있으면 고객 참여와 전환이 증가합니다.

참조 - 대화형 이미지.

대화형 비디오 작동 interactive-video-in-action

To see an interactive, shoppable video in action, click Live Demos, scroll to the Shoppable Media heading on the page, then click the shoppable video.

대화형 쇼퍼블 비디오에서 비디오 프레임 캡처.

대화형 비디오 작성 방법 보기 watch-how-interactive-videos-are-created

연습 대화형 비디오 작성 방법 🔗. (7분 30초) 비디오 연습은 Assets on Demand로 브랜딩되지만, 원칙 및 단계는 Adobe Experience Manager Assets의 대화형 비디오에 계속 적용됩니다.

Adobe 고객 성공 웨비나 adobe-customer-success-webinar

"Experience Manager Assets에서 대화형 비디오, 링크 공유 및 YouTube 공유 사용" 웨비나에서는 대화형 비디오 및 기타 기능을 사용하여 전환 기반 이벤트를 비디오 마케팅 컨텐츠에 연결하는 방법을 설명합니다.

빠른 시작: 대화형 비디오 quick-start-interactive-videos

다음 단계별 워크플로우 설명은 Dynamic Media에서 대화형 비디오를 빠르게 시작하고 실행할 수 있도록 설계되었습니다.

을(를) 찾습니다. 예 일부 빠른 시작 작업 내의 머리글. 여기에는 다음과 같은 시작 데모 웹 페이지를 기반으로 하는 간단한 자습서가 포함되어 있습니다 포함하지 않음 아직 여기에 상호 작용이 추가됨:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=ko?lang=ko

The Examples help to illustrate the steps of integrating interactive videos on your own website.

마지막 예제 섹션에서 자습서를 완료하면 완전히 통합된 대화형 비디오가 있는 최종 데모 웹 페이지의 모습은 다음과 같습니다.

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-3.html?lang=ko?lang=ko

대화형 비디오 워크플로우:

(선택 사항) Quickview 변수 식별 optional-identifying-quickview-variables

먼저 기존 Quickview 구현에서 사용하는 동적 변수를 식별하여 대화형 비디오 작성 프로세스 동안 제품 축소판을 해당 제품 Quickview에 매핑할 수 있습니다.

비디오에 시간 세그먼트를 추가하면 SKU(Stock Keeping Unit) 및 세그먼트에 추가하는 각 축소판에 추가 변수를 지정합니다. 이러한 변수는 나중에 적절한 빠른 보기 제품을 표시하는 데 사용됩니다.

제품 빠른 보기를 고유하게 트리거하는 데 필요한 변수를 올바르게 식별하는 것이 중요합니다.

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

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

따라서 이 방법은 Quickview가 구현된 기존 웹 사이트의 다양한 영역을 방문하고, Quickview를 트리거하며, Quickview 데이터 또는 컨텐츠를 로드하기 위해 웹 페이지에서 보낸 Ajax URL을 캡처하는 것입니다.

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

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

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

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

가장 간단한 경우 Quickview URL에 있는 유일한 변수 부분은 제품 SKU입니다. 이 경우 제품 SKU 값은 Experience Manager의 대화형 비디오에서 시간 세그먼트에 축소판을 추가하는 데 필요한 유일한 데이터 조각입니다.

그러나 복잡한 경우, Quickview URL은 카테고리 ID 및 색상 코드와 같은 제품 SKU 외에도 다양한 요소를 갖습니다. 이러한 경우 이러한 모든 요소는 Experience Manager의 축소판 데이터 정의에서 별도의 변수가 됩니다.

Quickview URL 및 그 결과 축소판 변수의 다음 예를 생각해 보십시오.

예

위의 접근 방식이 예제 웹 사이트에 적용되면 여러 제품 축소판이 포함된 웹 페이지가 표시되며 각 페이지에는 자세히 보기 버튼:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=ko?lang=ko

페이지에서 사용할 수 있는 모든 제품 빠른 보기를 활성화하면 백엔드에 대한 다음 Quickview 요청 목록을 가져올 수 있습니다.

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

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

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

이러한 분석을 기반으로 축소판에 다음 두 변수를 사용할 수 있다고 결론 짓습니다. categoryId 및 SKU.

이제 비디오 및 관련 축소판 자산을 업로드할 준비가 되었습니다.

(선택 사항) 대화형 비디오 뷰어 사전 설정 만들기 optional-creating-an-interactive-video-viewer-preset

이 작업을 건너뛰고 다음 작업을 계속 진행할 수 있습니다. 기본 대화형 비디오 뷰어 사전 설정 유형(다음과 같이)을 사용할 경우 Shoppable_Video_dark 또는 Shoppable_Video_light.

작성 환경에서 축소판을 클릭하면 Quickview 대화 상자가 나타납니다.

사용자 정의 대화형 비디오 뷰어 사전 설정을 선택적으로 만들 수 있습니다. 특히 비디오 플레이어의 스타일링, 대화형 축소판, 비디오 끝에 표시되는 축소판 그림 그리드 보기를 결정할 수 있습니다.

대화형 비디오 뷰어 사전 설정이 추가한 비디오 및 모든 타임라인 세그먼트를 올바르게 렌더링합니다. 또한 의 제품 축소판 그림을 클릭할 때 기본 빠른 보기 예를 사용합니다 미리 보기 게시하기 전에 상호 작용을 테스트할 수 있도록 모드 를 설정합니다.

뷰어 사전 설정을 저장하면 해당 상태가 자동으로 로 설정됩니다 설정 에서 뷰어 사전 설정 페이지. This state means that it is visible in the Dynamic Media component and whenever you preview a video with it. Be sure you also manually publish your new viewer preset.

자세한 내용은 새 뷰어 사전 설정 만들기 고유한 대화형 비디오 뷰어 사전 설정을 만들려면

비디오와 관련 썸네일 에셋 업그레이드 uploading-a-video-and-its-associated-thumbnail-assets

비디오 및 축소판 자산을 이미 업로드한 경우 다음 단계로 진행합니다 비디오에 인터랙티브한 추가.

잘못된 비디오나 이미지를 업로드했거나 더 이상 필요하지 않은 업로드된 비디오나 이미지를 삭제하려는 경우 다음을 참조하십시오 자산 삭제.

비디오 및 관련 축소판 자산을 업로드하려면 다음을 수행하십시오.

비디오에 인터랙티브한 추가 adding-interactivity-to-your-video

대화형 비디오 만들기 페이지에서 즉석 시각적 편집기를 사용하여 비디오에 타임라인 세그먼트를 추가합니다.

타임라인 세그먼트를 추가한 후 각 세그먼트 내에 축소판 이미지를 추가합니다. 추가한 각 축소판에 대해 작업을 적용합니다. 예를 들어, 섬네일에 빠른 보기를 적용하거나, 하이퍼링크를 지정하거나 경험 조각을 지정할 수 있습니다.

자세한 내용은 경험 조각.

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

대화형 비디오를 저장하면 비디오가 즉시 미리 보기에 열립니다. 여기에서 대화형 비디오 뷰어 사전 설정을 선택하고 비디오를 재생하여 고객에게 표시되는 대략적인 표현을 볼 수 있습니다.

비디오에 대화형 기능을 추가하려면:

대화형 비디오 자산 게시 publishing-interactive-video-assets

자세한 내용은 자산 게시 대화형 비디오 자산을 게시하는 방법에 대한 자세한 내용.

웹 사이트와 대화형 비디오 통합 integrating-an-interactive-video-with-your-website

이제 비디오를 업로드하고, 여기에 타임라인 세그먼트를 추가하고, 대화형 비디오를 게시하면 기존 웹 사이트에 추가할 수 있습니다.

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

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

대화형 비디오를 웹 사이트와 통합하려면:

예

데모 웹 사이트 사용 예:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=ko?lang=ko

표준 비디오 포함 코드 방법을 확인합니다.

<style type="text/css">
 #s7video_div.s7videoviewer{
   width:100%;
   height:auto;
 }
</style>

<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/VideoViewer.js"></script>
<div id="s7video_div"></div>
<script type="text/javascript">
 var s7videoviewer = new s7viewers.VideoViewer({
  "containerId" : "s7video_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Video",
   "config2": "/etc/dam/presets/analytics",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "posterimage": "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 }).init();
</script>

통합은 비디오 포함 코드를 제거하고 Experience Manager에서 대화형 비디오 포함 코드로 바꾸는 것만큼 간단합니다. 다음 URL에서 결과를 볼 수 있습니다. 페이지에 있는 대화형 비디오에 대한 표시이지만 아직 기존 빠른 보기에 통합되지 않았습니다.

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-1.html?lang=ko?lang=ko

기존 Quickview와 대화형 비디오 통합 integrating-an-interactive-video-with-an-existing-quickview

이 프로세스의 마지막 단계는 대화형 비디오를 웹 사이트에서 사용되는 기존 Quickview 구현과 통합하는 것입니다. 모든 경우에 작동하는 통합에 대한 해결 방법이 없습니다. 모든 Quickview 구현은 고유합니다. 따라서 프런트 엔드 IT 담당자의 지원을 필요로 하는 구체적인 접근 방식이 필요합니다.

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

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

동시에 대화형 비디오가 1단계와 2단계를 대체하며, 사용자가 대화형 비디오 내의 축소판을 클릭하면 이러한 사용자 상호 작용은 뷰어에 의해 처리됩니다. 뷰어는 이전에 Experience Manager에 추가한 모든 축소판 데이터를 포함하는 웹 페이지에 이벤트를 반환합니다.

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

또한 대화형 비디오 뷰어는 전체 화면 작업 모드를 지원합니다. 최종 사용자는 전체 화면을 종료하지 않고 축소판을 클릭하여 빠른 보기를 트리거합니다. 이 기능을 사용하려면 빠른 보기 모달 대화 상자가 뷰어의 컨테이너에 연결되도록 프런트 엔드 코드를 변경합니다. 뷰어가 전체 화면 모드에 있을 때 사용할 수 없는 문서 BODY 또는 기타 웹 페이지 요소를 추가하지 마십시오. 이 작업을 수행하는 코드는 페이지에서 뷰어가 로드된 후 전송되는 하나 이상의 뷰어 콜백을 수신합니다.

Experience Manager이 반환한 포함 코드에 이미 사용 가능한 이벤트 처리기가 있습니다. 강조 표시된 다음 코드 조각에 표시된 대로 주석 처리됩니다.

<style type="text/css">
 #s7interactivevideo_div.s7interactivevideoviewer{
   width:100%;
   height:auto;
 }
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
 var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
  "containerId" : "s7interactivevideo_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
   "config2": "/etc/dam/presets/analytics",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
   "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 })
 /* // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
    //To pass other parameter from the hotspot, you 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
    },
"initComplete":function() {
    //--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
    var popup = document.getElementById('quickview_div'); // get custom quickview container
    popup.parentNode.removeChild(popup); // remove it from current DOM
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(popup); //Attach custom quickview container to viewer
    }
   });
 */
 s7interactivevideoviewer.init();
</script>

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

표준 포함 코드에 있는 두 개의 기본 콜백 핸들러가 있습니다. quickViewActivate 및 initComplete. 다음 quickViewActivate 처리기는 뷰어에서 축소판을 클릭하면 트리거됩니다. 이 플러그인을 사용하여 뷰어를 Quickview 활성화 논리와 통합합니다. 다음 initComplete 처리기는 뷰어가 페이지에 로드될 때 한 번만 트리거됩니다. 이 처리기는 웹 페이지 DOM에서 빠른 보기 대화 상자 위치를 조정하는 데 사용됩니다.

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);

마지막으로, Quickview 대화 상자가 뷰어의 컨테이너 요소에 첨부됩니다. 기본 포함 코드는 이 기능을 수행하는 샘플 단계를 제공합니다. 뷰어의 컨테이너 요소에 대한 참조를 가져오려면 다음 코드 행을 사용할 수 있습니다.

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);

위치 inner_container 는 DIV 뷰어에서 관리하는 요소입니다. 대화 상자가 그 하위 항목이 되도록 합니다 DIV.

모달 대화 상자 요소를 실제로 찾아 위의 컨테이너에 연결하는 단계는 경우에 따라 다릅니다. 필요한 Quickview 구현에 익숙한 프런트 엔드 개발자의 도움을 받을 수 있습니다.

샘플 웹 사이트의 경우 Quickview 모달 대화 상자가 DIV quickview-modal ID가 문서에 직접 첨부된 경우입니다. BODY. 따라서 이 대화 상자를 뷰어의 컨테이너로 이동할 코드는 다음과 같이 간단합니다.

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));

전체 소스 코드는 다음과 같습니다.

<style type="text/css">
 #s7interactivevideo_div.s7interactivevideoviewer{
   width:100%;
   height:auto;
 }
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
 var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
  "containerId" : "s7interactivevideo_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
   "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 })
 // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
     var categoryId=inData.categoryId; //categoryId
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   "initComplete":function() {
    //--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(document.getElementById("quickview-modal"));
    }
   });
 s7interactivevideoviewer.init();
</script>

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-3.html?lang=ko?lang=ko

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

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