Los letreros de carrusel permiten a los especialistas en marketing impulsar la conversión creando fácilmente contenido promocional interactivo rotatorio y entregándolo a cualquier pantalla.
La creación y modificación de contenido destacado en las pancartas promocionales puede llevar mucho tiempo, lo que limita la capacidad de publicar contenido nuevo rápidamente o de hacerlo más específico. Los letreros de carrusel le permiten crear o modificar rápidamente letreros rotativos, agregar interactividad, como puntos interactivos vinculados a los detalles del producto o recursos relacionados, y distribuirlos en cualquier pantalla, lo que le permite comercializar más rápidamente contenido promocional.
Los letreros de carrusel se designan mediante un letrero con la palabra CAROUSELSET:
En su sitio web, una pancarta de carrusel puede tener el siguiente aspecto:
Aquí puede navegar por las imágenes (haciendo clic en los números). Además, las diapositivas giran automáticamente en función del intervalo de tiempo que se pueda personalizar. Las imágenes agregadas en la pancarta de carrusel admiten zonas interactivas y mapas de imagen, donde los usuarios pueden tocar o ir a un hipervínculo o acceder a una ventana de vista rápida.
En este ejemplo, un usuario tocó o hizo clic en un mapa de imagen y accedió a la ventana de vista rápida para obtener guantes:
Vea un tutorial de 10 minutos y 33 segundos sobre cómo se crean los letreros de carrusel. También aprenderá a previsualización, edición y distribución de letreros de carrusel.
Los usuarios no administrativos deben agregarse al grupo dam-users para poder crear o editar letreros de carrusel. Si tiene problemas para crear o editar, póngase en contacto con el administrador del sistema, el cual puede agregarle al grupo dam-users.
Para ayudarle a ponerse en marcha rápidamente:
Identifique las variables de puntos interactivos y mapas de imagen (solo para clientes que utilizan AEM Assets + Dynamic Media)
Inicio identificando las variables dinámicas utilizadas por la implementación de vista rápida existente para que pueda introducir los puntos interactivos y los datos de mapa de imágenes correctamente durante el proceso de creación de letreros de carrusel en AEM Assets.
Opcional: Cree un ajuste preestablecido de visualizador de conjuntos de carrusel, según sea necesario.
Si es un administrador, puede personalizar el comportamiento y el aspecto del carrusel creando su propio ajuste preestablecido de visor de carrusel. La principal ventaja es que puede volver a utilizar este ajuste preestablecido de visor personalizado para varios carruseles. Sin embargo, los usuarios también tienen la opción de personalizar el comportamiento y el aspecto del carrusel directamente durante la creación del carrusel. Este es el método preferido cuando desea un diseño muy específico para un determinado carrusel.
Cargue una pancarta de imagen.
Cargue letreros de imagen que desee convertir en interactivos.
Crear un conjunto de carrusel.
En Conjuntos de carruseles, los usuarios navegan por las imágenes de pancarta y tocan zonas interactivas o mapas de imagen para acceder al contenido relevante.
Para crear un conjunto de carrusel en Assets, pulse Crear y, a continuación, seleccione Conjuntos de carrusel. Agregue recursos a las diapositivas y pulse Guardar. También puede editar el aspecto y el comportamiento del carrusel directamente en el editor.
Añada zonas interactivas o mapas de imagen en una pancarta de imagen.
Añada una o varias zonas interactivas o mapas de imagen en una pancarta de imagen y asocie cada una de ellas a una acción como un vínculo, una vista rápida o un fragmento de experiencia. Después de agregar zonas interactivas o mapas de imagen, esta tarea se finaliza publicando el conjunto de carrusel. La publicación crea el código incrustado que puede utilizar para copiar y aplicar a la página de aterrizaje del sitio web.
Consulte (Opcional) Vista previa de letreros de carrusel. - Opcional. Si lo desea, puede vista una representación del conjunto de carrusel y probar su interactividad.
Publicar letreros de carrusel.
Puede publicar un conjunto de carrusel como lo haría con cualquier recurso. En Recursos, vaya al conjunto de carrusel, selecciónelo y toque Publicar. Al publicar un conjunto de carrusel, se activa la URL y la cadena Incrustar.
Realice una de las acciones siguientes:
Añadir una pancarta de carrusel a la página webPuede agregar la URL de la pancarta de carrusel o el código incrustado que ha copiado en la página web.
Añada una pancarta de carrusel a su sitio web en AEMIsi es cliente de AEM Sites, puede agregar el conjunto de carrusel directamente a la página en AEM, mediante el componente Medios interactivos.
Si necesita editar conjuntos de carrusel, consulte edición de conjuntos de carrusel. Además, puede realizar vistas y editar las propiedades del conjunto de carrusel.
Inicio identificando las variables dinámicas utilizadas por la implementación de vista rápida existente para que pueda introducir los puntos interactivos o los datos de mapa de imagen correctamente durante el proceso de creación de conjuntos de carrusel en AEM Assets.
Cuando agrega zonas interactivas o mapas de imagen a una imagen de pancarta en AEM Assets, debe asignar un SKU y variables adicionales opcionales a cada zona interactiva o mapa de imagen. Estas variables se utilizan más adelante para hacer coincidir puntos interactivos o mapas de imagen 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 o mapas de imagen. Cada zona interactiva o mapa de imagen que se añada a una imagen de pancarta debe contener suficiente información para identificar sin ambigüedades el producto en el sistema back-end existente. Al mismo tiempo, cada zona interactiva o mapa de imagen no debe incluir más datos de los necesarios. El motivo es que esto haría que el proceso de entrada de datos fuera demasiado complejo y la administración de puntos interactivos o mapas de imagen en curso fuera más propensa a errores.
Existen diferentes maneras de identificar un conjunto de variables que se utilizarán para los datos de puntos interactivos o mapas de imagen.
A veces puede bastar con consultar con los especialistas en TI responsables de la implementación de vista rápida existente, ya que es probable que sepan cuál es el conjunto mínimo de datos necesario para identificar una vista rápida 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 vista rápida utilizan el siguiente paradigma:
El método consiste en visitar diferentes áreas del sitio web existente donde se implementa la función de vista rápida, activar 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. Estos son algunos ejemplos de exploradores Web que incluyen inspectores Web:
Cuando la supervisión de red está activada en el explorador, active la vista rápida en la página.
Encuentre ahora la URL de Ajax de vista rápida en el registro de red y copie la URL grabada para futuras análisis. En la mayoría de los casos, cuando se activa 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 parte de cadena de consulta compleja y su tipo MIME de respuesta es text/html
, text/xml
o text/javascript
.
Durante este proceso es importante visitar diferentes áreas del sitio web, con diferentes tipos y categorías de productos. La razón es que las direcciones URL de vista rápida pueden tener partes comunes para una categoría de sitio web determinada, pero solo cambian si se visita un área diferente del sitio web.
En el caso más sencillo, la única parte variable de la URL de vista rápida es el SKU del producto. En este caso, el valor de SKU es la única pieza de datos que necesita para agregar zonas interactivas o mapas de imagen a la imagen de la pancarta.
Sin embargo, en casos complejos, la dirección URL de vista rápida tiene distintos 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 o mapas de imagen en la función de pancarta de carrusel.
Considere los siguientes ejemplos de direcciones URL de vista rápida y las variables de mapa de imagen o zona interactiva resultantes:
SKU único, que se encuentra en la cadena de consulta. | Las direcciones URL de vista rápida grabadas incluyen lo siguiente:
La única parte variable de la dirección URL es el valor del parámetro de cadena de consulta |
SKU único, que se encuentra en la ruta de URL. | Las direcciones URL de vista rápida grabadas incluyen lo siguiente:
La parte variable se encuentra en la última parte de la ruta y se convierte en el valor de SKU de las zonas interactivas/mapas de imagen: |
SKU e ID de categoría en la cadena de consulta. | Las direcciones URL de vista rápida grabadas incluyen lo siguiente:
En este caso, hay dos partes diferentes en la dirección URL. El SKU se almacena en el parámetro Por lo tanto, las definiciones de zona interactiva/mapa de imagen son pares. Es decir, un valor de SKU y una variable adicional llamada
|
Si ya ha cargado las imágenes que desea utilizar, avance al paso siguiente, Creación de conjuntos de carrusel. Tenga en cuenta que las imágenes utilizadas en el carrusel deben cargarse una vez que Dynamic Media esté habilitado.
Para cargar letreros de imagen, consulte Carga de recursos.
Los usuarios no administrativos deben agregarse al grupo dam-users para poder crear o editar letreros de carrusel. Si tiene problemas para crear o editar, póngase en contacto con el administrador del sistema, el cual puede agregarle al grupo dam-users.
Creación de un conjunto de carruseles
En Recursos, vaya a la carpeta en la que desee crear el conjunto de carrusel y toque Crear > Conjunto de carrusel.
En la página Editor de letreros de carrusel, toque Tocar para abrir el Selector de recursos para seleccionar la imagen de la primera diapositiva.
En la página Editor de letreros de carrusel, realice una de las acciones siguientes:
Cerca de la esquina superior izquierda de la página, toque el icono Añadir diapositiva.
Cerca del centro de la página, toque Tocar para abrir el Selector de recursos.
Pulse para seleccionar los recursos que desea incluir en el conjunto de carrusel. Los recursos seleccionados tienen un icono de marca de verificación sobre ellos. Cuando haya terminado, toque Seleccionar cerca de la esquina superior derecha de la página.
Con el Selector de recursos, puede buscar recursos escribiendo una palabra clave y pulsando o haciendo clic en Retorno. También puede aplicar filtros para restringir los resultados de búsqueda. Puede filtrar por ruta, colección, tipo de archivo y etiqueta. Seleccione el filtro y, a continuación, pulse el icono Filtro en la barra de herramientas. Para cambiar la vista, pulse el icono Ver y seleccione Vista de columna, Vista de tarjeta o Vista de lista.
Consulte Uso de selectores para obtener más información.
Continúe agregando diapositivas hasta que haya agregado todas las imágenes que desee rotar en el conjunto de carrusel.
(Opcional) Realice cualquiera de las siguientes acciones:
Si es necesario, arrastre las diapositivas para reordenar las imágenes en la lista del conjunto.
Para eliminar una imagen, selecciónela y toque Eliminar diapositiva en la barra de herramientas.
Para aplicar un ajuste preestablecido, toque la lista desplegable de ajustes preestablecidos, cerca de la esquina superior derecha de la página y seleccione un ajuste preestablecido para aplicarlo al conjunto a la vez.
Para eliminar una diapositiva, toque o haga clic en la diapositiva y toque o haga clic en Eliminar diapositiva en la barra de herramientas. Para mover una diapositiva, toque el icono del redirector y manténgalo presionado y desplácese a la ubicación deseada.
Después de añadir las imágenes en las diapositivas, puede añadir un punto interactivo, un mapa de imágenes o ambos a la imagen. Consulte adición de zonas interactivas o mapas de imagen.
Puede cambiar el diseño visual y el comportamiento de los conjuntos de carrusel tocando o haciendo clic en las fichas Comportamiento y Aspecto y haciendo ajustes en el aspecto del letrero carrusel o en el comportamiento de componentes específicos. Consulte administración de ajustes preestablecidos de visor para obtener más información sobre cómo utilizar el editor de visor.
En el caso de los letreros de carrusel, puede que lo siguiente sea lo que desee ajustar:
También puede realizar una previsualización del aspecto que tendrá la pancarta de carrusel. Consulte (Opcional) Vista previa de letreros de carrusel.
Toque Guardar cuando termine.
Puede agregar zonas interactivas o mapas de imagen a un letrero mediante el editor de conjuntos de carrusel.
Al agregar zonas interactivas o mapas de imagen, puede definirlos como una visualización emergente de vista rápida, como un hipervínculo o como un fragmento de experiencia.
Consulte Fragmento de experiencias.
Tenga en cuenta que las herramientas de uso compartido en medios sociales de la pancarta de carrusel no son compatibles cuando incrusta el visor en un fragmento de experiencia.
Para solucionar este problema, puede utilizar o crear ajustes preestablecidos de visor que no tengan herramientas de uso compartido en medios sociales. Estos ajustes preestablecidos de visor permiten incrustarlos correctamente en fragmentos de experiencia.
Cuando agregue zonas interactivas o mapas de imagen a una imagen, recuerde guardar el trabajo. Las opciones 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 pancarta de carrusel, puede utilizar la Previsualización para ver una representación de cómo aparecerá la pancarta de carrusel para los clientes.
Consulte (Opcional) Vista previa de letreros de carrusel.
Cuando agrega zonas interactivas a una imagen en una imagen interactiva o en una pancarta de carrusel, la información de puntos interactivos se almacena en la misma ubicación de metadatos, en relación con la ubicación y mdashindependientemente de si se trata de una imagen interactiva o de una pancarta de carrusel. Esta funcionalidad significa que puede reutilizar fácilmente la misma imagen (junto con los datos de puntos interactivos definidos) en cualquier visor.
Sin embargo, tenga en cuenta que los letreros de carrusel admiten mapas de imagen en imágenes que también pueden contener zonas interactivas; una imagen interactiva no. Tenga esto en cuenta si desea crear una imagen interactiva o una pancarta de carrusel que utilice la misma imagen. Puede que desee crear imágenes interactivas y letreros de carrusel con copias independientes de la misma imagen.
Si está editando imágenes interactivas con zonas interactivas y recortando la imagen, las zonas interactivas se eliminan.
Para agregar zonas interactivas o mapas de imagen a un letrero de imagen
En Recursos, desplácese hasta el conjunto de carrusel que desee hacer interactivo.
Seleccione el conjunto de carrusel y toque Editar. Se abre el Editor del visor de carrusel.
Seleccione la diapositiva que desee hacer interactiva.
Cerca de la esquina superior izquierda de la página, pulse Zona interactiva o Mapa de imagen.
Realice una de las acciones siguientes:
Si es necesario, arrastre el punto interactivo o el mapa de imagen a una nueva ubicación. O bien, utilice las teclas de flecha del teclado para controlar la posición de un punto interactivo seleccionado. Añada zonas interactivas o mapas de imagen adicionales según sea necesario.
Para eliminar una zona interactiva o un mapa de imagen, pulse la pestaña Acciones. En el encabezado Mapas y zonas interactivas, del menú desplegable Tipo seleccionado, seleccione el nombre del punto interactivo o del mapa de imagen que desea eliminar. Pulse el icono Papelera situado junto al menú y, a continuación, pulse Eliminar.
En el campo de texto Nombre, escriba el nombre del punto interactivo o del mapa de imagen. Este nombre también aparece en la lista desplegable Mapas y puntos interactivos. Proporcionar un nombre facilita la identificación del punto interactivo o mapa de imagen si decide realizar cambios en él en el futuro.
Realice una de las siguientes acciones en la ficha Acciones:
Toque Vista rápida.
Si es un AEM Sites , toque el icono Selector de producto (lupa) para abrir la página Seleccionar producto. Toque el producto que desee utilizar y, a continuación, toque la marca de verificación situada en la esquina superior derecha de la página para volver al Editor de letreros de carrusel.
Si no es un AEM Sites
Consulte Identificación de variables de puntos interactivos como puede que desee definir estas variables.
A continuación, introduzca manualmente el valor de SKU. En el campo de texto Valor de SKU, escriba el SKU del producto (Unidad de mantenimiento de existencias), que es un identificador único para cada producto o servicio distinto que oferta. El valor de SKU introducido rellena automáticamente la parte variable de la plantilla de vista rápida, de modo que el sistema sepa asociar la zona interactiva tocada con una vista rápida de SKU concreta.
(Opcional) Si hay otras variables dentro de la vista rápida que debe utilizar para identificar un producto, toque Añadir variable genérica. En el campo de texto, especifique una variable adicional. Por ejemplo, categoría=Hombre es una variable agregada.
Consulte Uso de selectores para obtener más información.
Toque Hipervínculo.
Si es cliente de AEM Sites, toque el icono (carpeta) Selector de sitio para navegar a una dirección URL.
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.
Si es un cliente independiente, en el campo de texto HREF, especifique la ruta de URL completa a una página web vinculada.
Asegúrese de especificar si desea abrir el vínculo en una nueva ficha del explorador (opción predeterminada recomendada) o en la misma ficha.
Consulte Uso de selectores para obtener más información.
Toque Fragmento de experiencias.
Si es cliente de AEM Sites, toque el icono de búsqueda (lupa) para abrir la página Fragmento de experiencia. Toque o haga clic en el fragmento de experiencias que desee utilizar y, a continuación, toque Seleccionar en la esquina superior derecha de la página para volver a la página de administración de puntos interactivos.
Consulte Fragmentos de experiencia.
Especifique la anchura y la altura del fragmento de experiencias tal como aparecerán en el letrero.
Tenga en cuenta que las herramientas de uso compartido en medios sociales de la pancarta de carrusel no son compatibles cuando incrusta el visor en un fragmento de experiencia.
Para solucionar este problema, puede utilizar o crear ajustes preestablecidos de visor que no tengan herramientas de uso compartido en medios sociales. Estos ajustes preestablecidos de visor permiten incrustarlos correctamente en fragmentos de experiencia.
También puede realizar una previsualización del aspecto que tendrá la pancarta de carrusel. Consulte (Opcional) Vista previa de letreros de carrusel.
Toque Guardar.
Publique el conjunto de carrusel. La publicación crea el código incrustado o la URL que puede utilizar en la página del sitio web. Si es cliente de AEM Sites, puede agregar el conjunto de carrusel directamente a su página web.
Consulte Publicación de recursos.
Consulte Añadir un conjunto de carruseles en la página de aterrizaje de su sitio Web
Los usuarios no administrativos deben agregarse al grupo dam-users para poder crear o editar letreros de carrusel. Si tiene problemas para crear o editar, póngase en contacto con el administrador del sistema, el cual puede agregarle al grupo dam-users.
Puede realizar varias tareas de edición en conjuntos de carrusel, como las siguientes:
Edición de un conjunto de carruseles
Realice una de las siguientes acciones:
Pase el ratón sobre un recurso de conjunto de carrusel y, a continuación, toque Editar (icono de lápiz).
Pase el ratón sobre un recurso de conjunto de carrusel, toque Seleccionar (icono de marca de verificación) y, a continuación, toque Editar en la barra de herramientas.
Toque en un recurso de conjunto de carrusel y, a continuación, en la esquina superior izquierda de la página toque Editar (icono de lápiz).
Para editar el conjunto de carrusel, realice una de las siguientes acciones:
Si está editando imágenes interactivas con zonas interactivas y recortando la imagen, las zonas interactivas se eliminan.
Puede utilizar la Previsualización para ver el aspecto que tendrá la pancarta de carrusel para los clientes y para probar las zonas interactivas y los mapas de imagen de las pancartas de carrusel para asegurarse de que se comportan del modo esperado.
Cuando esté satisfecho con la pancarta de carrusel, puede publicarla.
Consulte Incrustación del visor de imágenes o vídeos en una página Web.
Consulte Vinculación de direcciones 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 Añadir Dynamic Media Assets a páginas.
Puede previsualización de letreros de carrusel desde el Editor de carrusel (método preferido) o desde la lista Visores.
Previsualización de letreros de carrusel
En Recursos, navegue a una pancarta de carrusel existente que haya creado y toque para abrirla.
Toque Editar.
En la lista de ajustes preestablecidos de visor situada en la esquina derecha de la barra de herramientas, seleccione un visor para previsualización de la pancarta de carrusel.
Toque Previsualización.
Toque las zonas interactivas o los mapas de imagen de la imagen para probar las acciones asociadas.
Previsualización de letreros de carrusel desde la lista Visores
Debe publicar el carrusel para utilizarlo. Al publicar un conjunto de carrusel se activan la URL y el código incrustado. También publica el carrusel en la nube de Dynamic Media, que está integrado con una CDN para un envío escalable y de rendimiento.
Si utiliza una imagen interactiva existente con zonas interactivas para la pancarta de carrusel, debe publicar la imagen interactiva por separado después de publicar la pancarta de carrusel.
Además, si modifica una imagen interactiva publicada previamente que está utilizando en una pancarta de carrusel, debe publicar la imagen interactiva antes de que esos cambios se reflejen en la pancarta de carrusel.
Consulte Publicación de Dynamic Media Assets para obtener información sobre cómo publicar letreros de carrusel.
Una vez cargadas las imágenes de los letreros para crear un carrusel, añadidas zonas interactivas y/o mapas de imagen al letrero y publicado el conjunto de carrusel, ya estará listo para agregarlo a la página del sitio web existente.
Si es cliente de AEM Sites, puede agregar la pancarta de carrusel directamente a la página arrastrando el componente Medios interactivos a la página. Consulte Añadir Dynamic Media Assets a páginas.
Sin embargo, si es cliente de recursos AEM independientes, puede agregar manualmente la pancarta de carrusel a la página de aterrizaje de su sitio web como se describe en esta sección.
Copie el código incrustado del conjunto de carrusel publicado.
Consulte Incrustación del visor de imágenes o vídeos en una página Web.
Añada el código incrustado que ha copiado de AEM Assets a su página web.
El código incrustado copiado responde, por lo que debe ajustarse automáticamente al área de incrustación de la página.
Nota: este paso solo se aplica si es cliente independiente de AEM Assets.
El último paso en este proceso es integrar la pancarta de carrusel con una implementación de vista rápida existente en el sitio web. Cada implementación de vista rápida es única y se necesita un enfoque específico que muy probablemente implique la asistencia de una persona de TI de primer nivel.
La implementación de vista rápida existente normalmente representa 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 de forma arbitraria. En su lugar, es una llamada encadenada donde cada paso siguiente se oculta en la última fase (llamada de retorno) del paso anterior.
Al mismo tiempo que la pancarta de carrusel sustituye al paso 1 y al paso 2 parcial, cuando un usuario hace clic en un punto interactivo o mapa de imagen dentro de la pancarta de carrusel, el visor controla dicha interacción del usuario. El visor devuelve un evento a la página web que contiene todos los datos de puntos interactivos o mapas de imagen añadidos anteriormente.
En un controlador de evento 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 con comentarios.
Por lo tanto, solo es necesario descomentar el código y reemplazar el cuerpo del controlador ficticio por el código específico de la página web en particular.
El proceso de construir la URL de vista rápida es básicamente opuesto al proceso utilizado para identificar las variables de puntos interactivos y mapas de imagen que se han cubierto anteriormente.
Consulte Identificación de variables de zona interactiva y mapa de imagen.
El último paso para activar la dirección URL de vista rápida y activar el panel de vista rápida requiere, muy probablemente, la asistencia de una persona de TI del cliente de su departamento de TI. Tienen los conocimientos para saber mejor cómo activar con precisión la implementación de vista rápida desde el paso adecuado, teniendo una URL de vista rápida lista para usar.
Consulte Uso de las vistas rápidas para crear ventanas emergentes personalizadas.