Gestire le modifiche web manage-web-modifications

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. Per eliminare più modifiche contemporaneamente, fai clic sul pulsante Seleziona sopra il riquadro Modifiche, controlla le modifiche e fai clic sull'icona Elimina.

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

  6. 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ù.

  7. 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 di sovrapposizione:

    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

Racchiudere 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 del contenitore.

Se non hai più bisogno del codice personalizzato, lascia vuoto questo contenitore, ma non rimuoverlo. In questo modo, non influisce sulle altre modifiche dell’esperienza.

Non eseguire azioni document.write negli script di codice personalizzato.
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 si crea un elemento e quindi lo si modifica, 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ù nulla da modificare e la modifica non funzionerà più.
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. Sta a te verificare che il codice non contenga conflitti.
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76