Imágenes interactivas interactive-images

Puede hacer que las imágenes estáticas sean ricas y atractivas para los clientes arrastrando y soltando puntos interactivos "de ventas" en una imagen. Los hotspots de ventas combinan información adicional sobre un producto o servicio con una capacidad directa y de punto de venta "Añadir al carro" o "Comprar". Los clientes pueden pulsar estas zonas interactivas y estar vinculados directamente al producto o servicio, agregarlo a un carro de compras o estar vinculados a una página web. Las experiencias directas como estas aumentan la participación de los clientes y la conversión en el sitio web.

El siguiente es un banner de ventas con una ventana emergente de vista rápida. Un usuario activa la vista rápida tocando el círculo o la "zona interactiva" del modelo.

Consulte imágenes interactivas en acción en la página web anterior. Para ello, vaya a:

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

Ver cómo se crean los titulares de imagen interactivos watch-how-interactive-image-banners-are-created

Mire un recorrido de 10 minutos y 33 segundos en creación de letreros de imagen interactivos. También aprenderá a previsualizar, editar y distribuir banners de imagen interactivos.

Inicio rápido: Imágenes interactivas quick-start-interactive-images

La siguiente descripción paso a paso del flujo de trabajo está diseñada para ayudarle a poner en marcha las imágenes interactivas con rapidez en AEM Assets.

Busque la variable Ejemplo dentro de algunas de las tareas de inicio rápido. Contiene un breve tutorial basado en el siguiente ejemplo de página web que aún no tiene imágenes interactivas agregadas:

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

El tutorial ayuda a ilustrar los pasos para integrar imágenes interactivas en su propio sitio web.

Flujo de trabajo de imágenes interactivas:

(Opcional) Identificación de variables de puntos interactivos optional-identifying-hotspot-variables

Comience por identificar las variables dinámicas que usa la implementación de vista rápida existente, de modo que pueda introducir datos de zona interactiva para crear la imagen interactiva.

Al agregar zonas interactivas a una imagen de banner en AEM Assets, debe asignar un SKU (unidad de mantenimiento de stock; un identificador único para cada producto o servicio distinto que ofrezca) y variables adicionales opcionales para cada zona interactiva. Estas variables de puntos interactivos se utilizan más adelante para hacer coincidir puntos interactivos con contenido de vista rápida.

Es importante identificar correctamente el número y el tipo de variables que se asociarán con los datos de puntos interactivos. Cada zona interactiva agregada a una imagen de banner debe contener suficiente información para identificar el producto de forma inequívoca en el sistema back-end existente.

Existen diferentes maneras de identificar un conjunto de variables que se utilizarán para los datos de puntos interactivos.

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

La mayoría de las implementaciones de Quickview utilizan el siguiente paradigma:

El método entonces es visitar diferentes áreas del sitio web existente donde se implementa la función de vista rápida, almacenar en déclencheur la vista rápida y capturar la URL de Ajax enviada por la página web para cargar los datos o el contenido de 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. En la mayoría de los casos, 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 es la única pieza de datos que necesita para agregar zonas interactivas a la imagen del banner.

Sin embargo, en casos complejos, la URL de vista rápida tiene diferentes elementos además del SKU, como ID de categoría, código de color, código de tamaño, etc. En estos casos, cada elemento es una variable independiente en la definición de datos de puntos interactivos de la función de imagen interactiva de ventas en AEM Assets.

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

Ejemplo

Puede aplicar el mismo enfoque utilizado en los tres ejemplos anteriores a la página web de demostración:

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

La página web de demostración tiene varias miniaturas de producto, cada una con un botón de vista rápida etiquetado Más información. Con la herramienta de depuración del explorador web aún activada, haga clic en cada botón y anote las URL de vista rápida registradas. Después de activar las cuatro vistas rápidas del producto disponibles en la página, tiene la siguiente lista de solicitudes de vista rápida realizadas en el servidor:

Al examinar estas 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 dicho análisis, utilizaría categoryId y SKU para zonas interactivas.

Ya está listo para cargar un titular de imagen y agregarle zonas interactivas mediante la función de imagen interactiva de ventas de AEM Assets.

(Opcional) Creación de un ajuste preestablecido de visualizador de imagen interactivo optional-creating-an-interactive-image-viewer-preset

Puede elegir utilizar el ajuste preestablecido predeterminado preestablecido de visualizador de imagen interactiva incorporado, denominado Shoppable_Banner que viene con AEM Assets. O puede crear su propio ajuste preestablecido de visualizador personalizado para utilizarlo con imágenes interactivas.

Al crear un ajuste preestablecido personalizado del visualizador de imagen interactiva, puede determinar el aspecto de las zonas interactivas en el banner de imagen. Como parte de la creación del ajuste preestablecido de visualizador, puede elegir utilizar un gráfico de zona interactiva de una galería de imágenes predefinidas.

Después de guardar el ajuste preestablecido de visualizador, se activa automáticamente (se activa) en el Ajuste preestablecido de visor en AEM Assets. Esta funcionalidad significa que está visible en el componente de Medios interactivos y siempre que se vea un recurso. Sin embargo, para deliver un banner interactivo con este ajuste preestablecido de visualizador, debe publicar también su ajuste preestablecido de visor (esto es cierto para ajustes preestablecidos de visor personalizados o integrados).

Para crear un ajuste preestablecido de visualizador de imagen interactivo:

Carga de un banner de imagen uploading-an-image-banner

Si ya ha cargado las imágenes que desea utilizar, avance al siguiente paso, Adición de zonas interactivas a un titular de imagen.

Para cargar un titular de imagen:

Adición de zonas interactivas a un titular de imagen adding-hotspots-to-an-image-banner

Puede agregar zonas interactivas a un banner de imagen mediante el editor del Administración de puntos interactivos página.

Cuando agregue zonas interactivas, puede definirlas como una visualización emergente de vista rápida, como 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.

Cuando termine de crear la imagen interactiva, puede utilizar Vista previa para ver una representación de cómo aparecerá la imagen interactiva para los clientes.

Consulte (Opcional) Vista previa de imágenes interactivas.

Para agregar zonas interactivas a un titular de imagen:

(Opcional) Vista previa de imágenes interactivas optional-previewing-interactive-images

Puede utilizar Vista previa para ver una representación del aspecto que tendrá la imagen interactiva para los clientes y para probar las zonas interactivas de la imagen para asegurarse de que se comportan del modo esperado.

Cuando esté satisfecho con la imagen interactiva, puede publicarla.
Consulte Incrustación del visualizador de imágenes o vídeos en una página web.
Consulte Vinculación de URL a la aplicación web. Tenga en cuenta que el método de vinculación basado en URL no es posible si el contenido interactivo tiene vínculos con direcciones URL relativas, especialmente vínculos a páginas de AEM Sites.
Consulte Adición de recursos de Dynamic Media a las páginas.

Para previsualizar imágenes interactivas:

Publicación de recursos de imagen interactivos publishing-interactive-image-assets

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

Integración de una imagen interactiva con el sitio web integrating-an-interactive-image-with-your-website

Después de cargar una imagen de banner, agregar zonas interactivas a la imagen y publicar la imagen interactiva, ya está listo para agregarla a la página del sitio web.

Si es cliente de AEM Sites, puede agregar la imagen interactiva 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 AEM Assets, puede agregar manualmente la imagen interactiva a su sitio web como se describe en esta sección.

Ejemplo

Ejemplo de uso del sitio web de demostración:

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

Observe que la imagen de los tres hombres es estática IMG etiqueta:

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

La integración es tan sencilla como eliminar IMG y sustituirlo por el código incrustado copiado de AEM Assets. Puede ver el resultado en la siguiente URL que muestra la imagen interactiva de ventas en la página con tres puntos interactivos de círculo:

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

Para aplicar un recorte a una imagen interactiva de ventas para un entorno interactivo, puede incluir el atributo de configuración de imagen interactiva ZoomView.iscommand a la ruta, donde ZoomView es el componente al que llamar y iscommand es el comando de servidor de imágenes de recorte que se aplica.

Consulte ZoomView.iscommand atributo de configuración.

Consulte recortar servidor de imágenes.

Ya está listo para integrar la imagen interactiva con una vista rápida existente en su sitio web.

Integración de una imagen interactiva con una vista rápida existente integrating-an-interactive-image-with-an-existing-quickview

El último paso de este proceso es integrar la imagen interactiva con una implementación de vista rápida existente 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 y se necesita un enfoque específico que muy probablemente involucre 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 la imagen interactiva de ventas sustituye al paso 1 y al paso 2 parcialmente, cuando un usuario hace clic en un punto interactivo dentro de la imagen de ventas, el visor gestiona dicha interacción del usuario. El visor devuelve un evento a la página web que contiene todos los datos de zona interactiva añadidos anteriormente a AEM Assets.

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

El código incrustado devuelto por AEM Assets ya tiene un controlador de eventos listo para usar en su lugar que se comenta, como se ve en el siguiente fragmento de código resaltado:

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

Por lo tanto, solo es necesario descomentar el código y reemplazar el cuerpo del controlador ficticio con el código específico de la página web en particular.

El proceso de construcción de la URL de vista rápida es básicamente opuesto al proceso utilizado para identificar las variables de zona interactiva incluidas anteriormente.

Consulte Identificación de variables de zona interactiva.

Con nuestros ejemplos anteriores de URL de vista rápida, puede ver, en los ejemplos siguientes, 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 una imagen interactiva de ventas con el código de vista rápida. Anteriormente, la estructura de la URL de vista rápida se identificaba como la siguiente:

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

Para reconstruir esta URL dentro de la quickViewActivate , puede utilizar el categoryId y SKU los campos disponibles en la variable inData objeto que el código del visor pasa al controlador:

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. Como tal, el último paso necesario para integrar la imagen interactiva de ventas es añadir la siguiente línea de código al quickViewActivate controlador:

loadQuickView(quickViewUrl);

El siguiente es el código fuente completo:

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

El sitio web de demostración final con la imagen interactiva completamente integrada tiene el siguiente aspecto:

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

Uso de las vistas rápidas para crear ventanas emergentes personalizadas using-quickviews-to-create-custom-pop-ups

Consulte Crear ventanas emergentes personalizadas con vistas rápidas.