DocumentationJourney OptimizerGuide de Journey Optimizer

Gérer les modifications web manage-web-modifications

Dernière mise à jour : 16 septembre 2026

Créé pour :

  • Intermédiaire
  • Débutant
  • Utilisateur/utilisatrice

Sur cette page : découvrez comment réviser, supprimer et annuler les modifications apportées à votre page web à partir du volet Modifications. Apprenez également comment ajouter des modifications au sélecteur CSS et à l’en-tête de page directement dans Adobe Journey Optimizer.

style
shade-box

Vous pouvez facilement gérer tous les composants, réglages et styles que vous avez ajoutés à votre page web. Vous pouvez également ajouter des modifications directement à partir du volet dédié.

Utiliser le volet Modifications use-modifications-pane

  1. Sélectionnez l’icône Modifications pour afficher le volet correspondant à gauche.

  2. Vous pouvez passer en revue chacune des modifications que vous avez apportées à la page.

  3. Sélectionnez une modification non souhaitée et cliquez sur l’option Supprimer la modification à partir du bouton Plus d’actions pour la supprimer.

    note caution
    CAUTION
    Procédez avec précaution lors de la suppression d’une action, car elle peut avoir un impact sur les actions suivantes.

  4. Si vous créez une application à page unique, vous pouvez appliquer n’importe quelle modification aux autres vues. En savoir plus

  5. Pour supprimer plusieurs modifications en même temps, cliquez sur le bouton Sélectionner en haut du volet Modifications, vérifiez les modifications de votre choix et cliquez sur l’icône Supprimer.

  6. Cliquez sur le bouton Plus dʼactions en haut du volet Modifications pour supprimer toutes les modifications à la fois.

  7. Vous pouvez également supprimer uniquement les modifications non valides, c’est-à-dire les modifications qui ont été remplacées par d’autres modifications. Par exemple, si vous modifiez la couleur d’un texte, puis que vous le supprimez, la modification de couleur devient non valide car le texte n’existe plus.

  8. Vous pouvez annuler et rétablir des actions à l’aide du bouton Annuler/rétablir en haut à droite de l’écran.

    Cliquez sur le bouton et maintenez-le enfoncé pour passer de l’option Annuler à l’option Rétablir, et inversement. Cliquez ensuite sur le bouton lui-même pour appliquer l’action souhaitée.

Ajouter des modifications à partir du volet dédié add-modifications

Lors de la modification d’une page à l’aide du concepteur web, vous pouvez ajouter de nouvelles modifications à votre contenu directement à partir du volet Modifications, sans avoir à sélectionner un composant et à le modifier dans l’interface du concepteur web. Suivez les étapes ci-après.

  1. Dans le volet Modifications, cliquez sur le bouton Plus d’actions.

  2. Sélectionnez Ajouter une modification.

  3. Sélectionnez le type de modification :

  4. Saisissez votre contenu et enregistrez vos modifications.

  5. Cliquez sur le bouton Plus d’actions en regard de votre modification et sélectionnez Infos pour afficher ses détails.

Sélecteur CSS css-selector

Pour ajouter une modification de type Sélecteur CSS, suivez les étapes ci-dessous.

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

  2. Le champ Sélecteur d’éléments CSS vous aide à rechercher et à sélectionner les éléments HTML (ou les nœuds dans l’arborescence DOM) sur lesquels vous souhaitez appliquer les modifications.

  3. Sélectionnez un type d’action (Définir le contenu ou Définir l’attribut) et renseignez les informations/le contenu requis.

    • Définir le contenu : indiquez le contenu qui va dans l’élément identifié par le champ Sélecteur d’éléments CSS.

    • Définir l’attribut : indiquez un attribut à associer au sélecteur CSS actuel afin que ce sélecteur puisse ensuite être également identifié par cet attribut. Pour ce faire, 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.

Page <head> page-head

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.

Pour ajouter une modification de type Page<head>, suivez les étapes ci-dessous.

  1. Sélectionnez 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 risque d’entraîner l’apparition des éléments <head> restants dans la section <body>.

  3. Cliquez sur le bouton Options de modification avancées. L’éditeur de personnalisation s’ouvre.

    Vous pouvez utiliser l’éditeur de personnalisation de Journey Optimizer et toutes ses fonctionnalités de personnalisation et de création. En savoir plus

Exemples de code personnalisé custom-code-examples

Vous pouvez utiliser le type de modification Page<head> pour :

  • Utilisez JavaScript intégré ou un lien vers un fichier JavaScript externe.

    Par exemple, pour modifier la couleur d’un élément :

    code language-none 
    <script type="text/javascript">
document.getElementById("element_id").style.color = "blue";
</script>

  • Configurez un style intégré ou un lien vers une feuille de style externe.

    Par exemple, pour définir une classe pour un élément de recouvrement :

    code language-none 
    <style>
.overlay
{ position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; }
</style>

Bonnes pratiques relatives au code personnalisé custom-code-best-practices

Enveloppez systématiquement le code personnalisé dans un élément.

Par exemple :

code language-none 
<script>
// Code goes here
</script>

Si des modifications sont nécessaires, apportez des modifications dans ce conteneur.

Si vous n’avez plus besoin du code personnalisé, laissez ce conteneur vide, mais ne le supprimez pas. Cela permet de s’assurer que d’autres modifications d’expérience ne sont pas affectées.

N’effectuez pas d’actions document.write dans les scripts de code personnalisé.
Les scripts sont exécutés de manière asynchrone. Sinon, les actions document.write apparaissent souvent au mauvais endroit sur votre page. Utiliser document.write dans des scripts créés avec du code personnalisé n’est pas recommandé.
Si vous créez un élément et que vous le modifiez par la suite, ne supprimez pas l’élément d’origine.
Chaque modification crée un nouvel élément dans le panneau Modifications. La deuxième action modifiant l’élément 1, si vous supprimez l’élément 1, cette action n’a plus rien à modifier, la modification ne fonctionne donc plus.
Faites preuve de prudence lors de l’utilisation du type de modification​​ Page <head>​pour deux campagnes ayant un impact sur la même URL.
Si vous utilisez le type de modification Page<head> pour deux campagnes ayant un impact sur la même URL, le code JavaScript est injecté dans la page à partir des deux campagnes. Journey Optimizer détermine automatiquement l’ordre du contenu diffusé. Assurez-vous que le code ne dépend pas de l’emplacement. C’est à vous de vous assurer qu’il n’y a aucun conflit dans le code.
AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to review, delete, and undo changes applied to a web page from the Modifications pane, and how to add CSS selector and page head modifications directly in Journey Optimizer.

Intents:

  • Review the changes made to a page from the Modifications pane
  • Delete a single modification, multiple modifications, all modifications, or only invalid modifications
  • Undo and redo actions using the Undo/Redo button
  • Add a modification directly from the pane as a CSS Selector or Page <head> type
  • Configure a CSS Selector modification with a Set Content or Set Attribute action
  • Add custom JavaScript or CSS code through a Page <head> modification

Glossary:

  • Modifications pane: The pane used to navigate through and manage all components, adjustments, and styles added to a web page, and to add new modifications (product-specific)
  • Invalid modifications: Changes that were overridden by other changes, for example a color modification whose target text was later deleted (product-specific)
  • CSS Selector modification: A modification type that uses the CSS Element Selector field to identify HTML elements (DOM nodes) and apply a Set Content or Set Attribute action (product-specific)
  • Page <head> modification: A modification type for adding custom code to the <head> container, executed at the beginning of page load (product-specific)
  • Set Content: A CSS Selector action that specifies the content placed into the element identified by the CSS Element Selector (product-specific)
  • Set Attribute: A CSS Selector action that associates an attribute (name and value) with the current CSS selector; an existing attribute’s value is updated, otherwise a new attribute is added (product-specific)

Guardrails:

  • Proceed with care when deleting an action, as it may impact subsequent actions.
  • You can only add <script> and <style> elements to the <head> section; adding <div> tags and other elements might cause remaining <head> elements to pop into the <body>.
  • Do not perform document.write actions in custom code scripts, as scripts are executed asynchronously and this often causes document.write to appear in the wrong place.
  • If you create an element and then modify it, do not delete the original element, because the modifying action would no longer have anything to modify and would stop working.
  • If you use the Page <head> modification type for two campaigns impacting the same URL, JavaScript is injected from both campaigns and Journey Optimizer automatically determines the order; make sure the code does not depend on placement and has no conflicts.
  • Always wrap custom code in one element; if the code is no longer needed, leave the container empty but do not remove it.

Terminology:

  • Canonical name: Modifications pane — Acronym: n/a — variants: Modifications panel
  • Synonyms: “CSS Element Selector” = “CSS selector field used to find and select HTML elements”
  • Do not confuse: “Set Content” (specifies content placed into the selected element) ≠ “Set Attribute” (associates an attribute name and value with the CSS selector)
  • Do not confuse: “Delete modification” (removes one modification) ≠ “Undo” (cancels an action, reversible with Redo)
  • Do not confuse: “invalid modifications” (changes overridden by other changes) ≠ modifications you intentionally delete

FAQ:

  • Q: How do I delete all modifications at once? — Use the More actions button on top of the Modifications pane to delete all modifications at once.
  • Q: What are invalid modifications? — Changes that were overridden by other changes, such as a color modification whose target text was later deleted; you can delete only the invalid modifications.
  • Q: What can I add in a Page <head> modification? — Only <script> and <style> elements; adding <div> tags and other elements might cause remaining <head> elements to pop into the <body>.
  • Q: What is the difference between Set Content and Set Attribute? — Set Content specifies the content placed into the element identified by the CSS Element Selector; Set Attribute associates an attribute name and value with the CSS selector, updating it if it already exists.
  • Q: Can I undo changes? — Yes, use the Undo/Redo button on the top right; click and hold to switch between Undo and Redo, then click to apply.
recommendation-more-help
journey-optimizer-help