DocumentationJourney Optimizer édition B2BDocumentation de Journey Optimizer B2B Edition

[Beta]{class="badge informative" title="Cette fonctionnalité est actuellement en version bêta limitée"}

Conception d’expériences web

Last update: Mon Jan 12 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Utilisateur ou utilisatrice

Après avoir créé une expérience web, utilisez l’espace de conception de contenu pour définir les modifications à appliquer à vos pages web.

recommendation-more-help

Conditions préalables

Avant de pouvoir concevoir des expériences web, assurez-vous que les exigences suivantes sont remplies :

  • Un administrateur de produit a configuré un ou plusieurs canaux web pour définir les URL (pages) à inclure pour une expérience web. Pour plus d’informations, voir Configurations du canal web.

  • Adobe Experience Platform Web SDK (alloy.js) est implémenté pour l'identification des visiteurs et la diffusion de contenu sur votre site Web. Adobe Experience Platform Web SDK version 2.16 ou ultérieure est requis.

  • Vous disposez des autorisations nécessaires pour créer et gérer des expériences web dans un parcours :

    • Campagnes > Gérer les campagnes - Obligatoire pour ajouter ou mettre à jour un nœud d’action de personnalisation web.
    • Campagnes > Afficher les campagnes - Obligatoire pour afficher les détails des nœuds d’une action de personnalisation web.
style
shade-box
IMPORTANT
Avant de concevoir une expérience web, assurez-vous que l’extension de navigateur Visual Editing Helper de Adobe Experience Cloud est installée pour votre navigateur web. Cette extension est nécessaire pour ouvrir, créer et prévisualiser vos pages web de manière fiable dans l’espace de conception d’expérience web de Journey Optimizer B2B edition.
Google Chrome et Microsoft Edge sont actuellement les seuls navigateurs qui prennent en charge l’extension et la création d’expériences web dans Journey Optimizer B2B edition. Pour plus d’informations, voir Installation de l’extension Visual Editing Helper.

Éditeurs d’expérience web

Journey Optimizer B2B edition fournit deux types d’éditeurs pour la conception de modifications web :

Éditeur
Description
Idéal pour
éditeur visuel
Un éditeur WYSIWYG (What You See Is What You Get) qui affiche votre site web et vous permet de sélectionner et de modifier directement des éléments. Elle nécessite l’extension ​ Visual Editing Helper ​ dans le navigateur web Google Chrome ou Microsoft Edge.
Apporter des modifications visuelles aux éléments de page visibles, tels que le texte, les images, les boutons et les bannières.
​ Éditeur non visuel ​
Éditeur basé sur le code pour appliquer des modifications qui ne peuvent pas être apportées via l’éditeur visuel.
Ciblage des éléments difficiles à sélectionner visuellement, application de modifications CSS avancées ou modification d’éléments masqués.

Dans les propriétés de l’expérience web, utilisez l’option Éditeur visuel pour déterminer le type d’éditeur. Activez l’option pour utiliser l’éditeur visuel ou désactivez-la pour utiliser l’éditeur non visuel.

Option éditeur visuel activée {width="400"}

Éditeur visuel visual-editor

L’éditeur visuel charge les pages web dans un iframe, où vous pouvez sélectionner des éléments et appliquer des modifications directement dans l’aperçu de la page. Pour utiliser l’éditeur visuel afin de concevoir votre expérience web, procédez comme suit :

  1. Une fois l’onglet Contenu affiché dans la page de détails de l’expérience web, cliquez sur Modifier l’expérience web dans le panneau de droite.

    L’éditeur visuel charge votre site web en fonction de la configuration du canal web.

    Éditeur visuel de l’expérience web {width="800" modal="regular"}

  2. Si nécessaire, cliquez sur Parcourir en haut à droite et utilisez la barre de navigation du site pour charger la page que vous souhaitez modifier.

    Vous pouvez également saisir l’URL de la page dans le champ en haut.

    note note
    NOTE
    Assurez-vous que la page chargée correspond aux modèles d’URL définis dans votre configuration de canal web. Cliquez sur Afficher les détails de la configuration en haut à droite pour afficher les règles de correspondance d’URL ou de page pour la configuration de canal web sélectionnée.

    Mode de navigation dans l’éditeur visuel {width="700" modal="regular"}

    Cliquez sur Conception en haut à droite pour charger la page dans l’espace de conception.

  3. Pour définir la manière dont vous souhaitez que la page affichée soit modifiée pour l’expérience web, vous pouvez :

    • Insérez de nouveaux composants (séparateur, HTML, image, en-tête, paragraphe ou lien) dans la page pour l’expérience web.

    • Sélectionnez un élément existant de la page, tel qu’une image, un bouton, un paragraphe, un texte, un conteneur, un en-tête ou un lien, et modifiez-le ​ l’expérience web.

    • Ajouter le suivi des clics pour les éléments permettant de mesurer l’engagement et de recueillir des informations.

  4. Répétez l’étape 2 pour charger d’autres pages que vous souhaitez inclure dans l’expérience web et répétez l’étape 3 pour définir les modifications de page.

  5. Passez en revue vos modifications et effectuez les ajustements nécessaires.

  6. Une fois vos modifications terminées, cliquez sur la flèche de gauche au-dessus de l’éditeur pour revenir aux propriétés de l’expérience web.

Modification des éléments

Cliquez sur un élément de la page affichée pour le sélectionner. Une bordure bleue indique l’élément sélectionné et une barre d’outils contextuelle s’affiche avec les options de modification.

Sélectionner un élément à modifier {width="700" modal="regular"}

Les options de la barre d’outils dépendent du type de composant sélectionné :

Action
Description
Options de texte
Modifiez la classe de l’élément de texte ou le style du texte de l’élément sélectionné.
Choisir une image
Remplacez la source de l’image ou ajoutez une image à l’élément.
Modifier le lien / Ajouter un lien
Modifier ou ajouter une URL de lien.
Organiser
Déplace l’élément sélectionné vers l’arrière ou vers l’avant dans l’affichage.
Ajouter une personnalisation
Insérez une personnalisation.
Élément de suivi des clics
Ajoutez le suivi des clics pour l’élément.
Supprimer
Supprimer l’élément sélectionné de la page.

Pour un élément sélectionné, les propriétés du panneau de droite changent pour refléter les styles et actions disponibles. Cliquez sur une icône d’action en haut du panneau pour dupliquer, suivre un clic, supprimer ou masquer l’élément sélectionné.

cliquez sur une icône d’action pour l’élément sélectionné {width="300"}

Éléments de texte

  1. Sélectionnez un élément de texte sur la page.

  2. Saisissez le nouveau contenu textuel ou sélectionnez une chaîne de texte et saisissez le texte de remplacement.

  3. (Facultatif) Utilisez les options de mise en forme de texte telles que le gras, l’italique et l’alignement.

  4. Cliquez en dehors de l’élément de texte pour appliquer la modification.

Pour plus d’informations sur les options de style de texte des composants de texte, voir Composants de contenu.

Éléments d’image

  1. Sélectionnez un élément image sur la page.

  2. Cliquez sur l’icône Choisir une image dans la barre d’outils contextuelle ou dans le panneau de droite.

  3. Recherchez et sélectionnez une image dans votre bibliothèque de ressources.

  4. Utilisez les options de style d’image dans le panneau de droite selon vos besoins.

Éléments de bouton

  1. Sélectionnez un élément de bouton sur la page.

  2. (Facultatif) Saisissez le nouveau texte du bouton ou sélectionnez la chaîne de texte et saisissez le texte de remplacement.

    Vous pouvez utiliser la personnalisation pour modifier le texte du bouton à l’aide des données provenant des profils de compte ou de personne.

  3. Utilisez les options de style de bouton dans le panneau de droite selon vos besoins.

Éléments de conteneur

  1. Sélectionnez un élément de conteneur sur la page.

  2. Utilisez les options de style de conteneur dans le panneau de droite selon vos besoins.

Insérer de nouveaux composants

Lorsque vous sélectionnez l’icône + dans le volet de navigation de gauche Conception de l’éditeur visuel, vous pouvez ajouter les types de composants suivants à la page en tant que modification de l’expérience web :

  • Diviseur - Utilisez ce composant pour insérer une ligne de séparation afin d’organiser la disposition et le contenu de votre e-mail. Vous pouvez ajuster les attributs de style, tels que la couleur, le style et la hauteur des lignes à partir des propriétés du panneau de droite. Voir Diviseur dans Composants de contenu pour plus d’informations.
  • HTML - Utilisez ce composant pour copier-coller le code HTML dans la structure existante. Il permet de créer des composants modulaires HTML gratuits pour réutiliser du contenu externe. Voir HTML dans Composants de contenu pour plus d’informations.
  • Image - Utilisez ce composant pour insérer un fichier image dans la page. Vous pouvez ajuster les attributs de style, tels que la largeur et la hauteur, à partir des propriétés du panneau de droite. Voir Image dans Composants de contenu pour plus d’informations.
  • En-tête - Utilisez ce composant pour insérer du texte de classe d’en-tête. Vous pouvez ajuster les attributs de style, tels que la couleur, le style, la police et la taille du texte, à partir des propriétés du panneau de droite. Voir Texte dans Composants de contenu pour plus d’informations.
  • Paragraphe - Utilisez ce composant pour insérer un élément de texte standard. Vous pouvez ajuster les attributs de style, tels que la couleur, le style, la police et la taille du texte, à partir des propriétés du panneau de droite. Voir Texte dans Composants de contenu pour plus d’informations.
  • Lien - Utilisez ce composant pour insérer un lien textuel autonome vers une URL spécifiée. Vous pouvez ajuster les attributs de style, tels que la couleur, le style, l’alignement et la taille du texte, à partir des propriétés du panneau de droite.

Sélectionnez un type de composant à gauche, puis passez la souris sur un élément adjacent à l’endroit où vous souhaitez l’ajouter.

Interface de l’éditeur visuel - nouveau composant {width="800" modal="regular"}

Cliquez sur l’un des boutons affichés pour placer le composant :

  • *Insérer avant - Insérez le composant avant l’élément sélectionné.
  • *Insérer après - Insérez le composant après l’élément sélectionné.

Pour désélectionner un type de composant à insérer, cliquez sur Échap dans la bannière contextuelle bleue affichée en haut de la page.

Éditeur non visuel non-visual-editor

Utilisez l’éditeur non visuel lorsque vous devez apporter des modifications qui ne peuvent pas être facilement effectuées dans l’éditeur visuel. Cette approche basée sur le code vous permet de contrôler précisément le ciblage et la modification des éléments. Pour utiliser l’éditeur non visuel afin de concevoir votre expérience web, procédez comme suit :

  1. Une fois l’onglet Contenu affiché dans la page Détails de l’expérience web, cliquez sur Ajouter une modification dans le panneau de droite.

    L’éditeur non visuel charge une page en fonction de la configuration du canal web.

    Interface de l’éditeur non visuel {width="800" modal="regular"}

  2. Définissez la première modification que vous souhaitez apporter.

    Le panneau de gauche affiche une liste des modifications existantes (le cas échéant). Cliquez sur Ajouter pour définir une nouvelle modification. Si aucune modification n’est définie, le panneau affiche par défaut les options Ajouter une modification.

    • Choisissez le Type de modification :

      table 0-row-2 1-row-2 2-row-2
      Type Description
      ​ Sélecteur CSS ​ Ciblez des éléments à l’aide d’une chaîne de sélecteur CSS.
      ​ Page ​ Insérez des HTML, CSS ou JavaScript personnalisés dans des éléments de niveau page, tels que <head> ou <body>.

    • Configurez les paramètres de modification en fonction du type :

      • Sélecteur CSS - Saisissez un sélecteur CSS valide pour cibler des éléments spécifiques.
      • Type d’action - Sélectionnez l’action à effectuer (modifier, masquer, supprimer, insérer, remplacer).
      • Contenu - Fournissez le contenu ou le style à appliquer.

  3. Cliquez sur Enregistrer pour appliquer la modification.

Modifications du sélecteur CSS

Les modifications du sélecteur CSS vous permettent de cibler des éléments précisément en utilisant la syntaxe standard du sélecteur CSS.

  1. Choisissez Sélecteur CSS comme type de modification.

  2. Saisissez le sélecteur dans le champ Sélecteur d’éléments CSS.

**Exemples de sélecteurs :**

| Sélecteur | Cibles |
| -------- | ------- |
| `#hero-banner` | Élément avec ID « hero-banner » |
| `.cta-button` | Tous les éléments de la classe « cta-button » |
| `en-tête et a` | Liens dans la navigation, dans l’en-tête |
| `[data-offer=« premium »]` | Éléments avec un attribut de données spécifique |

  1. Choisissez un Type d’action et spécifiez les informations/contenus requis.

    • Définir le contenu - Saisissez le texte dans le champ Contenu de l’élément identifié par la valeur Sélecteur d’éléments CSS.

    • Définir l’attribut - Spécifiez un attribut à associer au sélecteur CSS actuel afin que l’élément puisse être identifié par cet attribut. Saisissez un nom dans le champ Nom de l’attribut et une valeur dans le champ Contenu. Si l’attribut existe déjà, la valeur est mise à jour ; dans le cas contraire, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.

    Modification du sélecteur CSS de l’éditeur non visuel {width="800" modal="regular"}

  2. (Facultatif) Cliquez sur Ajouter une personnalisation et utilisez le éditeur de personnalisation pour créer une personnalisation personnalisée du contenu.

Modifications de page

Vous pouvez ajouter du code personnalisé à l’aide du type de modification Page <head> . L’élément <head> est un conteneur pour les métadonnées et est placé entre la balise <html> et la balise <body>. Dans ce cas, le code n’attend pas les événements de chargement de page ou de corps, il est exécuté au début du chargement de la page.

L’élément <head> est généralement utilisé pour ajouter du code JavaScript ou CSS en haut de la page. Les sélecteurs pour les actions visuelles suivantes dépendent des éléments HTML ajoutés dans cet onglet.

NOTE
Le code personnalisé s’exécute dans le navigateur du visiteur. Assurez-vous que votre code est sécurisé, testé et n’a pas d’impact négatif sur les performances des pages ou sur l’expérience utilisateur.

  1. Choisissez Page<head> comme type de modification.

  2. Ajoutez votre code personnalisé dans la zone Contenu.

    note caution
    CAUTION
    Vous pouvez uniquement ajouter les éléments <script> et <style> à la section <head>. L’ajout de balises <div> et d’autres éléments peut entraîner le remplissage des éléments <head> restants dans le <body>.

    Modification de l’en-tête de page de l’éditeur non visuel {width="800" modal="regular"}

  3. (Facultatif) Cliquez sur Ajouter une personnalisation et utilisez le éditeur de personnalisation pour créer une personnalisation personnalisée du contenu.

Gérer les modifications manage-modifications

Toutes les modifications que vous créez sont suivies et peuvent être gérées à partir du panneau Modifications de l’éditeur visuel et de l’éditeur non visuel. Cliquez sur l’icône Modifications dans la barre d’outils de gauche pour afficher toutes les modifications.

Chaque enregistrement de modification comprend :

  • L’élément cible ou le sélecteur
  • Type de modification (modification, masquage ou insertion, par exemple)
  • Un aperçu de la modification

Panneau Modifications {width="500" modal="regular"}

Modification d’une modification

  1. Dans la liste Modifications, recherchez la modification que vous souhaitez modifier.

  2. Cliquez sur l’icône Plus de menu ( … ) et choisissez Modifier.

  3. Mettez à jour les propriétés de modification si nécessaire.

  4. Cliquez sur Enregistrer pour enregistrer vos modifications.

Suppression d’une modification

  1. Dans la liste Modifications, recherchez la modification à supprimer.

  2. Cliquez sur l’icône Plus de menu ( … ) et choisissez Supprimer la modification.

  3. Confirmez la suppression lorsque vous y êtes invité.

Prévisualiser vos modifications

Avant de publier, prévisualisez la manière dont vos modifications sont présentées aux visiteurs et visiteuses.

Utilisez les options de prévisualisation de l’appareil dans la partie supérieure de l’éditeur visuel pour afficher vos modifications sur :

  • Bureau
  • Tablette
  • Mobile

Modifier la taille de l’appareil pour l’aperçu {width="550" modal="regular"}

L’aperçu se met à jour pour afficher le rendu des modifications sur chaque taille d’appareil.

Utilisez la barre d’URL pour accéder à différentes pages dans la configuration de votre canal web. Vérifiez ensuite que les modifications s’appliquent correctement aux pages ciblées en fonction de vos règles de correspondance d’URL.

Suivi des clics pour les expériences web web-click-tracking

Suivez les interactions des utilisateurs avec les éléments pour mesurer l’engagement et recueillir des informations. Les données de suivi des clics sont disponibles dans vos rapports d’engagement et peuvent être utilisées pour mesurer l’efficacité de vos modifications de l’expérience web.

Lorsque votre expérience web est activée (en direct), vous pouvez également créer des rapports à l’aide d’Adobe Customer Journey Analytics (qui nécessite un abonnement au produit). Pour améliorer le suivi de l’expérience web, vous pouvez également suivre les clics sur n’importe quel élément spécifique de votre site web. Le tracking permet d’afficher le nombre de clics effectués sur cet élément dans les rapports web.

Pour plus d’informations sur Customer Journey Analytics et la création de rapports web, consultez la documentation de Customer Journey Analytics 🔗.

  1. Sélectionnez un élément dans l’éditeur d’expérience web, tel qu’une image ou un lien.

  2. Dans les propriétés de l’élément ou dans la barre d’outils contextuelle, cliquez sur l’icône Clic sur l’élément de suivi.

    Activer le suivi des clics pour les éléments d’expérience web {width="600" modal="regular"}

  3. Ouvrez la liste Suivi des clics dans le panneau de gauche et modifiez la valeur Actions suivies pour identifier cette interaction dans vos rapports.

    Définir l’identification du suivi des clics pour l’expérience web {width="600" modal="regular"}

6ef00091-a233-4243-8773-0da8461f7ef0