DocumentazioneJourney Optimizer B2BDocumentazione di Journey Optimizer B2B Edition

[Beta]{class="badge informative" title="Questa funzione è attualmente in versione beta limitata"}

Progettazione esperienza web

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

Creato per:

  • Utente

Dopo aver creato un'esperienza Web, utilizza lo spazio di progettazione del contenuto per definire le modifiche da applicare alle pagine Web.

recommendation-more-help

Prerequisiti

Prima di poter progettare esperienze web, assicurati di soddisfare i seguenti requisiti:

  • Un amministratore di prodotto ha configurato uno o più canali web per definire gli URL (pagine) da includere per un’esperienza web. Per ulteriori informazioni, vedere Configurazioni del canale Web.

  • Il sito Web include Adobe Experience Platform Web SDK (alloy.js) implementato per l'identificazione dei visitatori e la distribuzione dei contenuti. È richiesto Adobe Experience Platform Web SDK versione 2.16 o successiva.

  • Hai le autorizzazioni necessarie per creare e gestire esperienze Web in un percorso:

    • Campagne > Gestisci campagne - Necessario per aggiungere o aggiornare un nodo di azione di personalizzazione Web.
    • Campagne > Visualizza campagne - Necessario per visualizzare i dettagli dei nodi di un'azione di personalizzazione Web.
style
shade-box
IMPORTANT
Prima di progettare un’esperienza web, accertati di aver installato l’estensione del browser Adobe Experience Cloud Visual Editing Helper per il browser web. Questa estensione è necessaria per aprire, creare e visualizzare in anteprima le pagine Web in modo affidabile nello spazio di progettazione di Journey Optimizer B2B edition Web Experience.
Google Chrome e Microsoft Edge sono attualmente gli unici browser che supportano l’estensione e l’authoring di esperienze web in Journey Optimizer B2B edition. Per ulteriori informazioni, vedere Installare l'estensione Helper per editing video.

Editor esperienza web

Journey Optimizer B2B edition fornisce due tipi di editor per la progettazione di modifiche Web:

Editor
Descrizione
Ideale per
Editor visivo
Un editor di WYSIWYG (What You See Is What You Get) che visualizza il sito Web e consente di selezionare e modificare direttamente gli elementi. Richiede l'estensione Helper per editing video nel browser Web Google Chrome o Microsoft Edge.
Apportare modifiche visive agli elementi visibili della pagina, ad esempio testo, immagini, pulsanti e banner.
Editor non visivo
Un editor basato su codice per applicare modifiche che non possono essere apportate tramite l’editor visivo.
Esecuzione del targeting di elementi difficili da selezionare visivamente, applicazione di modifiche CSS avanzate o modifica di elementi nascosti.

Nelle proprietà dell'esperienza Web, utilizza l'opzione Editor visivo per determinare il tipo di editor. Abilita l’opzione per utilizzare l’editor visivo o disabilitala per utilizzare l’editor non visivo.

Opzione editor visivo abilitata {width="400"}

Editor visivo visual-editor

L’editor visivo carica le pagine web all’interno di un iframe, dove puoi selezionare gli elementi e applicare le modifiche direttamente nell’anteprima della pagina. Completa i seguenti passaggi per utilizzare l’editor visivo per progettare l’esperienza web:

  1. Con la scheda Contenuto visualizzata nella pagina dei dettagli dell'esperienza Web, fai clic su Modifica esperienza Web nel pannello di destra.

    L’editor visivo carica il sito web in base alla configurazione del canale web.

    Editor visivo esperienza Web {width="800" modal="regular"}

  2. Se necessario, fai clic su Sfoglia in alto a destra e utilizza la barra di navigazione del sito per caricare la pagina specifica da modificare.

    Puoi anche immettere l’URL della pagina nel campo nella parte superiore.

    note note
    NOTE
    Assicurati che la pagina caricata corrisponda ai pattern URL definiti nella configurazione del canale web. Fai clic su Visualizza dettagli configurazione in alto a destra per visualizzare l'URL o le regole di corrispondenza della pagina per la configurazione del canale Web selezionata.

    Modalità Sfoglia nell'editor visivo {width="700" modal="regular"}

    Fai clic su Progettazione in alto a destra per caricare la pagina nello spazio di progettazione.

  3. Per definire la modalità di modifica della pagina visualizzata per l’esperienza web, puoi:

  4. Ripeti il passaggio 2 per caricare altre pagine da includere nell’esperienza web e ripeti il passaggio 3 per definire le modifiche di pagina.

  5. Rivedi le modifiche e apporta le modifiche necessarie.

  6. Al termine delle modifiche, fai clic sulla freccia a sinistra sopra l’editor per tornare alle proprietà dell’esperienza web.

Modificare gli elementi

Fai clic su un elemento nella pagina visualizzata per selezionarlo. Un bordo blu indica l’elemento selezionato e viene visualizzata una barra degli strumenti contestuale con opzioni di modifica.

Selezionare un elemento da modificare {width="700" modal="regular"}

Le opzioni della barra degli strumenti dipendono dal tipo di componente selezionato:

Azione
Descrizione
Opzioni testo
Modifica la classe o lo stile del testo dell’elemento selezionato.
Scegli immagine
Sostituisci l’origine dell’immagine o aggiungi un’immagine all’elemento.
Modifica collegamento / Aggiungi collegamento
Modifica o aggiungi un URL di collegamento.
Disponi
Sposta l'elemento selezionato indietro o avanti all'interno della visualizzazione.
Aggiungere la personalizzazione
Inserire la personalizzazione.
Elemento traccia clic
Aggiungi il tracciamento dei clic per l’elemento.
Elimina
Rimuovi l’elemento selezionato dalla pagina.

Per un elemento selezionato, le proprietà nel pannello di destra cambiano per riflettere lo stile e le azioni disponibili. Fai clic su un’icona di azione nella parte superiore del pannello per duplicare, tracciare, eliminare o nascondere l’elemento selezionato.

fare clic sull'icona di un'azione per l'elemento selezionato {width="300"}

Elementi di testo

  1. Seleziona un elemento di testo nella pagina.

  2. Immettere il nuovo contenuto di testo oppure selezionare una stringa di testo e immettere il testo sostitutivo.

  3. (Facoltativo) Utilizza le opzioni di formattazione del testo, ad esempio grassetto, corsivo e allineamento.

  4. Fai clic all’esterno dell’elemento di testo per applicare la modifica.

Per ulteriori informazioni sulle opzioni di stile del testo per i componenti di testo, vedere Componenti contenuto.

Elementi immagine

  1. Seleziona un elemento immagine nella pagina.

  2. Fai clic sull'icona Scegli immagine nella barra degli strumenti contestuale o nel pannello di destra.

  3. Sfoglia e seleziona un’immagine dalla libreria delle risorse.

  4. Utilizza le opzioni di stile immagine nel pannello di destra, in base alle esigenze.

Elementi pulsante

  1. Seleziona un elemento pulsante sulla pagina.

  2. (Facoltativo) Immetti un nuovo testo per il pulsante oppure seleziona la stringa di testo e immetti il testo sostitutivo.

    Puoi utilizzare la personalizzazione per modificare il testo del pulsante utilizzando i dati dei profili dell’account o della persona.

  3. Utilizza le opzioni di stile del pulsante nel pannello di destra, in base alle esigenze.

Elementi contenitore

  1. Seleziona un elemento contenitore nella pagina.

  2. Utilizza le opzioni di stile del contenitore nel pannello di destra, in base alle esigenze.

Inserire nuovi componenti

Quando si seleziona l'icona + nella struttura di spostamento a sinistra dell'editor visivo, è possibile aggiungere i seguenti tipi di componenti alla pagina come modifica dell'esperienza Web:

  • Divisore - Utilizzare questo componente per inserire una linea di divisione per organizzare il layout e il contenuto dell'e-mail. Potete regolare gli attributi di stile, ad esempio il colore della linea, lo stile e l'altezza, dalle proprietà nel pannello di destra. Per ulteriori informazioni, vedere Divider in Componenti contenuto.
  • HTML - Utilizza questo componente per copiare e incollare il codice HTML nella struttura esistente. Consente di creare componenti HTML modulari gratuiti per riutilizzare alcuni contenuti esterni. Per ulteriori informazioni, vedere HTML in Componenti contenuto.
  • Immagine - Utilizzare questo componente per inserire un file di immagine nella pagina. Potete regolare gli attributi di stile, ad esempio la larghezza e l'altezza, dalle proprietà nel pannello di destra. Per ulteriori informazioni, vedere Immagine in Componenti contenuto.
  • Intestazione - Utilizzare questo componente per inserire il testo della classe di intestazione. Potete regolare gli attributi di stile, ad esempio il colore del testo, lo stile, il font e le dimensioni, dalle proprietà nel pannello di destra. Per ulteriori informazioni, vedere Testo in Componenti contenuto.
  • Paragrafo - Utilizzare questo componente per inserire un elemento di testo standard. Potete regolare gli attributi di stile, ad esempio il colore del testo, lo stile, il font e le dimensioni, dalle proprietà nel pannello di destra. Per ulteriori informazioni, vedere Testo in Componenti contenuto.
  • Collegamento - Utilizzare questo componente per inserire un collegamento di testo autonomo a un URL specificato. Potete regolare gli attributi di stile, ad esempio il colore del testo, lo stile, l'allineamento e le dimensioni, dalle proprietà nel pannello di destra.

Seleziona un tipo di componente a sinistra, quindi passa il cursore su un elemento adiacente al punto in cui desideri aggiungerlo.

Interfaccia dell'editor visivo - nuovo componente {width="800" modal="regular"}

Fai clic su uno dei pulsanti visualizzati per posizionare il componente:

  • *Inserisci prima - Inserisci il componente prima dell'elemento selezionato.
  • *Inserisci dopo - Inserisci il componente dopo l'elemento selezionato.

Per deselezionare un tipo di componente per l'inserimento, fare clic su ESC nel banner contestuale blu visualizzato nella parte superiore della pagina.

Editor non visivo non-visual-editor

Utilizza l’editor non visivo quando devi apportare modifiche che non possono essere facilmente apportate nell’editor visivo. Questo approccio basato su codice offre un controllo preciso sul targeting e sulla modifica degli elementi. Completa i seguenti passaggi per utilizzare l’editor non visivo per progettare l’esperienza web:

  1. Con la scheda Contenuto visualizzata nella pagina dei dettagli dell'esperienza Web, fai clic su Aggiungi modifica nel pannello di destra.

    L’editor non visivo carica una pagina basata sulla configurazione del canale web.

    Interfaccia editor non visivo {width="800" modal="regular"}

  2. Definisci la prima modifica da apportare.

    Nel pannello laterale sinistro viene visualizzato un elenco delle eventuali modifiche esistenti. Fai clic su Aggiungi per definire una nuova modifica. Se non sono state definite modifiche, il pannello utilizza per impostazione predefinita le opzioni Aggiungi modifica.

    • Scegli il tipo di modifica:

      table 0-row-2 1-row-2 2-row-2
      Tipo Descrizione
      Selettore CSS Elementi di destinazione che utilizzano una stringa del selettore CSS.
      Pagina Inserire HTML, CSS o JavaScript personalizzati negli elementi a livello di pagina, ad esempio <head> o <body>.

    • Configura i parametri di modifica in base al tipo:

      • Selettore CSS - Inserisci un selettore CSS valido per eseguire il targeting di elementi specifici.
      • Tipo azione - Scegliere l'azione da eseguire (modifica, nascondi, elimina, inserisci, sostituisci).
      • Contenuto - Fornisci il contenuto o lo stile da applicare.

  3. Fai clic su Salva per applicare la modifica.

Modifiche al selettore CSS

Le modifiche apportate al selettore CSS consentono di eseguire il targeting degli elementi con precisione utilizzando la sintassi standard del selettore CSS.

  1. Scegli Selettore CSS come tipo di modifica.

  2. Immetti il selettore nel campo Selettore elemento CSS.

**Selettori di esempio:**

| Selettore | Target |
| -------- | ------- |
| &quot;#hero-banner&quot; | Elemento con ID &quot;hero-banner&quot; |
| `.cta-button` | Tutti gli elementi con la classe `cta-button` |
| &quot;header nav a&quot; | Collegamenti all’interno della navigazione, all’interno dell’intestazione |
| `[data-offer=&quot;premium&quot;]` | Elementi con un attributo di dati specifico |

  1. Scegli un tipo di azione ​​e specifica le informazioni o il contenuto richiesti.

    • Imposta contenuto - Immettere il testo nel campo Contenuto per l'elemento identificato dal valore Selettore elemento CSS.

    • Imposta attributo - Specifica un attributo da associare al selettore CSS corrente in modo che l'elemento possa essere identificato da questo attributo. 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.

    Modifica del selettore CSS dell'editor non visivo {width="800" modal="regular"}

  2. (Facoltativo) Fai clic su Aggiungi personalizzazione e utilizza l'editor di personalizzazione per creare una personalizzazione personalizzata per il contenuto.

Modifiche pagina

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

NOTE
Il codice personalizzato viene eseguito nel browser del visitatore. Assicurati che il codice sia sicuro, testato e non influisca negativamente sulle prestazioni della pagina o sull’esperienza utente.

  1. Scegliere 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 il popolamento di <head> elementi rimanenti all'interno di <body>.

    Modifica intestazione pagina editor non visivo {width="800" modal="regular"}

  3. (Facoltativo) Fai clic su Aggiungi personalizzazione e utilizza l'editor di personalizzazione per creare una personalizzazione personalizzata per il contenuto.

Gestire le modifiche manage-modifications

Tutte le modifiche create vengono tracciate e possono essere gestite dal pannello Modifiche dell'editor visivo e dell'editor non visivo. Fai clic sull'icona Modifiche nella barra degli strumenti a sinistra per visualizzare tutte le modifiche.

Ogni record di modifica include:

  • L’elemento o il selettore di destinazione
  • Il tipo di modifica (ad esempio modifica, nascondi o inserisci)
  • Anteprima della modifica

Pannello modifiche {width="500" modal="regular"}

Modificare una modifica

  1. Nell'elenco Modifiche trovare la modifica che si desidera modificare.

  2. Fai clic sull'icona Altro menu ( … ) e scegli Modifica.

  3. Aggiorna le proprietà di modifica in base alle esigenze.

  4. Fai clic su Salva per salvare le modifiche.

Eliminare una modifica

  1. Nell'elenco Modifiche trovare la modifica che si desidera rimuovere.

  2. Fai clic sull'icona Altro menu ( … ) e scegli Elimina modifica.

  3. Quando richiesto, confermare la rimozione.

Anteprima delle modifiche

Prima della pubblicazione, visualizza in anteprima come vengono visualizzate le modifiche ai visitatori.

Utilizza le opzioni di anteprima del dispositivo nella parte superiore dell’editor visivo per visualizzare le modifiche su:

  • Desktop
  • Tablet
  • Dispositivi mobili

Modifica il dimensionamento del dispositivo per l'anteprima {width="550" modal="regular"}

L’anteprima viene aggiornata per mostrare il rendering delle modifiche su ogni dimensione del dispositivo.

Utilizza la barra URL per passare a pagine diverse all’interno della configurazione del canale web. Quindi, verifica che le modifiche vengano applicate correttamente alle pagine di destinazione in base alle regole di corrispondenza URL.

Tracciamento dei clic per esperienze web web-click-tracking

Tieni traccia delle interazioni dell’utente con gli elementi per misurare il coinvolgimento e raccogliere informazioni approfondite. I dati di tracciamento dei clic sono disponibili nei rapporti di coinvolgimento e possono essere utilizzati per misurare l’efficacia delle modifiche apportate all’esperienza web.

Quando la tua esperienza web è attivata (dal vivo), puoi anche creare rapporti utilizzando Adobe Customer Journey Analytics (che richiede un abbonamento al prodotto). Per migliorare il monitoraggio dell’esperienza web, puoi anche tenere traccia dei clic su qualsiasi elemento specifico del sito web. Il tracciamento ti consente di visualizzare il numero di clic per tale elemento nei rapporti web.

Per ulteriori informazioni su Customer Journey Analytics e sulla creazione di report Web, consulta la documentazione di Customer Journey Analytics.

  1. Seleziona un elemento nell’editor esperienze web, ad esempio un’immagine o un collegamento.

  2. Nella barra degli strumenti contestuale o delle proprietà dell'elemento fare clic sull'icona Fai clic su elemento traccia.

    Abilita il tracciamento dei clic per gli elementi esperienza Web {width="600" modal="regular"}

  3. Apri l'elenco dei brani per clic nel pannello a sinistra e modifica il valore Azioni tracciate per identificare questa interazione nei rapporti.

    Imposta l'identificazione del tracciamento dei clic per l'esperienza Web {width="600" modal="regular"}

6ef00091-a233-4243-8773-0da8461f7ef0