Informazioni su Modifiche pagina in Adobe Target che consente di visualizzare le modifiche alla pagina e di aggiungere ulteriori modifiche (selettore CSS, mbox e codice personalizzato).
Il Modifiche mostra tutte le modifiche apportate alla pagina nel Compositore esperienza visivo (VEC) e consente di apportare ulteriori modifiche facendo clic su ciascun elemento della pagina e selezione di un’azione. Ogni modifica apportata viene visualizzata come un'azione o un elemento separato nell'elenco delle modifiche. Puoi anche aggiungere modifiche, compresi i seguenti tipi di modifica: Selettore CSS, Mbox. e Codice personalizzato.
Nella pagina Modifiche vengono visualizzate tutte le modifiche apportate alla pagina nel Compositore esperienza visivo. Ogni modifica apportata viene visualizzata come un’azione o un elemento separato nell’elenco delle modifiche.
Utilizza la pagina Modifiche per apportare piccole modifiche al selettore scelto da Target quando utilizzi il Compositore esperienza visivo per configurare il modo in cui viene distribuito il contenuto. È possibile modificare sia il contenuto che un attributo HTML. È inoltre possibile modificare il codice per creare l'equivalente di un'offerta HTML all'interno di una mbox.
Utilizza la pagina Modifiche per:
Visualizzare un'azione intrapresa nel compositore visivo.
Modificare un'azione esistente. Passa il mouse sulla modifica desiderata, quindi fai clic sull'icona Modifica.
Apporta le modifiche.
Elimina un'azione esistente. Passa il mouse sulla modifica desiderata, quindi fai clic sull'icona Elimina.
Aggiungi una nuova modifica. Fai clic su Aggiungi modifica o sull'icona +, quindi specifica le modifiche come descritto di seguito.
Dopo la creazione di una modifica, Target visualizza un'icona + nella parte superiore del pannello Modifiche, invece che nel pulsante Aggiungi modifica nella parte inferiore del pannello.
Ancora il pannello Modifiche in verticale lungo il lato dell’interfaccia di Target oppure in orizzontale lungo il bordo inferiore. Fai clic sull'icona Ancora per passare tra le due impostazioni.
Nella figura seguente viene illustrato il pannello Modifiche ancorato nella parte inferiore dello schermo:
Per visualizzare la pagina delle modifiche per un’esperienza selezionata, nella compositore esperienza visivo fai clic sull’icona </> Modifiche.
Per aprire il pannello Modifiche nel Compositore esperienza basato su modulo, crea o modifica un’offerta HTML. Per ulteriori informazioni, consulta Compositore esperienza basato su moduli.
Viene visualizzata la pagina delle modifiche, che suddivide lo schermo tra la modalità visiva e il pannello Modifiche a destra. Fai clic sull’icona Ancora per ancorare il pannello Modifiche in verticale lungo il lato dell’interfaccia di Target oppure in orizzontale lungo il bordo inferiore. Nota che l'esperienza A nella figura seguente non ha modifiche precedenti.
L'esperienza B mostra le modifiche precedenti nel pannello Modifiche a destra.
Per aggiungere una modifica:
Il pannello Modifiche visualizza:
Dall'elenco a discesa Tipo di modifica, scegli il tipo desiderato:
Tipo di modifica | Dettagli |
---|---|
Selettore CSS | Nella casella Selettore elemento CSS, specifica l'elemento CSS che desideri modificare, seleziona un tipo di azione (Imposta contenuto o Imposta attributo), quindi compila le informazioni richieste e il contenuto desiderato. |
Mbox | Specifica il nome mbox e il contenuto desiderato. Nota: le mbox non sono più supportate nel Compositore esperienza visivo nelle pagine che utilizzano at.js 2.x. Come soluzioni alternative:
|
Codice personalizzato | Specifica un nome facoltativo, seleziona o deseleziona l’opzione Aggiungi codice nella sezione <HEAD> , quindi aggiungi il codice personalizzato.Se selezioni Aggiungi codice nella sezione Se deselezioni Aggiungi codice nella sezione Se HTML per Nota: gli script vengono eseguiti in modo asincrono. Ciò significa che non è possibile, ad esempio, utilizzare Il codice personalizzato fornisce un'interfaccia non visiva per visualizzare, modificare e aggiungere nuove azioni nel Compositore esperienza visivo, nel Compositore esperienza basato su moduli e nell'editor di offerte HTML. Il pannello fornisce una visualizzazione del codice di un'esperienza e facilita la creazione di esperienze più complesse, l'ottimizzazione di quelle esistenti e la risoluzione di problemi. Il codice personalizzato è destinato agli utenti avanzati che hanno dimestichezza con HTML, JavaScript e CSS. La visualizzazione codice consente di modificare o perfezionare le modifiche o correggere i problemi del selettore. Può inoltre essere utilizzato per aggiungere nuove azioni e un codice personalizzato. È possibile aggiungere più di un codice personalizzato e facoltativamente assegnare un nome a ciascuno di essi. Nota: il codice personalizzato è attualmente disponibile solo per attività A/B e per l’esperienza di targeting (XT). Il codice personalizzato è disabilitato in caso di sovrapposizione e se viene applicata un'offerta di reindirizzamento. Il codice personalizzato supporta i seguenti casi di utilizzo:
Il codice personalizzato supporta HTML, script e stili. Qualsiasi codice HTML o script valido può essere aggiunto o modificato. |
Aggiungi ulteriori modifiche in base alle esigenze.
Il pannello Codice personalizzato contiene il codice eseguito all'inizio del caricamento della pagina.
Puoi eseguire il codice JavaScript nel tag <head>
. L’esecuzione del codice non attende che il tag <body>
sia presente nel DOM.
I selettori per le azioni visive successive dipendono dagli elementi HTML aggiunti in questa scheda.
Il pannello Codice personalizzato viene comunemente utilizzato per aggiungere JavaScript o CSS all'inizio della pagina.
Utilizza la scheda Codice personalizzato per:
Utilizzare JavaScript in linea o per un collegamento a un file JavaScript esterno
Ad esempio, per modificare il colore di un elemento:
<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:
<style>
.overlay
{ position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; }
</style>
Aggiungere frammenti HTML per definire nuovi elementi
Ad esempio, utilizza il seguente frammento HTML per creare una sovrapposizione <div>
utilizzando la classe CSS definita sopra:
<div class="overlay"></div>
Scambio su DOM-ready, utilizzando jQuery
L’esempio che segue, che utilizza JQuery, presuppone che il sito web del cliente abbia jQuery disponibile sulla pagina quando Target esegue le offerte.
<style>#default_content {visibility:hidden;}</style>
<script>
jQuery( document ).ready(function() {
jQuery("#default_content").html( "<span style='color:red'>Hello <strong>Again</strong></span>" );
jQuery("#default_content").css("visibility","visible");
});
</script>
Scambio su DOM-ready, non jQuery (non supporta Internet Explorer 8)
<style>#default_content {visibility:hidden;}</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("default_content").innerHTML = "<span style='color:red'>Hello <strong>Again</strong></span>";
document.getElementById("default_content").style.visibility="visible";
});
</script>
Reindirizzamento personalizzato passando parametri esistenti, parametro s_tnt
(per l'integrazione legacy di Analytics), parametri di riferimento e sessione mbox
<style type="text/css">body{display:none!important;}</style>
<script type="text/javascript">
var qs='';window.location.search?qs=window.location.search+'&':qs='?';
window.location.replace('//www.mywebsite.com/'+qs+'s_tnt=${campaign.id}:${campaign.recipe.id}:${campaign.recipe.trafficType}&s_tntref='+encodeURIComponent(document.referrer)+'&mboxSession='+mboxFactoryDefault.getSessionId().getId()+''+window.location.hash+'');
</script>
Aggiungi i modelli Adobe Target Experience per il codice personalizzato. I modelli di esperienza di Target sono esempi precodificati con input configurabili da utilizzare per casi di utilizzo ricorrenti per gli addetti al marketing. Questi modelli di esperienza sono disponibili gratuitamente per gli sviluppatori e i rivenditori come punto di partenza per eseguire alcuni casi comuni di utilizzo esterno in Adobe Target (tramite il Compositore esperienza visivo o il Compositore esperienza basato su modulo). I casi di utilizzo includono lightbox, giostre, countdown e altro ancora.
Per ulteriori informazioni, consulta Modelli di esperienza.
Racchiudi sempre il codice personalizzato in un elemento.
Ad esempio:
<div id="custom-code">
// My Code goes here
</div>
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 utilizzare l'ID elemento “CDQID” per apportare modifiche alla pagina eseguita nell'editor di codice.
Target applica un nuovo ID elemento con il valore “CDQID” a qualsiasi elemento della pagina modificato da Target. Poiché questo ID viene applicato da Target, non deve essere utilizzato per ulteriori modifiche o regolazioni nell'editor di codice.
Non eseguire azioni document.write negli script di codice personalizzati.
Gli script vengono eseguiti in modo asincrono. Questo causa spesso la comparsa delle azioni document.write
nel punto sbagliato della pagina. L'utilizzo di document.write
negli script creati nel codice personalizzato non è consigliato.
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. Per ulteriori informazioni, consulta “Risoluzione dei problemi”.
Presta attenzione se utilizzi la funzionalità di codice personalizzato per due attività con targeting allo stesso URL.
Se utilizzi la funzione codice personalizzato per due attività con targeting allo stesso URL, JavaScript viene integrato nella pagina da entrambe le attività. Target determina automaticamente l'ordine del contenuto recapitato. Assicurati che il codice non dipenda dal posizionamento. Spetta a te verificare che non vi siano conflitti nel codice.
Il codice personalizzato non viene eseguito quando si utilizza triggerView
.
Le offerte di codice personalizzato nel Compositore esperienza visivo non vengono sottoposte nuovamente a rendering quando triggerView()
viene chiamato con {page: false}
come opzione.
Ho ricevuto un avviso rispetto al fatto che un'azione non può essere applicata a causa di modifiche strutturali a una pagina. Cosa significa?
Questo messaggio indica che la struttura della pagina è cambiata dall'ultimo salvataggio dell'attività.
I selettori mancanti potrebbero essere raggiunti utilizzando la modalità Sfoglia. È consigliabile eliminare e quindi ricreare ogni esperienza per assicurarsi che il contenuto venga visualizzato come previsto, come indicato nel messaggio di avviso.
Quando elimino un elemento, viene visualizzato un avviso che indica che “L'eliminazione di questa azione può influire sulle azioni successive.” Cosa significa?
Ad esempio, supponiamo che tu abbia eseguito due azioni:
Ogni modifica crea un nuovo elemento nel pannello Modifiche. 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, il pannello Modifiche 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ù.
Un elemento che ho creato usando document.write
in uno script non appare dove previsto.
Gli script vengono eseguiti in modo asincrono. Questo causa spesso la comparsa delle azioni document.write
nel punto sbagliato della pagina. Adobe consiglia di non utilizzare document.write
negli script creati nel codice personalizzato.
Il mio JavaScript mostra gli errori nel codice personalizzato.
Qualsiasi JavaScript in linea che non è un JavaScript valido mostra gli errori nel codice personalizzato.
Non è possibile annullare una modifica nel codice personalizzato.
Attualmente, l'annullamento non è supportato per le azioni di modifica ed eliminazione dal pannello Modifiche e nel codice personalizzato. L'annullamento di una di queste operazioni potrebbe comportare l'incoerenza dell'esperienza con le azioni effettive visibili nel codice personalizzato all'interno del Compositore esperienza visivo. Tuttavia, le azioni nel codice personalizzato sono nello stato corretto e non vi è alcuna conseguenza sulla consegna. Questo è un problema di interfaccia utente. Per aggiornare l'esperienza, salvarla e riaprirla, oppure andare al passaggio successivo e tornare indietro. Una di queste azioni ricarica l'esperienza e quindi viene visualizzata come previsto ed è coerente con le azioni nel pannello Modifiche.
Il codice personalizzato non produce i risultati previsti in Internet Explorer 8.
Target non supporta più IE8.