[Beta]{class="badge informative" title="Actualmente, esta función está en versión beta limitada"}
Diseño de experiencia web
Después de crear una experiencia web, usa el espacio de diseño de contenido para definir las modificaciones que deseas aplicar a tus páginas web.
Requisitos previos
Antes de diseñar experiencias web, asegúrese de que se cumplen los siguientes requisitos:
-
Un administrador de productos ha configurado uno o más canales web para definir las direcciones URL (páginas) que se incluirán en una experiencia web. Para obtener más información, vea Configuraciones del canal Web.
-
Su sitio web tiene Adobe Experience Platform Web SDK (
alloy.js) implementado para la identificación de visitantes y la entrega de contenido. Se requiere Adobe Experience Platform Web SDK versión 2.16 o superior. -
Tiene los permisos necesarios para crear y administrar experiencias web en un recorrido:
- Campañas > Administrar campañas: necesario para agregar o actualizar un nodo de acción de personalización web.
- Campañas > Ver campañas - Necesario para ver detalles de nodos de acción de personalización web.
Editores de experiencia web
Journey Optimizer B2B edition proporciona dos tipos de editores para diseñar modificaciones web:
En las propiedades de la experiencia web, use la opción Editor visual para determinar el tipo de editor. Habilite la opción para utilizar el editor visual o desactívela para utilizar el editor no visual.
Editor visual visual-editor
El editor visual carga las páginas web dentro de un iframe, donde puede seleccionar elementos y aplicar modificaciones directamente en la vista previa de la página. Complete los siguientes pasos para utilizar el editor visual para diseñar la experiencia web:
-
Con la ficha Contenido mostrada en la página de detalles de la experiencia web, haga clic en Editar experiencia web en el panel derecho.
El editor visual carga el sitio web en función de la configuración del canal web.
-
Si es necesario, haz clic en Examinar en la parte superior derecha y usa la barra de navegación del sitio para cargar la página específica que deseas modificar.
También puede introducir la dirección URL de la página en el campo de la parte superior.
note note NOTE Asegúrese de que la página cargada coincida con los patrones de URL definidos en la configuración del canal web. Haga clic en Ver detalles de configuración en la parte superior derecha para ver la URL o las reglas de coincidencia de página para la configuración del canal web seleccionado. 
Haga clic en Diseño en la parte superior derecha para cargar la página en el espacio de diseño.
-
Para definir cómo desea que se modifique la página mostrada para la experiencia web, puede:
-
Inserte nuevos componentes (divisor, HTML, imagen, encabezado, párrafo o vínculo) en la página para la experiencia web.
-
Seleccione cualquier elemento existente de la página, como una imagen, un botón, un párrafo, un texto, un contenedor, un encabezado o un vínculo, y modifíquelo para la experiencia web.
-
Agregar rastreo de clics para que los elementos midan la participación y recopilen información.
-
-
Repita el paso 2 para cargar otras páginas que desee incluir en la experiencia web y el paso 3 para definir las modificaciones de la página.
-
Revise sus modificaciones y realice los ajustes necesarios.
-
Cuando haya completado las modificaciones, haga clic en la flecha izquierda encima del editor para volver a las propiedades de la experiencia web.
Modificar elementos
Haga clic en un elemento de la página mostrada para seleccionarlo. Un borde azul indica el elemento seleccionado y aparece una barra de herramientas contextual con opciones de modificación.
Las opciones de la barra de herramientas dependen del tipo de componente seleccionado:
Para un elemento seleccionado, las propiedades del panel derecho cambian para reflejar el estilo y las acciones disponibles. Haga clic en un icono de acción en la parte superior del panel para duplicar, rastrear clics, eliminar u ocultar el elemento seleccionado.
-
Seleccione un elemento de texto en la página.
-
Introduzca el nuevo contenido de texto o seleccione una cadena de texto e introduzca el texto de sustitución.
-
(Opcional) Use las opciones de formato de texto, como negrita, cursiva y alineación.
-
Haga clic fuera del elemento de texto para aplicar el cambio.
Para obtener más información acerca de las opciones de estilo de texto para los componentes de texto, vea Componentes de contenido.
-
Seleccione un elemento de imagen en la página.
-
Haga clic en el icono Elegir imagen en la barra de herramientas contextual o en el panel derecho.
-
Examine y seleccione una imagen de la biblioteca de recursos.
-
Use las opciones de estilo de imagen del panel derecho según sea necesario.
-
Seleccione un elemento de botón en la página.
-
(Opcional) Escriba texto nuevo para el botón o seleccione la cadena de texto e introduzca el texto de reemplazo.
Puede utilizar la personalización para modificar el texto del botón mediante los datos de perfiles de cuenta o persona.
-
Utilice las opciones de estilo de botón del panel derecho según sea necesario.
-
Seleccione un elemento contenedor en la página.
-
Use las opciones de estilo de contenedor en el panel derecho según sea necesario.
Insertar nuevos componentes
Al seleccionar el icono + en el diseño de navegación izquierda para el editor visual, puede agregar los siguientes tipos de componentes a la página como una modificación de la experiencia web:
- Divisor: utilice este componente para insertar una línea divisoria y organizar el diseño y el contenido del correo electrónico. Puede ajustar atributos de estilo como el color de línea, el estilo y la altura desde las propiedades del panel derecho. Consulte Divisor en Componentes de contenido para obtener más información.
- HTML: use este componente para copiar y pegar código HTML en la estructura existente. Permite crear componentes modulares de HTML gratuitos para reutilizar contenido externo. Consulte HTML en Componentes de contenido para obtener más información.
- Imagen: utilice este componente para insertar un archivo de imagen en la página. Puede ajustar atributos de estilo como la anchura y la altura desde las propiedades del panel derecho. Consulte Imagen en Componentes de contenido para obtener más información.
- Encabezado: utilice este componente para insertar texto de clase de encabezado. Puede ajustar atributos de estilo como el color, el estilo, la fuente y el tamaño del texto desde las propiedades del panel derecho. Consulte Texto en Componentes de contenido para obtener más información.
- Párrafo: utilice este componente para insertar un elemento de texto estándar. Puede ajustar atributos de estilo como el color, el estilo, la fuente y el tamaño del texto desde las propiedades del panel derecho. Consulte Texto en Componentes de contenido para obtener más información.
- Vínculo: utilice este componente para insertar un vínculo de texto independiente en una dirección URL especificada. Puede ajustar atributos de estilo como el color, el estilo, la alineación y el tamaño del texto desde las propiedades del panel derecho.
Seleccione un tipo de componente a la izquierda y, a continuación, pase el ratón sobre un elemento adyacente a donde desee agregarlo.
Haga clic en uno de los botones mostrados para colocar el componente:
- *Insertar antes: inserte el componente antes del elemento seleccionado.
- *Insertar después: inserte el componente después del elemento seleccionado.
Para anular la selección de un tipo de componente para su inserción, haga clic en ESC en el titular azul contextual que se muestra en la parte superior de la página.
Editor no visual non-visual-editor
Utilice el editor no visual cuando necesite realizar modificaciones que no se puedan realizar fácilmente en el editor visual. Este enfoque basado en código le proporciona un control preciso sobre la segmentación y modificación de elementos. Complete los siguientes pasos para utilizar el editor no visual para diseñar la experiencia web:
-
Con la ficha Contenido mostrada en la página de detalles de la experiencia web, haga clic en Agregar modificación en el panel derecho.
El editor no visual carga una página basada en la configuración del canal web.
-
Defina la primera modificación que desee realizar.
El panel lateral izquierdo muestra una lista de las modificaciones existentes (si las hay). Haga clic en Agregar para definir una nueva modificación. Si no hay modificaciones definidas, el panel toma como valor predeterminado las opciones Agregar modificación.
-
Elija tipo de modificación:
table 0-row-2 1-row-2 2-row-2 Tipo Descripción Selector de CSS Elementos de destino que utilizan una cadena de selector de CSS. Página Inserte HTML, CSS o JavaScript personalizados en elementos de nivel de página, como <head>o<body>. -
Configure los parámetros de modificación según el tipo:
- Selector de CSS: escriba un selector de CSS válido para dirigirse a elementos específicos.
- Tipo de acción: elija la acción que desea realizar (editar, ocultar, eliminar, insertar, reemplazar).
- Contenido: proporcione el contenido o el estilo que se aplicará.
-
-
Haga clic en Guardar para aplicar la modificación.
Modificaciones del selector CSS
Las modificaciones del selector de CSS le permiten segmentar elementos con precisión mediante la sintaxis del selector de CSS estándar.
-
Elija Selector de CSS como tipo de modificación.
-
Introduzca el selector en el campo Selector de elementos CSS.
**Selectores de ejemplo:**
| Selector | Objetivos |
| -------- | ------- |
| #hero-banner. | Elemento con ID `hero-banner` |
| `.cta-button` | Todos los elementos con la clase "cta-button" |
| `header nav a` | Vínculos dentro de la navegación, dentro del encabezado |
| "[data-offer="premium"]" | Elementos con un atributo de datos específico |
-
Elija un Tipo de acción y especifique la información o el contenido necesarios.
-
Establecer contenido - Escriba el texto en el campo Contenido para el elemento identificado por el valor Selector de elementos CSS.
-
Establecer atributo: especifique un atributo que se asociará con el selector CSS actual para que este atributo pueda identificar el elemento. Escriba un nombre en el campo Nombre de atributo y un valor en el campo Contenido. Si el atributo ya existe, el valor se actualiza; de lo contrario, se agrega un nuevo atributo con el nombre y valor especificados.
-
-
(Opcional) Haga clic en Agregar personalización y use el editor de personalización para crear una personalización personalizada para el contenido.
Modificaciones de página
Puede agregar código personalizado utilizando el tipo de modificación Página <head>. El elemento <head> es un contenedor de metadatos (datos sobre datos) y se coloca entre la etiqueta <html> y la etiqueta <body>. En este caso, el código no espera eventos body o page-load: se ejecuta al principio de la carga de la página.
El elemento <head> se utiliza comúnmente para agregar código JavaScript o CSS al principio de la página. Los selectores para las acciones visuales posteriores dependen de los elementos de HTML agregados en esta pestaña.
-
Elija Página
<head>como tipo de modificación. -
Agregue su código personalizado en el cuadro Contenido.
note caution CAUTION Solo puede agregar elementos <script>y<style>a la sección<head>. Si se agregan etiquetas de<div>y otros elementos, es posible que<head>elementos restantes se rellenen en<body>.
-
(Opcional) Haga clic en Agregar personalización y use el editor de personalización para crear una personalización personalizada para el contenido.
Administración de modificaciones manage-modifications
Todas las modificaciones que cree se rastrearán y se podrán administrar desde el panel Modificaciones tanto del editor visual como del no visual. Haga clic en el icono Modificaciones de la barra de herramientas izquierda para ver todas las modificaciones.
Cada registro de modificación incluye:
- El elemento o selector de destino
- El tipo de modificación (como editar, ocultar o insertar)
- Una previsualización del cambio
Edición de una modificación
-
En la lista Modificaciones, busque la modificación que desea editar.
-
Haga clic en el icono Más menú ( … ) y elija Editar.
-
Actualice las propiedades de modificación según sea necesario.
-
Haga clic en Guardar para guardar los cambios.
Eliminación de una modificación
-
En la lista Modificaciones, busque la modificación que desea quitar.
-
Haga clic en el icono Menú más ( … ) y elija Eliminar modificación.
-
Confirme la eliminación cuando se le solicite.
Previsualización de las modificaciones
Antes de publicar, obtenga una vista previa del aspecto de las modificaciones para los visitantes.
Utilice las opciones de vista previa del dispositivo en la parte superior del editor visual para ver las modificaciones en:
- Escritorio
- Tableta
- Dispositivo móvil
La vista previa se actualiza para mostrar cómo se representan las modificaciones en cada tamaño de dispositivo.
Utilice la barra URL para navegar a diferentes páginas dentro de la configuración del canal web. A continuación, compruebe que las modificaciones se aplican correctamente a las páginas de destino según las reglas de coincidencia de URL.
Rastreo de clics para experiencias web web-click-tracking
Rastree las interacciones del usuario con los elementos para medir la participación y recopilar perspectivas. Los datos de rastreo de clics están disponibles en los informes de participación y se pueden utilizar para medir la eficacia de las modificaciones de la experiencia web.
Cuando se activa la experiencia web (activa), también puede crear informes con Adobe Customer Journey Analytics (que requiere una suscripción al producto). Para mejorar la monitorización de la experiencia web, también puede rastrear los clics en cualquier elemento específico del sitio web. El seguimiento permite mostrar el número de clics de ese elemento en los informes web.
Para obtener más información sobre Customer Journey Analytics y la generación de informes web, consulte la documentación de Customer Journey Analytics.
-
Seleccione un elemento en el editor de experiencia web, como, por ejemplo, una imagen o un vínculo.
-
En las propiedades del elemento o en la barra de herramientas contextual, haga clic en el icono Hacer clic en rastrear elemento.
-
Abra la lista Rastreo de clics en el panel izquierdo y modifique el valor de Acciones rastreadas para identificar esta interacción en sus informes.
