Prácticas recomendadas y limitaciones de Visual Experience Composer

Para habilitar Enhanced Experience Composer en el nivel de cuenta, haga clic en Administration > Visual Experience Composer y, a continuación, coloque el conmutador Enable Enhanced Experience Composer en la posición Activado.

Para habilitar Enhanced Experience Composer en el nivel de actividad mientras se crea una actividad en Visual Experience Composer, haga clic en Configure > Page Delivery y, a continuación, coloque el conmutador Enable Enhanced Experience Composer en la posición Activado.

Los problemas al cargar Enhanced Experience Composer se pueden resolver mediante la inclusión en la lista de permitidos de las siguientes direcciones IP. Estas direcciones IP son para Adobe servidores usados para el proxy Enhanced Experience Composer. Solo se requieren para edición de actividades. Los visitantes del sitio no necesitan estas direcciones IP incluidas en la lista de permitidos.

Para obtener más información, consulte El EEC no cargará una dirección URL de control de calidad interna a la que no se puede acceder desde una dirección IP pública en Resolución de problemas relacionados con el Compositor de experiencias mejorado.

Cualquier cosa que haya dentro del elemento del cuerpo debe tener un ID único. Si se insertan nuevos elementos en el cuerpo y el código se desplaza, al menos podrá reconocer fácilmente los elementos principales.

Target no requiere ID, pero el uso de ID aumenta la fiabilidad de las experiencias creadas con el compositor de experiencias. Target utiliza selectores CSS para modificar el contenido cuando se entrega la experiencia. Cuando edita una experiencia, Visual Experience Composer ancla el selector al antecesor más cercano con un atributo de ID no nulo al elemento de HTML que se está modificando. Por ello, no se recomienda usar ningún mecanismo, ni siquiera las bibliotecas de JavaScript, que defina o modifique los atributos de ID de HTML. Aunque esos identificadores puedan estar disponibles para el compositor de experiencias visuales Target para la creación de actividades, si JavaScript modifica los identificadores, es posible que el identificador que se utilizó cuando se creó la experiencia no esté disponible cuando se ejecuta. Si un ID no está disponible, el selector anclado al ID presenta un error.

Al editar clases CSS en Visual Experience Composer, resulta útil facilitar la identificación de las clases mediante nombres de clase descriptivos. Esto le permite tener la certeza de que está modificando las clases CSS correctas y de que las páginas se mostrarán correctamente.

No utilice la propiedad !important de CSS al ocultar o eliminar elementos.

Si la propiedad CSS !important está presente, las reglas CSS del sitio anulan los cambios realizados por target.js durante la entrega.

<a>Anchor Text</a>

O

<a href=""> <img src=""> </img> </a>

Por ejemplo, si ha realizado dos acciones:

• Ha agregado una clase al Elemento 1
• Ha editado el HTML del Elemento 1

Cada cambio crea un nuevo elemento en el VEC. Como la segunda acción modifica al Elemento 1, si elimina el Elemento 1, la segunda acción ya no tiene nada para modificar. Por lo tanto, el cambio ya no funciona.

Es decir, si agrega un elemento con texto y luego en una acción separada edita ese elemento con otro texto, el editor de código muestra ambas acciones como elementos separados. Cuando editó el elemento, creó un nuevo elemento que modifica al original que usted creó, y que contiene el texto editado. Si luego elimina el elemento original, el texto editado no podrá encontrar el elemento editado y no se mostrará. El segundo elemento permanece en la lista de elementos, pero no afecta a la página porque el elemento al que cambia ya no existe.

Consulte Selectores de elementos utilizados en Visual Experience Composer.

• Use <b> en vez de <strong> para el texto en negrita.
• Use <i> en vez de <em> para el texto en cursiva.

Puede que los resultados de las etiquetas <strong> y <em> no sean los previstos.

Cuando se realiza una acción (Editar HTML) en componentes de la página (como reguladores, carruseles, etc.), la entrega puede aparecer dañado. El VEC realiza la acción después de que JavaScript haya creado una instancia del componente de página.

No obstante, cuando el contenido de la página se entrega a los visitantes, la acción se aplica antes de que se cree la instancia del componente. Por este motivo, es posible que las funciones del componente fallen en el momento de la entrega. La funcionalidad depende del tipo de script usado en la página para definir el componente.

Que la entrega funcione bien la primera vez que la pruebe no garantiza que seguirá funcionando. Podría darse una condición de carrera.

• Si hay una condición de carrera, la entrega funciona de forma intermitente.
• Si no hay ninguna condición de carrera, la entrega siempre funciona.

Pruebe la página varias veces para asegurarse de que la entrega funciona bien.

Por ejemplo, no puede segmentar el texto “Shopping Cart” (Carro de compras) en el VEC (Compositor de experiencias visuales) si su código es como este:

<a href="https://www.botanicchoice.com/shop.axd/Cart">
   <img alt="Shopping Cart"src="/images/ico-cart.gif"></img>
   Shopping Cart:
   <span id="HeaderCartQtyTotal">
      0
  </span>
  Items
  <span id="HeaderCartPriceTotal"></span>
</a>

En este ejemplo, todo el elemento de anclaje se selecciona en el VEC, lo que afecta negativamente a otros elementos si se realiza el direccionamiento.

Por ejemplo, para abrir www.abc.com, se usan los siguientes parámetros de URL:

www.abc.com?mboxEdit=1&mboxDisable=1

Estos parámetros habilitan la edición en un iframe.

Asegúrese de que el sitio web se carga según lo esperado después de añadir parámetros de este tipo.

Desactive las técnicas de eliminación de iframes en el sitio web y compruebe si el sitio web se abre como se espera dentro de un iframe en una página ficticia. Por ejemplo:

<!DOCTYPE
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <iframe src="https://www.homedepot.com"</iframe>
</body>
</html>

Si se reorganiza un elemento que está marcado para rastreo de clics, cambiarán las rutas de los elementos reorganizados. Como resultado, se realizará el seguimiento de los clics del elemento que hay en la ubicación donde estaba el elemento original antes de ser reorganizado.

Esto ocurre porque tanto el código para entregar el contenido de la actividad como el código para realizar el seguimiento de clics se incluyen en una parte de código que se entrega a la página. Si va a otra página y configura el rastreo de clics, el código de contenido de la actividad y el código de rastreo de clics se entregan a dicha página. Si la página de seguimiento de clics tiene una estructura de página similar a la de la página donde se ejecuta la prueba, el contenido de la prueba también podría aparecer en la página de seguimiento de clics.

Por ejemplo, si la página contiene:

<div>
  <div class="mboxDefault" >
  </div>
  <script>mboxCreate('myMbox');
</div>`

El div externo no debe seleccionarse en una experiencia porque el mbox codificado en la página sigue realizando una llamada a Target y recibe una respuesta. Esta respuesta interfiere con la respuesta destinada al elemento de página más grande.

Debido a las directivas de manifiesto V3 actualizadas en Google Chrome, las extensiones ya no pueden modificar el DOM original antes de que el explorador lo analice. Como resultado, ciertos scripts de seguridad, como las implementaciones de eliminación de iframes, pueden bloquear la carga de páginas en el VEC.

Para garantizar la compatibilidad, estos scripts deben deshabilitarse de forma condicional cuando la página se cargue dentro del iframe Target. Este proceso se puede realizar de forma segura comprobando la presencia del objeto window.adobeVecExtension, que Target inserta durante la carga del VEC.

Los siguientes fragmentos de código son ejemplos de código de eliminación de iframes que pueden provocar que la página web no se cargue en el VEC:

window.top.location = window.self.location;

top.location.href = self.location.href;

Se puede utilizar una comprobación simple para comprobar si una página web está incrustada dentro de Target. Un fragmento de código debería tener este aspecto:

if(!window.adobeVecExtension) {
    // additional security logic
}

Si, por ejemplo, su página contiene un carrusel con seis imágenes y desea intercambiar una imagen por una segunda imagen del carrusel, la acción Change Image no funciona.

La solución consiste en seleccionar el contenedor principal y utilizar la acción Edit HTML para editar el HTML del carrusel y actualizar el origen de la imagen de la imagen deseada.

El script se ejecuta dentro del ámbito de target.js después de que se cargue la página. Por lo tanto, ninguna variable o función que se declare localmente será accesible desde fuera del bloque de scripts.

Incorrecto:

<script>
  var myVar = 123;
  function myFunc() {
    //
  }
</script>`

Correcto:

<script>
  window.myVar = 123;
  window.myFunc = function() {
    //
  };
</script>

Añada un elemento de anclaje dentro del div “customHeaderMessage” con un texto cualquiera, en este ejemplo, “Dummy text”:

<a href="#">
<span> Dummy text </span>
</a>

Seleccione este div con la acción Insert Element para insertar una imagen como secundaria de este div con texto "Dummy text".

Tras la inserción, el aspecto es este:

<a href="#">
<span> Dummy text </span>
<img src=""> This is inserted Image. </img>
</a>

Elimine la etiqueta span de “Dummy text”.