DocumentazioneJourney OptimizerGuida di Journey Optimizer

Gestire le modifiche web manage-web-modifications

Ultimo aggiornamento: 9 settembre 2026

Creato per:

  • Intermedio
  • Principiante
  • Utente

In questa pagina: scopri come rivedere, eliminare e annullare le modifiche applicate alla pagina web dal riquadro Modifiche e come aggiungere selettore CSS e modifiche all’intestazione di pagina direttamente in Adobe Journey Optimizer.

style
shade-box

Puoi gestire facilmente tutti i componenti, le regolazioni e gli stili aggiunti alla pagina web. Puoi anche aggiungere modifiche direttamente dal riquadro dedicato.

Utilizzare il riquadro Modifiche use-modifications-pane

  1. Seleziona l’icona Modifiche per visualizzare il riquadro corrispondente a sinistra.

  2. Puoi rivedere tutte le modifiche apportate alla pagina.

  3. Seleziona una modifica indesiderata e fai clic sull’opzione Elimina modifica dal pulsante Altre azioni per rimuoverla.

    note caution
    CAUTION
    Procedi con cautela durante l’eliminazione di un’azione, in quanto può influire sulle azioni successive.

  4. Se si sta creando un’applicazione a pagina singola, è possibile applicare qualsiasi modifica ad altre visualizzazioni. Ulteriori informazioni

  5. Per eliminare più modifiche contemporaneamente, fai clic sul pulsante Seleziona sopra il riquadro Modifiche, controlla le modifiche e fai clic sull’icona Elimina.

  6. Utilizza il pulsante Altre azioni sopra il riquadro Modifiche per eliminare tutte le modifiche contemporaneamente.

  7. Puoi anche eliminare solo le modifiche non valide, ovvero quelle ignorate da altre modifiche. Ad esempio, se si modifica il colore di un testo e successivamente si elimina tale testo, la modifica del colore non sarà più valida in quanto il testo non esiste più.

  8. Puoi annullare e ripristinare le azioni utilizzando il pulsante Annulla/Ripristina in alto a destra dello schermo.

    Fai clic e tieni premuto il pulsante per passare dalle opzioni Annulla alle opzioni Ripristina. Quindi fai clic sul pulsante stesso per applicare l’azione desiderata.

Aggiungi modifiche dal riquadro dedicato add-modifications

Quando modifichi una pagina utilizzando il designer Web, puoi aggiungere nuove modifiche al contenuto direttamente dal riquadro Modifiche, senza dover selezionare un componente e modificarlo dall’interfaccia del designer Web. Segui i passaggi seguenti.

  1. Nel riquadro Modifiche fare clic sul pulsante Altre azioni.

  2. Seleziona Aggiungi una modifica.

  3. Selezionare il tipo di modifica:

  4. Inserisci il contenuto e Salva le modifiche.

  5. Fai clic sul pulsante Altre azioni accanto alla modifica e seleziona Informazioni per visualizzarne i dettagli.

Selettore CSS css-selector

Per aggiungere una modifica del tipo Selettore CSS, effettua le seguenti operazioni.

  1. Seleziona Selettore CSS come tipo di modifica.

  2. Il campo Selettore elemento CSS consente di trovare e selezionare gli elementi HTML (o i nodi nella struttura DOM) su cui si desidera applicare le modifiche.

  3. Selezionare un tipo di azione (Imposta contenuto o Imposta attributo) e inserire le informazioni/il contenuto richiesti.

    • Imposta contenuto: specifica il contenuto da inserire nell’elemento identificato dal campo Selettore elemento CSS.

    • Imposta attributo: specifica un attributo da associare al selettore CSS corrente in modo che possa essere identificato anche da questo attributo. A tale scopo, immettere un nome nel campo Nome attributo e un valore nel campo Contenuto. Se l’attributo esiste già, il valore viene aggiornato; in caso contrario viene aggiunto un nuovo attributo con il nome e il valore specificati.

Pagina <head> page-head

È possibile aggiungere codice personalizzato utilizzando il tipo di modifica Pagina<head>.

L’elemento <head> è un contenitore per metadati (dati sui dati) e si trova tra il tag <html> e il tag <body>. In questo caso, il codice non attende gli eventi di caricamento del corpo del testo o della pagina, ma viene eseguito all’inizio del caricamento della pagina.

L’elemento <head> viene comunemente utilizzato per aggiungere codice JavaScript o CSS nella parte superiore della pagina. I selettori per le azioni visive successive dipendono dagli elementi HTML aggiunti in questa scheda.

Per aggiungere una modifica del tipo Pagina<head>, eseguire la procedura seguente.

  1. Selezionare Pagina<head> come tipo di modifica.

  2. Aggiungi il codice personalizzato nella casella Contenuto.

    note caution
    CAUTION
    È possibile aggiungere solo <script> e <style> elementi alla sezione <head>. L'aggiunta di <div> tag e di altri elementi potrebbe causare la comparsa di <head> elementi rimanenti in <body>.

  3. Fai clic sul pulsante Opzioni di modifica avanzate. Viene aperto l’editor di personalizzazione.

    Puoi sfruttare l’editor di personalizzazione Journey Optimizer con tutte le sue funzionalità di personalizzazione e authoring. Ulteriori informazioni

Esempi di codice personalizzato custom-code-examples

È possibile utilizzare il tipo di modifica Pagina<head> per:

  • Utilizza JavaScript in linea o collega a un file JavaScript esterno.

    Ad esempio, per modificare il colore di un elemento:

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

  • Configurare uno stile in linea o un collegamento a un foglio di stile esterno.

    Ad esempio, per definire una classe per un elemento sovrapposto:

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

Best practice per il codice personalizzato custom-code-best-practices

Racchiudi sempre il codice personalizzato in un elemento.

Ad esempio:

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

Nel caso in cui siano necessarie modifiche, apporta modifiche all’interno di questo contenitore.

Se non è più necessario il codice personalizzato, è sufficiente lasciare vuoto questo contenitore, ma non rimuoverlo. Ciò assicura che altre modifiche di esperienza non siano influenzate.

Non eseguire azioni document.write negli script di codice personalizzati.
Gli script vengono eseguiti in modo asincrono. Questo causa spesso la visualizzazione delle azioni document.write nella posizione sbagliata della pagina. Non è consigliabile utilizzare document.write negli script creati nel codice personalizzato.
Se crei un elemento e quindi lo modifichi, non eliminare l'elemento originale.
Ogni modifica crea un nuovo elemento nel pannello Modifiche. La seconda azione modifica l’elemento 1: se lo elimini, questa azione non avrà più niente da modificare, risultando nella mancata applicazione della modifica.
Presta attenzione quando utilizzi il tipo di modifica​​ Pagina <head>​per due campagne che interessano lo stesso URL.
Se utilizzi il tipo di modifica Pagina<head> per due campagne che interessano lo stesso URL, il JavaScript viene inserito nella pagina da entrambe le campagne. Journey Optimizer determina automaticamente l’ordine del contenuto consegnato. Assicurati che il codice non dipenda dal posizionamento. Spetta a te verificare che non vi siano conflitti nel codice.
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