Vídeos interactivos interactive-videos

Puede crear fácilmente vídeos interactivos que impulsen la conversión directamente desde el vídeo. La participación del cliente con el vídeo se produce en un panel junto al reproductor de vídeo, donde el servicio, la información o las miniaturas de productos relacionados se desplazan a la vista según lo que se incluye en el vídeo. Los clientes pueden tocar la miniatura y estar vinculados directamente al servicio, o agregar el artículo a un carro de compras para su compra inmediata, o estar vinculados a una página web para obtener más información.

Cuando termina el vídeo, se muestra un resumen visual de todas las ofertas para dirigir una llamada a la acción. Los clientes tienen otra oportunidad de tocar el elemento que desean. Experiencias procesables y específicas, como estas, aumentan la participación de los clientes y las conversiones.

Consulte también Imágenes interactivas.

Vídeo interactivo en acción interactive-video-in-action

Para ver un vídeo interactivo y de ventas en acción, haga clic en Demostraciones en directo, desplácese hasta el Medios de ventas a continuación, haga clic en el vídeo de ventas.

Captura de un fotograma de vídeo de un vídeo interactivo y de ventas.

Ver cómo se crean los vídeos interactivos watch-how-interactive-videos-are-created

Reproducir un tutorial en cómo se crean los vídeos interactivos 🔗. (7 minutos y 30 segundos) Aunque el tutorial de vídeo está marcado con Assets on Demand, los principios y pasos siguen aplicándose a Vídeo interactivo en Adobe Experience Manager Assets.

Seminario web sobre el éxito de los clientes de Adobe adobe-customer-success-webinar

El seminario web "Uso de vídeo interactivo, uso compartido de vínculos y uso compartido de YouTube en Experience Manager Assets" le enseña cómo utilizar vídeo interactivo y otras funciones para enlazar eventos impulsados por conversión con su contenido de marketing de vídeo.

Inicio rápido: Vídeos interactivos quick-start-interactive-videos

La siguiente descripción paso a paso del flujo de trabajo está diseñada para ayudarle a poner en marcha rápidamente los vídeos interactivos en Dynamic Media.

Busque la variable Ejemplo dentro de algunas de las tareas de inicio rápido. Contiene un breve tutorial que se basa en esta página web de demostración inicial que no ya tienen interactividad agregada:

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

Los ejemplos sirven para ilustrar los pasos que se siguen para integrar vídeos interactivos en su propio sitio web.

Cuando termine el tutorial en la última sección Ejemplo , la página web de demostración final con el vídeo interactivo totalmente integrado tendrá el siguiente aspecto:

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

Flujo de trabajo de vídeo interactivo:

(Opcional) Identificación de variables de vista rápida optional-identifying-quickview-variables

Comience por identificar las variables dinámicas que usa la implementación de Quickview existente, de modo que pueda asignar miniaturas de productos a la vista rápida de su producto correspondiente durante el proceso de creación de vídeo interactivo.

Al agregar segmentos de tiempo a un vídeo, se asigna un SKU (unidad de mantenimiento de stock) y cualquier variable adicional a cada miniatura que se agregue a un segmento. Estas variables se utilizan más adelante para mostrar el producto Quickview correcto.

Es importante identificar correctamente qué variables son necesarias para almacenar en déclencheur un producto de forma única en Quickview.

A veces, puede ser suficiente consultar a los especialistas de TI responsables de su implementación de Quickview existente. Es probable que sepan qué conjunto mínimo de datos es necesario para identificar la vista rápida en el sistema. Sin embargo, es posible simplemente analizar el comportamiento existente del código front-end.

La mayoría de las implementaciones de vista rápida utilizan el siguiente paradigma:

Por lo tanto, el método consiste en visitar diferentes áreas del sitio web existente donde se implementa Quickview, almacenar en déclencheur la vista rápida y capturar la URL de Ajax que envía la página web para cargar los datos o el contenido de la vista rápida.

Normalmente no es necesario que utilice ninguna herramienta de depuración especializada. Los navegadores web modernos cuentan con inspectores web que realizan un trabajo adecuado. A continuación se indican algunos ejemplos de exploradores web que incluyen inspectores web:

Cuando la supervisión de red está activada en el explorador, ponga en déclencheur la vista rápida en la página.

Ahora, busque la URL de Ajax de vista rápida en el registro de red y copie la URL grabada para su análisis futuro. Por lo general, cuando se déclencheur la vista rápida hay numerosas solicitudes que se envían al servidor. Normalmente, la URL de Ajax de vista rápida es una de las primeras de la lista. Tiene una ruta o porción de cadena de consulta compleja y su tipo MIME de respuesta es text/html, text/xmlo text/javascript.

Durante este proceso, es importante visitar diferentes áreas del sitio web, con diferentes tipos y categorías de productos. El motivo es que las URL de vista rápida pueden tener partes que son comunes para una categoría de sitio web determinada, pero cambian solo si visita un área diferente del sitio web.

En el caso más simple, la única parte de la variable en la URL de vista rápida es el SKU del producto. En este caso, el valor SKU del producto es la única pieza de datos necesaria para agregar miniaturas a un segmento de tiempo en el vídeo interactivo en el Experience Manager.

Sin embargo, en casos complejos, la URL de vista rápida tiene diferentes elementos además del SKU del producto, como el ID de categoría y el código de color. En estos casos, cada elemento de este tipo se convierte en una variable independiente en la definición de datos de miniatura en el Experience Manager.

Veamos los siguientes ejemplos de direcciones URL de vista rápida y las variables de miniaturas resultantes:

Ejemplo

Cuando se aplica el enfoque anterior al sitio web de Ejemplo, tiene una página web con varias miniaturas de productos, cada una con un CONSULTE MÁS botón:

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

Después de activar todas las vistas rápidas del producto disponibles en la página, obtiene la siguiente lista de solicitudes de vista rápida realizadas en el servidor:

Al examinar las llamadas al servidor, verá que la información específica del producto solo está presente en la ruta de solicitud. También observa que la cadena de consulta no se utiliza en absoluto y que hay dos tipos distintos de fragmentos de datos involucrados:

Dada esta información, toda la URL de vista rápida tiene el siguiente patrón:

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

En función de este análisis, concluye que puede utilizar las dos variables siguientes para las miniaturas: categoryId y SKU.

Ya está listo para cargar un vídeo y sus recursos de miniaturas asociados.

(Opcional) Creación de un ajuste preestablecido de visualizador de vídeo interactivo optional-creating-an-interactive-video-viewer-preset

Puede omitir esta tarea y continuar con la siguiente si quiere utilizar cualquiera de los tipos predeterminados de ajustes preestablecidos de visualizador de vídeo interactivo predefinidos conocidos como Shoppable_Video_dark o Shoppable_Video_light.

Cuando se hace clic en una miniatura en el entorno de creación, se muestra una vista previa de la variable Vista rápida aparece en el cuadro de diálogo.

Si lo desea, puede crear su propio ajuste preestablecido de visualizador de vídeo interactivo personalizado. Puede determinar, entre otras cosas, el estilo del reproductor de vídeo, las miniaturas interactivas y la vista de cuadrícula en miniatura que aparece al final del vídeo.

Un ajuste preestablecido de visualizador de vídeo interactivo procesa correctamente el vídeo y todos los segmentos de línea de tiempo que ha añadido. También utiliza una vista rápida predeterminada de ejemplo al hacer clic en una miniatura de producto en Vista previa para poder probar su interactividad antes de publicarla.

Después de guardar el ajuste preestablecido de visualizador, su estado se establece automáticamente en Activado en el Ajustes preestablecidos de visor página. Este estado significa que está visible en el componente Dynamic Media y siempre que se obtiene una vista previa de un vídeo con él. Asegúrese de publicar también manualmente el nuevo ajuste preestablecido de visualizador.

Consulte Creación de un nuevo ajuste preestablecido de visualizador para crear su propio ajuste preestablecido de visualizador de vídeo interactivo.

Carga de un vídeo y sus recursos de miniaturas asociados uploading-a-video-and-its-associated-thumbnail-assets

Si ya ha cargado los recursos de vídeo y miniaturas, continúe con Adición de interactividad al vídeo.

Si ha cargado vídeos o imágenes incorrectos o quiere eliminar vídeos o imágenes cargados que ya no necesita, consulte Eliminación de recursos.

Para cargar un vídeo y sus recursos de miniaturas asociados:

Adición de interactividad al vídeo adding-interactivity-to-your-video

Agregue segmentos de línea de tiempo a un vídeo mediante el editor visual local de la página Crear vídeo interactivo .

Después de agregar segmentos de cronología, agregue imágenes en miniatura dentro de cada segmento. Para cada miniatura que agregue, debe aplicar una acción a ella. Por ejemplo, puede aplicar una vista rápida a la miniatura, o bien asignarle un hipervínculo o un fragmento de experiencia.

Consulte Fragmentos de experiencias.

Deshacer y Rehacer , cerca de la esquina superior derecha de la página, son compatibles durante la sesión de creación/edición actual.

Después de guardar el vídeo interactivo, el vídeo se abre inmediatamente en la vista previa. Desde allí, puede seleccionar un ajuste preestablecido de visualizador de vídeo interactivo y reproducir el vídeo para ver una representación aproximada de cómo le aparece a los clientes.

Para añadir interactividad al vídeo:

Publicación de recursos de vídeo interactivos publishing-interactive-video-assets

Consulte Publicación de recursos para obtener más información sobre cómo publicar recursos de vídeo interactivos.

Integración de un vídeo interactivo con el sitio web integrating-an-interactive-video-with-your-website

Después de cargar un vídeo, añadir segmentos de cronología y publicar el vídeo interactivo, ya está listo para agregarlo al sitio web existente.

Si es cliente de Experience Manager Sites, puede agregar el vídeo interactivo arrastrando el componente de Medios interactivos a su página. Consulte Adición de recursos de Dynamic Media a las páginas.

Si es cliente independiente de Experience Manager Assets, puede añadir manualmente el vídeo interactivo al sitio web tal como se describe en esta sección.

Para integrar un vídeo interactivo con su sitio web:

Ejemplo

Ejemplo de uso del sitio web de demostración:

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

Observe cómo es el código incrustado de vídeo estándar:

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

La integración es tan sencilla como eliminar el código incrustado de vídeo y reemplazarlo por el código incrustado de vídeo interactivo de Experience Manager. Puede ver el resultado en la siguiente URL. Aunque muestra un vídeo interactivo presente en la página, aún no está integrado con las vistas rápidas existentes:

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

Integración de un vídeo interactivo con una vista rápida existente integrating-an-interactive-video-with-an-existing-quickview

El último paso de este proceso es integrar el vídeo interactivo con una implementación de vista rápida existente que se utiliza en el sitio web. No existe una solución para la integración que funcione en todos los casos. Cada implementación de QuickView es única. Como tal, se necesita un enfoque específico que incluya la asistencia de una persona de TI de front-end.

La implementación de vista rápida existente representa normalmente una cadena de acciones interrelacionadas que se producen en la página web en el siguiente orden:

Es posible que estas llamadas no representen llamadas de API públicas independientes a las que la lógica de página web puede llamar desde un paso arbitrario. En su lugar, se trata de una llamada encadenada en la que cada paso siguiente se oculta en la última fase (llamada de retorno) del paso anterior.

Al mismo tiempo que el vídeo interactivo reemplaza al paso 1 y al paso 2 parcialmente, cuando un usuario hace clic en una miniatura dentro del vídeo interactivo, el visor gestiona esta interacción con el usuario. El visor devuelve un evento a la página web que contiene todos los datos de miniaturas añadidos anteriormente al Experience Manager.

En un controlador de eventos de este tipo, el código front-end hace lo siguiente:

Además, el visor de vídeo interactivo es compatible con el modo de funcionamiento de pantalla completa. El usuario final déclencheur las vistas rápidas haciendo clic en una miniatura sin salir de la pantalla completa. Para lograr esta funcionalidad, se modifica el código del front-end de modo que el cuadro de diálogo modal de vista rápida esté adjunto al contenedor del visor. No agregue el BODY del documento ni ningún otro elemento de página web que no esté disponible cuando el visor esté en modo de pantalla completa. El código que realiza este trabajo escucha otra llamada de retorno de visualizador que se envía después de que el visualizador se cargue en la página.

El código incrustado devuelto por el Experience Manager ya tiene un controlador de eventos listo para usar. Se comenta como se ve en el siguiente fragmento de código resaltado:

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

Por lo tanto, solo es necesario descomentar el fragmento de código resaltado arriba y reemplazar el cuerpo de los controladores ficticios por un código específico para la página web en particular.

Hay dos controladores de llamada de retorno predeterminados presentes en el código incrustado estándar: quickViewActivate y initComplete. La variable quickViewActivate déclencheur del controlador cuando se hace clic en una miniatura en el visor. Utilícelo para integrar el visor con la lógica de activación de vista rápida. La variable initComplete déclencheur solo una vez cuando el visor se carga en la página. Este controlador se utiliza para ajustar la ubicación del cuadro de diálogo Vista rápida en el DOM de la página web.

El proceso de construcción de la URL de vista rápida es opuesto al proceso de identificación de variables de miniatura que se trataron anteriormente en este tema. Con los ejemplos de URL de vista rápida identificados anteriormente, puede ver cómo se construye la URL de vista rápida en cada caso:

El último paso para almacenar en déclencheur la URL de vista rápida y activar el panel de vista rápida requiere, muy probablemente, la asistencia de una persona de TI de front-end de su departamento de TI. Tienen conocimientos para saber mejor cómo realizar un déclencheur exacto de la implementación de QuickView desde el paso adecuado, teniendo una URL de Quickview lista para usar.

Puede ver cómo se aplican estos pasos al sitio web de demostración para integrar completamente un vídeo interactivo con el código de vista rápida. Anteriormente, en este tema, la estructura de la URL de vista rápida se identificaba como la siguiente:

/datafeed/$CategoryId$-$SKU$.json

Es fácil reconstruir esta URL dentro del quickViewActivate controlador mediante categoryId y sku los campos disponibles en la variable inData se pasa al controlador mediante el código del visor, como se muestra a continuación:

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

El sitio web de demostración activa el cuadro de diálogo Vista rápida utilizando un loadQuickView() llamada de función. Esta función toma solo un argumento, que es la URL de datos de vista rápida. El último paso es integrar el vídeo interactivo y es agregar la siguiente línea de código al quickViewActivate controlador:

loadQuickView(quickViewUrl);

Finalmente, asegúrese de que su Vista rápida se adjunta al elemento contenedor del visor. El código incrustado predeterminado proporciona pasos de muestra para lograr esta funcionalidad. Para obtener una referencia al elemento contenedor del visor, puede utilizar las siguientes líneas de código:

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

Donde inner_container es una referencia a un DIV elemento administrado por el visor. Desea que el cuadro de diálogo sea un elemento secundario de esa DIV.

Los pasos para localizar realmente el elemento del cuadro de diálogo modal y adjuntarlo al contenedor anterior dependen de las mayúsculas y minúsculas. Una vez más, puede solicitar la ayuda de su desarrollador de front-end que esté familiarizado con la implementación de Quickview que es necesaria.

Para el sitio web de muestra, el cuadro de diálogo modal de vista rápida se implementa como un DIV con el ID modal de vista rápida adjunto directamente al documento BODY. Por lo tanto, el código para mover ese cuadro de diálogo al contenedor del visor es tan sencillo como el siguiente:

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

El código fuente completo es el siguiente:

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

El sitio web de la demostración final con el vídeo interactivo totalmente integrado tiene el siguiente aspecto:

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

Creación de ventanas emergentes personalizadas mediante vistas rápidas using-quickviews-to-create-custom-pop-ups

Consulte Creación de ventanas emergentes personalizadas mediante vistas rápidas.