Options du compositeur d’expérience visuelle
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.
Le compositeur d’expérience visuelle s’affiche lorsque vous créez ou modifiez une activité existante.
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é.
panneau Experiences
Le panneau Experiences s’affiche dans le rail gauche du compositeur d’expérience visuelle.
Vous pouvez afficher, créer, renommer ou supprimer des expériences à l’aide du panneau Experiences.
Les options suivantes sont disponibles dans le panneau 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 (
- Renommer une expérience : cliquez sur l’icône Rename (
- Dupliquer, supprimer ou rediriger une expérience : cliquez sur l’icône More Actions (
Paramètres/configuration de l’activité
Cliquez sur l’icône Configure (
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 (
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.
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 (
Pour rétablir une action, développez le groupe de boutons Annuler/Redo et choisissez Redo.
panneau Components
Vous pouvez ajouter plusieurs composants à votre page web et les modifier selon vos besoins à l’aide du nouveau panneau Components.
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.
panneau Modifications
Pour ouvrir le panneau Modifications, cliquez sur l’icône Show Modifications (
Le panneau 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 (
Cliquez sur l’icône More Options (
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.
Vous pouvez également effectuer un zoom avant ou arrière en cliquant sur l’icône appropriée (
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 :
panneau Properties
Le panneau 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.
Cliquez sur les icônes en haut du panneau pour modifier le code d’HTML ou supprimer, dupliquer ou masquer des éléments. Les modifications s’affichent dans le panneau Modifications.
Le panneau Properties est réductible dans le rail de droite. Cliquez sur l’icône Show/Hide Properties (
Modification des éléments à l’aide de la zone de travail Design 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 panneaux 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 :
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 (
- 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 :
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 (
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 panneau 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 (
- 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 :
<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 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.
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.