Options du compositeur d’expérience visuelle

Lorsque vous cliquez sur un élément de page dans le Adobe Target Compositeur d’expérience visuelle (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.

Options du compositeur d’expérience visuelle

Les différentes actions du compositeur d’expérience visuelle (VEC) sont des options de menu appropriées pour rendre votre travail plus rapide et plus efficace :

Modifier

Les options disponibles sont les suivantes :

Texte/Code 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 l’édition de texte et de code HTML pour les activités A/B et de 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 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 :

Couleur d’arrière-plan

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

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 Styles , cliquez sur un élément de page dans le VEC, puis sur Modifier > 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 le bouton Rétablir qui s’affiche dans le coin supérieur droit de la Styles après avoir modifié une section. Cliquez sur le bouton Rétablir 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 Précédent dans la partie supérieure du panneau pour revenir à l’affichage principal du panneau, puis cliquez sur Enregistrer.

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 des modifications avant de cliquer sur Enregistrer.

• Contexte

  Modification de la couleur et de l’image d’arrière-plan.

  • Couleur (spécifiez le code couleur ou utilisez le sélecteur de couleurs)
  • Image (sélectionnez une image dans le sélecteur d’images)
  • Source de l’image (spécification d’une URL externe)
  • Pièce jointe
    • Cliquez sur la liste déroulante supérieure pour sélectionner scroll (défilement), fixed (fixe) ou local
    • Cliquez sur la liste déroulante inférieure pour sélectionner repeat (répétition), repeat-x (répétition-x), repeat-y (répétition-y), no-repeat (pas de répétition), space (espace) ou round (rond).
  • Clip
    • Cliquez sur la liste déroulante supérieure pour sélectionner border-box(zone de bordure), padding-box (zone de remplissage), content-box (zone de contenu) ou text (texte).
    • Cliquez sur la liste déroulante inférieure pour sélectionner auto audio (audio automatique) ou audio

• Typographie

  Modification de la typographie d’un élément. Les modifications apportées à la typographie sont rapides et faciles à réaliser.

  Bien que l’éditeur de texte enrichi (Modifier le texte/HTML) soit disponible pour affiner, des actions rapides pour modifier l’élément entier sont disponibles via cette option. Si vous souhaitez appliquer des modifications de typographie à une partie seulement du texte (et non au texte intégral), utilisez l’éditeur de texte enrichi.

  Vous pouvez modifier les styles de typographie suivants :

  • Taille de police
  • Poids de police
  • Style de police
  • Couleur (spécifiez le code couleur ou utilisez le sélecteur de couleurs)
  • Espacement des mots
  • Hauteur de ligne
  • Alignement du texte

• Marge

  Modification de la marge de l’élément sélectionné. Vous pouvez modifier les marges gauche, droite, inférieure et supérieure.

  Cliquez sur l’icône déroulante pour chaque marge pour choisir parmi les options suivantes :

  • Automatique
  • Valeur (faites glisser le curseur pour définir la marge ou spécifier le nombre de pixels pour chaque marge)

  La marge prend en charge les valeurs positives et négatives.

  Target prend également en charge les autres unités de taille, telles que rem, pc, em. Pour plus d’informations sur ces unités, voir Conseils et astuces concernant les feuilles de style web CSS.

• Remplissage

  Modification du remplissage de l’élément sélectionné. Vous pouvez modifier le remplissage gauche, droit, inférieur et supérieur.

  Faites glisser le curseur pour définir le remplissage ou spécifier le nombre de pixels pour le remplissage.

  Le remplissage prend en charge les échelles de largeur à partir de 0.

  Target prend également en charge autres unités de taille, par exemple rem, pc, em.

• Bordure

  Cliquer sur les icônes de bordure en haut du panneau pour modifier la bordure de l’élément sélectionné.

  Vous pouvez modifier les styles suivants pour chaque bordure (en haut, à droite, en bas et à gauche) :

  • Style de bordure (aucun, masqué, pointillé, tirets, plein ou double)
  • Couleur de bordure (spécifiez le code couleur ou utilisez le sélecteur de couleurs)
  • Largeur de la bordure (faites glisser le curseur pour sélectionner la largeur d’une bordure ou spécifiez la largeur en pixels)

  La bordure prend en charge les échelles de largeur à partir de 0.

  Target prend également en charge autres unités de taille, par exemple rem, pc, em.

• Position

  Déplacement de l’élément sélectionné depuis sa position actuelle. Vous pouvez modifier le haut, le bas, la gauche, la droite et Index Z position.

  Cliquez sur la liste déroulante Statique pour choisir l’une des options de position suivantes :

  • Statique
  • Relatif
  • Absolu
  • Attractif
  • Fixe

  Cliquez sur l’icône déroulante pour chaque position pour choisir parmi les options suivantes :

  • Automatique
  • Valeur (faites glisser le curseur pour positionner l’élément ou spécifier le nombre de pixels dont vous souhaitez déplacer l’élément)

  La position prend en charge les valeurs positives et négatives.

  Target prend également en charge autres unités de taille, par exemple rem, pc, em.

• Taille

  Modification de la largeur et de la hauteur de l’élément sélectionné.

  Cliquez sur l’icône déroulante à côté de Largeur et Hauteur pour choisir parmi les options suivantes :

  • Automatique
  • Valeur (faites glisser le curseur pour dimensionner l’élément ou spécifier le nombre de pixels pour chaque dimension)

• Filtrer

  Faites glisser le curseur pour chaque option de filtre ou indiquez le pourcentage souhaité :

  • Sépia
  • Contraste
  • Luminosité
  • Échelle de gris
  • Netteté
  • Opacité
  • Inversion
    ​*
    Rotation
  • Saturation

• Éditeur CSS

  L’éditeur CSS en temps réel vous 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.

  L’éditeur CSS affiche toutes les modifications que vous apportez dans le panneau Styles. Comme illustré ci-dessous, la taille de police, la bordure supérieure et la taille de l’image ont été modifiées :

  

  Notez les points bleus à côté des options Typographie, Bordure et Taille de l’illustration précédente. Ces points indiquent que vous avez modifié ces sections. Si vous ouvrez ces panneaux de section, les points bleus s’affichent à côté des options spécifiques que vous avez modifiées.

  Vous pouvez saisir votre propre code si le style souhaité n’est pas disponible par défaut dans les Styles.

  L’éditeur CSS affiche uniquement les détails de la session en cours. Si vous enregistrez les modifications puis rouvrez l’éditeur, les détails de la modification précédente ne s’affichent pas dans l’éditeur, même si vous sélectionnez de nouveau le même élément.

  IMPORTANT

  Vous pouvez appliquer une image d’arrière-plan à l’aide de l’éditeur CSS, mais cela peut entraîner un scintillement. Testez les modifications avant le déploiement.

Classe CSS

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 de test A/B, de Personnalisation automatisée et de test multivarié.

Lien

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 renvoyer vers un élément d’image différent, supprimez l’action d’origine dans l’éditeur de code et utilisez le compositeur d’expérience visuelle pour appliquer l’action sur l’autre élément d’image.

Insérer avant

Les options disponibles sont les suivantes :

Image, HTML, et Texte

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 Insérer avant et choisissez si vous souhaitez insérer une image, du code 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 l’insertion avant 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 Recommendations en tant qu’offre.

Fragment d’expérience

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.

Insérer après

Les options disponibles sont les suivantes :

Image, HTML, et Texte

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 Insérer après et choisissez si vous souhaitez insérer une image, du code 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 Insertion après 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 Recommendations en tant qu’offre.

Fragment d’expérience

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.

Remplacer par

Les options disponibles sont les suivantes :

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.

Offre HTML

Permet de sélectionner une autre offre dans la Bibliothèque de contenu.

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

Une offre de 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 Recommendations en tant qu’offre.

Fragment d’expérience

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.

Mise en page

Les options disponibles sont les suivantes :

Réorganiser

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.

Redimensionner

Permet de redimensionner un élément sur votre page. Lorsque vous sélectionnez Redimensionner, une poignée apparaît dans le coin inférieur droit de l’élément, ce qui vous permet 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.

Déplacer

Permet de déplacer des éléments sur votre page. Contrairement à l’option Réorganiser, Déplacer ne déplace pas d’autres éléments afin de 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 pour s’assurer que les éléments déplacés 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.

Masquer

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

Supprimer

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

Développer la 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.

Navigation au lien

Permet d’ouvrir la destination du lien.

Annuler/Rétablir

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

• Si une offre contient du contenu HTML, reportez-vous à la section « Comment at.js effectue le rendu des offres avec du contenu HTML » dans Fonctionnement d’at. js pour obtenir des informations supplémentaires.

Prise en charge des éléments personnalisés

Le compositeur d’expérience visuelle prend en charge 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 Target types d’activité.

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 :

• Modifier

  • Texte/Code HTML
  • Lien
  • Modifier la source

• Remplacer le contenu

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

• Mise en page
  • Réorganiser

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.

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.