Visual Experience Composer des bonnes pratiques et des limites

Pour activer le Enhanced Experience Composer au niveau du compte, cliquez sur Administration > Visual Experience Composer, puis activez le bouton d’activation de la Enable Enhanced Experience Composer.

Pour activer le Enhanced Experience Composer au niveau de l’activité lors de la création d’une activité dans le Visual Experience Composer, cliquez sur Configure > Page Delivery, puis activez le bouton Enable Enhanced Experience Composer sur Activé.

Placer sur la liste autorisée Les problèmes de chargement de l’Enhanced Experience Composer peuvent être résolus en GRANT les adresses IP suivantes. Ces adresses IP sont destinées aux serveurs Adobe utilisés pour le proxy Enhanced Experience Composer. Elles ne sont requises que pour la modification des activités. Placer sur la liste autorisée Les visiteurs et visiteuses de votre site n’ont pas besoin de ces adresses IP.

Pour plus d’informations, voir L’EEC ne charge pas d’URL d’assurance qualité interne non accessible sur les adresses IP publiques dans Résolution des problèmes liés au Enhanced Experience Composer.

Tout ce qui se trouve immédiatement à l’intérieur de l’élément de corps doit avoir un identifiant unique. Si de nouveaux éléments sont injectés dans le corps et que le code se déplace, au moins les éléments parents sont dotés d’un moyen plus facile pour les reconnaître.

Target ne nécessite pas d’identifiants, mais leur utilisation accroît la fiabilité des expériences créées avec le compositeur d’expérience. Target utilise des sélecteurs CSS pour modifier le contenu lors de la diffusion de l’expérience. Lorsque vous modifiez une expérience, le Visual Experience Composer ancre le sélecteur à l’ancêtre le plus proche avec un attribut d’ID non nul sur l’élément HTML en cours de modification. En conséquence, il n’est pas conseillé d’utiliser un mécanisme, notamment les bibliothèques JavaScript, qui définit ou modifie les attributs d’identifiant HTML. Bien que ces identifiants puissent être disponibles pour le compositeur d’expérience Target pour la création d’activités, si JavaScript modifie les identifiants, l’identifiant utilisé lors de la création de l’expérience peut ne pas être disponible lors de l’exécution de l’expérience. Si un identifiant n’est pas disponible, le sélecteur ancré à l’identifiant échoue.

Lors de la modification de classes CSS dans le Visual Experience Composer, il est utile de rendre les classes faciles à identifier à l’aide de noms de classe descriptifs. Cela permet de garantir que vous modifiez les classes CSS appropriées et que vos pages s’affichent comme prévu.

Ne pas utiliser la propriété CSS !important lors du masquage ou de la suppression d’éléments.

Si la propriété CSS !important est présente, les modifications apportées par target.js au cours de la diffusion sont remplacées par les règles CSS du site.

<a>Anchor Text</a>

OU

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

Par exemple, si vous avez effectué deux actions :

• Ajout d’une classe à l’élément 1
• Modification du code HTML pour l’élément 1

Chaque modification crée un élément dans le compositeur d’expérience visuelle. La deuxième action modifiant l’élément 1, si vous supprimez l’élément 1, la deuxième action n’a plus rien à modifier, la modification ne fonctionne donc plus.

En d’autres termes, si vous ajoutez un élément avec du texte, puis, dans une action distincte, vous modifiez cet élément avec un texte différent, l’éditeur de code affiche les deux actions comme des éléments distincts. Lorsque vous avez modifié l’élément, vous avez créé un nouvel élément qui modifie l’élément d’origine que vous avez créé, contenant le texte modifié. Si vous supprimez alors l’élément d’origine, le texte modifié ne sera pas en mesure de trouver l’élément qui a été modifié et ne s’affichera pas. Le deuxième élément reste dans la liste des éléments mais il n’affecte pas la page car l’élément qu’il modifie n’existe plus.

Voir Sélecteurs d’éléments utilisés dans le Visual Experience Composer.

• Pour mettre le texte en gras, utilisez <b> plutôt que <strong>.
• Pour mettre le texte en italique, utilisez <i> plutôt que <em>.

Les balises <strong> et <em> pourraient engendrer des résultats inattendus.

Lorsqu’une action (Modifier HTML) est effectuée sur des composants de page (tels que des curseurs, des carrousels, etc.), la diffusion peut sembler endommagée. Le compositeur d’expérience visuelle effectue l’action une fois que le composant de page a été instancié par JavaScript.

Cependant, lorsque le contenu de la page est diffusé aux visiteurs, l’action est appliquée avant l’instanciation du composant. De ce fait, la fonctionnalité de ce composant peut ou non être rompue lors de la diffusion. La fonctionnalité dépend de la nature du script utilisé sur cette page pour définir le composant.

Si vous testez la diffusion et que le composant fonctionne la première fois, il n’est pas garanti qu’il continue de fonctionner. Il peut y avoir (ou non) une situation de concurrence.

• S’il existe une condition de concurrence, la diffusion fonctionne par intermittence.
• S’il n’existe aucune condition de concurrence, la diffusion fonctionne toujours.

Testez plusieurs fois votre page pour vous assurer que la diffusion fonctionne comme prévu.

Par exemple, vous ne pouvez pas cibler le texte Panier dans le compositeur d’expérience visuelle si votre code se présente comme suit :

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

Dans cet exemple, l’élément d’ancrage entier est sélectionné dans le compositeur d’expérience visuelle, ce qui a une incidence négative sur les autres éléments si le ciblage est effectué.

Par exemple, pour ouvrir www.abc.com, les paramètres d’URL suivants sont utilisés :

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

Ces paramètres permettent d’effectuer des modifications dans les iFrames.

Assurez-vous que votre site web charge comme prévu après l’ajout de ce type de paramètres.

Désactivez les techniques de suppression d’iframe sur votre site web et vérifiez si le site web s’ouvre comme prévu dans un iframe sur une page factice. Par exemple :

<!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 un élément marqué pour le suivi des clics est réorganisé, les chemins des éléments réorganisés sont modifiés. De ce fait, l’élément à l’emplacement où l’élément d’origine se trouvait avant la réorganisation est celui dont les clics sont suivis.

Cela se produit car le code de diffusion du contenu d’activité ainsi que le code de suivi des clics sont inclus dans un fragment de code qui est diffusé sur la page. Si vous naviguez sur une page différente et configurez le suivi des clics, le code du contenu d’activité et le code de suivi des clics sont diffusés sur cette page. Si la page de suivi des clics comporte une structure de page similaire dans laquelle le test est exécuté, alors le contenu du test peut également apparaître sur la page de suivi des clics.

Par exemple, si votre page contient :

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

La balise div externe ne doit pas être sélectionnée dans une expérience, car la mbox codée en dur dans la page appelle toujours Target et reçoit une réponse. Cette réponse interfère avec la réponse prévue pour l’élément de page plus grand.

En raison des politiques de manifeste V3 mises à jour dans Google Chrome, les extensions ne peuvent plus modifier le DOM d’origine avant qu’il ne soit analysé par le navigateur. Par conséquent, certains scripts de sécurité, tels que les implémentations qui démolissent un iframe, peuvent bloquer le chargement des pages dans le compositeur d’expérience visuelle.

Pour garantir la compatibilité, ces scripts doivent être désactivés de manière conditionnelle lorsque la page est chargée dans l’iframe Target. Ce processus peut être effectué en toute sécurité en vérifiant la présence de l’objet window.adobeVecExtension, qui est injecté par Target pendant le chargement du compositeur d’expérience visuelle.

Les fragments de code suivants sont des exemples de code qui démolissent un iframe et peuvent entraîner le non chargement de la page web dans le VEC :

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

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

Une simple vérification peut être utilisée pour vérifier si une page web est incorporée dans Target. Un fragment de code doit se présenter comme suit :

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

Si, par exemple, votre page contient un carrousel avec six images et que vous souhaitez permuter une image avec la deuxième image du carrousel, l’action Change Image ne fonctionne pas.

La solution consiste à sélectionner le conteneur parent et à utiliser l’action Edit HTML pour modifier l’HTML du carrousel afin de mettre à jour la source d’image de l’image souhaitée.

Le script est exécuté dans la portée de target.js après le chargement de la page. Par conséquent, les variables ou fonctions qui sont déclarées localement ne sont pas accessibles depuis l’extérieur du bloc de script.

Incorrect :

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

Correct :

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

Ajoutez un élément d’ancrage dans la balise div « customHeaderMessage » avec un texte factice :

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

Sélectionnez cette balise div à l’aide de l’action Insert Element pour insérer une image comme sœur de cette balise div de texte factice.

Après l’insertion de l’image, vous obtenez ceci :

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

Supprimez l’élément span de texte de remplissage.