Options du compositeur d’expérience visuelle
La version Adobe Target Standard/Premium 25.2.1 (17 février 2015) introduit un Compositeur d’expérience visuelle (VEC) mis à jour. 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 décrivent les options disponibles dans le compositeur d’expérience visuelle mis à jour pour une activité de test A/B. Les options disponibles varient en fonction du type d’activité.
Rail Expériences
Le rail Expériences s’affiche dans le rail de gauche du compositeur d’expérience visuelle.
Vous pouvez afficher, créer, renommer ou supprimer des expériences à l’aide du rail Expériences.
Les options suivantes sont disponibles dans le rail Expériences :
- Afficher une expérience : pour afficher une expérience, cliquez sur l’expérience souhaitée pour l’afficher dans la zone de travail Conception.
- Ajouter une expérience : cliquez sur l’icône Ajouter (
- Renommer une expérience : cliquez sur l’icône Renommer (
- Dupliquer, supprimer ou rediriger une expérience : cliquez sur l’icône Plus d’actions (
Paramètres/configuration de l’activité settings
Cliquez sur l’icône Configurer (
Les options disponibles sont les suivantes :
- Propriétés : attribuez des propriétés à l’activité ou supprimez des propriétés de l’activité. Propriétés est une fonctionnalité (Target Premium. Pour plus d’informations, voir Autorisations des utilisateurs d’Enterprise.
- Diffusion de page : 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.
- Préférences du site : configurez les préférences de votre site pour spécifier comment générer Target sélecteurs CSS. Pour plus d’informations, voir Sélecteurs CSS dans Configuration du compositeur d’expérience visuelle.
- 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 Conception/Parcourir
Utilisez les boutons Conception/Parcourir 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 Parcourir pour parcourir votre site et sélectionner la vue ou la page à mettre à jour. Revenez au mode Conception pour ajouter ou modifier vos modifications.
Annuler/Rétablir
Vous pouvez annuler les modifications effectuées en cliquant sur l’icône Annuler (
Pour rétablir une action, développez le groupe de boutons Annuler/Rétablir et choisissez Rétablir.
Rail Composants
Vous pouvez ajouter plusieurs composants à votre page web et les modifier selon vos besoins à l’aide du nouveau rail Composants.
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 :
-
De Base
- Diviseur
-
- Image
-
Texte
- En-tête
- Paragraphe
- Lien
-
Dynamique
-
-
Faites glisser le composant sur un élément de page existant dans la zone de travail Conception.
-
Choisissez de remplacer l’élément sélectionné ou d’insérer le composant avant ou après l’élément sélectionné.
Rail Modifications
Pour ouvrir le rail Modifications, cliquez sur l’icône Afficher les modifications (
Le rail Modifications affiche toutes les modifications apportées à votre page dans le Compositeur d’expérience visuelle (VEC) et vous permet d’apporter des modifications supplémentaires (comme le sélecteur CSS, la mbox et le code personnalisé).
Cliquez sur l’icône Plus d’options (
Cliquez sur l’icône Plus d’options (
Conception zone de travail
La zone de travail Conception vous permet de sélectionner des fenêtres d’affichage, notamment celles adaptées à l’écran, Bureau, Tablette, Paysage mobile et Portrait mobile. 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 Conception, 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 Compositeur d’expérience visuelle (VEC) sont regroupées dans des options de menu appropriées pour rendre votre tâche plus rapide et plus efficace :
Rail Propriétés
Le rail Propriétés 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 rail pour modifier le code d’HTML ou supprimer, dupliquer ou masquer des éléments. Les modifications s’affichent dans le rail Modifications.
Le rail Propriétés est réductible dans le rail de droite pour vous permettre de masquer la zone de travail de conception et d’agrandir cette dernière. Cliquez sur l’icône Afficher/masquer les propriétés (
Modifier des éléments à l’aide de la zone de travail Conception design
Les sections suivantes vous montrent comment modifier des images et du texte dans la zone de travail Conception. 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é Test A/B, le compositeur d’expérience visuelle ressemble à l’illustration suivante :
Sélectionnez des composants dans le cadre Composants 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 Propriétés 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 Afficher les options avancées 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 Afficher les options avancées 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é Test A/B, le compositeur d’expérience visuelle ressemble à l’illustration suivante :
Sélectionnez des composants dans le cadre Composants 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 Afficher les 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 rail Propriétés 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 Afficher les options avancées 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 Afficher les options avancées 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 A/B et Ciblage d’expérience. 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 Afficher 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.
Informations supplémentaires sur l’interface utilisateur mise à jour
-
Target Standard/Premium Notes de mise à jour de la version 25.2.1 (17 février 2025) : fournit un résumé des principales modifications apportées à l’interface utilisateur de Target pour Activités, Recommandations et le Compositeur d’expérience visuelle (VEC).
-
Notes de mise à jour de la version Target Standard/Premium 25.1.1 (9 janvier 2025) : fournit un résumé des principales modifications apportées à l’interface utilisateur dans Target pour la bibliothèque Offres.
-
Présentation de l Target interface utilisateur : fournit un bref aperçu pour vous familiariser avec les Target et fournit des liens vers des informations plus détaillées et des instructions détaillées.
-
Compositeur d’expérience visuelle modifications : la version Adobe Target Standard/Premium 25.2.1 (17 février 2015) introduit une mise à jour du Compositeur d’expérience visuelle (VEC). Cet article explique les différences entre les versions héritées et mises à jour du compositeur d’expérience visuelle.
-
Compositeur d’expérience visuelle options : cet article explique l’interface utilisateur du compositeur d’expérience visuelle mise à jour et ses options.
-
Target FAQ sur la mise à jour de l’interface utilisateur : cette FAQ aborde les questions courantes sur la nouvelle interface utilisateur Target et le compositeur d’expérience visuelle (VEC), notamment les modifications apportées à la navigation, l’emplacement des fonctionnalités et l’obsolescence du bouton (bascule) de version temporaire de l’interface utilisateur. Que vous soyez spécialiste du marketing, développeur ou administrateur, cette FAQ vous aide à effectuer une transition en douceur et à tirer le meilleur parti de l’interface utilisateur mise à jour.