DocumentaciónTargetGuía de Target

Opciones del Compositor de experiencias visuales

Last update: Fri May 26 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Al hacer clic en un elemento de página en la variable Adobe Target Compositor de experiencias visuales (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.

Los distintos Compositor de experiencias visuales Las acciones de (VEC) se agrupan en opciones de menú adecuadas 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.

Editar ​

Las opciones disponibles son las siguientes:

Texto/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 código HTML para actividades A/B y de Segmentación de experiencias. 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>

Color de fondo

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.

Estilos ​ styles

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

Para acceder a Estilos , haga clic en un elemento de página desde el VEC y, a continuación, haga clic en Editar > Estilos.

El panel Estilos aparece en la parte 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 Revertir que se muestra en la esquina superior derecha de la Estilos después de cambiar cualquier sección. Haciendo clic en Revertir El icono revierte 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 Atrás en la parte superior del panel para volver a la pantalla principal del panel y haga clic en Guardar.

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

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

  • Contexto

    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

  • Tipografía

    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:

    • Tamaño de fuente
    • Grosor de fuente
    • Estilo de fuente
    • Color (especifique el código de color o use el selector de color)
    • Espaciado entre palabras
    • Altura de línea
    • Alineación de texto

  • Margen

    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:

    • Automático
    • Valor (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 para hojas de estilo web CSS.

  • Relleno

    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.

  • Borde

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

    • Estilo de borde (ninguno, oculto, punteado, discontinuo, continuo o doble)
    • Color del borde (especifique el código de color o use el selector de color)
    • Anchura del borde (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.

  • Posición

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

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

    • Estático
    • Relativo
    • Absoluta ​
    • Fijo
    • Fijo

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

    • Automático
    • Valor (arrastre el control deslizante para colocar el elemento o especificar el número de píxeles que desea mover)

    La posición admite valores positivos y negativos.

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

  • Tamaño

    Cambie la anchura y la altura del elemento seleccionado.

    Haga clic en el icono desplegable situado junto a Anchura y Altura para elegir entre las siguientes opciones:

    • Automático
    • Valor (arrastre el regulador para cambiar el tamaño del elemento o especificar el número de píxeles para cada dimensión)

  • Filtro

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

    • Sepia
    • Contraste
    • Brillo
    • Escala de grises
    • Desenfocar
    • Opacidad
    • Invertir
      ​*
      ​ Rotación de tono
    • Saturar

  • Editor CSS

    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 de Tipografía, Borde y Tamaño 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 Estilos.

    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.

Clase CSS

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 actividades de prueba A/B, Personalización automatizada y Prueba multivariable.

Vínculo

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 otro elemento de imagen, elimine la acción original del editor de código y use el Compositor de experiencias visuales para aplicar la acción en el otro elemento de imagen.

Insertar antes

Las opciones disponibles son las siguientes:

Decisión de oferta

Añadir un oferta creada en Adobe Journey Optimizer para presentar la mejor oferta y experiencia a sus clientes con offer decisioning.

Nota: Esta opción está disponible al editar o crear manual Prueba A/B o Segmentación de experiencias (XT) solo actividades de. Esta opción no está disponible para otros tipos de actividades.

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

Imagen, HTML, y Texto

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 Insertar antes y elija si quiere insertar una imagen, HTML o 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 Insertar antes los contenidos 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.

Fragmento de experiencia

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.

Insertar después

Las opciones disponibles son las siguientes:

Decisión de oferta

Añadir un oferta creada en Adobe Journey Optimizer para presentar la mejor oferta y experiencia a sus clientes con offer decisioning.

Nota: Esta opción está disponible al editar o crear manual Prueba A/B o Segmentación de experiencias (XT) solo actividades de. Esta opción no está disponible para otros tipos de actividades.

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

Imagen, HTML, y Texto

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 Insertar después y elija si quiere insertar una imagen, HTML o 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 Insertar después los contenidos 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.

Fragmento de experiencia

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.

Reemplazar contenido

Las opciones disponibles son las siguientes:

Decisión de oferta

Añadir un oferta creada en Adobe Journey Optimizer para presentar la mejor oferta y experiencia a sus clientes con offer decisioning.

Nota: Esta opción está disponible al editar o crear manual Prueba A/B o Segmentación de experiencias (XT) solo actividades de. Esta opción no está disponible para otros tipos de actividades.

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

Imagen

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.

Oferta HTML

Seleccione una oferta distinta de la Biblioteca de contenido.

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.

Fragmento de experiencia

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.

Diseño

Las opciones disponibles son las siguientes:

Reorganizar

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

Actualmente, ciertas acciones del VEC, como Reorganizar y Mover, supongamos que los elementos del mismo nivel de los elementos principales de origen y destino se cargan completamente. 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 utilizar Código personalizado en estos escenarios para procesar sus experiencias.

Cambiar el tamaño

Cambia el tamaño de un elemento en la página. Al seleccionar Redimensionar, aparece un controlador en la esquina inferior derecha del elemento que le permite arrastrar esa esquina para cambiar de 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.

Mover ​ move

Mueve elementos en la página. A diferencia de Reorganizar, Mover no desplaza otros elementos para conseguir espacio para el elemento que se va a mover. 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 Reorganizar para obtener más información sobre comportamientos incoherentes con la Mover y Reorganizar acciones debido a la carga diferida de elementos DOM.

Ocultar

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

Eliminar

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.

Expandir sección

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.

Deshacer/Rehacer

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 HTML, consulte “Cómo at.js procesa ofertas con contenido 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 Target tipos de actividades.

NOTE
La compatibilidad con VEC para elementos personalizados se admite en Versión de at.js 2.7.0 (or later){target=_blank}. Asegúrese de que el sitio web tenga implementada la versión requerida. Si utiliza el complemento 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.
Actualmente, la compatibilidad con VEC para elementos personalizados no es compatible con SDK web de Adobe Experience Platform.

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:

  • Editar ​

    • Texto/HTML
    • Vínculo
    • Editar origen

  • Reemplazar contenido

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

  • Diseño
    • Reorganizar

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