Opciones del Compositor de experiencias visuales

Al hacer clic en un elemento de página en el Adobe Target Visual Experience Composer (VEC), un menú muestra las opciones disponibles para ese tipo de elemento. Además, se muestra una ruta DOM en la parte inferior de la página que permite navegar fácilmente por la estructura de la página.

Las distintas acciones de Visual Experience Composer (VEC) se agrupan en opciones de menú apropiadas para que su trabajo sea más rápido y eficiente:

Edit

Las opciones disponibles son las siguientes:

Text/HTML edit-text-html

Cambie el código HTML del elemento, como el texto de un área de texto, un botón o un vínculo.

Además del código HTML, puede editar e insertar JavaScript personalizado.

Hay varias opciones disponibles para aplicar formato de texto enriquecido al editar texto y HTML para las actividades A/B y Experience Targeting. Puede seleccionar un tipo de letra, elegir un estilo de letra y cambiar la alineación del texto, entre otras opciones estándar de formato de texto. Cuando modifica el código HTML, puede cambiar entre la vista de código y la vista de edición enriquecida del código HTML.

Se pueden anidar las siguientes etiquetas HTML5:

Background Color

Use el selector de color para seleccionar o configurar un color de fondo. Puede seleccionar una muestra de colores y ajustarla con valores RGB o códigos hexadecimales de color. La “x” roja del selector de color define que el fondo sea transparente.

Nota: Esta opción no está disponible para los elementos en los que haya establecida una imagen de fondo.

Styles styles

Utilice el panel Styles para ver o editar el valor de los estilos existentes para el elemento seleccionado. También puede añadir estilo adicional.

Para acceder al panel Styles, haga clic en un elemento de página desde el VEC y, a continuación, haga clic en Edit > Styles.

El panel Styles aparece a la derecha del VEC. El panel contiene una lista de estilos que le permite editar o agregar al elemento seleccionado. Un editor CSS en tiempo real permite ver cambios y agregar estilos si se siente cómodo utilizando hojas de estilo en cascada (CSS) o si recibe código de su desarrollador.

Al aplicar diferentes estilos, siempre puede revertir los cambios haciendo clic en el icono Revert que aparece en la esquina superior derecha del panel Styles después de cambiar cualquier sección. Al hacer clic en el icono Revert se revertirán todos los cambios en el panel de la sección actual.

Expanda cada sección para editar o agregar estilos, como se explica a continuación. Para guardar los cambios, haga clic en el icono Back en la parte superior del panel para volver a la pantalla principal del panel y, a continuación, haga clic en Save.

Los puntos azules en el panel principal y junto a cada opción en los distintos paneles de sección indican que ha cambiado los estilos correspondientes. Este indicador visual facilita la revisión de los cambios antes de hacer clic en Save.

CSS Class

Especifica la clase CSS predefinida usada para el elemento. Si selecciona más de un elemento, separe varias clases CSS con un espacio.

Disponible para las actividades A/B, Automated Personalization y Multivariate Test.

Link

Cambia la dirección URL del vínculo.

Use Editar vínculo para actualizar el selector y que señale al mismo elemento de imagen. Sin embargo, no se permite vincular a otro elemento de imagen. Para vincular a un elemento de imagen diferente, elimine la acción original del editor de código y utilice Visual Experience Composer para aplicar la acción al otro elemento de imagen.

Insert Before

Las opciones disponibles son las siguientes:

Offer Decision

Agregue una oferta creada en Adobe Journey Optimizer para presentar la mejor oferta y experiencia a sus clientes con offer decisioning.

Nota: Esta opción solo está disponible al editar o crear actividades manuales A/B Test o Experience Targeting (XT). Esta opción no está disponible para otros tipos de actividades.

Para obtener más información, consulte Usar decisiones de oferta.

Image, HTML y Text

Agrega cualquier tipo de elemento a la página además de modificar el contenido existente. Agregue texto, código, listas, etc. para crear experiencias que probar completamente diferentes.

Seleccione un elemento en la página, haga clic en Insert Before y elija si quiere insertar una imagen, un HTML o un texto. El elemento insertado aparece antes del elemento seleccionado.

El comportamiento del elemento insertado depende de la estructura de la página, el CSS y otras opciones de configuración de la página. Para que la página se muestre correctamente, es necesario que el código HTML sea válido. Después de insertar un elemento, pruebe siempre la página para asegurarse de que se muestra correctamente.

Recommendations admite Insert Before el contenido de las etiquetas DIV, SECTION y ARTICLE.

Nota: ​Adobe Scene7 Publishing System Para insertar una imagen es necesario que esté activado y así tener acceso a la biblioteca de imágenes.

Recomendación

Incluya recomendaciones dentro de la prueba A/B (incluidas las actividades de asignación automática y segmentación automática) y de segmentación de experiencias (XT). Para obtener más información, consulte Recommendations como oferta.

Experience Fragment

Insertar fragmentos de experiencia creados en Adobe Experience Manager (AEM) Target en actividades para ayudar en la optimización o personalización. Para obtener más información, consulte Fragmentos de experiencia de AEM.

Insert After

Las opciones disponibles son las siguientes:

Offer Decision

Agregue una oferta creada en Adobe Journey Optimizer para presentar la mejor oferta y experiencia a sus clientes con offer decisioning.

Nota: Esta opción solo está disponible al editar o crear actividades manuales A/B Test o Experience Targeting (XT). Esta opción no está disponible para otros tipos de actividades.

Para obtener más información, consulte Usar decisiones de oferta.

Image, HTML y Text

Agrega cualquier tipo de elemento a la página además de modificar el contenido existente. Agregue texto, código, listas, etc. para crear experiencias que probar completamente diferentes.

Seleccione un elemento en la página, haga clic en Insert After y elija si quiere insertar una imagen, un HTML o un texto. El elemento insertado aparece a continuación del elemento seleccionado.

El comportamiento del elemento insertado depende de la estructura de la página, el CSS y otras opciones de configuración de la página. Para que la página se muestre correctamente, es necesario que el código HTML sea válido. Después de insertar un elemento, pruebe siempre la página para asegurarse de que se muestra correctamente.

Recommendations admite Insert After el contenido de las etiquetas DIV, SECTION y ARTICLE.

Nota: ​Adobe Scene7 Publishing System Para insertar una imagen es necesario que esté activado y así tener acceso a la biblioteca de imágenes.

Recomendación

Incluya recomendaciones dentro de la prueba A/B (incluidas las actividades de asignación automática y segmentación automática) y de segmentación de experiencias (XT). Para obtener más información, consulte Recommendations como oferta.

Experience Fragment

Insertar fragmentos de experiencia creados en Adobe Experience Manager (AEM) Target en actividades para ayudar en la optimización o personalización. Para obtener más información, consulte Fragmentos de experiencia de AEM.

Replace Content

Las opciones disponibles son las siguientes:

Offer Decision

Agregue una oferta creada en Adobe Journey Optimizer para presentar la mejor oferta y experiencia a sus clientes con offer decisioning.

Nota: Esta opción solo está disponible al editar o crear actividades manuales A/B Test o Experience Targeting (XT). Esta opción no está disponible para otros tipos de actividades.

Para obtener más información, consulte Usar decisiones de oferta.

Image

Selecciona una imagen distinta de la biblioteca de contenido. Las imágenes disponibles para intercambiar incluyen las imágenes cargadas en la carpeta de activos de Experience Cloud o en la biblioteca de contenido de Target.

Durante la creación inicial de la actividad, la URL mostrada no es la que se usa para la publicación. Al sincronizar la actividad, la URL se actualiza y se reemplaza por una URL de producción de Scene7.

Por ejemplo, la URL inicial puede ser como la del ejemplo siguiente:

https://test.marketing.adobe.com/content/dam/mac/scholasticinc/Aug_MBM.jpeg?ch_ck=1470774943867

Tras sincronizar la actividad, la URL de publicación podría tener el aspecto siguiente:

http://s7d2.scene7.com/is/image/TargetTest/Aug_MBM?tm=1470768352933&fit=constrain&hei=173&wid=300

Recommendations admite Reemplazar con etiquetas DIV, SECTION y ARTICLE.

Nota: Para intercambiar imágenes se requiere una cuenta de Adobe Scene7 Publishing System.

HTML Offer

Seleccione una oferta diferente de Content Library.

Nota: ​Target Las ofertas HTML se almacenan en servidores de

La oferta de HTML puede alcanzar los 256 KB.

Recomendación

Incluya recomendaciones dentro de la prueba A/B (incluidas las actividades de asignación automática y segmentación automática) y de segmentación de experiencias (XT). Para obtener más información, consulte Recommendations como oferta.

Experience Fragment

Insertar fragmentos de experiencia creados en Adobe Experience Manager (AEM) Target en actividades para ayudar en la optimización o personalización. Para obtener más información, consulte Fragmentos de experiencia de AEM.

Layout

Las opciones disponibles son las siguientes:

Rearrange

Arrastrar el elemento a otra ubicación dentro del mismo elemento principal o DIV. Otros elementos cambian de ubicación para dejar espacio al elemento que se ha cambiado de sitio.

Nota: el rastreo de clics no funciona en elementos que se han cambiado de sitio.

Actualmente, ciertas acciones del VEC, como Rearrange y Move, suponen que los elementos del mismo nivel de los elementos principales de origen y destino están completamente cargados. Si la carga diferida se produce en los elementos DOM principales (origen o destino), estas acciones del VEC pueden provocar un comportamiento incoherente. Estamos trabajando en un enfoque más confiable para hacer que las acciones del VEC funcionen en elementos DOM cargados de forma diferida. Como solución temporal, puede usar Custom Code en estos escenarios para procesar sus experiencias.

Resize

Cambia el tamaño de un elemento en la página. Al seleccionar Resize, aparece un controlador en la esquina inferior derecha del elemento que le permite arrastrar la esquina para cambiar su tamaño. Mantenga pulsada la tecla Mayús para conservar la misma relación de aspecto.

Nota: No se puede cambiar el tamaño de los elementos en línea.

Move move

Mueve elementos en la página. A diferencia de la opción Rearrange, Move no desplaza otros elementos para dejar espacio al elemento que se está moviendo. Use las teclas de dirección para ajustar el movimiento. (Mejora prevista: compatibilidad para garantizar que los elementos movidos no se oculten detrás de otros elementos).

En determinadas situaciones, como cuando una restricción de CSS requiere que un elemento permanezca dentro de su elemento principal, no se puede mover el elemento fuera del elemento principal. Un elemento no se puede mover fuera de un contenedor que tenga la propiedad CSS siguiente: overflow: hidden.

Consulte Rearrange más arriba para obtener más información sobre el comportamiento incoherente con las acciones Move y Rearrange debido a la carga lenta de elementos DOM.

Hide

Oculta el elemento. El espacio en blanco permanece, pero se elimina el contenido.

Remove

Elimina el elemento. Se elimina el espacio en blanco detrás de la imagen y el espacio donde se contrae el elemento.

Nota: Los artículos que hay en un mbox “clásico” (un mbox creado dentro de una campaña de Target Classic) no se pueden quitar mediante esta opción.

Expand Section

Selecciona el elemento principal además del elemento seleccionado originalmente. Al seleccionar un elemento principal, se seleccionan automáticamente todos los elementos secundarios de dicho elemento. Puede expandir la selección varias veces.

Navigate to Link

Abre el destino del vínculo.

Undo/Redo

Deshace los cambios realizados en las actividades durante una sesión de edición. También puede rehacer cambios que haya deshecho anteriormente.

Consideraciones considerations

Compatibilidad con elementos personalizados custom

El VEC admite Componentes web para permitirle crear y probar experiencias y ofertas personalizadas en elementos personalizados y en elementos dentro de elementos personalizados. Esta funcionalidad está disponible en el VEC para todos los tipos de actividad Target.

La mayoría de las acciones del VEC son compatibles con los eventos personalizados y dentro de los eventos personalizados, con las siguientes excepciones:

Las siguientes acciones no están disponibles en los elementos personalizados:

La siguiente acción no está disponible dentro de los elementos personalizados:

Desplazamiento por elementos utilizando la ruta DOM dom-path

Al hacer clic en un elemento de la página, aparece el menú de opciones de VEC. Además, al hacer clic en un elemento, la ruta DOM correspondiente se muestra en la parte inferior de la página.

Puede utilizar la ruta DOM para ver rápidamente información sobre el elemento seleccionado (tipo, ID y clase) y subir o bajar por la ruta DOM para seleccionar el elemento deseado.

Al pasar el ratón por encima de la ruta DOM, un cuadro azul resalta el elemento correspondiente del VEC. Al hacer clic en el elemento, un cuadro naranja resalta el elemento y se muestra el menú de opciones de VEC, como se explica más arriba.

Puede navegar fácilmente a cualquier elemento principal, del mismo nivel o secundario dentro del VEC utilizando la ruta DOM.

La función de ruta DOM también está disponible al configurar el rastreo de clics.