[Integración]{class="badge positive"}
Personalization con el Compositor de experiencias visuales
[AEM Sites 6.5]{class="badge informative"}
En este capítulo, exploraremos la creación de experiencias con Compositor de experiencias visuales arrastrando y soltando, intercambiando y modificando el diseño y el contenido de una página web desde Target.
Información general del escenario
La página de inicio del sitio WKND muestra las actividades locales o lo mejor que se puede hacer por una ciudad en forma de diseños de tarjeta. Como especialista en marketing, se le ha asignado la tarea de modificar la página de inicio mediante la reorganización de los diseños de tarjeta para ver cómo afecta a la participación del usuario y cómo impulsa la conversión.
Usuarios implicados
Para este ejercicio, deben participar los siguientes usuarios y, para realizar algunas tareas, puede necesitar acceso administrativo.
- Productor de contenido/Editor de contenido (Adobe Experience Manager)
- Especialista en marketing (Adobe Target / Equipo de optimización)
Página de inicio del sitio WKND
AEM
Requisitos previos
-
AEM
- AEM instancia de publicación de la publicación de la que se ejecuta en 4503
- AEM Integración con Adobe Target mediante etiquetas de
-
Experience Cloud
- Acceso a Adobe Experience Cloud de sus organizaciones -
https://<yourcompany>.experiencecloud.adobe.com - Experience Cloud aprovisionado con Adobe Target
- Acceso a Adobe Experience Cloud de sus organizaciones -
Actividades del experto en marketing
-
El especialista en marketing crea una actividad de destinatario A/B dentro de Adobe Target.
-
En la ventana de Adobe Target, ve a la pestaña Actividades.
-
Haga clic en el botón Crear actividad y seleccione el tipo de actividad como Prueba A/B
-
Seleccione el canal Web y elija Compositor de experiencias visuales.
-
Escriba la URL de actividad y haga clic en Siguiente para abrir el Compositor de experiencias visuales.
-
Para que Compositor de experiencias visuales se cargue, habilita Permitir la carga de scripts no seguros en el explorador y vuelve a cargar la página.
-
Observe la página de inicio del sitio WKND abierta en el editor del Compositor de experiencias visuales.
-
La experiencia A proporciona la página principal de WKND predeterminada y vamos a editar el diseño de contenido para la experiencia B.
-
Haga clic en uno de los contenedores de diseño de tarjeta (Mejores asadores) y seleccione la opción Reorganizar.
-
Haga clic en el contenedor que desee reorganizar y arrástrelo y suéltelo en la ubicación deseada. Vamos a reorganizar el contenedor Best Roasters de la primera fila de la primera columna a la primera fila de la tercera columna. Ahora el contenedor Best Roasters está junto al contenedor de Exposiciones de Fotografía.
Después del intercambio
-
Del mismo modo, reorganice las posiciones de los otros contenedores de tarjetas.
-
También vamos a añadir un texto de encabezado debajo del componente de carrusel y encima del diseño de la tarjeta.
-
Haga clic en el contenedor de carrusel y seleccione la opción Insertar después > HTML para agregar un HTML.
code language-html <h1 style="text-align:center">Check Out the Hot Spots in Town</h1>
-
Haz clic en Siguiente para continuar con tu actividad.
-
Seleccione el Método de asignación de tráfico como manual y asigne el 100% del tráfico a la Experiencia B.
-
Haga clic en Siguiente.
-
Proporcione métricas de objetivo para su actividad y guarde y cierre la prueba A/B.
-
Proporcione un nombre (WKND Home Page Refresh) para su actividad y guarde los cambios.
-
En la pantalla Detalles de la actividad, asegúrate de Activar tu actividad.
-
Vaya a la página principal de WKND (http://localhost:4503/content/wknd/en.html) y observe los cambios que hemos agregado a la actividad de la prueba A/B de actualización de la página principal de WKND.
-
Abra la consola del explorador e inspeccione la pestaña red para buscar la respuesta de destino para la actividad de la prueba A/B de actualización de la página principal de WKND.
-
Resumen
En este capítulo, un experto en marketing ha podido crear una experiencia con el Compositor de experiencias visuales arrastrando y soltando, intercambiando y modificando el diseño y el contenido de una página web sin cambiar ningún código para ejecutar una prueba.