Utilizzo dell'editor visivo

Utilizza l'editor di codice per aggiungere il codice JavaScript globale o CSS alla tua pagina.

Interfaccia utente

L'editor visivo di Optimize comprende due componenti visivi: la barra dell'app e la tavolozza dell'editor, che viene visualizzata nella pagina web da modificare (lapagina dell'editor).

Barra dell'app

La barra dell'app, che viene visualizzata nella parte superiore della pagina, include informazioni utili per identificare l'esperienza, come il suo nome e stato, il nome della variante, il numero di modifiche apportate, la diagnostica e la guida.  Scopri di più sulla riga superiore nell'articolo Presentazione dell'editor visivo.

Riga superiore

La riga superiore della barra delle app (in grigio scuro) include il nome e lo stato dell'esperienza, il nome della variante, il menu delle preimpostazioni del dispositivo, il pulsante Modifiche e la diagnostica, trattata in altre sezioni del Centro assistenza.

Scopri di più sulla riga superiore:

Riga inferiore

La riga inferiore della barra dell'app (in grigio chiaro) contiene queste funzionalità, descritte in modo più dettagliato di seguito:

  • Selettore elementi
  • Breadcrumb
  • Editor di codice
  • Modalità interattiva
  • Impostazioni di spostamento

 

Selettore elementi e selezione multipla

Il selettore elementi [Icona del selettore elementi] ti consente di selezionare più elementi della tua pagina web e applicare a tutti le stesse modifiche, facendoti risparmiare tempo. Ad esempio, puoi utilizzarlo per aumentare dello stesso valore le dimensioni carattere di tutti i pulsanti nella barra di navigazione superiore.

Per iniziare, fai clic su un elemento della pagina e poi sul pulsante selettore elementi [Icona del selettore elementi] nella barra dell'app. Verrà visualizzato il selettore elementi.

Suggerimento: tieni premuto il tasto Maiusc per selezionare più elementi da modificare.

Nel campo del selettore elementi è visualizzato l'elemento attualmente selezionato (ad es. #header>a>img) e il numero totale di elementi selezionati (ad es. 1. ) che si aggiorna in modo dinamico man mano che selezioni gli elementi sulla pagina. Puoi anche digitare direttamente il testo nel campo del selettore elementi (ad es. #login) per trovare e selezionare gli elementi ancora più velocemente.

Le caselle di controllo per Utilizza ID elemento e Utilizza classe elemento sono selezionate per impostazione predefinita e consentono all'editor visivo di selezionare l'ID e la classe corretti quando fai clic su un elemento della tua pagina. Lascia selezionate le caselle "Utilizza ID elemento" e "Utilizza classe elemento" se sai che gli attributi dell'elemento sono statici.

Se l'ID e/o la classe di un elemento vengono generati dinamicamente (ad es. da un sito web dinamico o da un sistema di gestione dei contenuti), potrebbe essere opportuno impedire all'editor visivo di rilevarli. Utilizza le seguenti caselle di controllo per un controllo più capillare durante la creazione dei selettori:

  • Utilizza ID elemento: deseleziona la casella di controllo se l'ID elemento è dinamico.
  • Utilizza classe elemento: deseleziona la casella di controllo se l'ID elemento è dinamico.

Scopri di più nella sezione Creare il selettore CSS di seguito.

Breadcrumb

Quando fai clic sulla tua pagina web, l'editor visivo seleziona l'elemento più profondo dell'area selezionata. I breadcrumb si trovano al centro della barra dell'app e mostrano il percorso della selezione nella struttura della pagina.

Fai clic sugli elementi nei breadcrumb per selezionare gli elementi predecessori (che possono occupare la stessa area e influenzare le proprietà visibili di quell'area, come l'immagine di sfondo o il colore). Passa il mouse sopra gli elementi predecessori nei breadcrumb per esaminare l'area occupata da ciascun elemento. Fai clic e seleziona l'elemento e utilizza la tavolozza dell'editor per esaminare le proprietà influenzate.

Editor avanzato: screenshot del selettore CSS

Suggerimento avanzato:
Fai clic sulla parentesi angolare (">") accanto a un elemento per selezionare un elemento predecessore.

La selezione di un elemento nell'editor visivo determina a quale selettore CSS verranno applicate le modifiche. Il valore del selettore è significativo perché viene utilizzato quando l'esperienza viene eseguita per i visitatori.

Questo è l'algoritmo utilizzato dall'editor per creare il selettore:

  • Trasferisci i predecessori nel DOM fino a che sia possibile identificarne uno in modo univoco
    • In base al suo attributo ID
    • In base a una classe utilizzata solo da quell'elemento nella pagina
    • Come il <BODY> del documento
  • Ritorna in basso all'elemento selezionato e:
    • Utilizza il nome del tag se c'è solo un elemento secondario con quel tag
    • Altrimenti, utilizza il selettore :nth-of-type
Suggerimenti per i selettori CSS
  • È sempre preferibile scegliere come target elementi con un ID o una classe unica o con un predecessore vicino che li contenga. In questo modo le varianti si conservano più facilmente quando ci sono piccole modifiche alla struttura della pagina.
  • Quando utilizzi le classi come identificatori univoci, verifica di utilizzare una pagina rappresentativa come pagina dell'editor (e non, ad esempio, una pagina di risultati dei prodotti con un solo prodotto).
  • Puoi sempre modificare il selettore CSS di una modifica e digitare il tuo selettore. L'editor evidenzierà i nuovi elementi abbinati.
  • Puoi disattivare le opzioni di utilizzo di un ID o di una classe univoca per tagliare la gerarchia di un selettore. Questa operazione può essere utile se questi attributi sono diversi e utilizzano un CMS o un identificatore di database.

Editor di codice

Oltre ad apportare modifiche nell'editor visivo, puoi utilizzare l'editor di codice di Optimize per aggiungere il codice JavaScript globale e CSS direttamente alla tua pagina web.

Per aggiungere il codice JavaScript globale o CSS alla tua pagina, fai clic sul pulsante editor di codice Incorpora nella barra dell'app:

Il pulsante dell

Aggiungere il codice CSS

Per aggiungere il codice CSS direttamente alla tua pagina:

Fai clic su CSS:

Menu dell

Verrà visualizzato l'editor di codice CSS:

Screenshot dell

Scrivi (o incolla) il codice CSS nel campo di testo e fai clic su Salva.

Nota: le modifiche al testo, all'HTML e ad altri stili non CSS (ad es. lo stile degli elementi) non sono visibili e non saranno interessate da quelle apportate al codice CSS.

Converti in HTML

Se devi modificare il codice CSS in una variante, ad esempio per aggiungere stili non supportati come prefissi di fornitori di browser, commenti al codice CSS, animazioni di fotogrammi chiave, compromissioni del codice CSS e così via, puoi farlo utilizzando l'opzione Converti in HTML. Optimize ti consente di modificare il codice CSS in una variante e di utilizzarla senza convalida.

L'editor di codice CSS di Optimize consente di visualizzare e copiare il codice CSS generato dall'interfaccia utente e inserire il codice CSS personalizzato che viene tradotto in modifiche di stile in Optimize. Se inserisci un codice CSS personalizzato non riconosciuto dall'analizzatore sintattico di Optimize, puoi procedere in due modi:

  1. Fai clic su Pulisci CSS per rimuovere qualsiasi codice CSS non analizzato; oppure
  2. Fai clic su Salva e poi su Converti in HTML per mantenere l'eventuale codice CSS non analizzato e aggregarlo al codice HTML.

Finestra di dialogo Converti codice CSS a HTML.

Quando fai clic su Converti in HTML, qualsiasi codice CSS non analizzato viene inserito in un tag <STYLE> HTML e aggiunto al tag <HEAD> nel codice del tuo sito web. In questo modo l'editor di Optimize non tenterà di convalidare o mostrare il codice CSS come singole modifiche dello stile.

Esempi di utilizzo dell'opzione Converti in HTML

Ecco alcuni possibili esempi di utilizzo della funzionalità per convertire il codice CSS non supportato (in grassetto) in HTML:

Prefisso del fornitore di browser
div.nav > ul > li:nth-of-type(4) > a > span {
  color : rgb(247, 148, 151);
  -moz-font-smoothing: antialiased;
}
Commento al codice CSS
div.nav > ul > li:nth-of-type(2) > a > span {
  color : rgb(247, 148, 151); /* Questo valore RGB è di colore rosa. */
}
Animazione di fotogrammi chiave
@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
Compromissione del codice CSS
div.nav > ul > li:nth-of-type(2) > a > span {
  *color : rgb(247, 148, 151); /* Targeting IE <= 7 browsers. */
}

Limitazioni

Se utilizzi l'opzione Converti in HTML, non potrai visualizzare in anteprima l'effetto delle singole modifiche di stile nell'editor visivo di Optimize (ad es. il numero di modifiche di stile, quali elementi sono interessati e persino se tali elementi sono presenti). Optimize non convalida né mostra errori relativi al codice CSS convertito in HTML, ma puoi sempre eseguire il debug del codice utilizzando Chrome DevTools.

Supporto per le condizionali

L'editor di codice CSS supporta le condizionali, come le query supporti, semplificando l'implementazione di una variante per una pagina adattabile. Ad esempio, aggiungendo il seguente codice CSS, puoi ridurre le dimensioni di un carattere a 14 px negli schermi più piccoli di 500 px:

@media(max-width: 500px) {
  body {
     font-size: 14px;
  }
}

Editor di codice CSS avanzato

Se ti senti a tuo agio con CSS, puoi implementare la tua variante interamente nell'editor di codice CSS. Il codice CSS aggiunto qui viene tradotto in singole modifiche dello stile che sono visibili nell'elenco delle modifiche. Analogamente, puoi implementare una variante principale copiando il codice dall'editor di codice CSS e implementandolo sul sito web di produzione.

Aggiungere il codice JavaScript globale

I siti web dinamici presentano particolari difficoltà per i test e la personalizzazione, poiché molti dei segnali che potresti cercare potrebbero non essere presenti durante il caricamento del contenitore Optimize. Anche quando Optimize applica una modifica, un sito web dinamico può modificare o spostare successivamente gli elementi della pagina che richiedono a Optimize di applicare nuovamente una modifica.

Le applicazioni a pagina singola (APS) possono presentare difficoltà simili in quanto non modificano gli URL né ricaricano la pagina dopo ogni interazione di un utente. L'aggiunta di codice JavaScript globale a livello di pagina consente di applicarlo a qualsiasi elemento della pagina, invece di essere associato a un singolo elemento.

Suggerimento avanzato: utilizza un evento di attivazione per attivare il codice JavaScript globale e applicare una determinata modifica tutte le volte che è necessario.

Aggiungere il codice JavaScript globale alla tua pagina

Per aggiungere il codice JavaScript globale alla tua pagina, fai clic sul pulsante editor di codice Incorpora nella barra dell'app:

Il pulsante dell

Fai clic su JavaScript globale:

Editor di codice (Global JavaScript selezionato)

Verrà visualizzato l'editor di codice JavaScript globale:

Screenshot dell

Digita o incolla una funzione JavaScript a livello di pagina che verrà richiamata all'attivazione di questa esperienza, poi fai clic su Applica.

Esempio di codice JavaScript globale

// L'attivazione avviene ogni volta che l'utente perfeziona i risultati e-commerce.
// Ogni volta che ciò si verifica, viene aggiunto un ulteriore link che mostra le offerte più recenti,
// ma solo nei casi in cui siano presenti meno di tre risultati.

var eCommerceContainer = document.getByElementId('ecommerce-container');

if (eCommerceContainer.childNodes.length < 3) {
var offers = document.createElement('a');
offers.href = "/offers";
offers.innerText = ' Dai un'occhiata alle nostre ultime offerte'
eCommerceContainer.appendChild(offers);
}
Suggerimento avanzato: utilizza un evento di attivazione per attivare il codice JavaScript globale e applicare una determinata modifica tutte le volte che è necessario.

Modalità interattiva

La modalità interattiva [Icona della modalità interattiva] viene utilizzata per creare varianti da pagine contenenti elementi interattivi che per essere attivati richiedono l'interazione dell'utente, ad esempio mediante lo scorrimento della pagina, menu interattivi e riquadri di accesso.

Scorciatoia da tastiera:

Utilizza Maiusc + Invio per attivare/disattivare la modalità interattiva.

Nota: anche se la tua selezione potrebbe non essere visibile, l'elemento rimane selezionato in modalità interattiva, consentendoti di passare all'editor visivo per apportare modifiche alla nuova selezione.

Fai clic sul pulsante [Icona della modalità interattiva] nella barra dell'app per attivare la modalità interattiva, nascondere la tavolozza dell'editor e sostituire la barra dell'app con questa semplice barra nera:Banner della modalità interattiva

In modalità interattiva, puoi mostrare o interagire con l'elemento che vuoi modificare e poi fare clic su Esci nella barra nera per tornare all'editor visivo e apportare eventuali modifiche all'elemento stesso.

Impostazioni di spostamento

Puoi spostare liberamente gli elementi sulla tua pagina web con l'opzione Sposta in qualsiasi posizione facendo clic su Impostazioni [Impostazioni] nella barra dell'app:

Menu delle impostazioni Sposta in qualsiasi posizione

Sposta in qualsiasi posizione

L'opzione Sposta in qualsiasi posizione apporta modifiche di stile in base alla posizione di un elemento nella pagina web (ad es. a sinistra, in alto, in basso e così via). Anche se l'elemento mantiene la sua posizione originale nel DOM, al visitatore viene mostrato in una nuova posizione. In genere, il suo stile rimane inalterato e il resto della pagina non subisce modifiche.

Utilizza Sposta in qualsiasi posizione quando modifichi la posizione di pulsanti, aree ed elementi con posizione fissa globali, come l'area di accesso.

Seleziona automaticamente per il riordinamento

Questa opzione consente di selezionare più facilmente gli elementi di origine e target corretti mentre navighi nell'editor visivo. Quando fai clic, l'editor visivo seleziona automaticamente l'elemento giusto (ad esempio, l'elemento di un elenco <li> invece dell'immagine <img> che lo contiene) e limita il riordinamento a quello che c'è dentro il contenitore (ad es. l'elemento dell'elenco <ul>).

Riordina all'esterno dell'elemento di destinazione

Nota: per attivare questa opzione, deseleziona Seleziona automaticamente per il riordinamento.

Se è selezionata, l'opzione Sposta in qualsiasi posizione è attivata. Se è deselezionata, la funzionalità per riordinare gli elementi nellaDOM è disattivata e la modalità di spostamento predefinita viene modificata daPrima/Dopo a In alto/In basso.

È stato utile?
Come possiamo migliorare l'articolo?