Best practice e limitazioni di Visual Experience Composer

Per abilitare Enhanced Experience Composer a livello di account, fare clic su Administration > Visual Experience Composer, quindi attivare il pulsante Enable Enhanced Experience Composer.

Per abilitare Enhanced Experience Composer a livello di attività durante la creazione di un'attività in Visual Experience Composer, fare clic su Configure > Page Delivery, quindi attivare il pulsante Enable Enhanced Experience Composer.

I problemi relativi al caricamento di Enhanced Experience Composer possono essere risolti inserendo nell'elenco Consentiti i seguenti indirizzi IP. Questi indirizzi IP sono per i server Adobe utilizzati per il proxy Enhanced Experience Composer. Sono necessari solo per modificare le attività. I visitatori del tuo sito non hanno bisogno di inserire nell'elenco Consentiti questi indirizzi IP.

Per ulteriori informazioni, vedere Il Compositore esperienza avanzato non carica un URL di controllo qualità interno che non è accessibile nell'IP pubblico in Risoluzione dei problemi relativi al Compositore esperienza avanzato.

Qualsiasi elemento all’interno dell’elemento body deve avere un ID univoco. Nel caso nuovi elementi vengano inseriti nel corpo e il codice cambi posizione, sarà possibile riconoscere con maggiore facilità almeno gli elementi padre.

Target non richiede ID, ma l'utilizzo degli ID aumenta l'affidabilità delle esperienze create con il Compositore esperienza. Target utilizza i selettori CSS per modificare il contenuto quando viene distribuita l'esperienza. Quando si modifica un'esperienza, Visual Experience Composer ancora il selettore al predecessore più vicino con un attributo ID non nullo all'elemento HTML che si sta modificando. Di conseguenza si consiglia di non utilizzare meccanismi, comprese librerie JavaScript, che impostino o modifichino gli attributi ID HTML. Anche se tali ID potrebbero essere disponibili per il Compositore esperienza Target per la creazione di attività, se JavaScript modifica gli ID, l'ID utilizzato al momento della creazione dell'esperienza potrebbe non essere disponibile durante l'esecuzione dell'esperienza. Se l'ID non è disponibile, l'ancoraggio del selettore all'ID avrà esito negativo.

Quando si modificano le classi CSS in Visual Experience Composer, è utile semplificare l'identificazione delle classi utilizzando nomi descrittivi di classi. Questa operazione assicura che vengano modificate le classi CSS corrette e che le pagine vengano visualizzate come previsto.

Non utilizzare la proprietà CSS !important quando nascondi o rimuovi elementi.

Se la proprietà CSS !important è presente, le modifiche apportate da target.js durante la consegna vengono ignorate dalle regole CSS del sito.

<a>Anchor Text</a>

O

<a href=""> <img src=""> </img> </a>

Ad esempio, se hai eseguito due azioni:

• Aggiunta di una classe all'elemento 1
• Modifica del codice HTML dell'elemento 1

Ogni modifica crea un nuovo elemento nel Compositore esperienza visivo. La seconda azione modifica l'elemento 1: se lo elimini, la seconda azione non avrà più niente da modificare, risultando nella mancata applicazione della modifica.

In altre parole, se aggiungi un elemento con testo e modifichi tale elemento con un testo diverso in un'azione separata, l'editor di codice mostrerà entrambe le azioni come elementi distinti. Durante la modifica dell'elemento è stato creato un nuovo elemento, contenente il testo modificato, che modifica l'elemento originale creato. Se elimini l'elemento originale, il testo modificato non sarà in grado di trovare l'elemento modificato e non verrà visualizzato. Il secondo elemento rimarrà nell'elenco senza tuttavia influire sulla pagina, poiché l'elemento da modificare non esiste più.

Vedi Selettori di elementi utilizzati in Visual Experience Composer.

• Per il testo in grassetto, utilizza <b> anziché <strong>.
• Per il testo in corsivo, utilizza <i> anziché <em>.

I tag <strong> e <em> potrebbero causare risultati imprevisti.

Quando si esegue un’azione (Modifica HTML) sui componenti della pagina (come cursori, caroselli e così via), la consegna potrebbe apparire interrotta. Il Compositore esperienza visivo esegue l’azione dopo che il componente Pagina è stato creato da JavaScript.

Tuttavia, quando il contenuto della pagina viene distribuito ai visitatori, l'azione viene applicata prima di creare un'istanza del componente. Per questo motivo, la funzionalità di questo componente rischia di interrompersi al momento della distribuzione. La funzionalità dipende dalla natura dello script utilizzato nella relativa pagina per definire il componente.

Se esegui il test della distribuzione ottenendo la prima volta un esito positivo, non è garantito che questa continuerà a funzionare. Può verificarsi una situazione di tipo “race condition”.

• In presenza di una situazione di tipo "race condition", la consegna funziona a intermittenza.
• Se non c’è una situazione di tipo "race condition", la consegna funziona sempre.

Sottoponi la tua pagina a test più volte per assicurarti che la distribuzione funzioni come previsto.

Ad esempio, non puoi eseguire il targeting del testo del carrello nel Compositore esperienza visivo se il tuo codice è simile al seguente:

<a href="https://www.botanicchoice.com/shop.axd/Cart">
   <img alt="Shopping Cart"src="/images/ico-cart.gif"></img>
   Shopping Cart:
   <span id="HeaderCartQtyTotal">
      0
  </span>
  Items
  <span id="HeaderCartPriceTotal"></span>
</a>

In questo esempio, nel Compositore esperienza visivo viene selezionato l’intero elemento di ancoraggio, che ha effetti negativi su altri elementi se viene eseguito il targeting.

Ad esempio, per aprire www.abc.com, vengono utilizzati i seguenti parametri URL:

www.abc.com?mboxEdit=1&mboxDisable=1

Questi parametri consentono la modifica in un iframe.

Assicurati che il tuo sito web carichi come previsto dopo l'aggiunta di parametri simili.

Disattiva le tecniche di busting iframe sul sito web e verifica se il sito web si apre come previsto all’interno di un iframe in una pagina fittizia. Ad esempio:

<!DOCTYPE
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <iframe src="https://www.homedepot.com"</iframe>
</body>
</html>

Se un elemento contrassegnato per il tracciamento dei clic viene ridisposto, i percorsi degli elementi ridisposti vengono modificati. Come risultato, verrà eseguito il monitoraggio dei clic per l'elemento nella posizione in cui si trovava l'elemento originale prima della ridisposizione.

Ciò si verifica perché sia il codice per distribuire il contenuto dell'attività sia il codice per tenere traccia dei clic è incluso in un segmento di codice recapitato alla pagina. Se passi a una pagina diversa e imposti il rilevamento dei clic, il codice del contenuto dell'attività e il codice di monitoraggio dei clic vengono recapitati a tale pagina. Se la pagina di rilevamento dei clic ha una struttura simile alla pagina in cui viene eseguito il test, il contenuto del test può anche essere visualizzato nella pagina di rilevamento dei clic.

Ad esempio, se la pagina contiene:

<div>
  <div class="mboxDefault" >
  </div>
  <script>mboxCreate('myMbox');
</div>`

Il div esterno non deve essere selezionato in un'esperienza perché la mbox codificata nella pagina effettua ancora una chiamata a Target e riceve una risposta. Questa risposta interferisce con la risposta prevista per l'elemento di pagina più grande.

A causa dei criteri aggiornati del manifesto V3 in Google Chrome, le estensioni non possono più modificare il DOM originale prima che venga analizzato dal browser. Di conseguenza, alcuni script di sicurezza, come le implementazioni non compatibili con iframe, potrebbero bloccare il caricamento delle pagine nel Compositore esperienza visivo.

Per garantire la compatibilità, questi script devono essere disabilitati in modo condizionale quando la pagina viene caricata nell'iframe Target. Questo processo può essere eseguito senza problemi verificando la presenza dell'oggetto window.adobeVecExtension, inserito da Target durante il caricamento del Compositore esperienza visivo.

I seguenti snippet di codice sono esempi di codice non compatibile con iframe che possono impedire il caricamento della pagina web nel Compositore esperienza visivo:

window.top.location = window.self.location;

top.location.href = self.location.href;

È possibile utilizzare un semplice controllo per verificare se una pagina Web è incorporata in Target. Un frammento di codice deve essere simile al seguente:

if(!window.adobeVecExtension) {
    // additional security logic
}

Se, ad esempio, la pagina contiene un carosello con sei immagini e si desidera scambiare un'immagine con la seconda immagine del carosello, l'azione Change Image non funziona.

La soluzione consiste nel selezionare il contenitore principale e utilizzare l'azione Edit HTML per modificare il HTML del carosello per aggiornare l'origine immagine dell'immagine desiderata.

Lo script viene eseguito nell'ambito di target.js dopo il caricamento della pagina. Pertanto, qualsiasi variabile o funzione dichiarata localmente non è accessibile dall'esterno del blocco di script.

Errato:

<script>
  var myVar = 123;
  function myFunc() {
    //
  }
</script>`

Corretto:

<script>
  window.myVar = 123;
  window.myFunc = function() {
    //
  };
</script>

Aggiungi un elemento di ancoraggio all’interno del div "customHeaderMessage" con del testo fittizio:

<a href="#">
<span> Dummy text </span>
</a>

Selezionare questo div utilizzando l'azione Insert Element per inserire un'immagine di pari livello di questo div di testo fittizio.

Dopo l'inserimento dell'immagine, verrà visualizzato in questo modo:

<a href="#">
<span> Dummy text </span>
<img src=""> This is inserted Image. </img>
</a>

Rimuovi l'intervallo di testo fittizio.