Options du compositeur d’expérience visuelle

9 mai 2025

Rubriques :

La version Adobe Target Standard/Premium 25.2.1 (17 février 2015) introduit un Visual Experience Composer mis à jour (VEC). Cet article explique l’interface utilisateur mise à jour et ses options.

TIP

Pour découvrir en quoi le compositeur d’expérience visuelle mis à jour diffère du compositeur d’expérience visuelle hérité, consultez Modifications du compositeur d’expérience visuelle.

IMPORTANT

La Visual Editing Composer mise à jour nécessite l’extension Adobe Experience Cloud Visual Editing Helper disponible sur le Chrome Web Store.

Le compositeur d’expérience visuelle s’affiche lorsque vous créez ou modifiez une activité existante.

Compositeur d’expérience visuelle

Présentation de l’interface utilisateur du compositeur d’expérience visuelle

Les sections suivantes expliquent les options disponibles dans le VEC mis à jour pour une activité A/B Test. Les options disponibles varient en fonction du type d’activité.

rail Experiences

Le rail Experiences s’affiche dans le rail gauche du compositeur d’expérience visuelle.

Rail Expériences

Vous pouvez afficher, créer, renommer ou supprimer des expériences à l’aide du rail de Experiences.

Les options suivantes sont disponibles dans le rail de Experiences :

Afficher une expérience : pour afficher une expérience, cliquez sur l’expérience souhaitée pour l’afficher dans la zone de travail de Design.
Ajouter une expérience : cliquez sur l’icône Add ( ) pour ajouter une nouvelle expérience. Configurez la nouvelle expérience selon vos besoins.
Renommer une expérience : cliquez sur l’icône Rename ( ) pour afficher la boîte de dialogue Rename Experience. Indiquez le nouveau nom, puis cliquez sur Save.
Dupliquer, supprimer ou rediriger une expérience : cliquez sur l’icône More Actions ( ), puis choisissez Duplicate, Delete ou Redirect to URL.

Paramètres/configuration de l’activité

Cliquez sur l’icône Configure ( ) affichée en haut de la zone de travail Design pour afficher le menu des propriétés de l’activité.

Options de configuration des activités

Les options disponibles sont les suivantes :

Properties : attribuez des propriétés à l’activité ou supprimez des propriétés de l’activité. Properties est une fonctionnalité (Target Premium). Pour plus d’informations, voir Autorisations des utilisateurs d’Enterprise.
Page Delivery : incluez la même expérience sur des pages similaires de votre site. Utilisez un modèle de page pour structurer vos pages, ou si vos pages contiennent des éléments similaires, pour tester des variations dans des éléments de page à structure similaire ou sur l’ensemble de votre domaine. Pour plus d’informations, voir Inclure la même expérience sur des pages similaires.
Site Preferences : configurez les préférences de votre site pour spécifier comment Target génère les sélecteurs CSS. Pour plus d’informations, voir Sélecteurs CSS dans Configuration du Visual Experience Composer.
Ajouter des pages supplémentaires : ajoutez des pages supplémentaires à l’activité pour créer une activité multipage qui vous permet de créer une histoire sur plusieurs pages, avec une conception spécifique à chaque page. Pour plus d’informations, voir Activité multipage.
Audience unique : utilisez une audience unique pour l’activité.
Audiences multiples : attribuez plusieurs audiences à l’activité. Cliquez sur l’icône Ajouter des audiences ( ), puis sélectionnez une ou plusieurs audiences dans la liste. Vous pouvez également combiner des audiences ou créer une audience à partir de la boîte de dialogue Add Audiences.

Modes Design/Browse

Utilisez les boutons (bascule) Design/Browse affichés au-dessus de la zone de travail de conception pour basculer entre le mode de conception et le mode de navigation.

Boutons bascule Conception et navigation

Utilisez le mode Browse pour parcourir votre site et sélectionner la vue ou la page à mettre à jour. Revenez au mode Design pour ajouter ou modifier vos modifications.

Undo/Redo

Vous pouvez annuler les modifications effectuées en cliquant sur l’icône Undo ( ).

Icône Annuler dans le VEC

Pour rétablir une action, développez le groupe de boutons Annuler/Redo et choisissez Redo.

rail Components

Vous pouvez ajouter plusieurs composants à votre page web et les modifier selon vos besoins à l’aide du nouveau rail de Components.

Rail Composants

NOTE

Si le rail Modifications s’affiche dans cette zone à la place du rail Components, cliquez sur l’icône Show Components (

). L’icône Show Components (

) et l’icône Show Modifications (

) servent de bascule pour afficher les options appropriées.

Pour ajouter un nouveau composant à une expérience :

Cliquez sur le composant de votre choix à ajouter pour le mettre en surbrillance.

Les composants disponibles sont regroupés dans des conteneurs logiques :
- Basic
  - Divider
  - HTML
  - Image
- Text
  - Heading
  - Paragraph
  - Link
- Dynamic
Faites glisser le composant sur un élément de page existant dans la zone de travail Design.
Choisissez d’insérer le composant avant ou après l’élément sélectionné.

Par rapport à la version précédente du compositeur d’expérience visuelle, vous ne pouvez pas remplacer un élément sélectionné par un composant.

rail Modifications

Pour ouvrir le rail Modifications, cliquez sur l’icône Show Modifications ( ) dans le rail Components.

Rail Modifications

NOTE

L’icône Show Components (

) et l’icône Show Modifications (

) servent de bascule pour afficher les options appropriées.

Le rail Modifications affiche toutes les modifications apportées à votre page dans le Visual Experience Composer (VEC) et vous permet d’effectuer des modifications supplémentaires (comme le sélecteur CSS, la mbox et le code personnalisé).

Cliquez sur l’icône More Options ( ) dans l’en-tête du rail pour ajouter une modification, supprimer toutes les modifications ou supprimer toutes les modifications non valides. Cliquez sur Select pour effectuer des opérations en bloc : Apply to All Pages ou Delete.

Cliquez sur l’icône More Options ( ) en regard de chaque modification pour afficher ses informations, supprimer la modification ou l’appliquer à d’autres vues.

Zone de travail Design

La zone de travail Design vous permet de sélectionner des fenêtres d’affichage, notamment les options d’ajustement à l’écran, les Desktop, les Tablet, les Mobile Landscape et les Mobile Portrait. Par défaut, la zone de travail s’affiche sur la page à l’écran avec les fenêtres d’affichage définies dans la section Administration.

Options de fenêtre d’affichage

Vous pouvez également effectuer un zoom avant ou arrière en cliquant sur l’icône appropriée ( ou ).

Lorsque vous cliquez sur un élément de page dans la zone de travail de Design, 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 des options de menu appropriées pour rendre votre tâche plus rapide et plus efficace :

Menu Options du VEC

NOTE

Les options disponibles dépendent du type d’activité et de l’élément que vous créez ou modifiez. Pour plus d’informations sur la modification des images et des offres dans une activité A/B Test, consultez la section Modifier les éléments à l’aide de la zone de travail Design ci-dessous.

rail Properties

Le rail Properties vous permet de modifier les propriétés des éléments sélectionnés sur la page, qu’il s’agisse d’éléments HTML ou d’objets spécifiques à Target, tels que des recommandations ou des offres.

Rail Propriétés

Cliquez sur les icônes en haut du rail pour modifier le code d’HTML ou supprimer, dupliquer ou masquer des éléments. Les modifications s’affichent dans le rail de Modifications.

Le rail Properties est réductible dans le rail de droite. Cliquez sur l’icône Show/Hide Properties ( ) à droite du rail pour réduire ou afficher le rail Properties.

Modification des éléments à l’aide de la zone de travail Design

Les sections suivantes vous montrent comment modifier des images et du texte dans la zone de travail Design. La zone de travail de conception, ainsi que les rails Composants, Modifications et Propriétés vous fournissent des outils puissants pour vous permettre de créer facilement des expériences pour vos activités.

Options d’image

Si vous cliquez sur une image dans une activité A/B Test, le compositeur d’expérience visuelle ressemble à l’illustration suivante :

compositeur d’expérience visuelle avec image sélectionnée

Sélectionnez des composants dans le cadre Components sur le côté gauche pour insérer les éléments suivants :

De base (séparateur, HTML, image).
Texte (titre, paragraphe, lien).
Dynamique (recommandation, fragment d’expérience, offre HTML).

Le menu en haut de l’image vous permet d’effectuer les opérations suivantes :

Insérez un lien ( ).
Modifiez l’image ( ).
Ajoutez une personnalisation ( ).
Supprimez l’image ( ).

Le volet Properties sur le côté droit permet de configurer plus en détail les propriétés de l’image.

Les icônes situées en haut du cadre permettent d’effectuer les opérations suivantes :

Modifiez l’HTML ( ). Consultez Modifier HTML ci-dessous pour plus d’informations.
Dupliquez l’image ( ).
Supprimez l’image ( ).
Masquez l’image ( ).

Les options du cadre de droite permettent d’effectuer les opérations suivantes :

Modifiez la classe CSS.
Configurez les propriétés de l’image (source, titre, texte secondaire).
Modifiez l’URL du lien.
Configurez la taille de l’image (hauteur et largeur). Cliquez sur Show Advanced Options pour configurer la taille minimale et maximale, la largeur, la hauteur, le débordement et l’ajustement de l’objet de l’image.
Configurez la position de l’image sur votre page (absolue, fixe, relative, statique ou rémanente).
Configurez l’espacement de l’élément, y compris la marge et la marge intérieure.
Configurez les effets de l’élément (opacité). Cliquez sur Show Advanced Options pour configurer les valeurs de sépia, niveaux de gris, contraste, luminosité et flou de l’image. Vous pouvez également inverser ou faire pivoter l’image.
Configurez les styles intégrés de l’image.

Options de texte

Si vous cliquez sur du texte dans une activité A/B Test, le compositeur d’expérience visuelle ressemble à l’illustration suivante :

compositeur d’expérience visuelle avec texte sélectionné

Sélectionnez des composants dans le cadre Components sur le côté gauche pour insérer les éléments suivants :

De base (séparateur, HTML, image).
Texte (titre, paragraphe, lien).
Dynamique (recommandation, fragment d’expérience, offre HTML).

Cliquez sur l’icône Show Modifications ( ) pour afficher les modifications apportées à l’expérience.

Le menu situé en haut de l’élément de texte vous permet d’effectuer les opérations suivantes :

Configurer les propriétés du texte (niveau d’en-tête, paragraphe, guillemet ou espace)
Sélectionnez la couleur du texte ( )
Configurez les attributs du texte (gras, italique, souligné ou barré) ( ).
Configurer l’alignement du texte (gauche, centre, droite, justifier) ( ).
Insérez un lien ( ).
Remplacez le contenu par une offre HTML, fragment d’expérience ou recommandation.
Modifiez l’HTML ( ).
Ajoutez une personnalisation ( ).
Supprimez l’image ( ).

Le rail Properties sur le côté droit permet de configurer plus en détail les propriétés du texte.

Les icônes situées en haut du cadre permettent d’effectuer les opérations suivantes :

Modifiez l’HTML ( ). Consultez Modifier HTML ci-dessous pour plus d’informations.
Dupliquez le texte ( ).
Supprimez le texte ( ).
Masquez le texte ( ).

Les options du cadre de droite permettent d’effectuer les opérations suivantes :

Modifiez la classe CSS.
Configurez la couleur et l’image d’arrière-plan du texte.
Configurer la typographie du texte (style d’en-tête, taille de police, épaisseur de police, hauteur de ligne, alignement, couleur du texte, style de texte (gras, italique, souligné ou barré)).
Configurez les listes, y compris les listes à puces, numérotées ou A, B, C.
Choisissez la couleur de la bordure.
Configurez la taille de la zone de texte (hauteur et largeur). Cliquez sur Show Advanced Options pour configurer la taille minimale et maximale de la zone de texte, sa largeur, sa hauteur, son débordement et l’ajustement de l’objet.
Configurez la position de la zone de texte sur la page (absolue, fixe, relative, statique ou rémanente) et définissez le nombre de pixels à partir du haut, de la droite, du bas et de la gauche.
Configurez l’espacement de l’élément, y compris la marge et la marge intérieure.
Configurez les effets de l’élément (opacité). Cliquez sur Show Advanced Options pour configurer les valeurs de sépia, niveaux de gris, contraste, luminosité et flou de l’image. Vous pouvez également inverser ou faire pivoter le texte.
Configurez les styles intégrés.

Modifier HTML

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

Plusieurs options de formatage de texte enrichi sont disponibles lors de la modification de texte et dans HTML pour les activités de A/B et de 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 d’HTML, vous pouvez basculer entre l’affichage du code et l’affichage de modification riche d’HTML.

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

Baliser

Balises imbriquées autorisées

<a>

<h1-h6>, <p>, <ul>, <ol>, <menu>, <div>, <figure>, <figcaption>

<ins>

<h1-h6>, <p>, <ul>, <ol>, <menu>

<del>

<ul>, <ol>, <menu>, <h1-h6>, <p>

<label>

<p>

Navigation dans les éléments à l’aide du chemin d’accès DOM

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.

Chemin d’accès DOM

Si le chemin d’accès DOM n’apparaît pas, cliquez sur l’icône Show DOM ( ).

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

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.

recommendation-more-help