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:

Menú Opciones de VEC

NOTE
Las opciones disponibles dependen del tipo de actividad que cree o edite.

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:

Etiqueta
Etiquetas anidadas permitidas
<a>
<h1-h6>, <p>, <ul>, <ol>, <menu>, <div>, <figure>, <figcaption>
<ins>
<h1-h6>, <p>, <ul>, <ol>, <menu>
<del>
<ul>, <ol>, <menu>, <h1-h6>, <p>
<label>
<p>

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.

Panel Estilos

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.

NOTE
Las acciones rápidas para cambios de diseño, color de fondo, cambio de tamaño y movimiento también están disponibles como acciones independientes en el menú VEC. Estas opciones se pueden utilizar como acciones independientes o puede utilizar el menú Estilos, tal como se explica aquí.
  • Background

    Cambiar el color de fondo y la imagen.

    • Color (especifique el código de color o use el selector de color)

    • Imagen (seleccione una imagen del selector de imágenes)

    • Origen de imagen (especifique una URL externa)

    • Adjunto

      • Haga clic en la lista desplegable superior para seleccionar desplazamiento, fijo o local
      • Haga clic en la lista desplegable inferior para seleccionar repetir, repetir-x, repetir-y, no repetir, espacio o redondo
    • Clip

      • Haga clic en la lista desplegable superior para seleccionar el cuadro de borde, el relleno de margen, el cuadro de contenido o el texto
      • Haga clic en la lista desplegable inferior para seleccionar audio o audio automático
  • Typography

    Cambie la tipografía de un elemento. Las ediciones tipográficas son rápidas y sencillas.

    Aunque el editor de texto enriquecido (Editar texto/HTML) está disponible para un mejor ajuste, las acciones rápidas para cambiar todo el elemento están disponibles a través de esta opción. Si desea aplicar cambios tipográficos solo a una parte del texto (no al texto completo), utilice el editor de texto enriquecido.

    Puede editar los siguientes estilos tipográficos:

    • Font size
    • Font weight
    • Font style
    • Color (especifique el código de color o use el selector de color)
    • Word spacing
    • Line height
    • Text alignment
  • Margin

    Cambie el margen del elemento seleccionado. Puede cambiar los márgenes izquierdo, derecho, inferior y superior.

    Haga clic en el icono desplegable de cada margen para elegir entre las siguientes opciones:

    • Auto
    • Value (arrastre el control deslizante para definir el margen o especificar el número de píxeles para cada margen)

    El margen admite valores positivos y negativos.

    Target también admite otras unidades de tamaño, como rem, pc, em. Para obtener más información sobre estas unidades, consulte Consejos y trucos de hojas de estilo web CSS.

  • Padding

    Cambie el relleno del elemento seleccionado. Puede cambiar el relleno izquierdo, derecho, inferior y superior.

    Arrastre el control deslizante para definir el relleno o especifique el número de píxeles para el relleno.

    El relleno admite escalas de anchura a partir de 0.

    Target también admite otras unidades de tamaño, como rem, pc, em.

  • Border

    Haga clic en los iconos de borde en la parte superior del panel para cambiar el borde del elemento seleccionado.

    Puede editar los estilos siguientes para cada borde (superior, derecho, inferior e izquierdo):

    • Border style (ninguno, oculto, punteado, discontinuo, continuo o doble)
    • Border color (especifique el código de color o use el selector de color)
    • Border width (arrastre el control deslizante para seleccionar un ancho de borde o especificar el ancho en píxeles)

    El borde admite escalas de anchura a partir de 0.

    Target también admite otras unidades de tamaño, como rem, pc, em.

  • Position

    Mueva el elemento seleccionado desde su posición actual. Puede cambiar la posición superior, inferior, izquierda, derecha y Z-index del elemento.

    Haga clic en la lista desplegable Static para elegir entre las siguientes opciones de posición:

    • Static
    • Relative
    • Absolute
    • Sticky
    • Fixed

    Haga clic en el icono desplegable de cada posición para elegir entre las siguientes opciones:

    • Auto
    • Value (arrastre el control deslizante para colocar el elemento o especificar el número de píxeles que desea mover el elemento)

    La posición admite valores positivos y negativos.

    Target también admite otras unidades de tamaño, como rem, pc, em.

  • Size

    Cambie la anchura y la altura del elemento seleccionado.

    Haga clic en el icono desplegable al lado de Width y Height para elegir entre las siguientes opciones:

    • Auto
    • Value (arrastre el control deslizante para cambiar el tamaño del elemento o especificar el número de píxeles para cada dimensión)
  • Filter

    Arrastre el control deslizante para cada opción de filtro o especifique el porcentaje que desee:

    • Sepia
    • Contrast
    • Brightness
    • GrayScale
    • Blur
    • Opacity
    • Invert
      *​ Hue-rotate
    • Saturate
  • CSS Editor

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

    El editor CSS muestra los cambios realizados en el panel Estilos. Como se muestra en la siguiente ilustración, se han cambiado el tamaño de fuente, el borde superior y el tamaño de la imagen:

    Editor CSS con cambios

    Observe los puntos azules junto a las opciones Typography, Border y Size de la ilustración anterior. Estos puntos indican que ha cambiado estas secciones. Si abre estos paneles de sección, aparecen puntos azules junto a las opciones específicas que ha modificado.

    Puede escribir su propio código si el estilo deseado no está disponible de forma predeterminada en Styles.

    El editor CSS muestra solo los detalles de la sesión actual. Si guarda cambios y vuelve a abrir el editor, los detalles sobre el cambio anterior no se muestran en el editor, aunque vuelva a seleccionar el mismo elemento.

    note important
    IMPORTANT
    Puede aplicar una imagen de fondo mediante el editor CSS, pero puede provocar parpadeos. Pruebe los cambios antes de la implementación.

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.

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.

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

  • Si una oferta contiene contenido de HTML, consulte "Cómo at.js procesa ofertas con contenido de HTML" en Cómo funciona at.js para obtener más información.

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.

NOTE
La compatibilidad con VEC para elementos personalizados se admite en at.js versión 2.7.0 (o posterior){target=_blank}. Asegúrese de que el sitio web tenga implementada la versión requerida. Si utiliza la extensión de ayuda del Compositor de experiencias visuales, también debe tener implementada la versión requerida de at.js. Las opciones de VEC descritas anteriormente no están visibles y disponibles para su uso con versiones no compatibles de at.js.
La compatibilidad con VEC para elementos personalizados actualmente no es compatible con Adobe Experience Platform Web SDK.

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:

  • Edit

    • Text/HTML
    • Link
    • Edit Source
  • Replace Content

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

  • Layout
    • Rearrange

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.

Ruta DOM

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.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654