Options du compositeur d’expérience visuelle

Lorsque vous cliquez sur un élément de page dans le Adobe Target Visual Experience Composer (VEC), un menu affiche les options disponibles pour ce type d’élément. En outre, un chemin d’accès DOM s’affiche au bas de la page, ce qui vous permet de naviguer facilement dans la structure de la page.

Les différentes actions Visual Experience Composer (VEC) sont regroupées dans les options de menu appropriées pour rendre votre travail plus rapide et plus efficace :

Edit

Les options disponibles sont les suivantes :

Text/HTML edit-text-html

Permet de modifier le code HTML de l’élément (texte d’une zone de texte, bouton ou lien, par exemple).

En plus du code HTML, vous pouvez modifier et insérer du code JavaScript personnalisé.

Plusieurs options de mise en forme de texte enrichi sont disponibles lors de la modification du texte et de l’HTML pour les activités A/B et Experience Targeting. Vous pouvez choisir une police, sélectionner un style de police, modifier l’alignement du texte et accéder à d’autres options de mise en forme de texte standard. Lors de la modification de code HTML, vous pouvez basculer entre l’affichage du code et l’affichage de texte enrichi du code HTML.

Les balises HTML 5 suivantes peuvent être imbriquées :

Background Color

Utilisez le sélecteur de couleurs pour sélectionner ou définir une couleur d’arrière-plan. Vous pouvez sélectionner un échantillon de couleur et l’ajuster à l’aide des valeurs RVB ou des codes couleur hexadécimaux. La croix rouge dans le sélecteur de couleurs rend l’arrière-plan transparent.

Remarque : Cette option n’est pas disponible pour les éléments avec des images d’arrière-plan.

Styles styles

Utilisez le panneau Styles pour afficher ou modifier la valeur des styles existants pour l’élément sélectionné. Vous pouvez également ajouter d’autres styles.

Pour accéder au panneau Styles, cliquez sur un élément de page dans le VEC, puis cliquez sur Edit > Styles.

Le panneau Styles s’affiche sur le côté droit du VEC. Le panneau contient une liste de styles qui vous permet de modifier ou d’ajouter à l’élément sélectionné. Un éditeur CSS en temps réel permet d’afficher les modifications et d’ajouter des styles si vous maîtrisez l’utilisation de feuilles de style en cascade (CSS) ou si vous recevez du code de votre développeur.

Lorsque vous appliquez différents styles, vous pouvez toujours annuler vos modifications en cliquant sur l’icône Revert qui s’affiche dans le coin supérieur droit du panneau Styles après avoir modifié une section. Cliquer sur l’icône Revert rétablit toutes les modifications dans le panneau de la section active.

Développez chaque section pour modifier ou ajouter des styles, comme expliqué ci-dessous. Pour enregistrer vos modifications, cliquez sur l’icône Back en haut du panneau pour revenir à l’affichage principal du panneau, puis cliquez sur Save.

Les points bleus sur le panneau principal et en regard de chaque option des différents panneaux de section indiquent que vous avez modifié les styles correspondants. Cet indicateur visuel facilite la révision de vos modifications avant de cliquer sur Save.

CSS Class

Permet de spécifier la classe CSS prédéfinie utilisée pour l’élément. Si plusieurs éléments sont sélectionnés, séparez plusieurs classes CSS par un espace.

Disponible pour les activités A/B, Automated Personalization et Multivariate Test.

Link

Permet de modifier l’URL d’un lien.

Utilisez Modifier un lien pour mettre à jour le sélecteur afin qu’il pointe vers le même élément d’image. Cependant, le renvoi vers un élément d’image différent n’est pas pris en charge. Pour créer un lien vers un autre élément d’image, supprimez l’action d’origine de l’éditeur de code et utilisez l’élément Visual Experience Composer pour appliquer l’action sur l’autre élément d’image.

Insert Before

Les options disponibles sont les suivantes :

Offer Decision

Ajoutez une offre créée dans Adobe Journey Optimizer pour présenter la meilleure offre et la meilleure expérience à vos clients à l’aide d’offer decisioning.

Remarque : Cette option est disponible uniquement lors de la modification ou de la création d'activités manuelles A/B Test ou Experience Targeting (XT). Cette option n’est pas disponible pour les autres types d’activité.

Pour plus d’informations, voir Utiliser les décisions d’offre.

Image, HTML et Text

Ajoutez n’importe quel élément à votre page en plus de la modification du contenu existant. Ajoutez du texte, du code, des listes et plus afin de créer des expériences entièrement différentes à tester.

Sélectionnez un élément sur la page, puis cliquez sur Insert Before et choisissez si vous souhaitez insérer une image, un HTML ou du texte. L’élément inséré s’affiche avant l’élément sélectionné.

Le comportement de l’élément inséré dépend de la structure de votre page, de votre CSS et d’autres options de configuration de page. Un code HTML valide est requis pour faire apparaître votre page correctement. Testez toujours votre page après l’insertion d’un élément afin de vous assurer qu’il apparaît comme prévu.

Recommendations prend en charge Insert Before le contenu des balises DIV, SECTION et ARTICLE.

Remarque : L’insertion d’une image requiert que Adobe Scene7 Publishing System soit activé afin que vous ayez accès à la bibliothèque d’images.

Recommandation

Incluez des recommandations dans le test A/B (y compris l’Affectation automatique et le Ciblage automatique) et les activités de Ciblage d’expérience (XT). Pour plus d’informations, voir Recommandations en tant qu’offre.

Experience Fragment

Insérez des fragments d’expérience créés dans Adobe Experience Manager (AEM) dans les activités Target pour faciliter l’optimisation ou la personnalisation. Pour plus d’informations, voir Fragments d’expérience AEM.

Insert After

Les options disponibles sont les suivantes :

Offer Decision

Ajoutez une offre créée dans Adobe Journey Optimizer pour présenter la meilleure offre et la meilleure expérience à vos clients à l’aide d’offer decisioning.

Remarque : Cette option est disponible uniquement lors de la modification ou de la création d'activités manuelles A/B Test ou Experience Targeting (XT). Cette option n’est pas disponible pour les autres types d’activité.

Pour plus d’informations, voir Utiliser les décisions d’offre.

Image, HTML et Text

Ajoutez n’importe quel élément à votre page en plus de la modification du contenu existant. Ajoutez du texte, du code, des listes et plus afin de créer des expériences entièrement différentes à tester.

Sélectionnez un élément sur la page, puis cliquez sur Insert After et choisissez si vous souhaitez insérer une image, un HTML ou du texte. L’élément inséré s’affiche après l’élément sélectionné.

Le comportement de l’élément inséré dépend de la structure de votre page, de votre CSS et d’autres options de configuration de page. Un code HTML valide est requis pour faire apparaître votre page correctement. Testez toujours votre page après l’insertion d’un élément afin de vous assurer qu’il apparaît comme prévu.

Recommendations prend en charge Insert After le contenu des balises DIV, SECTION et ARTICLE.

Remarque : L’insertion d’une image requiert que Adobe Scene7 Publishing System soit activé afin que vous ayez accès à la bibliothèque d’images.

Recommandation

Incluez des recommandations dans le test A/B (y compris l’Affectation automatique et le Ciblage automatique) et les activités de Ciblage d’expérience (XT). Pour plus d’informations, voir Recommandations en tant qu’offre.

Experience Fragment

Insérez des fragments d’expérience créés dans Adobe Experience Manager (AEM) dans les activités Target pour faciliter l’optimisation ou la personnalisation. Pour plus d’informations, voir Fragments d’expérience AEM.

Replace Content

Les options disponibles sont les suivantes :

Offer Decision

Ajoutez une offre créée dans Adobe Journey Optimizer pour présenter la meilleure offre et la meilleure expérience à vos clients à l’aide d’offer decisioning.

Remarque : Cette option est disponible uniquement lors de la modification ou de la création d'activités manuelles A/B Test ou Experience Targeting (XT). Cette option n’est pas disponible pour les autres types d’activité.

Pour plus d’informations, voir Utiliser les décisions d’offre.

Image

Permet de sélectionner une autre image dans la bibliothèque de contenu. Les images disponibles pour la permutation incluent les images téléchargées dans le dossier de ressources Experience Cloud ou dans la bibliothèque de contenu de Target.

À la création initiale de l’activité, l’URL affichée est différente de l’URL utilisée pour la diffusion. Lors de la synchronisation des activités, cette URL est mise à jour vers une URL de production Scene7.

Par exemple, l’URL initiale peut se présenter comme suit :

https://test.marketing.adobe.com/content/dam/mac/scholasticinc/Aug_MBM.jpeg?ch_ck=1470774943867

Après la synchronisation des activités, l’URL de diffusion se présentera plutôt comme suit :

http://s7d2.scene7.com/is/image/TargetTest/Aug_MBM?tm=1470768352933&fit=constrain&hei=173&wid=300

Recommendations prend en charge le remplacement par des balises DIV, SECTION et ARTICLE.

Remarque : La permutation d’images requiert un compte Adobe Scene7 Publishing System.

HTML Offer

Sélectionnez une autre offre dans le Content Library.

Remarque : Les offres HTML sont stockées sur les serveurs Target.

Une offre d’HTML peut atteindre 256 Ko.

Recommandation

Incluez des recommandations dans le test A/B (y compris l’Affectation automatique et le Ciblage automatique) et les activités de Ciblage d’expérience (XT). Pour plus d’informations, voir Recommandations en tant qu’offre.

Experience Fragment

Insérez des fragments d’expérience créés dans Adobe Experience Manager (AEM) dans les activités Target pour faciliter l’optimisation ou la personnalisation. Pour plus d’informations, voir Fragments d’expérience AEM.

Layout

Les options disponibles sont les suivantes :

Rearrange

Permet de faire glisser l’élément vers un autre emplacement au sein du même élément parent ou dans une balise DIV. Les autres éléments changent de place afin de libérer de l’espace pour l’élément déplacé.

Remarque : le suivi des clics ne fonctionne pas sur les éléments réorganisés.

Actuellement, certaines actions du VEC, telles que Rearrange et Move, supposent que les éléments frères des éléments parents source et destination sont complètement chargés. Si le chargement différé se produit sous les éléments DOM parents (source ou destination), ces actions du VEC peuvent entraîner un comportement incohérent. Nous travaillons à une approche plus fiable pour que les actions du compositeur d’expérience visuelle fonctionnent dans des éléments DOM chargés en différé. En tant que solution temporaire, vous pouvez utiliser Custom Code dans ces scénarios pour effectuer le rendu de vos expériences.

Resize

Permet de redimensionner un élément sur votre page. Lorsque vous sélectionnez Resize, une poignée s’affiche dans le coin inférieur droit de l’élément, vous permettant de faire glisser ce coin pour le redimensionner. Maintenez la touche Maj enfoncée pour conserver les proportions.

Remarque : Il n’est pas possible de redimensionner les éléments insérés.

Move move

Permet de déplacer des éléments sur votre page. Contrairement à l’option Rearrange, Move ne déplace pas d’autres éléments pour libérer de l’espace pour l’élément déplacé. Utilisez les touches fléchées pour affiner le déplacement. (Amélioration prévue : prise en charge de la protection des éléments déplacés qui ne sont pas masqués derrière d’autres éléments.)

Dans certains cas, par exemple lorsqu’un élément doit rester dans son élément parent en raison d’une restriction CSS, vous ne pouvez pas déplacer l’élément en dehors de son parent. Un élément ne peut pas être déplacé en dehors d’un conteneur possédant la propriété CSS suivante : overflow: hidden.

Voir Rearrange ci-dessus pour plus d’informations sur le comportement incohérent avec les actions Move et Rearrange en raison du chargement différé des éléments DOM.

Hide

Permet de masquer l’élément. L’espace blanc est conservé, mais le contenu est supprimé.

Remove

Permet de supprimer un élément. L’espace blanc derrière l’image est supprimé et l’espace où se trouve l’élément est réduit.

Remarque : Cette option ne permet pas de supprimer les éléments d’une mbox « classique » (mbox créée dans une campagne Target Classic).

Expand Section

Permet de sélectionner l’élément parent en plus de l’élément initialement sélectionné. Lorsque vous sélectionnez un élément parent, tous les enfants de cet élément sont automatiquement sélectionnés. Vous pouvez étendre plusieurs fois la sélection.

Navigate to Link

Permet d’ouvrir la destination du lien.

Undo/Redo

Permet d’annuler les modifications apportées à vos activités durant une session de modification. Vous pouvez également rétablir les modifications précédemment annulées.

Considérations considerations

Prise en charge des éléments personnalisés custom

Le VEC prend en charge les composants web pour vous permettre de créer et de tester des expériences et des offres personnalisées sur des éléments personnalisés et sur des éléments à l’intérieur d’éléments personnalisés. Cette fonctionnalité est disponible dans le VEC pour tous les types d’activité Target.

La plupart des actions du VEC sont prises en charge sur les événements personnalisés et dans les événements personnalisés, avec les exceptions suivantes :

Les actions suivantes ne sont pas disponibles sur les éléments personnalisés :

L’action suivante n’est pas disponible dans les éléments personnalisés :

Navigation dans les éléments à l’aide du chemin DOM dom-path

Lorsque vous cliquez sur un élément de la page, le menu des options du VEC s’affiche. En outre, lorsque vous cliquez sur un élément, le chemin d’accès DOM correspondant s’affiche au bas de la page.

Vous pouvez utiliser le chemin d’accès DOM pour afficher rapidement les informations sur l’élément sélectionné (type, ID et classe). Vous pouvez monter ou descendre le chemin d’accès DOM pour sélectionner l’élément souhaité.

Lorsque vous passez la souris sur le chemin d’accès DOM, une zone bleue met en surbrillance l’élément correspondant dans le VEC. Lorsque vous cliquez sur l’élément, une zone orange met en surbrillance l’élément et le menu des options du VEC s’affiche, comme expliqué ci-dessus.

Vous pouvez facilement accéder à n’importe quel élément parent, frère ou enfant du VEC à l’aide du chemin d’accès DOM.

La fonction Chemin d’accès DOM est également disponible lorsque vous définissez le suivi des clics.